Use Vite (again) (#47)

.changeset/blue-rings-lay.md

@@ -0,0 +1,5 @@
+---
+'@crackle/core': minor
+---
+
+Use `.mjs` file extension for ESM bundles. Please read the [pull request description](https://github.com/seek-oss/crackle/pull/47) for more details.

.github/workflows/validate.yml

@@ -31,7 +31,7 @@ jobs:
         run: pnpm build
 
       - name: Set up fixtures
-        run: pnpm fixtures package
+        run: pnpm fixtures --aggregate-output package
 
       - name: Lint
         run: pnpm lint

.npmrc

@@ -1 +1,2 @@
-strict-peer-dependencies=false
+strict-peer-dependencies=false
+shamefully-hoist=true

fixtures/braid-site/package.json

@@ -15,7 +15,7 @@
     "@crackle-fixtures/library-with-docs": "workspace:*",
     "@crackle/router": "workspace:*",
     "@vanilla-extract/css": "^1.9.1",
-    "braid-design-system": "0.0.0-crackel2-20220919072731",
+    "braid-design-system": "0.0.0-crackel2-20221007054115",
     "react": "17.0.2",
     "react-dom": "^17.0.2"
   },

fixtures/braid-site/src/App.tsx

@@ -9,7 +9,7 @@ import {
   Heading,
   Stack,
 } from 'braid-design-system';
-import apac from 'braid-design-system/apacTheme';
+import apac from 'braid-design-system/themes/apac';
 import React from 'react';
 
 const App: AppShell = ({ children }) => (

fixtures/library-with-docs/package.json

@@ -8,12 +8,12 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.cjs.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "files": [
     "/dist"
   ],
@@ -27,14 +27,16 @@
   "dependencies": {
     "@crackle/router": "workspace:*",
     "@vanilla-extract/css": "^1.9.1",
-    "braid-design-system": "0.0.0-crackel2-20220919072731",
+    "autosuggest-highlight": "^3.3.4",
+    "braid-design-system": "0.0.0-crackel2-20221007054115",
     "lodash": "^4.17.21",
     "react": "17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@crackle/cli": "workspace:*",
     "@crackle/core": "workspace:*",
+    "@types/autosuggest-highlight": "^3.2.0",
     "@types/lodash": "^4.14.186",
     "@types/react": "^17",
     "@types/react-dom": "^17"

fixtures/library-with-docs/src/App.tsx

@@ -8,7 +8,7 @@ import {
   makeLinkComponent,
   Stack,
 } from 'braid-design-system';
-import apac from 'braid-design-system/apacTheme';
+import apac from 'braid-design-system/themes/apac';
 import React from 'react';
 
 const CustomLink = makeLinkComponent(({ href, ...restProps }, ref) =>

fixtures/library-with-docs/src/index.ts

@@ -1 +1,3 @@
 export { JobSummary } from './components/JobSummary/JobSummary';
+
+export { default as parse } from 'autosuggest-highlight/parse';

fixtures/multi-entry-library/package.json

@@ -8,27 +8,27 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.cjs.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
     "./components": {
       "types": "./components/dist/index.cjs.d.ts",
-      "import": "./components/dist/index.js",
+      "import": "./components/dist/index.mjs",
       "require": "./components/dist/index.cjs"
     },
     "./extras": {
       "types": "./extras/dist/index.cjs.d.ts",
-      "import": "./extras/dist/index.js",
+      "import": "./extras/dist/index.mjs",
       "require": "./extras/dist/index.cjs"
     },
     "./themes/apac": {
       "types": "./themes/apac/dist/index.cjs.d.ts",
-      "import": "./themes/apac/dist/index.js",
+      "import": "./themes/apac/dist/index.mjs",
       "require": "./themes/apac/dist/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "files": [
     "/components",
     "/dist",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@crackle/router": "workspace:*",
-    "braid-design-system": "0.0.0-crackel2-20220919072731",
+    "braid-design-system": "0.0.0-crackel2-20221007054115",
     "react": "17.0.2",
     "react-dom": "^17.0.2"
   },

fixtures/single-entry-library/package.json

@@ -8,12 +8,12 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.cjs.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "files": [
     "/dist"
   ],
@@ -26,7 +26,7 @@
   "dependencies": {
     "@crackle-fixtures/multi-entry-library": "workspace:*",
     "@vanilla-extract/css": "^1.9.1",
-    "braid-design-system": "0.0.0-crackel2-20220919072731",
+    "braid-design-system": "0.0.0-crackel2-20221007054115",
     "react": "17.0.2",
     "react-dom": "^17.0.2"
   },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "project-crackle",
+  "name": "crackle",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,8 +8,9 @@
     "build": "preconstruct build",
     "watch": "preconstruct watch",
     "fixtures": "pnpm --recursive --filter='@crackle-fixtures/*'",
-    "lint": "tsc --noEmit && eslint . && prettier --check .",
     "format": "eslint --fix . && prettier --write .",
+    "lint": "tsc --noEmit && eslint . && prettier --check .",
+    "sync-dependencies": "pnpm --recursive sync-dependencies",
     "test": "pnpm test:vitest --run && pnpm test:playwright",
     "test:vitest": "vitest",
     "test:playwright": "playwright test",
@@ -21,7 +22,7 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@changesets/cli": "^2.24.4",
-    "@playwright/test": "^1.14.1",
+    "@playwright/test": "1.22.2",
     "@preconstruct/cli": "^2.2.1",
     "prettier": "^2.7.1",
     "typescript": "~4.7.4"
@@ -47,6 +48,6 @@
     "eslint-config-seek": "^9.0.0",
     "fixturez": "^1.1.0",
     "snapshot-diff": "^0.9.0",
-    "vitest": "^0.21.1"
+    "vitest": "^0.23.4"
   }
 }

packages/core/package.json

@@ -63,6 +63,9 @@
     "/serve",
     "/start"
   ],
+  "scripts": {
+    "sync-dependencies": "sync-dependencies --source vite"
+  },
   "preconstruct": {
     "entrypoints": [
       "build.ts",
@@ -83,52 +86,46 @@
     "@babel/plugin-syntax-typescript": "^7.14.5",
     "@crackle/babel-plugin-remove-exports": "0.1.0",
     "@crackle/router": "0.2.0",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@vanilla-extract/babel-plugin": "^1.1.2",
     "@vanilla-extract/css": "^1.9.1",
     "@vanilla-extract/integration": "^6.0.0",
     "@vanilla-extract/vite-plugin": "^3.6.1",
     "@vitejs/plugin-react": "^2.1.0",
     "builtin-modules": "^3.2.0",
     "chalk": "^4.0.0",
     "ensure-gitignore": "^1.2.0",
-    "esbuild": ">= 0.13.3",
+    "esbuild": "^0.15.9",
     "eval": "^0.1.8",
     "express": "^4.17.1",
-    "fast-glob": "^3.2.7",
+    "fast-glob": "^3.2.12",
     "fs-extra": "^10.0.0",
-    "history": "^5.0.1",
     "ink": "^3.0.9",
-    "mlly": "^0.5.14",
-    "normalize-path": "^3.0.0",
-    "parse-json": "^5.2.0",
+    "mlly": "^0.5.16",
     "pretty-ms": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "resolve-from": "^5.0.0",
-    "rollup": "~2.78.1",
+    "rollup": "^2.79.1",
     "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-esbuild": "^4.10.1",
     "rollup-plugin-node-externals": "^4.1.1",
     "serialize-javascript": "^6.0.0",
     "serve-handler": "^6.1.3",
     "sort-package-json": "^1.57.0",
     "used-styles": "^2.2.0",
-    "vite": "^3.0.9"
+    "vite": "^3.2.0-beta.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.15",
     "@types/express": "^4.17.13",
     "@types/fs-extra": "^9.0.12",
     "@types/node": "^16.11.57",
-    "@types/normalize-path": "^3.0.0",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/serialize-javascript": "^5.0.1",
     "@types/serve-handler": "^6.1.1",
     "ink-testing-library": "^2.1.0",
     "memfs": "^3.4.7",
     "strip-ansi": "^7.0.1",
+    "sync-dependencies": "^1.0.4",
     "type-fest": "^2.18.0"
   },
   "peerDependencies": {

packages/core/src/build.ts

@@ -102,15 +102,6 @@ export const build = async (inlineConfig?: PartialConfig) => {
         },
         outDir: rendererDir,
       },
-      // TODO: remove when this PR lands https://github.com/vitejs/vite/pull/9989
-      legacy: {
-        buildSsrCjsExternalHeuristics: true,
-      },
-      ssr: {
-        ...commonBuildConfig.ssr,
-        format: 'cjs',
-      },
-      // TODO: end remove
     })) as RollupOutput;
 
     logger.info(`✅ Successfully built ${chalk.bold('renderer')}!`);
@@ -124,6 +115,7 @@ export const build = async (inlineConfig?: PartialConfig) => {
       getIdentOption: () => 'short',
     });
 
+    // TODO: use vite-node instead
     const { renderAllPages } = (await import(
       `${rendererDir}/${rendererOutput.fileName}`
     )) as {

packages/core/src/config.ts

@@ -105,7 +105,7 @@ export const getConfig = (inlineConfig?: PartialConfig): EnhancedConfig => {
   const appShell = determineAppShell(
     inlineConfig,
     resolveFromRoot,
-  ) as `${string}.tsx`;
+  ) as EnhancedConfig['appShell'];
 
   return {
     ...config,