storybookjs · tmeasday · Oct 12, 2022 · Oct 12, 2022
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
@@ -17,20 +17,11 @@ type BabelParams = {
 };
 function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: BabelParams) {
   const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
-
-  const filteredBabelPlugins = babelPlugins.filter((p: any) => {
-    const name = Array.isArray(p) ? p[0] : p;
-    if (typeof name === 'string') {
-      return !name.includes('plugin-transform-react-jsx');
-    }
-    return true;
-  });
-
   const jsxPlugin = [
     require.resolve('@babel/plugin-transform-react-jsx'),
     { pragma: 'React.createElement', pragmaFrag: 'React.Fragment' },
   ];
-  const plugins = configureJSX ? [...filteredBabelPlugins, jsxPlugin] : babelPlugins;
+  const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
   return {
     // don't use the root babelrc by default (users can override this in mdxBabelOptions)
     babelrc: false,

diff --git a/code/lib/cli/rendererAssets/preact/Button.jsx b/code/lib/cli/rendererAssets/preact/Button.jsx
@@ -1,3 +1,5 @@
+/** @jsx h */
+import { h } from 'preact';
 import PropTypes from 'prop-types';
 import './button.css';
 

diff --git a/code/lib/cli/rendererAssets/preact/Button.stories.jsx b/code/lib/cli/rendererAssets/preact/Button.stories.jsx
@@ -1,3 +1,5 @@
+/** @jsx h */
+import { h } from 'preact';
 import { Button } from './Button';
 
 // More on default export: https://storybook.js.org/docs/preact/writing-stories/introduction#default-export

diff --git a/code/lib/cli/rendererAssets/preact/Header.jsx b/code/lib/cli/rendererAssets/preact/Header.jsx
@@ -1,3 +1,5 @@
+/** @jsx h */
+import { h, Fragment } from 'preact';
 import PropTypes from 'prop-types';
 
 import { Button } from './Button';
@@ -27,17 +29,17 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
       </div>
       <div>
         {user ? (
-          <>
+          <Fragment>
             <span className="welcome">
               Welcome, <b>{user.name}</b>!
             </span>
             <Button size="small" onClick={onLogout} label="Log out" />
-          </>
+          </Fragment>
         ) : (
-          <>
+          <Fragment>
             <Button size="small" onClick={onLogin} label="Log in" />
             <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
+          </Fragment>
         )}
       </div>
     </div>

diff --git a/code/lib/cli/rendererAssets/preact/Header.stories.jsx b/code/lib/cli/rendererAssets/preact/Header.stories.jsx
@@ -1,3 +1,5 @@
+/** @jsx h */
+import { h } from 'preact';
 import { Header } from './Header';
 
 export default {

diff --git a/code/lib/cli/rendererAssets/preact/Page.jsx b/code/lib/cli/rendererAssets/preact/Page.jsx
@@ -1,3 +1,5 @@
+/** @jsx h */
+import { h } from 'preact';
 import { useState } from 'preact/hooks';
 
 import { Header } from './Header';

diff --git a/code/lib/cli/rendererAssets/preact/Page.stories.jsx b/code/lib/cli/rendererAssets/preact/Page.stories.jsx
@@ -1,3 +1,5 @@
+/** @jsx h */
+import { h } from 'preact';
 import { within, userEvent } from '@storybook/testing-library';
 
 import { Page } from './Page';

diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
@@ -1,7 +1,7 @@
 const craTemplates = {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
-    script: 'npx create-react-app {{beforeDir}}',
+    script: 'npx create-react-app .',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/cra',
@@ -11,7 +11,7 @@ const craTemplates = {
   },
   'cra/default-ts': {
     name: 'Create React App (Typescript)',
-    script: 'npx create-react-app {{beforeDir}} --template typescript',
+    script: 'npx create-react-app . --template typescript',
     cadence: ['ci', 'daily', 'weekly'],
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test'],
@@ -26,7 +26,7 @@ const craTemplates = {
 const reactViteTemplates = {
   'react-vite/default-js': {
     name: 'React Vite (JS)',
-    script: 'yarn create vite {{beforeDir}} --template react',
+    script: 'yarn create vite . --template react',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/react-vite',
@@ -36,7 +36,7 @@ const reactViteTemplates = {
   },
   'react-vite/default-ts': {
     name: 'React Vite (TS)',
-    script: 'yarn create vite {{beforeDir}} --template react-ts',
+    script: 'yarn create vite . --template react-ts',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/react-vite',
@@ -49,7 +49,7 @@ const reactViteTemplates = {
 const reactWebpackTemplates = {
   'react-webpack/18-ts': {
     name: 'React Webpack5 (TS)',
-    script: 'yarn create webpack5-react {{beforeDir}}',
+    script: 'yarn create webpack5-react .',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/react-webpack5',
@@ -59,8 +59,7 @@ const reactWebpackTemplates = {
   },
   'react-webpack/17-ts': {
     name: 'React Webpack5 (TS)',
-    script:
-      'yarn create webpack5-react {{beforeDir}} --version-react="17" --version-react-dom="17"',
+    script: 'yarn create webpack5-react . --version-react="17" --version-react-dom="17"',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/react-webpack5',
@@ -73,7 +72,7 @@ const reactWebpackTemplates = {
 const vue3ViteTemplates = {
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
-    script: 'yarn create vite {{beforeDir}} --template vue',
+    script: 'yarn create vite . --template vue',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/vue3-vite',
@@ -83,7 +82,7 @@ const vue3ViteTemplates = {
   },
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
-    script: 'yarn create vite {{beforeDir}} --template vue-ts',
+    script: 'yarn create vite . --template vue-ts',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/vue3-vite',
@@ -100,7 +99,7 @@ const vue2ViteTemplates = {
     // We don't really want to maintain weird custom scripts like this,
     // preferring community bootstrap scripts / generators instead.
     script:
-      'yarn create vite {{beforeDir}} --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
+      'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/vue2-vite',
@@ -113,7 +112,7 @@ const vue2ViteTemplates = {
 const htmlWebpackTemplates = {
   'html-webpack/default': {
     name: 'HTML Webpack5',
-    script: 'yarn create webpack5-html {{beforeDir}}',
+    script: 'yarn create webpack5-html .',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/html-webpack5',
@@ -126,7 +125,7 @@ const htmlWebpackTemplates = {
 const svelteViteTemplates = {
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'yarn create vite {{beforeDir}} --template svelte',
+    script: 'yarn create vite . --template svelte',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/svelte-vite',
@@ -136,7 +135,7 @@ const svelteViteTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'yarn create vite {{beforeDir}} --template svelte-ts',
+    script: 'yarn create vite . --template svelte-ts',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/svelte-vite',
@@ -149,7 +148,7 @@ const svelteViteTemplates = {
 const litViteTemplates = {
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
-    script: 'yarn create vite {{beforeDir}} --template lit',
+    script: 'yarn create vite . --template lit',
     cadence: ['ci', 'daily', 'weekly'] as any,
     expected: {
       framework: '@storybook/web-components-vite',
@@ -159,7 +158,7 @@ const litViteTemplates = {
   },
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
-    script: 'yarn create vite {{beforeDir}} --template lit-ts',
+    script: 'yarn create vite . --template lit-ts',
     cadence: ['ci', 'daily', 'weekly'] as any,
     expected: {
       framework: '@storybook/web-components-vite',
@@ -172,8 +171,7 @@ const litViteTemplates = {
 const vueCliTemplates = {
   'vue-cli/default-js': {
     name: 'Vue-CLI (Default JS)',
-    script:
-      'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge',
+    script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/vue3-webpack5',
@@ -184,7 +182,7 @@ const vueCliTemplates = {
   'vue-cli/vue2-default-js': {
     name: 'Vue-CLI (Vue2 JS)',
     script:
-      'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge --preset=Default\\ (Vue\\ 2)',
+      'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset=Default\\ (Vue\\ 2)',
     cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/vue-webpack5',
@@ -194,31 +192,6 @@ const vueCliTemplates = {
   },
 };
 
-const preactWebpackTemplates = {
-  'preact-webpack5/default-js': {
-    name: 'Preact CLI (Default JS)',
-    script: 'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install',
-    // cadence: ['ci', 'daily', 'weekly'],
-    cadence: [] as string[],
-    expected: {
-      framework: '@storybook/preact-webpack5',
-      renderer: '@storybook/preact',
-      builder: '@storybook/builder-webpack5',
-    },
-  },
-  'preact-webpack5/default-ts': {
-    name: 'Preact CLI (Default TS)',
-    script: 'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install',
-    // cadence: ['ci', 'daily', 'weekly'],
-    cadence: [] as string[],
-    expected: {
-      framework: '@storybook/preact-webpack5',
-      renderer: '@storybook/preact',
-      builder: '@storybook/builder-webpack5',
-    },
-  },
-};
-
 export default {
   ...craTemplates,
   ...reactWebpackTemplates,
@@ -229,7 +202,6 @@ export default {
   ...litViteTemplates,
   ...vueCliTemplates,
   ...htmlWebpackTemplates,
-  ...preactWebpackTemplates,
   // FIXME: missing documentation.json
   // 'angular/latest': {
   //   name: 'Angular (latest)',

diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts
@@ -14,7 +14,7 @@ export const babel: StorybookConfig['babelDefault'] = (config) => {
       ...(config.plugins || []).filter((p) => {
         const name = Array.isArray(p) ? p[0] : p;
         if (typeof name === 'string') {
-          return !name.includes('plugin-transform-react-jsx');
+          return !name.includes('babel-plugin-transform-react-jsx');
         }
         return true;
       }),
@@ -23,6 +23,20 @@ export const babel: StorybookConfig['babelDefault'] = (config) => {
 };
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
+  const rules = config.module?.rules || [];
+  const tsxRule = rules.find((rule) => (rule.test as RegExp).test?.('main.tsx'));
+  tsxRule.use = (tsxRule.use as any).map((entry: any) => {
+    let newPlugins = entry.options.plugins;
+    if (entry.loader?.includes('babel-loader')) {
+      newPlugins = (entry.options as any).plugins.map((plugin: any) => {
+        if (plugin[0]?.includes?.('@babel/plugin-transform-react-jsx')) {
+          return [plugin[0], { importSource: 'preact', runtime: 'automatic' }];
+        }
+        return plugin;
+      });
+    }
+    return { ...entry, options: { ...entry.options, plugins: newPlugins } };
+  });
   return {
     ...config,
     resolve: {

diff --git a/code/renderers/preact/src/config.ts b/code/renderers/preact/src/config.ts
@@ -1,3 +1,3 @@
-export { renderToDOM, render } from './render';
+export { renderToDOM } from './render';
 
 export const parameters = { framework: 'preact' as const };
diff --git a/code/renderers/preact/src/render.tsx b/code/renderers/preact/src/render.tsx
@@ -1,26 +1,8 @@
-/** @jsx h */
 import * as preact from 'preact';
 import { dedent } from 'ts-dedent';
 import type { RenderContext } from '@storybook/store';
-import { ArgsStoryFn } from '@storybook/csf';
-
 import type { StoryFnPreactReturnType, PreactFramework } from './types';
 
-const { h } = preact;
-
-export const render: ArgsStoryFn<PreactFramework> = (args, context) => {
-  const { id, component: Component } = context;
-  if (!Component) {
-    throw new Error(
-      `Unable to render story ${id} as the component annotation is missing from the default export`
-    );
-  }
-
-  // @ts-expect-error I think the type of Component should be Preact.ComponentType, but even that
-  // doens't make TS happy, I suspect because TS wants "react" components.
-  return <Component {...args} />;
-};
-
 let renderedStory: Element;
 
 function preactRender(story: StoryFnPreactReturnType | null, domElement: Element): void {

diff --git a/code/renderers/preact/template/components/Button.jsx b/code/renderers/preact/template/components/Button.jsx
diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx
diff --git a/code/renderers/preact/template/components/Html.jsx b/code/renderers/preact/template/components/Html.jsx