chore(esm/cjs): Make the rwjs/vite package dual

.vscode/settings.json

@@ -22,6 +22,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "peacock.color": "#b85833",
   "cSpell.words": [
+    "attw",
     "autoplay",
     "baremetal",
     "bazinga",
@@ -38,6 +39,7 @@
     "pino",
     "Pistorius",
     "prerendering",
+    "publint",
     "redwoodjs",
     "rsdw",
     "RWJS",

packages/auth-providers/dbAuth/middleware/src/index.ts

@@ -6,7 +6,7 @@ import {
   dbAuthSession,
 } from '@redwoodjs/auth-dbauth-api'
 import type { GetCurrentUser } from '@redwoodjs/graphql-server'
-import { MiddlewareResponse } from '@redwoodjs/web/dist/server/middleware'
+import { MiddlewareResponse } from '@redwoodjs/web/middleware'
 import type {
   Middleware,
   MiddlewareRequest,

packages/auth-providers/dbAuth/middleware/tsconfig.types-cjs.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+  },
+}

packages/auth-providers/supabase/middleware/src/index.ts

@@ -5,9 +5,9 @@ import type {
   Middleware,
   MiddlewareRequest,
   MiddlewareResponse,
-} from '@redwoodjs/web/middleware' with { 'resolution-mode': 'import' }
+} from '@redwoodjs/web/middleware'
 
