Trim dependency graph scanner (#49)

.changeset/thin-coats-build.md

@@ -0,0 +1,5 @@
+---
+'@crackle/core': minor
+---
+
+Remove `externals` logic from dependency graph scanner

fixtures/braid-site/package.json

@@ -18,7 +18,7 @@
     "@crackle-fixtures/library-with-docs": "workspace:*",
     "@crackle/router": "workspace:*",
     "@vanilla-extract/css": "^1.9.2",
-    "braid-design-system": "0.0.0-crackel2-20221007054115",
+    "braid-design-system": "^32.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

fixtures/library-with-docs/package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@crackle/router": "workspace:*",
     "@vanilla-extract/css": "^1.9.2",
-    "braid-design-system": "0.0.0-crackel2-20221007054115",
+    "braid-design-system": "^32.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

fixtures/multi-entry-library/package.json

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@crackle/router": "workspace:*",
-    "braid-design-system": "0.0.0-crackel2-20221007054115",
+    "braid-design-system": "^32.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

fixtures/single-entry-library/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@crackle-fixtures/multi-entry-library": "workspace:*",
     "@vanilla-extract/css": "^1.9.2",
-    "braid-design-system": "0.0.0-crackel2-20221007054115",
+    "braid-design-system": "^32.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

fixtures/with-flatten-children/package.json

@@ -24,6 +24,7 @@
     "package": "crackle package"
   },
   "dependencies": {
+    "react": "^18.2.0",
     "react-keyed-flatten-children": "^1.3.0"
   },
   "devDpendencies": {}

package.json

@@ -62,8 +62,16 @@
     ]
   },
   "pnpm": {
+    "neverBuiltDependencies": [
+      "sku"
+    ],
     "patchedDependencies": {
       "sync-dependencies@1.0.4": "patches/sync-dependencies@1.0.4.patch"
+    },
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "jest"
+      ]
     }
   }
 }

packages/core/src/build.ts

@@ -1,7 +1,7 @@
 import fs from 'fs/promises';
 import path from 'path';
 
-import { setAdapter } from '@vanilla-extract/css/adapter';
+import { mockAdapter, setAdapter } from '@vanilla-extract/css/adapter';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import react from '@vitejs/plugin-react';
 import builtinModules from 'builtin-modules';
@@ -53,12 +53,7 @@ export const build = async (inlineConfig?: PartialConfig) => {
     ],
     logLevel: 'silent',
     ssr: {
-      external: [
-        'serialize-javascript',
-        'used-styles',
-        ...builtinModules,
-        ...ssrExternals.external,
-      ],
+      external: [...builtinModules, 'serialize-javascript', 'used-styles'],
       noExternal: ssrExternals.noExternal,
     },
   };
