From 1cfc7203af2dd81d9484d1a569c9fb4e31396ea0 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 12 Oct 2022 13:16:11 +1100 Subject: [PATCH] Undo accidental push of tom/sb-557-typescript-2 --- code/addons/docs/src/preset.ts | 11 +--- code/lib/cli/rendererAssets/preact/Button.jsx | 2 + .../rendererAssets/preact/Button.stories.jsx | 2 + code/lib/cli/rendererAssets/preact/Header.jsx | 10 ++-- .../rendererAssets/preact/Header.stories.jsx | 2 + code/lib/cli/rendererAssets/preact/Page.jsx | 2 + .../rendererAssets/preact/Page.stories.jsx | 2 + code/lib/cli/src/repro-templates.ts | 60 +++++-------------- code/presets/preact-webpack/src/index.ts | 16 ++++- code/renderers/preact/src/config.ts | 2 +- code/renderers/preact/src/render.tsx | 18 ------ .../preact/template/components/Button.jsx | 14 ----- .../preact/template/components/Form.jsx | 38 ------------ .../preact/template/components/Html.jsx | 10 ---- .../preact/template/components/Pre.jsx | 21 ------- .../preact/template/components/index.js | 9 --- .../preact/template/stories/.gitkeep | 0 .../next-repro-generators/generate-repros.ts | 6 +- 18 files changed, 52 insertions(+), 173 deletions(-) delete mode 100644 code/renderers/preact/template/components/Button.jsx delete mode 100644 code/renderers/preact/template/components/Form.jsx delete mode 100644 code/renderers/preact/template/components/Html.jsx delete mode 100644 code/renderers/preact/template/components/Pre.jsx delete mode 100644 code/renderers/preact/template/components/index.js delete mode 100644 code/renderers/preact/template/stories/.gitkeep diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index b824eadabc2b..9516671597cb 100644 --- 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 index eefda2bffe3f..83ee57533ddc 100644 --- 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 index 080a4bfc3d61..f047a64a4508 100644 --- 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 index 9a81e7788225..06580039741c 100644 --- 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 }) => (
{user ? ( - <> + Welcome, {user.name}!
diff --git a/code/lib/cli/rendererAssets/preact/Header.stories.jsx b/code/lib/cli/rendererAssets/preact/Header.stories.jsx index 19f58b372ed6..c4bb91225001 100644 --- 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 index a88603626679..4b04da0af2b3 100644 --- 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 index c79af4904740..f41bab61b7a9 100644 --- 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 index ddbf1e558a96..e9e05cebd960 100644 --- 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 index 72d6f12c46a7..a64e9d1771a8 100644 --- 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 index 73bae9076ba3..7e2023a437d5 100644 --- 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 index a3328dac2577..0ed43f5ebf06 100644 --- 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 = (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 ; -}; - 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 deleted file mode 100644 index 6115046e83ec..000000000000 --- a/code/renderers/preact/template/components/Button.jsx +++ /dev/null @@ -1,14 +0,0 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - -export const Button = ({ onClick, children }) => ( - -); - -Button.propTypes = { - onClick: PropTypes.func.isRequired, - children: PropTypes.node.isRequired, -}; diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx deleted file mode 100644 index f12e905f0dba..000000000000 --- a/code/renderers/preact/template/components/Form.jsx +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; -import { useState } from 'preact/hooks'; - -export const Form = ({ onSuccess }) => { - const [value, setValue] = useState(''); - const [complete, setComplete] = useState(false); - - function onSubmit(event) { - event.preventDefault(); - onSuccess(value); - - setTimeout(() => setComplete(true), 500); - setTimeout(() => setComplete(false), 1500); - } - - return ( -
- - - {complete &&

Completed!!

} -
- ); -}; - -Form.propTypes = { - onSuccess: PropTypes.func.isRequired, -}; diff --git a/code/renderers/preact/template/components/Html.jsx b/code/renderers/preact/template/components/Html.jsx deleted file mode 100644 index 36cff8218890..000000000000 --- a/code/renderers/preact/template/components/Html.jsx +++ /dev/null @@ -1,10 +0,0 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - -// eslint-disable-next-line react/no-danger -export const Html = ({ content }) =>
; - -Html.propTypes = { - content: PropTypes.string.isRequired, -}; diff --git a/code/renderers/preact/template/components/Pre.jsx b/code/renderers/preact/template/components/Pre.jsx deleted file mode 100644 index 7efec93be9d6..000000000000 --- a/code/renderers/preact/template/components/Pre.jsx +++ /dev/null @@ -1,21 +0,0 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - -export const Pre = ({ style, object, text }) => ( - 
-    {object ? JSON.stringify(object, null, 2) : text}
-
-); - -Pre.propTypes = { - style: PropTypes.shape({}), - object: PropTypes.shape({}), - text: PropTypes.string, -}; - -Pre.defaultProps = { - style: {}, - object: null, - text: '', -}; diff --git a/code/renderers/preact/template/components/index.js b/code/renderers/preact/template/components/index.js deleted file mode 100644 index d952d26f9b1f..000000000000 --- a/code/renderers/preact/template/components/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import globalThis from 'global'; - -import { Button } from './Button.jsx'; -import { Pre } from './Pre.jsx'; -import { Form } from './Form.jsx'; -import { Html } from './Html.jsx'; - -globalThis.Components = { Button, Pre, Form, Html }; -globalThis.storybookRenderer = 'preact'; diff --git a/code/renderers/preact/template/stories/.gitkeep b/code/renderers/preact/template/stories/.gitkeep deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/scripts/next-repro-generators/generate-repros.ts b/scripts/next-repro-generators/generate-repros.ts index b565ceba0e49..e816723c3c5d 100755 --- a/scripts/next-repro-generators/generate-repros.ts +++ b/scripts/next-repro-generators/generate-repros.ts @@ -75,7 +75,7 @@ export const runCommand = async (script: string, options: ExecaOptions) => { console.log(`Running command: ${script}`); } - return command(script, { stdout: shouldDebug ? 'inherit' : 'ignore', shell: true, ...options }); + return command(script, { stdout: shouldDebug ? 'inherit' : 'ignore', ...options }); }; const addDocumentation = async ( @@ -122,11 +122,11 @@ const runGenerators = async ( const beforeDir = join(baseDir, BEFORE_DIR_NAME); await emptyDir(baseDir); + await ensureDir(beforeDir); await setupYarn({ cwd: baseDir }); - const scriptWithBeforeDir = script.replace('{{beforeDir}}', beforeDir); - await runCommand(scriptWithBeforeDir, { cwd: baseDir }); + await runCommand(script, { cwd: beforeDir }); await localizeYarnConfigFiles(baseDir, beforeDir);