Merge pull request #19165 from storybookjs/shilman/vue-cli-repro-temp…

…lates

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'

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

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/template/components/Button.vue

@@ -0,0 +1,54 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ children }}</button>
+</template>
+
+<script>
+import './button.css';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    children: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'storybook-button': true,
+        'storybook-button--primary': this.primary,
+        'storybook-button--secondary': !this.primary,
+        [`storybook-button--${this.size}`]: true,
+      };
+    },
+    style() {
+      return {
+        backgroundColor: this.backgroundColor,
+      };
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

code/renderers/vue/template/components/Form.vue

@@ -0,0 +1,44 @@
+<template>
+  <form id="interaction-test-form" @submit.prevent="onSubmit">
+    <label>
+      Enter Value
+      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+    </label>
+    <button type="submit">Submit</button>
+    <p v-if="complete">Completed!!</p>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'my-form',
+
+  props: {
+    onSuccess: {
+      type: Function,
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+      complete: false,
+    };
+  },
+
+  methods: {
+    setValue(event) {
+      this.value = event.target.value;
+    },
+    onSubmit() {
+      this.onSuccess(this.value);
+      setTimeout(() => {
+        this.complete = true;
+      }, 500);
+      setTimeout(() => {
+        this.complete = false;
+      }, 1500);
+    },
+  },
+};
+</script>

code/renderers/vue/template/components/Html.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-html="content"></div>
+</template>
+
+<script>
+
+export default {
+  name: 'my-html',
+
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>