From e7577286f44a3d082a6c9cb66f5d4b5fd2e54c9d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 11 Sep 2022 16:42:47 +0800 Subject: [PATCH 01/33] Vue: Add repro templates for vue-cli --- .circleci/config.yml | 12 ++++++------ code/lib/cli/src/repro-templates.ts | 25 +++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index aa88ad7d9723..25632227f0e6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -477,7 +477,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -497,7 +497,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -513,7 +513,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -533,7 +533,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -549,7 +549,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -565,7 +565,7 @@ jobs: executor: class: medium+ name: sb_playwright - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index 66b9a5835a6e..4f807e1501e7 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -94,11 +94,36 @@ const svelteViteTemplates = { // } }; +const vueCliTemplates = { + 'vue-cli/default-js': { + name: 'Vue-CLI (Default JS)', + script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force', + cadence: ['ci', 'daily', 'weekly'], + expected: { + framework: '@storybook/vue3-webpack5', + renderer: '@storybook/vue3', + builder: '@storybook/builder-webpack5', + }, + }, + 'vue-cli/vue2-default-js': { + name: 'Vue-CLI (Vue2 JS)', + script: + 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --preset="Default (Vue 2)"', + cadence: ['ci', 'daily', 'weekly'], + expected: { + framework: '@storybook/vue-webpack5', + renderer: '@storybook/vue', + builder: '@storybook/builder-webpack5', + }, + }, +}; + export default { ...craTemplates, ...reactViteTemplates, ...vue3ViteTemplates, ...svelteViteTemplates, + ...vueCliTemplates, // FIXME: missing documentation.json // 'angular/latest': { // name: 'Angular (latest)', From 5f220b66b73076f918a59cbd66cb90eb878a486b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 12 Sep 2022 00:40:20 +0800 Subject: [PATCH 02/33] Vue-cli: Don't nuke cwd on init --- code/lib/cli/src/repro-templates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index 4f807e1501e7..771fcf2b6923 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -97,7 +97,7 @@ const svelteViteTemplates = { const vueCliTemplates = { 'vue-cli/default-js': { name: 'Vue-CLI (Default JS)', - script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force', + script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge', cadence: ['ci', 'daily', 'weekly'], expected: { framework: '@storybook/vue3-webpack5', @@ -108,7 +108,7 @@ const vueCliTemplates = { 'vue-cli/vue2-default-js': { name: 'Vue-CLI (Vue2 JS)', script: - 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --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', From 7e84537e7731156e5e0ae9028e99445423a610da Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 12 Sep 2022 01:51:24 +0800 Subject: [PATCH 03/33] Escape vue-cli vue2 preset properly --- code/lib/cli/src/repro-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index 771fcf2b6923..fb5f03bbc153 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -108,7 +108,7 @@ const vueCliTemplates = { 'vue-cli/vue2-default-js': { name: 'Vue-CLI (Vue2 JS)', script: - 'npx -p @vue/cli vue create . --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', From 06d885a249d98a98b43ff4750e18ee14f18dd375 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 12 Sep 2022 09:54:18 +0800 Subject: [PATCH 04/33] Vue2: Add template components for sandbox --- .../vue/template/components/Button.vue | 54 +++++++++++++++++++ .../renderers/vue/template/components/Pre.vue | 29 ++++++++++ .../vue/template/components/button.css | 30 +++++++++++ .../vue/template/components/index.js | 6 +++ 4 files changed, 119 insertions(+) create mode 100644 code/renderers/vue/template/components/Button.vue create mode 100644 code/renderers/vue/template/components/Pre.vue create mode 100644 code/renderers/vue/template/components/button.css create mode 100644 code/renderers/vue/template/components/index.js diff --git a/code/renderers/vue/template/components/Button.vue b/code/renderers/vue/template/components/Button.vue new file mode 100644 index 000000000000..864a2638ac5f --- /dev/null +++ b/code/renderers/vue/template/components/Button.vue @@ -0,0 +1,54 @@ + + + diff --git a/code/renderers/vue/template/components/Pre.vue b/code/renderers/vue/template/components/Pre.vue new file mode 100644 index 000000000000..a5154fe629ee --- /dev/null +++ b/code/renderers/vue/template/components/Pre.vue @@ -0,0 +1,29 @@ + + + diff --git a/code/renderers/vue/template/components/button.css b/code/renderers/vue/template/components/button.css new file mode 100644 index 000000000000..dc91dc76370b --- /dev/null +++ b/code/renderers/vue/template/components/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/code/renderers/vue/template/components/index.js b/code/renderers/vue/template/components/index.js new file mode 100644 index 000000000000..33b27eb659d4 --- /dev/null +++ b/code/renderers/vue/template/components/index.js @@ -0,0 +1,6 @@ +import globalThis from 'global'; + +import Button from './Button.vue'; +import Pre from './Pre.vue'; + +globalThis.Components = { Button, Pre }; From 3dbf5f69002b1ed0b44b5183cefec1f90df5ceef Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 13 Sep 2022 15:08:43 +0800 Subject: [PATCH 05/33] CLI/Vue3: Upgrade vue-loader and install `@vue/compiler-sfc` --- code/lib/cli/src/generators/VUE3/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/generators/VUE3/index.ts b/code/lib/cli/src/generators/VUE3/index.ts index 8a6c44f716ec..3bc35c4fe375 100644 --- a/code/lib/cli/src/generators/VUE3/index.ts +++ b/code/lib/cli/src/generators/VUE3/index.ts @@ -3,7 +3,7 @@ import { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'vue3', { - extraPackages: ['vue-loader@^16.0.0'], + extraPackages: ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0'], }); }; From 60f1aa50ea69b3b0da58888efdcd83148f73b3ba Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 13 Sep 2022 15:13:47 +0800 Subject: [PATCH 06/33] Vue: Fix typo in template Button --- code/renderers/vue/template/components/Button.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/renderers/vue/template/components/Button.vue b/code/renderers/vue/template/components/Button.vue index 864a2638ac5f..aab630b064d3 100644 --- a/code/renderers/vue/template/components/Button.vue +++ b/code/renderers/vue/template/components/Button.vue @@ -1,5 +1,5 @@ diff --git a/code/renderers/vue/template/components/Html.vue b/code/renderers/vue/template/components/Html.vue new file mode 100644 index 000000000000..4547ffb477d8 --- /dev/null +++ b/code/renderers/vue/template/components/Html.vue @@ -0,0 +1,17 @@ + + + diff --git a/code/renderers/vue/template/components/index.js b/code/renderers/vue/template/components/index.js index 33b27eb659d4..1aef69a6655a 100644 --- a/code/renderers/vue/template/components/index.js +++ b/code/renderers/vue/template/components/index.js @@ -2,5 +2,7 @@ import globalThis from 'global'; import Button from './Button.vue'; import Pre from './Pre.vue'; +import Form from './Form.vue'; +import Html from './Html.vue'; -globalThis.Components = { Button, Pre }; +globalThis.Components = { Button, Pre, Form, Html }; From b8380fa5ecff7911476254619dd79aa62dac89fa Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 10:11:12 +0800 Subject: [PATCH 14/33] Vue2: Fix play's within(canvas) by preserving `#storybook-root` --- code/renderers/vue/src/render.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts index 22fec5d8bdbf..060a7e0f4e37 100644 --- a/code/renderers/vue/src/render.ts +++ b/code/renderers/vue/src/render.ts @@ -9,7 +9,7 @@ import type { VueFramework } from './types'; export const COMPONENT = 'STORYBOOK_COMPONENT'; export const VALUES = 'STORYBOOK_VALUES'; -const map = new Map(); +const map = new Map(); type Instance = CombinedVueInstance< Vue, { @@ -21,11 +21,16 @@ type Instance = CombinedVueInstance< Record, unknown >; -const getRoot = (domElement: Element): Instance => { +const getRoot = (domElement: Element): [Instance, Element] => { if (map.has(domElement)) { return map.get(domElement); } + // Create a dummy "target" underneath #storybook-root + // that Vue2 will replace on first render with #storybook-vue-root + const target = document.createElement('div'); + domElement.appendChild(target); + const instance = new Vue({ beforeDestroy() { map.delete(domElement); @@ -37,13 +42,13 @@ const getRoot = (domElement: Element): Instance => { }; }, render(h) { - map.set(domElement, instance); + map.set(domElement, [instance, target]); const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined; - return h('div', { attrs: { id: 'storybook-root' } }, children); + return h('div', { attrs: { id: 'storybook-vue-root' } }, children); }, }); - return instance; + return [instance, target]; }; export const render: ArgsStoryFn = (props, context) => { @@ -92,7 +97,7 @@ export function renderToDOM( }: RenderContext, domElement: Element ) { - const root = getRoot(domElement); + const [root, target] = getRoot(domElement); Vue.config.errorHandler = showException; const element = storyFn(); @@ -116,7 +121,7 @@ export function renderToDOM( root[VALUES] = { ...element.options[VALUES], ...args }; if (!map.has(domElement)) { - root.$mount(domElement); + root.$mount(target); } showMain(); From 1aa24c9722b45ee07f680445f73578e32993b48e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 10:14:01 +0800 Subject: [PATCH 15/33] Update snapshots --- .../core-server/src/__snapshots__/vue-3-cli_preview-dev-posix | 2 +- .../core-server/src/__snapshots__/vue-3-cli_preview-prod-posix | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index 6dcf0e0f0cba..0b6a8cb32416 100644 --- a/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -40,7 +40,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(mjs|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index 4ed666b00a7a..48c4096f1e3e 100644 --- a/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/code/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -39,7 +39,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(mjs|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", From 70fc932a0de05c8887e580d0507507a035cab3d7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 11:05:24 +0800 Subject: [PATCH 16/33] Don't run source snippet e2e on vue-cli's vue3 --- code/e2e-tests/addon-docs.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index cf6c444b54a0..d570276153ac 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -15,7 +15,7 @@ test.describe('addon-docs', () => { test('should provide source snippet', async ({ page }) => { test.skip( - /^vue3/.test(templateName), + /^(vue3|vue-cli\/default-js)/.test(templateName), `Skipping ${templateName}, which does not support dynamic source snippets` ); From 1036cbccbaaf601c5a09ef7232eb232128fc3156 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 11:05:41 +0800 Subject: [PATCH 17/33] Addon-a11y: Fix template stories --- code/addons/a11y/template/stories/parameters.stories.ts | 4 ++-- code/addons/a11y/template/stories/tests.stories.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/code/addons/a11y/template/stories/parameters.stories.ts b/code/addons/a11y/template/stories/parameters.stories.ts index 159a6f07fd25..700c3e4500a8 100644 --- a/code/addons/a11y/template/stories/parameters.stories.ts +++ b/code/addons/a11y/template/stories/parameters.stories.ts @@ -3,7 +3,7 @@ import globalThis from 'global'; export default { component: globalThis.Components.Html, args: { - contents: '', + content: '', }, parameters: { chromatic: { disable: true }, @@ -12,7 +12,7 @@ export default { export const Options = { args: { - contents: + content: '', }, parameters: { diff --git a/code/addons/a11y/template/stories/tests.stories.ts b/code/addons/a11y/template/stories/tests.stories.ts index 6c729ad66e05..03346296518a 100644 --- a/code/addons/a11y/template/stories/tests.stories.ts +++ b/code/addons/a11y/template/stories/tests.stories.ts @@ -3,7 +3,7 @@ import globalThis from 'global'; export default { component: globalThis.Components.Html, args: { - contents: '', + content: '', }, parameters: { chromatic: { disable: true }, @@ -12,7 +12,7 @@ export default { export const Violations = { args: { - contents: ` + content: `

empty heading

@@ -39,7 +39,7 @@ export const Violations = { export const Passes = { args: { - contents: ` + content: `

heading

heading 1

From 398dadcd5b12321d0d90a62d617bb8cc7ca7e612 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 12:05:00 +0800 Subject: [PATCH 18/33] Vue: Fixed Pre template component --- code/renderers/vue/template/components/Pre.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/vue/template/components/Pre.vue b/code/renderers/vue/template/components/Pre.vue index a5154fe629ee..eda0553dce3d 100644 --- a/code/renderers/vue/template/components/Pre.vue +++ b/code/renderers/vue/template/components/Pre.vue @@ -22,7 +22,7 @@ export default { computed: { finalText() { - return props.object ? JSON.stringify(props.object, null, 2) : props.text; + return this.object ? JSON.stringify(this.object, null, 2) : this.text; }, }, }; From 7e7bffb9ae10414ee2935966e8dc627db506706f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 17:42:22 +0800 Subject: [PATCH 19/33] Fix skip logic for vue-cli snippet test --- code/e2e-tests/addon-docs.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index d570276153ac..19277c7c69fd 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -14,8 +14,9 @@ test.describe('addon-docs', () => { }); test('should provide source snippet', async ({ page }) => { + // templateName is e.g. 'Vue-CLI (Default JS)' test.skip( - /^(vue3|vue-cli\/default-js)/.test(templateName), + /^(vue3|vue-cli)/i.test(templateName), `Skipping ${templateName}, which does not support dynamic source snippets` ); From 5dbe451b39656676204a83e5c25e36b6ed6668eb Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 17:42:39 +0800 Subject: [PATCH 20/33] Fix duplicate import --- scripts/sandbox.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts index da37143f9370..36dc21bad97f 100644 --- a/scripts/sandbox.ts +++ b/scripts/sandbox.ts @@ -13,7 +13,6 @@ import { import prompts from 'prompts'; import type { AbortController } from 'node-abort-controller'; import command from 'execa'; -import dedent from 'ts-dedent'; import dedent from 'ts-dedent'; import { createOptions, getOptionsOrPrompt, OptionValues } from './utils/options'; From 5ef17428217176039c8d4c4f589aef740ef66e9a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 17:48:29 +0800 Subject: [PATCH 21/33] Added Vue2 DOM breaking change to MIGRATION guide --- MIGRATION.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index d3a38d5065a0..3e42324c8431 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -21,7 +21,8 @@ - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically) - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters) - [Icons API changed](#icons-api-changed) - - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-preview-annotations) + - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations) + - [Vue2 DOM structure changed](#vue2-dom-structure-changed) - [Docs Changes](#docs-changes) - [Standalone docs files](#standalone-docs-files) - [Referencing stories in docs files](#referencing-stories-in-docs-files) @@ -550,6 +551,12 @@ The preset field `'config'` has been replaced with `'previewAnnotations'`. `'con Additionally, the internal field `'previewEntries'` has been removed. If you need a preview entry, just use a `'previewAnnotations'` file and don't export anything. +#### Vue2 DOM structure changed + +In 6.x, `@storybook/vue` would replace the "root" element (formerly `#root`, now `#storybook-root`) with a new node that contains the rendered children. This was problematic because it broke the `play` function, which often starts with `within(canvasElement)` and the old `canvasElement` would get replaced out from under the play function. + +In 7.0, `@storybook/vue` now leaves `#storybook-root` alone, and creates a new "dummy node" called `#storybook-vue-root` beneath it. This will break DOM snapshots moving from 6.5 to 7.0, but shouldn't have any other negative effects. + ### Docs Changes The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories. From 7571d14380d435258340aceb1cffde9095cf0ad3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 15 Sep 2022 20:06:00 +0800 Subject: [PATCH 22/33] CLI: Don't add babel dependencies --- code/lib/cli/src/generators/baseGenerator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 910bbf64a720..9c486db6abd4 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -15,7 +15,7 @@ const defaultOptions: FrameworkOptions = { staticDir: undefined, addScripts: true, addComponents: true, - addBabel: true, + addBabel: false, addESLint: false, extraMain: undefined, framework: undefined, From cb4b2059e16521ec4bef12111d1feb361ed52527 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 16 Sep 2022 02:42:00 +0800 Subject: [PATCH 23/33] Fix stories --- code/lib/store/template/stories/rendering.stories.ts | 2 +- code/lib/store/template/stories/title.stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/store/template/stories/rendering.stories.ts b/code/lib/store/template/stories/rendering.stories.ts index f7388fe59d61..c8e069e893fb 100644 --- a/code/lib/store/template/stories/rendering.stories.ts +++ b/code/lib/store/template/stories/rendering.stories.ts @@ -25,7 +25,7 @@ export const ForceReRender = { export const ChangeArgs = { play: async ({ canvasElement, id }: PlayFunctionContext) => { - // const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; + const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; const button = await within(canvasElement).findByRole('button'); await button.focus(); await expect(button).toHaveFocus(); diff --git a/code/lib/store/template/stories/title.stories.ts b/code/lib/store/template/stories/title.stories.ts index f3f98d05420f..41be4095c5d9 100644 --- a/code/lib/store/template/stories/title.stories.ts +++ b/code/lib/store/template/stories/title.stories.ts @@ -10,6 +10,6 @@ export default { export const Default = { play: async ({ title }: PlayFunctionContext) => { - await expect(title).toBe('lib/store/manual title'); + await expect(title).toBe('manual title'); }, }; From 000e6a1969a9ae96cdef0988d33481036e50413f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 16 Sep 2022 10:56:27 +0800 Subject: [PATCH 24/33] Actions/Interactions: Identify actions by isAction to fix production instrumentation --- code/addons/actions/src/preview/action.ts | 1 + code/addons/interactions/src/preset/preview.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/actions/src/preview/action.ts b/code/addons/actions/src/preview/action.ts index b0c874e41cbd..89505ceead39 100644 --- a/code/addons/actions/src/preview/action.ts +++ b/code/addons/actions/src/preview/action.ts @@ -64,6 +64,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti }; channel.emit(EVENT_ID, actionDisplayToEmit); }; + handler.isAction = true; return handler; } diff --git a/code/addons/interactions/src/preset/preview.ts b/code/addons/interactions/src/preset/preview.ts index 6995d3037159..6525e672a4d7 100644 --- a/code/addons/interactions/src/preset/preview.ts +++ b/code/addons/interactions/src/preset/preview.ts @@ -37,7 +37,7 @@ const addSpies = (id: string, val: any, key?: string): any => { if (Array.isArray(val)) { return val.map((item, index) => addSpies(id, item, `${key}[${index}]`)); } - if (typeof val === 'function' && val.name === 'actionHandler') { + if (typeof val === 'function' && val.isAction) { Object.defineProperty(val, 'name', { value: key, writable: false }); Object.defineProperty(val, '__storyId__', { value: id, writable: false }); const spy = action(val); From 18709fcdfcdd710c194d628f9afde3b51ca1a847 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 16 Sep 2022 16:28:33 +0800 Subject: [PATCH 25/33] Task: Prefix chromatic junit keys with templateKey --- scripts/tasks/chromatic.ts | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/scripts/tasks/chromatic.ts b/scripts/tasks/chromatic.ts index 1d5197f6918c..8e33d9baa23a 100644 --- a/scripts/tasks/chromatic.ts +++ b/scripts/tasks/chromatic.ts @@ -1,3 +1,4 @@ +import fs from 'fs-extra'; import type { Task } from '../task'; import { exec } from '../utils/exec'; @@ -10,13 +11,21 @@ export const chromatic: Task = { async run(templateKey, { sandboxDir, builtSandboxDir, junitFilename }) { const tokenEnvVarName = `CHROMATIC_TOKEN_${templateKey.toUpperCase().replace(/\/|-/g, '_')}`; const token = process.env[tokenEnvVarName]; - return exec( - `npx chromatic \ - --exit-zero-on-changes \ - --storybook-build-dir=${builtSandboxDir} \ - --junit-report=${junitFilename} \ - --projectToken=${token}`, - { cwd: sandboxDir } - ); + try { + await exec( + `npx chromatic \ + --exit-zero-on-changes \ + --storybook-build-dir=${builtSandboxDir} \ + --junit-report=${junitFilename} \ + --projectToken=${token}`, + { cwd: sandboxDir } + ); + } finally { + if (fs.existsSync(junitFilename)) { + const junitXml = await (await fs.readFile(junitFilename)).toString(); + const prefixedXml = junitXml.replace(/classname="(.*)"/g, `classname="${templateKey} $1"`); + await fs.writeFile(junitFilename, prefixedXml); + } + } }, }; From b9add15fee717452bdb2393e08925daba6d452f5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Sep 2022 10:14:37 +0800 Subject: [PATCH 26/33] Vue: Disable Vue2 repro template until rendering is fixed --- .circleci/config.yml | 12 ++++++------ code/lib/cli/src/repro-templates.ts | 25 ++++++++++++++----------- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c1939a556d6e..c0d16e74c37e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -477,7 +477,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 9 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -497,7 +497,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 9 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -513,7 +513,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 9 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -533,7 +533,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 9 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -549,7 +549,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 9 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -565,7 +565,7 @@ jobs: executor: class: medium+ name: sb_playwright - parallelism: 9 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index fb5f03bbc153..8910264bc56c 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -105,17 +105,20 @@ const vueCliTemplates = { builder: '@storybook/builder-webpack5', }, }, - 'vue-cli/vue2-default-js': { - name: 'Vue-CLI (Vue2 JS)', - script: - 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset=Default\\ (Vue\\ 2)', - cadence: ['ci', 'daily', 'weekly'], - expected: { - framework: '@storybook/vue-webpack5', - renderer: '@storybook/vue', - builder: '@storybook/builder-webpack5', - }, - }, + // + // FIXME: https://github.com/storybookjs/storybook/issues/19204 + // + // 'vue-cli/vue2-default-js': { + // name: 'Vue-CLI (Vue2 JS)', + // script: + // 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset=Default\\ (Vue\\ 2)', + // cadence: ['ci', 'daily', 'weekly'], + // expected: { + // framework: '@storybook/vue-webpack5', + // renderer: '@storybook/vue', + // builder: '@storybook/builder-webpack5', + // }, + // }, }; export default { From b6133728405ac1d2f97c489e1d7c36578499728d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Sep 2022 10:18:43 +0800 Subject: [PATCH 27/33] Fix location of store manual title story --- code/lib/store/template/stories/title.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/store/template/stories/title.stories.ts b/code/lib/store/template/stories/title.stories.ts index 41be4095c5d9..2b185006dbd1 100644 --- a/code/lib/store/template/stories/title.stories.ts +++ b/code/lib/store/template/stories/title.stories.ts @@ -4,12 +4,12 @@ import { PlayFunctionContext } from '@storybook/csf'; export default { component: globalThis.Components.Pre, - title: 'manual title', + title: 'lib/store/manual title', args: { text: 'No content' }, }; export const Default = { play: async ({ title }: PlayFunctionContext) => { - await expect(title).toBe('manual title'); + await expect(title).toBe('lib/store/manual title'); }, }; From 150cf37d3c8cf825235f0c54b810ed5bc6521a24 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Sep 2022 10:27:30 +0800 Subject: [PATCH 28/33] Skip story re-rendering test for vue3/svelte --- code/lib/store/template/stories/rendering.stories.ts | 4 ++++ code/renderers/react/template/components/index.js | 1 + code/renderers/svelte/template/components/index.js | 1 + code/renderers/vue/template/components/index.js | 1 + code/renderers/vue3/template/components/index.js | 1 + 5 files changed, 8 insertions(+) diff --git a/code/lib/store/template/stories/rendering.stories.ts b/code/lib/store/template/stories/rendering.stories.ts index c8e069e893fb..455629a231b6 100644 --- a/code/lib/store/template/stories/rendering.stories.ts +++ b/code/lib/store/template/stories/rendering.stories.ts @@ -30,6 +30,10 @@ export const ChangeArgs = { await button.focus(); await expect(button).toHaveFocus(); + // Vue3: https://github.com/storybookjs/storybook/issues/13913 + // Svelte: https://github.com/storybookjs/storybook/issues/19205 + if (['vue3', 'svelte'].includes(globalThis.storybookRenderer)) return; + // When we change the args to the button, it should not rerender await channel.emit('updateStoryArgs', { storyId: id, updatedArgs: { children: 'New Text' } }); await within(canvasElement).findByText(/New Text/); diff --git a/code/renderers/react/template/components/index.js b/code/renderers/react/template/components/index.js index 2f9e0f79a14d..6fa730a7775b 100644 --- a/code/renderers/react/template/components/index.js +++ b/code/renderers/react/template/components/index.js @@ -6,3 +6,4 @@ import { Form } from './Form.jsx'; import { Html } from './Html.jsx'; globalThis.Components = { Button, Pre, Form, Html }; +globalThis.storybookRenderer = 'vue'; diff --git a/code/renderers/svelte/template/components/index.js b/code/renderers/svelte/template/components/index.js index 1dd45137a0d7..e01d07856369 100644 --- a/code/renderers/svelte/template/components/index.js +++ b/code/renderers/svelte/template/components/index.js @@ -6,3 +6,4 @@ import Form from './Form.svelte'; import Html from './Html.svelte'; globalThis.Components = { Button, Pre, Form, Html }; +globalThis.storybookRenderer = 'svelte'; diff --git a/code/renderers/vue/template/components/index.js b/code/renderers/vue/template/components/index.js index 1aef69a6655a..5bb98ddcd197 100644 --- a/code/renderers/vue/template/components/index.js +++ b/code/renderers/vue/template/components/index.js @@ -6,3 +6,4 @@ import Form from './Form.vue'; import Html from './Html.vue'; globalThis.Components = { Button, Pre, Form, Html }; +globalThis.storybookRenderer = 'vue'; diff --git a/code/renderers/vue3/template/components/index.js b/code/renderers/vue3/template/components/index.js index 1aef69a6655a..5bb98ddcd197 100644 --- a/code/renderers/vue3/template/components/index.js +++ b/code/renderers/vue3/template/components/index.js @@ -6,3 +6,4 @@ import Form from './Form.vue'; import Html from './Html.vue'; globalThis.Components = { Button, Pre, Form, Html }; +globalThis.storybookRenderer = 'vue'; From e5de18d4c4baa19a2f72673a1b80116c809b9115 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Sep 2022 10:56:11 +0800 Subject: [PATCH 29/33] Fix typo --- code/renderers/vue3/template/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/vue3/template/components/index.js b/code/renderers/vue3/template/components/index.js index 5bb98ddcd197..af1301e7e2ae 100644 --- a/code/renderers/vue3/template/components/index.js +++ b/code/renderers/vue3/template/components/index.js @@ -6,4 +6,4 @@ import Form from './Form.vue'; import Html from './Html.vue'; globalThis.Components = { Button, Pre, Form, Html }; -globalThis.storybookRenderer = 'vue'; +globalThis.storybookRenderer = 'vue3'; From 485758861453a132b375fb268106d98835fa3287 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 18 Sep 2022 01:11:55 +0800 Subject: [PATCH 30/33] Scripts: Prefix junit into base task runner --- scripts/task.ts | 9 ++++++++- scripts/tasks/chromatic.ts | 20 ++++++-------------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/scripts/task.ts b/scripts/task.ts index 7805f9008027..857e9a810166 100644 --- a/scripts/task.ts +++ b/scripts/task.ts @@ -1,6 +1,6 @@ /* eslint-disable no-await-in-loop, no-restricted-syntax */ import { getJunitXml } from 'junit-xml'; -import { outputFile } from 'fs-extra'; +import { outputFile, existsSync, readFile } from 'fs-extra'; import { join, resolve } from 'path'; import { createOptions, getOptionsOrPrompt } from './utils/options'; @@ -158,6 +158,13 @@ async function runTask( if (junit && !task.junit) await writeJunitXml(taskKey, templateKey, start, err); throw err; + } finally { + const { junitFilename } = details; + if (existsSync(junitFilename)) { + const junitXml = await (await readFile(junitFilename)).toString(); + const prefixedXml = junitXml.replace(/classname="(.*)"/g, `classname="${templateKey} $1"`); + await outputFile(junitFilename, prefixedXml); + } } } diff --git a/scripts/tasks/chromatic.ts b/scripts/tasks/chromatic.ts index f30892fc28f9..91dfa8156da1 100644 --- a/scripts/tasks/chromatic.ts +++ b/scripts/tasks/chromatic.ts @@ -1,4 +1,3 @@ -import fs from 'fs-extra'; import type { Task } from '../task'; import { exec } from '../utils/exec'; @@ -11,22 +10,15 @@ export const chromatic: Task = { async run(templateKey, { sandboxDir, builtSandboxDir, junitFilename }) { const tokenEnvVarName = `CHROMATIC_TOKEN_${templateKey.toUpperCase().replace(/\/|-/g, '_')}`; const token = process.env[tokenEnvVarName]; - try { - await exec( - `npx chromatic \ + + await exec( + `npx chromatic \ --exit-zero-on-changes \ --storybook-build-dir=${builtSandboxDir} \ --junit-report=${junitFilename} \ --projectToken=${token}`, - { cwd: sandboxDir }, - { debug: true } - ); - } finally { - if (fs.existsSync(junitFilename)) { - const junitXml = await (await fs.readFile(junitFilename)).toString(); - const prefixedXml = junitXml.replace(/classname="(.*)"/g, `classname="${templateKey} $1"`); - await fs.writeFile(junitFilename, prefixedXml); - } - } + { cwd: sandboxDir }, + { debug: true } + ); }, }; From c2042c393adec14a343c5e3871ed0cd0b0c15b75 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 18 Sep 2022 01:54:09 +0800 Subject: [PATCH 31/33] fix typo --- code/renderers/react/template/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/react/template/components/index.js b/code/renderers/react/template/components/index.js index 6fa730a7775b..dd5fc33a43bc 100644 --- a/code/renderers/react/template/components/index.js +++ b/code/renderers/react/template/components/index.js @@ -6,4 +6,4 @@ import { Form } from './Form.jsx'; import { Html } from './Html.jsx'; globalThis.Components = { Button, Pre, Form, Html }; -globalThis.storybookRenderer = 'vue'; +globalThis.storybookRenderer = 'react'; From aa3a8ea253b73b7c29d617bebc0f710486db15ce Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 18 Sep 2022 17:26:48 +0800 Subject: [PATCH 32/33] Revert "Vue2: Fix play's within(canvas) by preserving `#storybook-root`" This reverts commit b8380fa5ecff7911476254619dd79aa62dac89fa. --- code/renderers/vue/src/render.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts index 060a7e0f4e37..22fec5d8bdbf 100644 --- a/code/renderers/vue/src/render.ts +++ b/code/renderers/vue/src/render.ts @@ -9,7 +9,7 @@ import type { VueFramework } from './types'; export const COMPONENT = 'STORYBOOK_COMPONENT'; export const VALUES = 'STORYBOOK_VALUES'; -const map = new Map(); +const map = new Map(); type Instance = CombinedVueInstance< Vue, { @@ -21,16 +21,11 @@ type Instance = CombinedVueInstance< Record, unknown >; -const getRoot = (domElement: Element): [Instance, Element] => { +const getRoot = (domElement: Element): Instance => { if (map.has(domElement)) { return map.get(domElement); } - // Create a dummy "target" underneath #storybook-root - // that Vue2 will replace on first render with #storybook-vue-root - const target = document.createElement('div'); - domElement.appendChild(target); - const instance = new Vue({ beforeDestroy() { map.delete(domElement); @@ -42,13 +37,13 @@ const getRoot = (domElement: Element): [Instance, Element] => { }; }, render(h) { - map.set(domElement, [instance, target]); + map.set(domElement, instance); const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined; - return h('div', { attrs: { id: 'storybook-vue-root' } }, children); + return h('div', { attrs: { id: 'storybook-root' } }, children); }, }); - return [instance, target]; + return instance; }; export const render: ArgsStoryFn = (props, context) => { @@ -97,7 +92,7 @@ export function renderToDOM( }: RenderContext, domElement: Element ) { - const [root, target] = getRoot(domElement); + const root = getRoot(domElement); Vue.config.errorHandler = showException; const element = storyFn(); @@ -121,7 +116,7 @@ export function renderToDOM( root[VALUES] = { ...element.options[VALUES], ...args }; if (!map.has(domElement)) { - root.$mount(target); + root.$mount(domElement); } showMain(); From 1034ba92c74b814024b048f01f4e278939fa21bd Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 18 Sep 2022 17:27:05 +0800 Subject: [PATCH 33/33] Revert "Added Vue2 DOM breaking change to MIGRATION guide" This reverts commit 5ef17428217176039c8d4c4f589aef740ef66e9a. --- MIGRATION.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 3e42324c8431..d3a38d5065a0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -21,8 +21,7 @@ - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically) - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters) - [Icons API changed](#icons-api-changed) - - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations) - - [Vue2 DOM structure changed](#vue2-dom-structure-changed) + - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-preview-annotations) - [Docs Changes](#docs-changes) - [Standalone docs files](#standalone-docs-files) - [Referencing stories in docs files](#referencing-stories-in-docs-files) @@ -551,12 +550,6 @@ The preset field `'config'` has been replaced with `'previewAnnotations'`. `'con Additionally, the internal field `'previewEntries'` has been removed. If you need a preview entry, just use a `'previewAnnotations'` file and don't export anything. -#### Vue2 DOM structure changed - -In 6.x, `@storybook/vue` would replace the "root" element (formerly `#root`, now `#storybook-root`) with a new node that contains the rendered children. This was problematic because it broke the `play` function, which often starts with `within(canvasElement)` and the old `canvasElement` would get replaced out from under the play function. - -In 7.0, `@storybook/vue` now leaves `#storybook-root` alone, and creates a new "dummy node" called `#storybook-vue-root` beneath it. This will break DOM snapshots moving from 6.5 to 7.0, but shouldn't have any other negative effects. - ### Docs Changes The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.