Merge branch 'next' into tech/vue-e2e-fix

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/cli/src/generators/baseGenerator.ts

@@ -205,7 +205,7 @@ export async function baseGenerator(
       : {}),
   });
 
-  await configurePreview(renderer, options.commonJs);
+  await configurePreview(renderer);
 
   if (addComponents) {
     await copyComponents(renderer, language);

code/lib/cli/src/generators/configure.ts

@@ -64,9 +64,9 @@ const frameworkToPreviewParts: Partial<Record<SupportedRenderers, any>> = {
   },
 };
 
-export async function configurePreview(framework: SupportedRenderers, commonJs: boolean) {
+export async function configurePreview(framework: SupportedRenderers) {
   const { prefix = '', extraParameters = '' } = frameworkToPreviewParts[framework] || {};
-  const previewPath = `./.storybook/preview.${commonJs ? 'cjs' : 'js'}`;
+  const previewPath = `./.storybook/preview.js`;
 
   // If the framework template included a preview then we have nothing to do
   if (await fse.pathExists(previewPath)) {

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',

docs/snippets/react/your-component.js.mdx

@@ -6,7 +6,7 @@ import { YourComponent } from './YourComponent';
 //👇 This default export determines where your story goes in the story list
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/eact/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',