WIP

.changeset/few-emus-begin.md

@@ -0,0 +1,5 @@
+---
+'@crackle/core': minor
+---
+
+Side-effects fixes for Braid

.github/workflows/ci.yml

@@ -26,7 +26,8 @@ jobs:
         id: skip_check
         with:
           concurrent_skipping: same_content_newer
-          cancel_others: true
+          # We want to skip only concurrent runs. Subsequent runs/retries should be allowed.
+          skip_after_successful_duplicate: false
 
   build:
     name: Build

fixtures/with-side-effects/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "author": "SEEK",
   "sideEffects": [
-    "**/atoms/**",
-    "**/entries/reset.*",
+    "**/components/BraidProvider.*",
+    "**/entries/reset.ts",
     "**/reset/**",
     "*.css.*",
     "dist/reset.*",
@@ -50,7 +50,10 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.12.0",
-    "@vanilla-extract/sprinkles": "^1.5.1"
+    "@vanilla-extract/sprinkles": "^1.5.1",
+    "react": "^18.2.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/react": "^18.0.21"
+  }
 }

fixtures/with-side-effects/src/entries/css-more.ts

@@ -1,2 +1,2 @@
 export * from '../lib/breakpoints';
-export * from '../lib/components';
+export * from './css';

fixtures/with-side-effects/src/entries/css.ts

@@ -1 +1 @@
-export * from '../lib/components';
+export { atoms } from '../lib/atoms/atoms';

fixtures/with-side-effects/src/entries/reset.ts

@@ -1,7 +1,11 @@
-import '../lib/reset';
+// This entry aims to mimic the reset from Braid
+// https://github.com/seek-oss/braid-design-system/blob/master/packages/braid-design-system/src/entries/reset.ts
 
-if (process.env.NO_SIDE_EFFECTS !== 'clearly') {
-  throw new Error('side-effect');
-}
+import '../lib/reset/reset.css';
+import '../lib/atoms/sprinkles.css';
+
+import { markResetImported } from '../lib/reset/resetTracker';
 
-export * from '../lib/breakpoints';
+if (process.env.NODE_ENV === 'development') {
+  markResetImported();
+}

fixtures/with-side-effects/src/index.ts

@@ -1,7 +1 @@
-import { ensureResetImported } from './lib/reset/resetTracker';
-
-if (process.env.NODE_ENV === 'development') {
-  ensureResetImported();
-}
-
-export {};
+export * from './lib/components';

fixtures/with-side-effects/src/lib/components/BraidProvider.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+import { ensureResetImported } from '../reset/resetTracker';
+
+if (process.env.NODE_ENV === 'development') {
+  ensureResetImported();
+}
+
+export const BraidProvider = ({ children }: { children: ReactNode }) => (
+  <>{children}</>
+);

fixtures/with-side-effects/src/lib/components/index.ts

@@ -1 +1,2 @@
 export * from './Box';
+export * from './BraidProvider';

package.json

@@ -41,17 +41,16 @@
     "@crackle-private/bootstrap": "workspace:*",
     "@crackle/cli": "workspace:*",
     "@crackle/core": "workspace:*",
-    "@playwright/test": "^1.32.0",
+    "@playwright/test": "^1.40.0",
     "@preconstruct/eslint-plugin-format-js-tag": "^0.4.0",
-    "eslint": "^8.45.0",
+    "eslint": "^8.54.0",
     "eslint-config-seek": "^11.3.1",
     "ignore-sync": "^7.0.1",
     "prettier": "^2.8.8",
-    "tsx": "^3.12.7",
-    "typescript": "~5.1.6",
+    "tsx": "^4.2.0",
+    "typescript": "~5.2.2",
     "vitest": "^0.33.0",
