support nodejs esm (#68)

csr632 · web-flow · commit 6ea85cecfd5d · 2022-08-26T01:57:55.000+08:00
* support nodejs esm env

* fix ssr in node esm env

* chore: publish alpha

* WIP: tests

* fix import client and clientTypes

* update lock

* WIP: tests

* tests cleanup

* fix test: kill ESRCH

* improve tests

* improve test setup

* add comment

* cleanup

* improve test timeout setup
diff --git a/packages/playground/use-theme-doc/__tests__/navigate-tests.ts b/packages/playground/use-theme-doc/__tests__/navigate-tests.ts
@@ -1,8 +1,14 @@
-import { test, expect, type Page } from '~utils'
+import { test as baseTest, expect, type Page } from '~utils'
 import { userPages } from './snapshots'
 
 // reuse test declaration
-export function declareTests(javaScriptEnabled: boolean) {
+export function declareTests({
+  javaScriptEnabled = true,
+  test = baseTest,
+}: {
+  javaScriptEnabled?: boolean
+  test?: typeof baseTest
+} = {}) {
   test('test options', async ({ javaScriptEnabled: javaScriptEnabledOpt }) => {
     await expect(javaScriptEnabledOpt).toBe(javaScriptEnabled)
   })
diff --git a/packages/playground/use-theme-doc/__tests__/navigate.cjs.spec.ts b/packages/playground/use-theme-doc/__tests__/navigate.cjs.spec.ts
@@ -0,0 +1,18 @@
+import { test } from '~utils'
+import { declareTests } from './navigate-tests'
+
+test.use({
+  beforeStartViteServer: async ({ fsUtils }, use) => {
+    await use(async () => {
+      fsUtils.editFile('package.json', (str: string) => {
+        if (!str.includes('"type": "module"'))
+          throw new Error(
+            'unexpected package.json：should includes type:module'
+          )
+        return str.replace('"type": "module"', '"type": "commonjs"')
+      })
+    })
+  },
+})
+
+declareTests()
diff --git a/packages/playground/use-theme-doc/__tests__/navigate.disableJS.spec.ts b/packages/playground/use-theme-doc/__tests__/navigate.disableJS.spec.ts
@@ -1,3 +1,17 @@
+import { test } from '~utils'
 import { declareTests } from './navigate-tests'
 
-declareTests(false)
+test.use({ javaScriptEnabled: false })
+
+test.skip(
+  ({ vitePagesMode }) => vitePagesMode !== 'ssr',
+  'only run in ssr mode'
+)
+
+test.use({
+  skipPrepare: async ({ vitePagesMode }, use) => {
+    await use(vitePagesMode !== 'ssr')
+  },
+})
+
+declareTests({ javaScriptEnabled: false })
diff --git a/packages/playground/use-theme-doc/__tests__/navigate.spec.ts b/packages/playground/use-theme-doc/__tests__/navigate.spec.ts
@@ -1,3 +1,3 @@
 import { declareTests } from './navigate-tests'
 
-declareTests(true)
+declareTests()
diff --git a/packages/playground/use-theme-doc/__tests__/package.json b/packages/playground/use-theme-doc/__tests__/package.json
@@ -0,0 +1,4 @@
+{
+  "type": "commonjs",
+  "//": "needed for playwright to work (../package.json has set type to module)"
+}
diff --git a/packages/playground/use-theme-doc/package.json b/packages/playground/use-theme-doc/package.json
@@ -2,6 +2,7 @@
   "name": "use-theme",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite serve",
     "debug": "node --inspect ./node_modules/vite/bin/vite serve",
diff --git a/packages/playground/use-theme-doc/vite.config.ts b/packages/playground/use-theme-doc/vite.config.ts
@@ -1,10 +1,13 @@
 import { defineConfig } from 'vite'
 import * as path from 'path'
 import react from '@vitejs/plugin-react'
-import mdx from 'vite-plugin-mdx'
+import _mdx from 'vite-plugin-mdx'
 import pages from 'vite-plugin-react-pages'
 
-module.exports = defineConfig({
+// vite-plugin-mdx is not esm friendly currently
+const mdx = ((_mdx as any).default || _mdx) as typeof _mdx
+
+export default defineConfig({
   resolve: {
     alias: {
       '~pages/': `${path.join(__dirname, 'pages')}/`,
diff --git a/packages/react-pages/package.json b/packages/react-pages/package.json
@@ -2,6 +2,17 @@
   "name": "vite-plugin-react-pages",
   "version": "3.2.1",
   "main": "dist/node/index.js",
+  "module": "dist/node-esm/index.mjs",
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "import": "./dist/node-esm/index.mjs",
+      "require": "./dist/node/index.js"
+    },
+    "./*": "./*",
+    "./client": "./client.ts",
+    "./clientTypes": "./clientTypes.d.ts"
+  },
   "bin": {
     "vite-pages": "bin/vite-pages.js"
   },
@@ -24,6 +35,7 @@
   "scripts": {
     "build": "rimraf ./dist && concurrently \"npm:build-*\"",
     "build-node": "tsc -p src/node",
+    "build-node-esm": "rollup -c",
     "build-client": "tsc -p src/client",
     "dev": "rimraf ./dist && concurrently \"npm:dev-*\"",
     "dev-node": "tsc -w -p src/node",
@@ -34,6 +46,11 @@
     "vite": "^2.5.6 || ^3.0.0"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-typescript": "^8.3.4",
+    "@babel/preset-env": "^7.18.10",
     "@types/enhanced-resolve": "^3.0.6",
     "@types/fs-extra": "^9.0.8",
     "@types/minimist": "^1.2.0",
diff --git a/packages/react-pages/rollup.config.js b/packages/react-pages/rollup.config.js
@@ -0,0 +1,62 @@
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
+
+/*
+use rollup to build esm code that target nodejs (run in native esm mode)
+instead of using tsc only
+to avoid error like this:
+
+[ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/path/to/vite-plugin-react-pages/packages/react-pages/dist/node-esm/page-strategy/DefaultPageStrategy' is not supported resolving ES modules imported from /path/to/vite-plugin-react-pages/packages/react-pages/dist/node-esm/index.js
+
+It is more flexable to use a bundler to build code for nodejs platform because:
+- it allows us to use directory import in source code
+- we don't need to add `.js` extension in relative import
+- we can bundle include some deps (currently we external all deps)
+*/
+
+export default {
+  input: 'src/node/index.ts',
+  output: [
+    {
+      // dir: 'dist/node-esm',
+      file: 'dist/node-esm/index.mjs',
+      format: 'esm',
+      sourcemap: true,
+    },
+    // {
+    //   dir: 'dist-cjs',
+    //   format: 'cjs',
+    //   sourcemap: true,
+    // },
+  ],
+  external: [],
+  plugins: [
+    resolve({
+      // prevent bundling unexpected deps
+      resolveOnly: ['none!'],
+      extensions,
+    }),
+    commonjs(),
+    babel({
+      babelHelpers: 'bundled',
+      extensions,
+      presets: [
+        // [
+        //   '@babel/preset-env',
+        //   {
+        //     targets: {
+        //       chrome: '90',
+        //       node: '12',
+        //     },
+        //   },
+        // ],
+        '@babel/preset-typescript',
+      ],
+      plugins: [],
+      configFile: false,
+    }),
+  ],
+}
diff --git a/packages/react-pages/src/node/index.ts b/packages/react-pages/src/node/index.ts
@@ -79,7 +79,7 @@ export default function pluginFactory(opts: PluginConfig = {}): Plugin {
         },
       },
     }),
-    configResolved({ root, plugins, logger, command }) {
+    async configResolved({ root, plugins, logger, command }) {
       isBuild = command === 'build'
       pagesDir = opts.pagesDir ?? path.resolve(root, 'pages')
       if (opts.pageStrategy) {
@@ -94,7 +94,9 @@ export default function pluginFactory(opts: PluginConfig = {}): Plugin {
 
       if (mdxPlugin?.mdxOptions) {
         // Inject demo transformer
-        mdxPlugin.mdxOptions.remarkPlugins.push(...getRemarkPlugins(root))
+        mdxPlugin.mdxOptions.remarkPlugins.push(
+          ...(await getRemarkPlugins(root))
+        )
       } else {
         logger.warn(
           '[react-pages] Please install vite-plugin-mdx@3.1 or higher'
@@ -212,7 +214,7 @@ export { extractStaticData, File } from './utils/virtual-module'
 export { PageStrategy }
 export { DefaultPageStrategy, defaultFileHandler }
 
-function getRemarkPlugins(root: string) {
+async function getRemarkPlugins(root: string) {
   const result: any[] = [
     DemoMdxPlugin,
     TsInfoMdxPlugin,
@@ -226,10 +228,10 @@ function getRemarkPlugins(root: string) {
   // checkout playground/custom-find-pages2.
   const hasPkgJson = fs.pathExistsSync(pkgJsonPath)
 
+  const pkgJson = await fs.readJSON(pkgJsonPath)
+
   // Inject frontmatter parser if missing
-  const { devDependencies = {}, dependencies = {} } = hasPkgJson
-    ? require(pkgJsonPath)
-    : {}
+  const { devDependencies = {}, dependencies = {} } = hasPkgJson ? pkgJson : {}
   // By default we add remark-frontmatter automatically.
   // But if user install their own remark-frontmatter,
   // they are responsible to add the plugin manually
@@ -238,7 +240,9 @@ function getRemarkPlugins(root: string) {
     !devDependencies['remark-frontmatter'] &&
     !dependencies['remark-frontmatter']
   ) {
-    result.push(require('remark-frontmatter'))
+    // result.push(require('remark-frontmatter'))
+    const remarkFrontmatter = await import('remark-frontmatter')
+    result.push(remarkFrontmatter.default || remarkFrontmatter)
   }
   return result
 }
diff --git a/packages/react-pages/src/node/static-site-generation/index.ts b/packages/react-pages/src/node/static-site-generation/index.ts
@@ -2,7 +2,7 @@ import { build as viteBuild } from 'vite'
 import type { ResolvedConfig } from 'vite'
 import type { RollupOutput } from 'rollup'
 import * as path from 'path'
-import * as fs from 'fs-extra'
+import fs from 'fs-extra'
 
 import { CLIENT_PATH } from '../constants'
 import { stringify } from 'gray-matter'
@@ -36,7 +36,10 @@ export async function ssrBuild(
         output: {
           format: 'cjs',
           exports: 'named',
-          entryFileNames: '[name].js',
+          // ensure ssr bundle is loaded as cjs even when
+          // users have "type": "module" in their package.json
+          entryFileNames: '[name].cjs',
+          chunkFileNames: '[name]-[hash].cjs',
         },
       },
       outDir: ssrOutDir,
@@ -58,7 +61,7 @@ export async function ssrBuild(
 
   const { renderToString, ssrData } = require(path.join(
     ssrOutDir,
-    'serverRender.js'
+    'serverRender.cjs'
   ))
 
   const pagePaths = Object.keys(ssrData)
diff --git a/packages/react-pages/src/node/utils/virtual-module/utils/File.ts b/packages/react-pages/src/node/utils/virtual-module/utils/File.ts
@@ -1,4 +1,4 @@
-import * as fs from 'fs-extra';
+import fs from 'fs-extra';
 import * as path from 'path';
 
 export class File {
diff --git a/packages/react-pages/src/node/virtual-module-plugins/theme.ts b/packages/react-pages/src/node/virtual-module-plugins/theme.ts
@@ -1,4 +1,4 @@
-import * as fs from 'fs-extra'
+import fs from 'fs-extra'
 import * as path from 'path'
 import slash from 'slash'
 
diff --git a/packages/react-pages/src/node/virtual-module-plugins/ts-info-module/extract.ts b/packages/react-pages/src/node/virtual-module-plugins/ts-info-module/extract.ts
@@ -1,4 +1,4 @@
-import * as ts from 'typescript'
+import ts from 'typescript'
 
 import {
   TsInterfaceInfo,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test-setup/playwright.config.ts b/test-setup/playwright.config.ts
diff --git a/test-setup/utils/index.ts b/test-setup/utils/index.ts
diff --git a/test-setup/utils/startServer.ts b/test-setup/utils/startServer.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import { declareTests } from './navigate-tests'`
`2`	`2`
`3`		`-declareTests(true)`
	`3`	`+declareTests()`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "type": "commonjs",
 +  "//": "needed for playwright to work (../package.json has set type to module)"
 +}