Vue: Add repro template for vue-cli

.circleci/config.yml

@@ -477,7 +477,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 7
+    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: 7
+    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: 7
+    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: 7
+    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: 7
+    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: 7
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

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.

code/addons/a11y/template/stories/parameters.stories.ts

@@ -3,7 +3,7 @@ import globalThis from 'global';
 export default {
   component: globalThis.Components.Html,
   args: {
-    contents: '<button>Click Me!</button>',
+    content: '<button>Click Me!</button>',
   },
   parameters: {
     chromatic: { disable: true },
@@ -12,7 +12,7 @@ export default {
 
 export const Options = {
   args: {
-    contents:
+    content:
       '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
   },
   parameters: {

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: `
       <div>
         <p>empty heading</p>
         <h1></h1>
@@ -39,7 +39,7 @@ export const Violations = {
 
 export const Passes = {
   args: {
-    contents: `
+    content: `
       <div>
         <p>heading</p>
         <h1>heading 1</h1>

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;
 }

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);

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/.test(templateName),
+      /^(vue3|vue-cli)/i.test(templateName),
       `Skipping ${templateName}, which does not support dynamic source snippets`
     );
 

code/frameworks/vue-webpack5/src/preset.ts

@@ -21,11 +21,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   };
 };
 
-export const typescript = async (
-  config: StorybookConfig['typescript']
-): Promise<StorybookConfig['typescript']> => {
-  return {
-    ...config,
-    skipBabel: true,
-  };
-};
+export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
+  ...config,
+  skipBabel: true,
+});

code/frameworks/vue3-webpack5/src/preset.ts

@@ -20,3 +20,8 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
     },
   };
 };
+
+export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
+  ...config,
+  skipBabel: true,
+});

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'],
   });
 };
 

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,

code/lib/cli/src/repro-templates.ts

@@ -94,11 +94,39 @@ const svelteViteTemplates = {
   // }
 };
 
+const vueCliTemplates = {
+  'vue-cli/default-js': {
+    name: 'Vue-CLI (Default JS)',
+    script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/vue3-webpack5',
+      renderer: '@storybook/vue3',
+      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 {
   ...craTemplates,
   ...reactViteTemplates,
   ...vue3ViteTemplates,
   ...svelteViteTemplates,
+  ...vueCliTemplates,
   // FIXME: missing documentation.json
   // 'angular/latest': {
   //   name: 'Angular (latest)',

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

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

code/lib/store/template/stories/rendering.stories.ts

@@ -25,11 +25,15 @@ 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();
 
+    // 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/);

code/lib/store/template/stories/title.stories.ts

@@ -4,7 +4,7 @@ import { PlayFunctionContext } from '@storybook/csf';
 
 export default {
   component: globalThis.Components.Pre,
-  title: 'manual title',
+  title: 'lib/store/manual title',
   args: { text: 'No content' },
 };
 

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

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

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<Element, Instance>();
+const map = new Map<Element, [Instance, Element]>();
 type Instance = CombinedVueInstance<
   Vue,
   {
@@ -21,11 +21,16 @@ type Instance = CombinedVueInstance<
   Record<never, any>,
   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<VueFramework> = (props, context) => {
@@ -92,7 +97,7 @@ export function renderToDOM(
   }: RenderContext<VueFramework>,
   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();