@@ -108,14 +103,7 @@ export const build = async (inlineConfig?: PartialConfig) => {
 
     logger.info(`✅ Successfully built ${chalk.bold('renderer')}!`);
 
-    setAdapter({
-      appendCss: () => {},
-      registerClassName: () => {},
-      onEndFileScope: () => {},
-      registerComposition: () => {},
-      markCompositionUsed: () => {},
-      getIdentOption: () => 'short',
-    });
+    setAdapter(mockAdapter);
 
     // TODO: use vite-node instead
     const { renderAllPages } = (await import(

packages/core/src/plugins/vite/page-roots.ts

@@ -3,8 +3,7 @@ import path from 'path';
 import type { Plugin } from 'vite';
 
 import type { EnhancedConfig } from '../../config';
-
-const pageGlobSuffix = '/**/*.page.tsx';
+import { pageGlobSuffix } from '../../route-data';
 
 const browserPageModules = '__BROWSER_PAGE_MODULES';
 const nodePageModules = '__NODE_PAGE_MODULES';

packages/core/src/plugins/vite/strip-route-data.ts

@@ -9,14 +9,15 @@ export const stripRouteData = (): Plugin => ({
       return;
     }
 
+    // TODO: merge with src/route-data.ts
     const transformedContents = await babelTransform(code, {
       plugins: [
         [
-          '@crackle/babel-plugin-remove-exports',
+          require.resolve('@crackle/babel-plugin-remove-exports'),
           { retainDefault: true, retainIdentifiers: ['React'] },
         ],
-        '@babel/plugin-syntax-jsx',
-        ['@babel/plugin-syntax-typescript', { isTSX: true }],
+        require.resolve('@babel/plugin-syntax-jsx'),
+        [require.resolve('@babel/plugin-syntax-typescript'), { isTSX: true }],
       ],
       babelrc: false,
       configFile: false,

packages/core/src/route-data.ts

@@ -1,3 +1,5 @@
+import path from 'path';
+
 import { transformFileAsync as babelTransform } from '@babel/core';
 import type { RouteData } from '@crackle/router';
 import { build as esbuild } from 'esbuild';
@@ -7,25 +9,28 @@ import glob from 'fast-glob';
 import type { PartialConfig } from './config';
 import { getConfig } from './config';
 
+export const pageGlobSuffix = '/**/*.page.tsx';
+
 const routesEntryName = 'ROUTES_ENTRY';
 const routeEntryNs = 'ROUTES_ENTRY_NAMESPACE';
 
-const transformWithBabel = async (path: string) => {
-  const transformedContents = await babelTransform(path, {
+const transformWithBabel = async (file: string) => {
+  // TODO: merge with src/plugins/vite/strip-route-data.ts
+  const transformedContents = await babelTransform(file, {
     plugins: [
       [
-        '@crackle/babel-plugin-remove-exports',
+        require.resolve('@crackle/babel-plugin-remove-exports'),
         { retainExports: ['routeData'] },
       ],
-      '@babel/plugin-syntax-jsx',
-      ['@babel/plugin-syntax-typescript', { isTSX: true }],
+      require.resolve('@babel/plugin-syntax-jsx'),
+      [require.resolve('@babel/plugin-syntax-typescript'), { isTSX: true }],
     ],
     babelrc: false,
     configFile: false,
   });
 
   if (!transformedContents?.code) {
-    throw new Error(`No result from babel plugin transform of ${path}`);
+    throw new Error(`No result from babel plugin transform of ${file}`);
   }
 
   return {
@@ -38,7 +43,7 @@ export const getAllRoutes = async (inlineConfig?: PartialConfig) => {
   const { root, pageRoots } = getConfig(inlineConfig);
 
   const pageFiles = await glob(
-    pageRoots.map((pageRoot) => `${pageRoot}/**/*.page.tsx`),
+    pageRoots.map((pageRoot) => path.join(pageRoot, pageGlobSuffix)),
     { cwd: root },
   );
 
@@ -66,13 +71,14 @@ export const getAllRoutes = async (inlineConfig?: PartialConfig) => {
             namespace: routeEntryNs,
           }));
 
-          build.onLoad({ filter: new RegExp('.*.page.tsx$') }, ({ path }) =>
-            transformWithBabel(path),
+          // TODO: use pageGlobSuffix by compiling to RegExp
+
+          build.onLoad({ filter: new RegExp('.*.page.tsx$') }, (args) =>
+            transformWithBabel(args.path),
           );
 
-          build.onLoad(
-            { filter: new RegExp('.*src/pages/.*.tsx$') },
-            ({ path }) => transformWithBabel(path),
+          build.onLoad({ filter: new RegExp('.*src/pages/.*.tsx$') }, (args) =>
+            transformWithBabel(args.path),
           );
 
           build.onLoad({ filter, namespace: routeEntryNs }, () => ({

packages/core/src/start.ts

@@ -20,6 +20,7 @@ import {
   internalPackageResolution,
   stripRouteData,
 } from './plugins/vite';
+import { pageGlobSuffix } from './route-data';
 import type { CrackleServer } from './types';
 import {
   extractDependencyGraph,
@@ -36,14 +37,13 @@ export const start = async (
   inlineConfig?: PartialConfig,
 ): Promise<CrackleServer> => {
   const config = getConfig(inlineConfig);
-  const app = express();
-
   const depGraph = await extractDependencyGraph(config.root);
   const ssrExternals = getSsrExternalsForCompiledDependency(
     '@vanilla-extract/css',
     depGraph,
   );
 
+  const app = express();
   const connections = new Map<string, Socket>();
 
   const vite = await createViteServer({
@@ -66,7 +66,7 @@ export const start = async (
     optimizeDeps: {
       entries: [
         ...config.pageRoots.map((pageRoot) =>
-          path.join(pageRoot, '/**/*.page.tsx'),
+          path.join(pageRoot, pageGlobSuffix),
         ),
         config.appShell,
       ],
@@ -81,17 +81,16 @@ export const start = async (
     },
     ssr: {
       external: [
+        ...builtinModules,
         '@crackle/router',
+        '@vanilla-extract/css/adapter',
         'serialize-javascript',
         'used-styles',
-        '@vanilla-extract/css/transformCss',
-        '@vanilla-extract/css/adapter',
-        ...builtinModules,
-        ...ssrExternals.external,
       ],
       noExternal: ssrExternals.noExternal,
     },
   });
+
   // use vite's connect instance as middleware
   app.use(vite.middlewares);