fix: flag esm build + view component client only, simplify rollup config

package.json

@@ -90,10 +90,10 @@
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@react-three/fiber": "^8.0.8",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@storybook/addon-actions": "^7.0.12",
     "@storybook/addon-controls": "^7.0.12",
     "@storybook/addon-essentials": "^7.0.12",
@@ -129,9 +129,10 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.78.1",
-    "rollup-plugin-glslify": "^1.3.0",
-    "rollup-plugin-multi-input": "^1.3.1",
+    "rollup": "^4.9.6",
+    "rollup-plugin-glslify": "^1.3.1",
+    "rollup-plugin-multi-input": "^1.4.1",
+    "rollup-plugin-preserve-directives": "^0.3.1",
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^21.0.6",
     "serve": "^14.2.0",

rollup.config.mjs

@@ -0,0 +1,90 @@
+import path from 'path'
+import babel from '@rollup/plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
+import json from '@rollup/plugin-json'
+import glslify from 'rollup-plugin-glslify'
+import multiInput from 'rollup-plugin-multi-input'
+import { terser } from 'rollup-plugin-terser'
+import preserveDirectives from 'rollup-plugin-preserve-directives'
+
+const root = process.platform === 'win32' ? path.resolve('/') : '/'
+const external = (id) => !id.startsWith('.') && !id.startsWith(root)
+const extensions = ['.js', '.jsx', '.ts', '.tsx', '.json']
+
+function getBabelOptions({ useESModules }) {
+  return {
+    babelrc: false,
+    extensions,
+    exclude: '**/node_modules/**',
+    babelHelpers: 'runtime',
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          include: [
+            '@babel/plugin-proposal-class-properties',
+            '@babel/plugin-proposal-optional-chaining',
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+            '@babel/plugin-proposal-numeric-separator',
+            '@babel/plugin-proposal-logical-assignment-operators',
+          ],
+          bugfixes: true,
+          loose: true,
+          modules: false,
+          targets: '> 1%, not dead, not ie 11, not op_mini all',
+        },
+      ],
+      '@babel/preset-react',
+      '@babel/preset-typescript',
+    ],
+    plugins: [
+      '@babel/plugin-proposal-nullish-coalescing-operator',
+      ['@babel/transform-runtime', { regenerator: false, useESModules }],
+    ],
+  }
+}
+
+function onwarn(warning, warn) {
+  if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) return
+  warn(warning)
+}
+
+export default [
+  {
+    onwarn,
+    input: `./src/index.ts`,
+    output: { dir: `dist`, format: 'esm', preserveModules: true },
+    external,
+    plugins: [
+      json(),
+      glslify(),
+      babel(getBabelOptions({ useESModules: true })),
+      resolve({ extensions }),
+      preserveDirectives(),
+    ],
+  },
+  {
+    onwarn,
+    input: ['src/**/*.ts', 'src/**/*.tsx', '!src/index.ts'],
+    output: { dir: `dist`, format: 'cjs', preserveModules: true },
+    external,
+    plugins: [
+      multiInput.default({
+        transformOutputPath: (output) => output.replace(/\.[^/.]+$/, '.cjs.js'),
+      }),
+      json(),
+      glslify(),
+      babel(getBabelOptions({ useESModules: false })),
+      resolve({ extensions }),
+      terser(),
+      preserveDirectives(),
+    ],
+  },
+  {
+    onwarn,
+    input: `./src/index.ts`,
+    output: { file: `dist/index.cjs.js`, format: 'cjs' },
+    external,
+    plugins: [json(), glslify(), babel(getBabelOptions({ useESModules: false })), resolve({ extensions }), terser()],
+  },
+]

src/index.ts

@@ -1 +1,3 @@
+'use client'
+
 export * from './web'

src/web/View.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as THREE from 'three'
 import { RootState, context, createPortal, useFrame, useThree } from '@react-three/fiber'