feat(build): set some files to the client only for React Server Compo…

…nents use case (pmndrs#2245) * feat: set some files to the client only * fix: order * fix: code * fix: code * fix: lock * fix: lock --------- Co-authored-by: Daishi Kato <[email protected]>
socar-gia · Nov 25, 2023 · de67e40 · de67e40
1 parent 18fea39
commit de67e40
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -69,8 +69,8 @@
     "build:babel:preset": "rollup -c --config-babel_preset",
     "build:vanilla": "rollup -c --config-vanilla",
     "build:vanilla:utils": "rollup -c --config-vanilla_utils",
-    "build:react": "rollup -c --config-react",
-    "build:react:utils": "rollup -c --config-react_utils",
+    "build:react": "rollup -c --config-react --client-only",
+    "build:react:utils": "rollup -c --config-react_utils --client-only",
     "postbuild": "yarn patch-d-ts && yarn copy && yarn patch-ts3.8 && yarn patch-old-ts && yarn patch-esm-ts && yarn patch-readme",
     "prettier": "prettier '*.{js,json,md}' '{src,tests,benchmarks,docs}/**/*.{ts,tsx,md,mdx}' --write",
     "prettier:ci": "prettier '*.{js,json,md}' '{src,tests,benchmarks,docs}/**/*.{ts,tsx,md,mdx}' --list-different",
@@ -155,6 +155,7 @@
     "react-dom": "^18.2.0",
     "redux": "^4.2.1",
     "rollup": "^4.3.0",
+    "rollup-plugin-banner2": "^1.2.2",
     "rollup-plugin-esbuild": "^6.1.0",
     "rxjs": "^7.8.1",
     "shx": "^0.3.4",
@@ -170,11 +171,12 @@
     "react": ">=17.0.0"
   },
   "peerDependenciesMeta": {
-    "react": {
+    "@types/react": {
       "optional": true
     },
-    "@types/react": {
+    "react": {
       "optional": true
     }
-  }
+  },
+  "packageManager": "[email protected]"
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -5,6 +5,7 @@ const resolve = require('@rollup/plugin-node-resolve')
 const replace = require('@rollup/plugin-replace')
 const terser = require('@rollup/plugin-terser')
 const typescript = require('@rollup/plugin-typescript')
+const banner2 = require('rollup-plugin-banner2')
 const { default: esbuild } = require('rollup-plugin-esbuild')
 const createBabelConfig = require('./babel.config.js')
 
@@ -21,6 +22,8 @@ function external(id) {
   return !id.startsWith('.') && !id.startsWith(root)
 }
 
+const cscComment = `'use client';\n`
+
 function getBabelOptions(targets) {
   return {
     ...createBabelConfig({ env: (env) => env === 'build' }, targets),
@@ -55,7 +58,7 @@ function createDeclarationConfig(input, output) {
   }
 }
 
-function createESMConfig(input, output) {
+function createESMConfig(input, output, clientOnly) {
   return {
     input,
     output: { file: output, format: 'esm' },
@@ -76,11 +79,12 @@ function createESMConfig(input, output) {
         preventAssignment: true,
       }),
       getEsbuild('node12'),
+      banner2(() => clientOnly && cscComment),
     ],
   }
 }
 
-function createCommonJSConfig(input, output) {
+function createCommonJSConfig(input, output, clientOnly) {
   return {
     input,
     output: { file: `${output}.js`, format: 'cjs' },
@@ -94,11 +98,12 @@ function createCommonJSConfig(input, output) {
         preventAssignment: true,
       }),
       babelPlugin(getBabelOptions({ ie: 11 })),
+      banner2(() => clientOnly && cscComment),
     ],
   }
 }
 
-function createUMDConfig(input, output, env) {
+function createUMDConfig(input, output, env, clientOnly) {
   let name = 'jotai'
   const fileName = output.slice('dist/umd/'.length)
   const capitalize = (s) => s.slice(0, 1).toUpperCase() + s.slice(1)
@@ -130,12 +135,13 @@ function createUMDConfig(input, output, env) {
         preventAssignment: true,
       }),
       babelPlugin(getBabelOptions({ ie: 11 })),
+      banner2(() => clientOnly && cscComment),
       ...(env === 'production' ? [terser()] : []),
     ],
   }
 }
 
-function createSystemConfig(input, output, env) {
+function createSystemConfig(input, output, env, clientOnly) {
   return {
     input,
     output: {
@@ -152,25 +158,37 @@ function createSystemConfig(input, output, env) {
         preventAssignment: true,
       }),
       getEsbuild('node12', env),
+      banner2(() => clientOnly && cscComment),
     ],
   }
 }
 
 module.exports = function (args) {
   let c = Object.keys(args).find((key) => key.startsWith('config-'))
+  const clientOnly = Object.keys(args).some((key) => key === 'client-only')
   if (c) {
     c = c.slice('config-'.length).replace(/_/g, '/')
   } else {
     c = 'index'
   }
   return [
     ...(c === 'index' ? [createDeclarationConfig(`src/${c}.ts`, 'dist')] : []),
-    createCommonJSConfig(`src/${c}.ts`, `dist/${c}`),
-    createESMConfig(`src/${c}.ts`, `dist/esm/${c}.mjs`),
-    createUMDConfig(`src/${c}.ts`, `dist/umd/${c}`, 'development'),
-    createUMDConfig(`src/${c}.ts`, `dist/umd/${c}`, 'production'),
-    createSystemConfig(`src/${c}.ts`, `dist/system/${c}`, 'development'),
-    createSystemConfig(`src/${c}.ts`, `dist/system/${c}`, 'production'),
+    createCommonJSConfig(`src/${c}.ts`, `dist/${c}`, clientOnly),
+    createESMConfig(`src/${c}.ts`, `dist/esm/${c}.mjs`, clientOnly),
+    createUMDConfig(`src/${c}.ts`, `dist/umd/${c}`, 'development', clientOnly),
+    createUMDConfig(`src/${c}.ts`, `dist/umd/${c}`, 'production', clientOnly),
+    createSystemConfig(
+      `src/${c}.ts`,
+      `dist/system/${c}`,
+      'development',
+      clientOnly,
+    ),
+    createSystemConfig(
+      `src/${c}.ts`,
+      `dist/system/${c}`,
+      'production',
+      clientOnly,
+    ),
   ]
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -3807,6 +3807,13 @@ lz-string@^1.5.0:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
+magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 magic-string@^0.30.1, magic-string@^0.30.3:
   version "0.30.5"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
@@ -4403,6 +4410,13 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rollup-plugin-banner2@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-banner2/-/rollup-plugin-banner2-1.2.2.tgz#a73323035800c7af11c34514f1a55298684bff47"
+  integrity sha512-ShlyRFlJfh7fxHT0rkmIxBv+lIWfdvaWcZmra7xAQFGAHHnd7f93zoa0wdDWHrguR9vR+BxWKToabR6DJQHC9g==
+  dependencies:
+    magic-string "^0.25.7"
+
 rollup-plugin-esbuild@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-esbuild/-/rollup-plugin-esbuild-6.1.0.tgz#966d297fe9edea3e6ba5dfd8ca3208825c82d7ce"
@@ -4650,6 +4664,11 @@ source-map@^0.6.0, source-map@^0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 [email protected]:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"