-    "webpack": "^5.79.0",
-    "wireit": "^0.10.0"
+    "wireit": "^0.14.1"
   },
   "packageManager": "[email protected]",
   "volta": {
@@ -71,7 +70,7 @@
       ]
     },
     "overrides": {
-      "tsm>esbuild": "^0.18.10"
+      "ink>@types/react": "^18"
     }
   },
   "wireit": {

packages/core/package.json

@@ -88,63 +88,65 @@
     "unbuild:entries": "tsx ./scripts/unbuild-entries.cts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-syntax-jsx": "^7.22.5",
-    "@babel/plugin-syntax-typescript": "^7.22.5",
+    "@babel/core": "^7.23.3",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/plugin-syntax-typescript": "^7.23.3",
     "@crackle/babel-plugin-remove-exports": "^0.2.1",
     "@crackle/router": "^0.3.0",
     "@ungap/structured-clone": "^1.2.0",
-    "@vanilla-extract/css": "^1.12.0",
-    "@vanilla-extract/integration": "^6.2.1",
-    "@vanilla-extract/vite-plugin": "^3.8.2",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "@vocab/webpack": "^1.2.3",
+    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/integration": "^6.2.4",
+    "@vanilla-extract/vite-plugin": "^3.9.2",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vocab/webpack": "^1.2.5",
     "builtin-modules": "^3.3.0",
     "chalk": "^4.1.2",
-    "dedent": "^1.2.0",
+    "dedent": "^1.5.1",
     "ensure-gitignore": "^1.2.0",
-    "esbuild": "^0.18.10",
+    "esbuild": "^0.19.3",
+    "esbuild-register": "^3.5.0",
     "eval": "^0.1.8",
     "express": "^4.18.2",
-    "fast-glob": "^3.3.1",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.1.1",
     "glob-to-regexp": "^0.4.1",
     "ink": "^3.2.0",
-    "mem": "^9.0.2",
-    "mlly": "^1.4.0",
+    "memoize": "^10.0.0",
+    "mlly": "^1.4.2",
     "pretty-ms": "^7.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "resolve-from": "^5.0.0",
-    "rollup": "^3.27.1",
-    "rollup-plugin-dts": "^5.3.0",
-    "rollup-plugin-node-externals": "^6.1.1",
+    "rollup": "^4.2.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-node-externals": "^6.1.2",
+    "rollup-plugin-visualizer": "^5.9.2",
     "semver": "^7.5.4",
     "serialize-javascript": "^6.0.0",
     "serve-handler": "^6.1.5",
     "sort-package-json": "^1.57.0",
-    "tsm": "^2.3.0",
     "type-fest": "^3.13.1",
     "used-styles": "^2.4.3",
-    "vite": "^4.5.0"
+    "vite": "^5.0.2"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.0",
-    "@types/express": "^4.17.14",
-    "@types/fs-extra": "^11.0.1",
-    "@types/glob-to-regexp": "^0.4.1",
-    "@types/node": "^18.17.1",
+    "@types/babel__core": "^7.20.5",
+    "@types/express": "^4.17.21",
+    "@types/fs-extra": "^11.0.4",
+    "@types/glob-to-regexp": "^0.4.4",
+    "@types/node": "^18.18.12",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@types/semver": "^7.5.0",
-    "@types/serialize-javascript": "^5.0.2",
-    "@types/serve-handler": "^6.1.1",
+    "@types/semver": "^7.5.6",
+    "@types/serialize-javascript": "^5.0.4",
+    "@types/serve-handler": "^6.1.4",
     "ink-testing-library": "^2.1.0",
-    "memfs": "^3.4.11",
+    "memfs": "^3.6.0",
     "strip-ansi": "^7.1.0",
     "sync-dependencies": "^1.0.4",
     "typescript": "*",
-    "unbuild": "^1.1.2"
+    "unbuild": "^1.2.1",
+    "webpack": "^5.89.0"
   },
   "peerDependencies": {
     "typescript": ">=5.0.4"

packages/core/src/entries/package.ts

@@ -2,7 +2,7 @@ import fs from 'fs/promises';
 import path from 'path';
 
 import chalk from 'chalk';
-import type { RollupOutput } from 'rollup';
+import type { Rollup } from 'vite';
 
 import { type EnhancedConfig, type PartialConfig, getConfig } from '../config';
 import { distDir } from '../constants';
@@ -81,7 +81,7 @@ const build = async (config: EnhancedConfig, packageName: string) => {
 
   await updateGitignore(config.root, entries);
 
-  const cssExports = (bundles as RollupOutput[])
+  const cssExports = (bundles as Rollup.RollupOutput[])
     .flatMap((bundle) => bundle.output)
     .map((output) => output.fileName)
     .filter((fileName) => fileName.endsWith('.css'))

packages/core/src/package-utils/bundle.ts

@@ -3,7 +3,8 @@ import path from 'path';
 
 import { cssFileFilter as vanillaCssFileFilter } from '@vanilla-extract/integration';
 import fse from 'fs-extra';
-import type { OutputOptions, RollupOutput } from 'rollup';
+import { visualizer } from 'rollup-plugin-visualizer';
+import type { Rollup } from 'vite';
 import { normalizePath, build as viteBuild } from 'vite';
 
 import type { EnhancedConfig } from '../config';
@@ -46,8 +47,8 @@ export const createBundle = async (
       interop: 'compat',
       format,
       hoistTransitiveImports: false,
-      experimentalMinChunkSize: 2,
-      // experimentalMinChunkSize: Infinity,
+      // prevent chunks -- we'll manage them ourselves
+      experimentalMinChunkSize: 0,
       manualChunks(id, { getModuleInfo }) {
         const srcPath = replaceExtension(getSrcPath(id));
 
@@ -65,7 +66,7 @@ export const createBundle = async (
           logger.debug(`External module: ${id}`);
           return;
         }
-        if (isVanillaFile(id) || moduleInfo.importers.some(isVanillaFile)) {
+        if (isVanillaFile(id)) {
           logger.debug(`Vanilla file: ${getRelativePath(id)}`);
           return normalizePath(`${stylesDir}/${srcPath}`);
         }
@@ -81,8 +82,17 @@ export const createBundle = async (
           logger.debug(`Has side-effects: ${getRelativePath(id)}`);
           return normalizePath(`${sideEffectsDir}/${srcPath}`);
         }
+        if (
+          // Prevent concatenation of files imported by Vanilla Extract styles, to improve performance of the Vanilla Extract compiler
+          moduleInfo.importers.some(isVanillaFile) ||
+          // Prevent concatenation of files which import Vanilla Extract styles, to ensure only the CSS for one file is extracted at build time. Concatenating these files would cause the CSS for all of them to be extracted at build time.
+          moduleInfo.importedIds.some(isVanillaFile)
+        ) {
+          logger.debug(`Vanilla deps: ${getRelativePath(id)}`);
+          return normalizePath(`${stylesDir}/${srcPath}`);
+        }
       },
-    } satisfies OutputOptions;
+    } satisfies Rollup.OutputOptions;
   };
 
   const result = (await viteBuild({
@@ -95,6 +105,13 @@ export const createBundle = async (
       // because we don't know ahead of time what the output format will be, we always patch imports
       externals(config, 'esm'),
       vocabTranslations(config, { toDistPath: getSrcPath }),
+      false
+        ? visualizer({
+            emitFile: true,
+            template: 'raw-data',
+            filename: 'stats.json',
+          })
+        : [],
     ],
     logLevel: 'warn',
     build: {
@@ -124,7 +141,7 @@ export const createBundle = async (
         // experimentalLogSideEffects: true,
       },
     },
-  })) as RollupOutput[]; // because we know that we're building esm and cjs
+  })) as Rollup.RollupOutput[]; // because we know that we're building esm and cjs
 
   return result;
 };

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