-import { clearAuthState } from './util'
+import { clearAuthState } from './util.js'
 
 export interface SupabaseAuthMiddlewareOptions {
   getCurrentUser: GetCurrentUser

packages/auth-providers/supabase/middleware/src/util.ts

@@ -7,7 +7,7 @@ import { throwSupabaseSettingsError } from '@redwoodjs/auth-supabase-api'
 import type {
   MiddlewareRequest,
   MiddlewareResponse,
-} from '@redwoodjs/web/middleware' with { 'resolution-mode': 'import' }
+} from '@redwoodjs/web/middleware'
 /**
  * Creates Supabase Server Client used to get the session cookie (only)
  * from a given collection of auth cookies

packages/project-config/src/paths.ts

@@ -153,7 +153,7 @@ export const getBaseDirFromFile = (file: string) => {
  */
 export const resolveFile = (
   filePath: string,
-  extensions: string[] = ['.js', '.tsx', '.ts', '.jsx'],
+  extensions: string[] = ['.js', '.tsx', '.ts', '.jsx', '.mjs', '.mts'],
 ): string | null => {
   for (const extension of extensions) {
     const p = `${filePath}${extension}`

packages/vite/attw.ts

@@ -0,0 +1,41 @@
+import { $ } from 'zx'
+
+interface Problem {
+  kind: string
+  entrypoint?: string
+  resolutionKind?: string
+}
+
+/***
+ * Excluded entry points:
+ * - ./bins/rw-vite-build.mjs: this is only used in the build handler
+ * - SsrRouter, Router: this should be moved out of the Vite package anyway, and is only used in ESM
+ * - ./react-node-loader: used to run the Worker
+ * -
+ */
+
+await $({
+  nothrow: true,
+})`yarn attw -P --exclude-entrypoints ./bins/rw-vite-build.mjs ./SsrRouter ./Router ./react-node-loader -f json > .attw.json`
+const output = await $`cat .attw.json`
+await $`rm .attw.json`
+
+const json = JSON.parse(output.stdout)
+
+if (!json.analysis.problems || json.analysis.problems.length === 0) {
+  console.log('No errors found')
+  process.exit(0)
+}
+
+if (
+  json.analysis.problems.every(
+    (problem: Problem) => problem.resolutionKind === 'node10',
+  )
+) {
+  console.log("Only found node10 problems, which we don't care about")
+  process.exit(0)
+}
+
+console.log('Errors found')
+console.log(json.analysis.problems)
+process.exit(1)

packages/vite/build.mts

@@ -1,24 +1,69 @@
-import { build, defaultIgnorePatterns } from '@redwoodjs/framework-tools'
+import {
+  build,
+  defaultBuildOptions,
+  defaultIgnorePatterns,
+} from '@redwoodjs/framework-tools'
+
+import { writeFileSync } from 'node:fs'
+import { commonjs } from '@hyrious/esbuild-plugin-commonjs'
 
 import * as esbuild from 'esbuild'
 
+// CJS Build
+await build({
+  entryPointOptions: {
+    ignore: [...defaultIgnorePatterns, '**/bundled'],
+  },
+  buildOptions: {
+    ...defaultBuildOptions,
+    outdir: 'dist/cjs',
+    packages: 'external',
+  },
+})
+
+// ESM Build
 await build({
   entryPointOptions: {
     ignore: [...defaultIgnorePatterns, '**/bundled'],
-  }
+  },
+  buildOptions: {
+    ...defaultBuildOptions,
+    format: 'esm',
+    packages: 'external',
+  },
 })
 
 // We bundle some react packages with the "react-server" condition
 // so that we don't need to specify it at runtime.
-
 await esbuild.build({
   entryPoints: ['src/bundled/*'],
   outdir: 'dist/bundled',
-
+  format: 'esm',
   bundle: true,
   conditions: ['react-server'],
   platform: 'node',
   target: ['node20'],
-
+  // ⭐ Without this plugin, we get "Error: Dynamic require of "util" is not supported"
+  // when trying to run the built files. This plugin will
+  //  "just rewrite that file to replace "require(node-module)" to a toplevel static import statement." (see issue)
+  // https://github.com/evanw/esbuild/issues/2113
+  // https://github.com/evanw/esbuild/pull/2067
+  plugins: [commonjs()],
   logLevel: 'info',
 })
+
+// Place a package.json file with `type: commonjs` in the dist/cjs folder so that
+// all .js files are treated as CommonJS files.
+writeFileSync('dist/cjs/package.json', JSON.stringify({ type: 'commonjs' }))
+
+// Place a package.json file with `type: module` in the dist folder so that
+// all .js files are treated as ES Module files.
+writeFileSync('dist/package.json', JSON.stringify({ type: 'module' }))
+
+// Add CommonJS types by creating common JS types. Using a .d.ts file, because .d.cts files don't auto resolve
+// Notice I haven't specified thee types in package.json for these - it's following the naming conversion TSC wants.
+writeFileSync('dist/cjs/index.d.ts', 'export type * from "../index.d.ts"')
+writeFileSync('dist/cjs/buildFeServer.d.ts', 'export type * from "../buildFeServer.d.ts"')
+writeFileSync('dist/cjs/client.d.ts', 'export type * from "../client.d.ts"')
+writeFileSync('dist/cjs/clientSsr.d.ts', 'export type * from "../clientSsr.d.ts"')
+writeFileSync('dist/cjs/ClientRouter.d.ts', 'export type * from "../ClientRouter.d.ts"')

packages/vite/modules.d.ts

@@ -107,3 +107,7 @@ declare module 'react-server-dom-webpack/server' {
 }
 
 declare module 'vite-plugin-cjs-interop'
+
+declare module '@babel/parser/index.cjs' {
+  export * from '@babel/parser'
+}

packages/vite/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@redwoodjs/vite",
   "version": "7.0.0",
+  "type": "module",
   "description": "Vite configuration package for Redwood",
   "repository": {
     "type": "git",
@@ -11,33 +12,37 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./cjsWrapper.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     },
     "./client": {
-      "types": "./dist/client.d.ts",
-      "default": "./dist/client.js"
+      "require": "./dist/cjs/client.js",
+      "import": "./dist/client.js"
     },
     "./clientSsr": {
-      "types": "./dist/clientSsr.d.ts",
-      "default": "./dist/clientSsr.js"
+      "require": "./dist/cjs/clientSsr.js",
+      "import": "./dist/clientSsr.js"
     },
     "./Router": {
-      "types": "./dist/ClientRouter.d.ts",
       "react-server": "./dist/ServerRouter.js",
-      "default": "./dist/ClientRouter.js"
+      "require": "./dist/cjs/ClientRouter.js",
+      "import": "./dist/ClientRouter.js"
     },
     "./SsrRouter": {
-      "types": "./dist/SsrRouter.d.ts",
       "react-server": "./dist/ServerRouter.js",
-      "default": "./dist/SsrRouter.js"
+      "import": "./dist/SsrRouter.js"
     },
     "./buildFeServer": {
-      "types": "./dist/buildFeServer.d.ts",
-      "default": "./dist/buildFeServer.js"
+      "require": "./dist/cjs/buildFeServer.js",
+      "import": "./dist/buildFeServer.js"
     },
     "./react-node-loader": {
-      "types": "./dist/react-server-dom-webpack/node-loader.d.ts",
       "default": "./dist/react-server-dom-webpack/node-loader.js"
     },
     "./bins/rw-vite-build.mjs": "./bins/rw-vite-build.mjs"
@@ -51,14 +56,16 @@
   },
   "files": [
     "dist",
-    "inject",
-    "cjsWrapper.js"
+    "inject"
   ],
   "scripts": {
     "build": "tsx build.mts && yarn build:types",
     "build:pack": "yarn pack -o redwoodjs-vite.tgz",
-    "build:types": "tsc --build --verbose",
-    "test": "vitest run",
+    "build:types": "tsc --build --verbose ./tsconfig.json",
+    "test:attw": "tsx ./attw.ts",
+    "test:publint": "yarn publint",
+    "test:vitest": "vitest run",
+    "test": "concurrently npm:test:vitest npm:test:attw npm:test:publint",
     "test:watch": "vitest watch"
   },
   "dependencies": {
@@ -94,12 +101,16 @@
     "yargs-parser": "21.1.1"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "0.15.3",
+    "@hyrious/esbuild-plugin-commonjs": "0.2.4",
     "@types/busboy": "^1",
     "@types/cookie": "^0",
     "@types/express": "4",
     "@types/react": "^18.2.55",
     "@types/yargs-parser": "21.0.3",
+    "concurrently": "8.2.2",
     "glob": "10.3.15",
+    "publint": "0.2.8",
     "rollup": "4.18.0",
     "tsx": "4.15.6",
     "typescript": "5.4.5",

packages/vite/src/ClientRouter.tsx

@@ -3,14 +3,17 @@
 
 import React, { useMemo } from 'react'
 
-import { analyzeRoutes } from '@redwoodjs/router/dist/analyzeRoutes'
-import { AuthenticatedRoute } from '@redwoodjs/router/dist/AuthenticatedRoute'
-import { LocationProvider, useLocation } from '@redwoodjs/router/dist/location'
-import { namedRoutes } from '@redwoodjs/router/dist/namedRoutes'
-import type { RouterProps } from '@redwoodjs/router/dist/router'
-import { RouterContextProvider } from '@redwoodjs/router/dist/router-context'
+import { analyzeRoutes } from '@redwoodjs/router/dist/analyzeRoutes.js'
+import { AuthenticatedRoute } from '@redwoodjs/router/dist/AuthenticatedRoute.js'
+import {
+  LocationProvider,
+  useLocation,
+} from '@redwoodjs/router/dist/location.js'
+import { namedRoutes } from '@redwoodjs/router/dist/namedRoutes.js'
+import { RouterContextProvider } from '@redwoodjs/router/dist/router-context.js'
+import type { RouterProps } from '@redwoodjs/router/dist/router.js'
 
-import { rscFetch } from './rsc/rscFetchForClientRouter'
+import { rscFetch } from './rsc/rscFetchForClientRouter.js'
 
 export const Router = ({ useAuth, paramTypes, children }: RouterProps) => {
   return (

packages/vite/src/ServerRouter.ts

@@ -1 +1 @@
-export { Router } from '@redwoodjs/router/dist/server-router'
+export { Router } from '@redwoodjs/router/dist/server-router.js'

packages/vite/src/SsrRouter.tsx

@@ -4,12 +4,15 @@
 
 import React, { useMemo } from 'react'
 
-import { analyzeRoutes } from '@redwoodjs/router/dist/analyzeRoutes'
-import { LocationProvider, useLocation } from '@redwoodjs/router/dist/location'
-import { namedRoutes } from '@redwoodjs/router/dist/namedRoutes'
-import type { RouterProps } from '@redwoodjs/router/dist/router'
-
-import { renderRoutesFromDist } from './clientSsr'
+import { analyzeRoutes } from '@redwoodjs/router/dist/analyzeRoutes.js'
+import {
+  LocationProvider,
+  useLocation,
+} from '@redwoodjs/router/dist/location.js'
+import { namedRoutes } from '@redwoodjs/router/dist/namedRoutes.js'
+import type { RouterProps } from '@redwoodjs/router/dist/router.js'
+
+import { renderRoutesFromDist } from './clientSsr.js'
 
 export const Router = ({ paramTypes, children }: RouterProps) => {
   return (

packages/vite/src/buildFeServer.ts

@@ -1,4 +1,4 @@
-import { buildWeb } from '@redwoodjs/internal/dist/build/web'
+import { buildWeb } from '@redwoodjs/internal/dist/build/web.js'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
 import { buildRouteHooks } from './buildRouteHooks.js'

packages/vite/src/buildRouteHooks.ts

@@ -5,7 +5,7 @@ import {
   getRouteHookBabelPlugins,
   transformWithBabel,
 } from '@redwoodjs/babel-config'
-import { findRouteHooksSrc } from '@redwoodjs/internal/dist/files'
+import { findRouteHooksSrc } from '@redwoodjs/internal/dist/files.js'
 import type { Paths } from '@redwoodjs/project-config'
 import { getPaths } from '@redwoodjs/project-config'
 

packages/vite/src/buildRouteManifest.ts

@@ -4,7 +4,7 @@ import url from 'node:url'
 
 import type { Manifest as ViteBuildManifest } from 'vite'
 
-import { getProjectRoutes } from '@redwoodjs/internal/dist/routes'
+import { getProjectRoutes } from '@redwoodjs/internal/dist/routes.js'
 import { getAppRouteHook, getPaths } from '@redwoodjs/project-config'
 
 import type { RWRouteManifest } from './types.js'