Merge branch 'next' into shilman/vue2-rendering-improvements

.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 {
+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>

code/renderers/vue/template/components/Pre.vue

@@ -0,0 +1,29 @@
+<template>
+  <pre data-testid="pre" :style="style">{{ finalText }}</pre>
+</template>
+
+<script>
+export default {
+  name: 'my-pre',
+
+  props: {
+    // deepscan-disable-next-line
+    style: {
+      type: Object,
+    },
+    object: {
+      type: Object,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    finalText() {
+      return this.object ? JSON.stringify(this.object, null, 2) : this.text;
+    },
+  },
+};
+</script>

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

code/renderers/vue/template/components/index.js

@@ -0,0 +1,9 @@
+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, Form, Html };
+globalThis.storybookRenderer = 'vue';

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

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 { createOptions, getOptionsOrPrompt, OptionValues } from './utils/options';
 import { executeCLIStep } from './utils/cli-step';
@@ -222,6 +221,7 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
     module: {
       ...config.modules,
       rules: [
+        // Ensure esbuild-loader applies to all files in ./template-stories
         {
           test: [/\\/template-stories\\//],
           loader: '${loaderPath}',
@@ -230,7 +230,11 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
             target: 'es2015',
           },
         },
-        ...config.module.rules,
+        // Ensure no other loaders from the framework apply
+        ...config.module.rules.map(rule => ({
+          ...rule,
+          exclude: [/\\/template-stories\\//].concat(rule.exclude || []),
+        })),
       ],
     },
   })`;

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

scripts/tasks/chromatic.ts

@@ -10,7 +10,8 @@ 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(
+
+    await exec(
       `npx chromatic \
           --exit-zero-on-changes \
           --storybook-build-dir=${builtSandboxDir} \