@@ -29,8 +29,6 @@ export const addPageRoots = (config: EnhancedConfig): Plugin => ({
       return;
     }
 
-    const globMethod = id === prefix(browserPageModules) ? 'glob' : 'globEager';
-
     // Vite v3 supports multiple patterns
     // https://vitejs.dev/guide/features.html#glob-import
     const combinedPageRoots = config.pageRoots
@@ -45,10 +43,8 @@ export const addPageRoots = (config: EnhancedConfig): Plugin => ({
 
     const glob = path.join('/', output, pageGlobSuffix);
 
-    // In Vite v3
-    // - globEager is deprecated
-    // - Keys of import.meta.glob are now relative to the current module.
-    // https://vitejs.dev/guide/migration.html#general-changes
-    return `export default import.meta.${globMethod}('${glob}');`;
+    return `export default import.meta.glob('${glob}', { ${
+      id === prefix(browserPageModules) ? '' : 'eager: true'
+    } });`;
   },
 });

packages/core/src/utils/dev-entry-points.ts

@@ -34,12 +34,12 @@ const getHookLoader = async (entry: PackageEntryPoint, format: Format) => {
       const ${rekwire} = createRequire(import.meta.url);
     `;
 
-    const hookPath = await resolveFrom('.', 'tsm');
+    const hookPath = await resolveFrom('.', 'esbuild-register/dist/node');
 
     setup = dedent`
       ${format === 'esm' ? shims : ''}
 
-      ${rekwire}(${stringifyRelative(hookPath)});
+      ${rekwire}(${stringifyRelative(hookPath)}).register({ jsx: "automatic" });
     `;
   }
   const load = `${rekwire}(${stringifyRelative(entry.entryPath)})`;