feat: add use client module directive support

sanity-io · Aug 7, 2023 · 66bb0e1 · 66bb0e1
1 parent 898c785
commit 66bb0e1
Show file tree

Hide file tree

Showing 18 changed files with 206 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -155,6 +155,7 @@
     "rimraf": "^4.4.1",
     "rollup": "^3.27.2",
     "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-preserve-directives": "^0.2.0",
     "rxjs": "^7.8.1",
     "treeify": "^1.1.0",
     "uuid": "^9.0.0",

diff --git a/playground/runtime-next-js/app/app-router/leaf.tsx b/playground/runtime-next-js/app/app-router/leaf.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+// Teeny tiny component in its own file, demonstrating how small client component
+// leafs can be in an RSC tree, and how little the impact of using `React.createContext` can be
+
+import {useResult} from 'use-client-directive'
+
+export default function Leaf() {
+  const result = useResult()
+  return <div>useContext={result}</div>
+}
diff --git a/playground/runtime-next-js/app/app-router/page.tsx b/playground/runtime-next-js/app/app-router/page.tsx
@@ -0,0 +1,18 @@
+import * as index from 'dummy-module'
+import * as extra from 'dummy-module/extra'
+
+import Leaf from './leaf'
+
+export default function IndexPage() {
+  return (
+    <div>
+      <div>
+        path={index.path}, format={index.format}, runtime={index.runtime}
+      </div>
+      <div>
+        path={extra.path}, format={extra.format}, runtime={extra.runtime}
+      </div>
+      <Leaf />
+    </div>
+  )
+}
diff --git a/playground/runtime-next-js/app/layout.tsx b/playground/runtime-next-js/app/layout.tsx
@@ -0,0 +1,12 @@
+import {Provider} from 'use-client-directive'
+
+export default function RootLayout({children}: {children: React.ReactNode}) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  )
+}
diff --git a/playground/runtime-next-js/next-env.d.ts b/playground/runtime-next-js/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/playground/runtime-next-js/package.json b/playground/runtime-next-js/package.json
@@ -12,7 +12,8 @@
     "dummy-module": "workspace:*",
     "next": "^13.4.13",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "use-client-directive": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.18"

diff --git a/playground/runtime-next-js/tsconfig.json b/playground/runtime-next-js/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.settings",
-  "include": ["./next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["./next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["./node_modules"],
   "compilerOptions": {
     "noEmit": true,
@@ -11,6 +11,8 @@
     "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [{"name": "next"}],
+    "strictNullChecks": true
   }
 }
diff --git a/playground/use-client-directive/package.config.ts b/playground/use-client-directive/package.config.ts
@@ -0,0 +1,6 @@
+import {defineConfig} from '@sanity/pkg-utils'
+
+export default defineConfig({
+  tsconfig: 'tsconfig.dist.json',
+  preserveModuleDirectives: true,
+})
diff --git a/playground/use-client-directive/package.json b/playground/use-client-directive/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "use-client-directive",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "run-s clean && pkg build --strict && pkg check --strict",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.18",
+    "react": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}
diff --git a/playground/use-client-directive/src/_exports.tsx b/playground/use-client-directive/src/_exports.tsx
@@ -0,0 +1,10 @@
+import {createContext, useContext} from 'react'
+
+const Context = createContext<'success' | 'failure'>('failure')
+
+/** @public */
+export const Provider = ({children}: {children: React.ReactNode}) => (
+  <Context.Provider value="success">{children}</Context.Provider>
+)
+/** @public */
+export const useResult = () => useContext(Context)
diff --git a/playground/use-client-directive/src/index.ts b/playground/use-client-directive/src/index.ts
@@ -0,0 +1,3 @@
+'use client'
+
+export * from './_exports'
diff --git a/playground/use-client-directive/tsconfig.dist.json b/playground/use-client-directive/tsconfig.dist.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.settings",
+  "include": ["./src"],
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist",
+    "emitDeclarationOnly": true
+  }
+}
diff --git a/playground/use-client-directive/tsconfig.json b/playground/use-client-directive/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.settings",
+  "include": ["./package.config.ts", "./src"],
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true
+  }
+}
diff --git a/playground/use-client-directive/tsconfig.settings.json b/playground/use-client-directive/tsconfig.settings.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "jsx": "preserve",
+
+    // Strict type-checking
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+
+    // Additional checks
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+
+    // Module resolution
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/node/core/config/types.ts b/src/node/core/config/types.ts
@@ -114,6 +114,11 @@ export interface PkgConfigOptions {
    * Build package with support for legacy exports (writes root `<export>.js` files)
    */
   legacyExports?: boolean
+  /**
+   * Preserves module directives, such as `'use client'`
+   * @alpha
+   */
+  preserveModuleDirectives?: boolean
   minify?: boolean
   /** @alpha */
   rollup?: {

diff --git a/src/node/tasks/rollup/resolveRollupConfig.ts b/src/node/tasks/rollup/resolveRollupConfig.ts
@@ -8,6 +8,7 @@ import terser from '@rollup/plugin-terser'
 import path from 'path'
 import {InputOptions, OutputOptions, Plugin} from 'rollup'
 import esbuild from 'rollup-plugin-esbuild'
+import preserveDirectives from 'rollup-plugin-preserve-directives'
 
 import {BuildContext, DEFAULT_BROWSERSLIST_QUERY, resolveConfigProperty} from '../../core'
 import {RollupTask, RollupWatchTask} from '../types'
@@ -111,10 +112,12 @@ export function resolveRollupConfig(
     }),
     minify &&
       terser({
-        compress: {
-          // Needed until https://github.com/terser/terser/issues/1320 is fixed
-          directives: false,
-        },
+        compress: config?.preserveModuleDirectives
+          ? {
+              // Needed until https://github.com/terser/terser/issues/1320 is fixed
+              directives: false,
+            }
+          : true,
         output: {
           comments: (_node, comment) => {
             const text = comment.value
@@ -130,6 +133,8 @@ export function resolveRollupConfig(
           },
         },
       }),
+    // Allows marking export files with `'use client'` at the top
+    config?.preserveModuleDirectives && preserveDirectives(),
   ].filter(Boolean) as Plugin[]
 
   const userPlugins = config?.rollup?.plugins
@@ -212,6 +217,7 @@ export function resolveRollupConfig(
       minifyInternalExports: minify,
       sourcemap: config?.sourcemap ?? true,
       hoistTransitiveImports: false,
+      preserveModules: config?.preserveModuleDirectives ? true : false,
     },
   }
 }
diff --git a/src/node/tasks/rollup/rollupTask.ts b/src/node/tasks/rollup/rollupTask.ts
@@ -114,6 +114,26 @@ async function execPromise(ctx: BuildContext, task: RollupTask) {
     const bundle = await rollup({
       ...inputOptions,
       onwarn(warning) {
+        if (
+          // Ignore the directive warning until the preserveDirectives plugin does it automatically: https://github.com/Ephem/rollup-plugin-preserve-directives#rollup-plugin-preserve-directives-warning
+          warning.message.includes(
+            'Module level directives cause errors when bundled, "use client" in',
+          )
+        ) {
+          // If the preserve option isn't enabled, then extend the message with a note about how to enable
+          if (!ctx.config?.preserveModuleDirectives) {
+            consoleSpy.messages.push({
+              type: 'warn',
+              code: warning.code,
+              args: [
+                `${warning.message} You can preserve it by setting "preserveModuleDirectives: true" in your "package.config.ts"`,
+              ],
+            })
+          }
+
+          return
+        }
+
         consoleSpy.messages.push({
           type: 'warn',
           code: warning.code,