Merge pull request #19226 from storybookjs/tech/ensure-esbuild-react-runtime

fix react runtime for addons in manager

code/lib/builder-manager/src/index.ts

@@ -8,7 +8,7 @@ import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
 import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
 import aliasPlugin from 'esbuild-plugin-alias';
 
-import { renderHTML } from './utils/template';
+import { getTemplatePath, renderHTML } from './utils/template';
 import { definitions } from './utils/globals';
 import {
   BuilderBuildResult,
@@ -28,9 +28,10 @@ export let compilation: Compilation;
 let asyncIterator: ReturnType<StarterFunction> | ReturnType<BuilderFunction>;
 
 export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
-  const [addonsEntryPoints, customManagerEntryPoint] = await Promise.all([
+  const [addonsEntryPoints, customManagerEntryPoint, tsconfigPath] = await Promise.all([
     options.presets.apply('managerEntries', []),
     safeResolve(join(options.configDir, 'manager')),
+    getTemplatePath('addon.tsconfig.json'),
   ]);
 
   return {
@@ -57,6 +58,13 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
     minify: false,
     sourcemap: true,
 
+    jsxFactory: 'React.createElement',
+    jsxFragment: 'React.Fragment',
+    jsx: 'transform',
+    jsxImportSource: 'react',
+
+    tsconfig: tsconfigPath,
+
     legalComments: 'external',
     plugins: [
       aliasPlugin({

code/lib/builder-manager/templates/addon.tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxImportSource": "react"
+  }
+}

code/lib/ui/scripts/generate-exports-file.ts

@@ -4,15 +4,14 @@ import path from 'path';
 import shelljs from 'shelljs';
 import { dedent } from 'ts-dedent';
 
-const remove = (regex?: RegExp) => (input: string) =>
-  !(input === 'default' || (regex && regex.test(input)));
+const remove = () => (input: string) => input !== 'default';
 
 const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts');
 
 const run = async () => {
   const { values } = await import('../src/globals/runtime');
   const data = Object.entries(values).reduce<Record<string, string[]>>((acc, [key, value]) => {
-    acc[key] = Object.keys(value).filter(remove(/^__/));
+    acc[key] = Object.keys(value).filter(remove());
     return acc;
   }, {});
 

code/lib/ui/src/globals/exports.ts

@@ -11,6 +11,7 @@ export default {
     'PureComponent',
     'StrictMode',
     'Suspense',
+    '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
     'cloneElement',
     'createContext',
     'createElement',
@@ -33,6 +34,7 @@ export default {
     'version',
   ],
   'react-dom': [
+    '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
     'createPortal',
     'findDOMNode',
     'flushSync',