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

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/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 --merge',
+    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 --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/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();

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 props.object ? JSON.stringify(props.object, null, 2) : props.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,8 @@
+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 };