From 4be15984cbd158824211b5f8b2e9e21d48a0bb9f Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Thu, 28 Jan 2021 13:52:44 -0700 Subject: [PATCH 01/10] feat: add vue3 app framework --- app/vue3/README.md | 41 ++++++ app/vue3/bin/build.js | 4 + app/vue3/bin/index.js | 3 + app/vue3/package.json | 80 ++++++++++++ app/vue3/src/client/index.ts | 17 +++ app/vue3/src/client/preview/globals.ts | 4 + app/vue3/src/client/preview/index.ts | 126 +++++++++++++++++++ app/vue3/src/client/preview/render.ts | 58 +++++++++ app/vue3/src/client/preview/types-6-0.ts | 23 ++++ app/vue3/src/client/preview/types.ts | 20 +++ app/vue3/src/server/build.ts | 4 + app/vue3/src/server/framework-preset-vue3.ts | 47 +++++++ app/vue3/src/server/index.ts | 4 + app/vue3/src/server/options.ts | 7 ++ app/vue3/src/typings.d.ts | 8 ++ app/vue3/standalone.js | 8 ++ app/vue3/tsconfig.json | 14 +++ app/vue3/types-6-0.d.ts | 1 + yarn.lock | 98 ++++++++++++++- 19 files changed, 566 insertions(+), 1 deletion(-) create mode 100644 app/vue3/README.md create mode 100755 app/vue3/bin/build.js create mode 100755 app/vue3/bin/index.js create mode 100644 app/vue3/package.json create mode 100644 app/vue3/src/client/index.ts create mode 100644 app/vue3/src/client/preview/globals.ts create mode 100644 app/vue3/src/client/preview/index.ts create mode 100644 app/vue3/src/client/preview/render.ts create mode 100644 app/vue3/src/client/preview/types-6-0.ts create mode 100644 app/vue3/src/client/preview/types.ts create mode 100755 app/vue3/src/server/build.ts create mode 100644 app/vue3/src/server/framework-preset-vue3.ts create mode 100755 app/vue3/src/server/index.ts create mode 100644 app/vue3/src/server/options.ts create mode 100644 app/vue3/src/typings.d.ts create mode 100644 app/vue3/standalone.js create mode 100644 app/vue3/tsconfig.json create mode 100644 app/vue3/types-6-0.d.ts diff --git a/app/vue3/README.md b/app/vue3/README.md new file mode 100644 index 000000000000..3582c7266b86 --- /dev/null +++ b/app/vue3/README.md @@ -0,0 +1,41 @@ +# Storybook for Vue 3 + +Storybook for Vue 3 is a UI development environment for your Vue 3 components. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-vue3-app +npx -p @storybook/cli sb init +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue3/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/vue3/workflows/publish-storybook) of your storybook and deploy it anywhere you want. + +## Extending the Vue application + +Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview, which can be imported as `import { app } from '@storybook/vue3'`. + +When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. + +For example: + +```js +// .storybook/preview.js + +import { app } from '@storybook/vue3'; + +app.use(MyPlugin); +app.component('my-component', MyComponent); +app.mixin({ /* My mixin */ }); +``` diff --git a/app/vue3/bin/build.js b/app/vue3/bin/build.js new file mode 100755 index 000000000000..6ef07a26a9fc --- /dev/null +++ b/app/vue3/bin/build.js @@ -0,0 +1,4 @@ +#!/usr/bin/env node + +process.env.NODE_ENV = process.env.NODE_ENV || 'production'; +require('../dist/cjs/server/build'); diff --git a/app/vue3/bin/index.js b/app/vue3/bin/index.js new file mode 100755 index 000000000000..8aab7bbceb2b --- /dev/null +++ b/app/vue3/bin/index.js @@ -0,0 +1,3 @@ +#!/usr/bin/env node + +require('../dist/cjs/server'); diff --git a/app/vue3/package.json b/app/vue3/package.json new file mode 100644 index 000000000000..d7f4a8fa4721 --- /dev/null +++ b/app/vue3/package.json @@ -0,0 +1,80 @@ +{ + "name": "@storybook/vue3", + "version": "6.2.0-alpha.19", + "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/master/app/vue3", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "app/vue3" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "*": [ + "dist/ts3.4/*" + ] + } + }, + "bin": { + "build-storybook": "./bin/build.js", + "start-storybook": "./bin/index.js", + "storybook-server": "./bin/index.js" + }, + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/addons": "6.2.0-alpha.19", + "@storybook/core": "6.2.0-alpha.19", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "react": "16.14.0", + "react-dom": "16.14.0", + "read-pkg-up": "^7.0.1", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0", + "ts-loader": "^6.2.2", + "vue-docgen-api": "^4.34.2", + "vue-docgen-loader": "^1.5.0", + "webpack": "^4.46.0" + }, + "devDependencies": { + "@types/node": "^14.14.20", + "@types/webpack": "^4.41.26", + "@vue/compiler-sfc": "^3.0.0", + "vue": "^3.0.0", + "vue-loader": "^16.0.0" + }, + "peerDependencies": { + "@babel/core": "*", + "@vue/compiler-sfc": "^3.0.0", + "babel-loader": "^7.0.0 || ^8.0.0", + "vue": "^3.0.0", + "vue-loader": "^16.0.0" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "ed19e4b88b0fbc36d10379149b7c98194254897e" +} diff --git a/app/vue3/src/client/index.ts b/app/vue3/src/client/index.ts new file mode 100644 index 000000000000..57d0e7c7f30e --- /dev/null +++ b/app/vue3/src/client/index.ts @@ -0,0 +1,17 @@ +export { + storiesOf, + setAddon, + addDecorator, + addParameters, + configure, + getStorybook, + forceReRender, + raw, + app, +} from './preview'; + +export * from './preview/types-6-0'; + +if (module && module.hot && module.hot.decline) { + module.hot.decline(); +} diff --git a/app/vue3/src/client/preview/globals.ts b/app/vue3/src/client/preview/globals.ts new file mode 100644 index 000000000000..8ccb267b3416 --- /dev/null +++ b/app/vue3/src/client/preview/globals.ts @@ -0,0 +1,4 @@ +import { window } from 'global'; + +window.STORYBOOK_REACT_CLASSES = {}; +window.STORYBOOK_ENV = 'vue3'; diff --git a/app/vue3/src/client/preview/index.ts b/app/vue3/src/client/preview/index.ts new file mode 100644 index 000000000000..4b2d05518d11 --- /dev/null +++ b/app/vue3/src/client/preview/index.ts @@ -0,0 +1,126 @@ +import { ConcreteComponent, Component, App, defineComponent, h } from 'vue'; +import { start } from '@storybook/core/client'; +import { + ClientStoryApi, + StoryFn, + DecoratorFunction, + StoryContext, + Loadable, +} from '@storybook/addons'; + +import './globals'; +import { IStorybookSection, StoryFnVueReturnType } from './types'; + +import render, { storybookApp } from './render'; + +const PROPS = 'STORYBOOK_PROPS'; + +function prepare(story: StoryFnVueReturnType, innerStory?: ConcreteComponent): Component | null { + if (story == null) { + return null; + } + + if (innerStory) { + return { + extends: story, + components: { story: innerStory }, + props: innerStory.props, + inject: { + props: { + from: PROPS, + default: null, + }, + }, + provide() { + return { + [PROPS]: this.props || this.$props, + }; + }, + }; + } + + return defineComponent({ + props: story.props, + inject: { + props: { + from: PROPS, + default: null, + }, + }, + render() { + return h(story, this.props || this.$props); + }, + }); +} + +const defaultContext: StoryContext = { + id: 'unspecified', + name: 'unspecified', + kind: 'unspecified', + parameters: {}, + args: {}, + argTypes: {}, + globals: {}, +}; + +function decorateStory( + storyFn: StoryFn, + decorators: DecoratorFunction[] +): StoryFn { + return decorators.reduce( + (decorated: StoryFn, decorator) => ( + context: StoryContext = defaultContext + ) => { + let story; + + const decoratedStory = decorator( + ({ parameters, ...innerContext }: StoryContext = {} as StoryContext) => { + story = decorated({ ...context, ...innerContext }); + return story; + }, + context + ); + + if (!story) { + story = decorated(context); + } + + if (decoratedStory === story) { + return story; + } + + return prepare(decoratedStory, story); + }, + (context) => prepare(storyFn(context)) + ); +} +const framework = 'vue3'; + +interface ClientApi extends ClientStoryApi { + setAddon(addon: any): void; + configure(loader: Loadable, module: NodeModule): void; + getStorybook(): IStorybookSection[]; + clearDecorators(): void; + forceReRender(): void; + raw: () => any; // todo add type + load: (...args: any[]) => void; + app: App; +} + +const api = start(render, { decorateStory }); + +export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { + return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ + framework, + }); +}; + +export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args); +export const { addDecorator } = api.clientApi; +export const { addParameters } = api.clientApi; +export const { clearDecorators } = api.clientApi; +export const { setAddon } = api.clientApi; +export const { forceReRender } = api; +export const { getStorybook } = api.clientApi; +export const { raw } = api.clientApi; +export const app: ClientApi['app'] = storybookApp; diff --git a/app/vue3/src/client/preview/render.ts b/app/vue3/src/client/preview/render.ts new file mode 100644 index 000000000000..5206e2238e80 --- /dev/null +++ b/app/vue3/src/client/preview/render.ts @@ -0,0 +1,58 @@ +import type { Args } from '@storybook/addons'; +import dedent from 'ts-dedent'; +import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue'; +import { RenderContext, StoryFnVueReturnType } from './types'; + +const activeStoryComponent = shallowRef(null); +const activeProps = shallowRef({}); + +let root: ComponentPublicInstance | null = null; + +export const storybookApp = createApp({ + // If an end-user calls `unmount` on the app, we need to clear our root variable + unmounted() { + root = null; + }, + + setup() { + return () => { + if (!activeStoryComponent.value) throw new Error('TODO: No Vue3 story'); + return h(activeStoryComponent.value, activeProps.value); + }; + }, +}); + +export default function render({ + storyFn, + kind, + name, + args, + showMain, + showError, + showException, + forceRender, +}: RenderContext) { + storybookApp.config.errorHandler = showException; + + const element: StoryFnVueReturnType = storyFn(); + + if (!element) { + showError({ + title: `Expecting a Vue component from the story: "${name}" of "${kind}".`, + description: dedent` + Did you forget to return the Vue component from the story? + Use "() => ({ template: '' })" or "() => ({ components: MyComp, template: '' })" when defining the story. + `, + }); + return; + } + + showMain(); + + activeStoryComponent.value = element; + activeProps.value = args; + + if (!root) { + root = storybookApp.mount('#root'); + } +} diff --git a/app/vue3/src/client/preview/types-6-0.ts b/app/vue3/src/client/preview/types-6-0.ts new file mode 100644 index 000000000000..9afe0025be34 --- /dev/null +++ b/app/vue3/src/client/preview/types-6-0.ts @@ -0,0 +1,23 @@ +import { ConcreteComponent } from 'vue'; +import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons'; +import { StoryFnVueReturnType } from './types'; + +export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons'; + +type VueComponent = ConcreteComponent; +type VueReturnType = StoryFnVueReturnType; + +/** + * Metadata to configure the stories for a component. + * + * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export) + */ +export type Meta = BaseMeta & Annotations; + +/** + * Story function that represents a component example. + * + * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) + */ +export type Story = BaseStory & + Annotations; diff --git a/app/vue3/src/client/preview/types.ts b/app/vue3/src/client/preview/types.ts new file mode 100644 index 000000000000..2fa264be64cd --- /dev/null +++ b/app/vue3/src/client/preview/types.ts @@ -0,0 +1,20 @@ +import { ConcreteComponent } from 'vue'; + +export { RenderContext } from '@storybook/core'; + +export interface ShowErrorArgs { + title: string; + description: string; +} + +export type StoryFnVueReturnType = ConcreteComponent; + +export interface IStorybookStory { + name: string; + render: () => any; +} + +export interface IStorybookSection { + kind: string; + stories: IStorybookStory[]; +} diff --git a/app/vue3/src/server/build.ts b/app/vue3/src/server/build.ts new file mode 100755 index 000000000000..d8abf06a4396 --- /dev/null +++ b/app/vue3/src/server/build.ts @@ -0,0 +1,4 @@ +import { buildStatic } from '@storybook/core/server'; +import options from './options'; + +buildStatic(options); diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts new file mode 100644 index 000000000000..5dbfe8d718f4 --- /dev/null +++ b/app/vue3/src/server/framework-preset-vue3.ts @@ -0,0 +1,47 @@ +import { VueLoaderPlugin } from 'vue-loader'; +import { Configuration, DefinePlugin } from 'webpack'; + +export function webpack(config: Configuration) { + return { + ...config, + plugins: [ + ...config.plugins, + new VueLoaderPlugin(), + new DefinePlugin({ + __VUE_OPTIONS_API__: JSON.stringify(true), + __VUE_PROD_DEVTOOLS__: JSON.stringify(true), + }), + ], + module: { + ...config.module, + rules: [ + ...config.module.rules, + { + test: /\.vue$/, + loader: require.resolve('vue-loader'), + options: {}, + }, + { + test: /\.tsx?$/, + use: [ + { + loader: require.resolve('ts-loader'), + options: { + transpileOnly: true, + appendTsSuffixTo: [/\.vue$/], + }, + }, + ], + }, + ], + }, + resolve: { + ...config.resolve, + extensions: [...config.resolve.extensions, '.vue'], + alias: { + ...config.resolve.alias, + vue$: require.resolve('vue/dist/vue.esm-bundler.js'), + }, + }, + }; +} diff --git a/app/vue3/src/server/index.ts b/app/vue3/src/server/index.ts new file mode 100755 index 000000000000..774d96025a84 --- /dev/null +++ b/app/vue3/src/server/index.ts @@ -0,0 +1,4 @@ +import { buildDev } from '@storybook/core/server'; +import options from './options'; + +buildDev(options); diff --git a/app/vue3/src/server/options.ts b/app/vue3/src/server/options.ts new file mode 100644 index 000000000000..704d54dbb05f --- /dev/null +++ b/app/vue3/src/server/options.ts @@ -0,0 +1,7 @@ +import { sync } from 'read-pkg-up'; + +export default { + packageJson: sync({ cwd: __dirname }).packageJson, + framework: 'vue3', + frameworkPresets: [require.resolve('./framework-preset-vue3.js')], +}; diff --git a/app/vue3/src/typings.d.ts b/app/vue3/src/typings.d.ts new file mode 100644 index 000000000000..a65f25b886f6 --- /dev/null +++ b/app/vue3/src/typings.d.ts @@ -0,0 +1,8 @@ +declare module '@storybook/core/*'; +declare module 'global'; +// todo check for correct types +declare module 'webpack/lib/RuleSet'; + +declare module 'vue-loader' { + export const VueLoaderPlugin +} diff --git a/app/vue3/standalone.js b/app/vue3/standalone.js new file mode 100644 index 000000000000..1b1febe0d3bb --- /dev/null +++ b/app/vue3/standalone.js @@ -0,0 +1,8 @@ +const build = require('@storybook/core/standalone'); +const frameworkOptions = require('./dist/server/options').default; + +async function buildStandalone(options) { + return build(options, frameworkOptions); +} + +module.exports = buildStandalone; diff --git a/app/vue3/tsconfig.json b/app/vue3/tsconfig.json new file mode 100644 index 000000000000..29fcd6ad6a26 --- /dev/null +++ b/app/vue3/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env"], + "resolveJsonModule": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*" + ] +} diff --git a/app/vue3/types-6-0.d.ts b/app/vue3/types-6-0.d.ts new file mode 100644 index 000000000000..b5946b39a8d8 --- /dev/null +++ b/app/vue3/types-6-0.d.ts @@ -0,0 +1 @@ +export * from './dist/ts3.9/client/preview/types-6-0.d'; diff --git a/yarn.lock b/yarn.lock index 373d9c0a9cf3..db2af29e4301 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6116,6 +6116,17 @@ estree-walker "^2.0.1" source-map "^0.6.1" +"@vue/compiler-core@3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.5.tgz#a6e54cabe9536e74c6513acd2649f311af1d43ac" + integrity sha512-iFXwk2gmU/GGwN4hpBwDWWMLvpkIejf/AybcFtlQ5V1ur+5jwfBaV0Y1RXoR6ePfBPJixtKZ3PmN+M+HgMAtfQ== + dependencies: + "@babel/parser" "^7.12.0" + "@babel/types" "^7.12.0" + "@vue/shared" "3.0.5" + estree-walker "^2.0.1" + source-map "^0.6.1" + "@vue/compiler-dom@3.0.3": version "3.0.3" resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.3.tgz#582ba30bc82da8409868bc1153ff0e0e2be617e5" @@ -6124,6 +6135,14 @@ "@vue/compiler-core" "3.0.3" "@vue/shared" "3.0.3" +"@vue/compiler-dom@3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.5.tgz#7885a13e6d18f64dde8ebceec052ed2c102696c2" + integrity sha512-HSOSe2XSPuCkp20h4+HXSiPH9qkhz6YbW9z9ZtL5vef2T2PMugH7/osIFVSrRZP/Ul5twFZ7MIRlp8tPX6e4/g== + dependencies: + "@vue/compiler-core" "3.0.5" + "@vue/shared" "3.0.5" + "@vue/compiler-dom@^3.0.0-rc.6": version "3.0.2" resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.2.tgz#1d40de04bcdf9aabb79fb6a802dd70a2f3c2992a" @@ -6132,6 +6151,28 @@ "@vue/compiler-core" "3.0.2" "@vue/shared" "3.0.2" +"@vue/compiler-sfc@^3.0.0": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.5.tgz#3ae08e60244a72faf9598361874fb7bdb5b1d37c" + integrity sha512-uOAC4X0Gx3SQ9YvDC7YMpbDvoCmPvP0afVhJoxRotDdJ+r8VO3q4hFf/2f7U62k4Vkdftp6DVni8QixrfYzs+w== + dependencies: + "@babel/parser" "^7.12.0" + "@babel/types" "^7.12.0" + "@vue/compiler-core" "3.0.5" + "@vue/compiler-dom" "3.0.5" + "@vue/compiler-ssr" "3.0.5" + "@vue/shared" "3.0.5" + consolidate "^0.16.0" + estree-walker "^2.0.1" + hash-sum "^2.0.0" + lru-cache "^5.1.1" + magic-string "^0.25.7" + merge-source-map "^1.1.0" + postcss "^7.0.32" + postcss-modules "^3.2.2" + postcss-selector-parser "^6.0.4" + source-map "^0.6.1" + "@vue/compiler-sfc@^3.0.0-rc.6": version "3.0.3" resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.3.tgz#7fad9d40e139dd717713c0db701e1eb776f8349f" @@ -6162,6 +6203,14 @@ "@vue/compiler-dom" "3.0.3" "@vue/shared" "3.0.3" +"@vue/compiler-ssr@3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.5.tgz#7661ad891a0be948726c7f7ad1e425253c587b83" + integrity sha512-Wm//Kuxa1DpgjE4P9W0coZr8wklOfJ35Jtq61CbU+t601CpPTK4+FL2QDBItaG7aoUUDCWL5nnxMkuaOgzTBKg== + dependencies: + "@vue/compiler-dom" "3.0.5" + "@vue/shared" "3.0.5" + "@vue/component-compiler-utils@^3.0.2", "@vue/component-compiler-utils@^3.1.0": version "3.2.0" resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d" @@ -6183,6 +6232,30 @@ resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab" integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ== +"@vue/reactivity@3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.5.tgz#e3789e4d523d845f9ae0b4d770e2b45594742fd2" + integrity sha512-3xodUE3sEIJgS7ntwUbopIpzzvi7vDAOjVamfb2l+v1FUg0jpd3gf62N2wggJw3fxBMr+QvyxpD+dBoxLsmAjw== + dependencies: + "@vue/shared" "3.0.5" + +"@vue/runtime-core@3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.5.tgz#da6331d5f300d5794e9e0ebdc8a8bd72a9e19962" + integrity sha512-Cnyi2NqREwOLcTEsIi1DQX1hHtkVj4eGm4hBG7HhokS05DqpK4/80jG6PCCnCH9rIJDB2FqtaODX397210plXg== + dependencies: + "@vue/reactivity" "3.0.5" + "@vue/shared" "3.0.5" + +"@vue/runtime-dom@3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.5.tgz#1ce2c9c449e26ab06963da0064096e882a7a8935" + integrity sha512-iilX1KySeIzHHtErT6Y44db1rhWK5tAI0CiJIPr+SJoZ2jbjoOSE6ff/jfIQakchbm1d6jq6VtRVnp5xYdOXKA== + dependencies: + "@vue/runtime-core" "3.0.5" + "@vue/shared" "3.0.5" + csstype "^2.6.8" + "@vue/shared@3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.2.tgz#419bd85a2ebdbd4f42963e98c5a1b103452176d9" @@ -6193,6 +6266,11 @@ resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.3.tgz#ef12ebff93a446df281e8a0fd765b5aea8e7745b" integrity sha512-yGgkF7u4W0Dmwri9XdeY50kOowN4UIX7aBQ///jbxx37itpzVjK7QzvD3ltQtPfWaJDGBfssGL0wpAgwX9OJpQ== +"@vue/shared@3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.5.tgz#c131d88bd6713cc4d93b3bb1372edb1983225ff0" + integrity sha512-gYsNoGkWejBxNO6SNRjOh/xKeZ0H0V+TFzaPzODfBjkAIb0aQgBuixC1brandC/CDJy1wYPwSoYrXpvul7m6yw== + "@vue/web-component-wrapper@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1" @@ -11917,7 +11995,7 @@ cssstyle@^2.0.0, cssstyle@^2.2.0: dependencies: cssom "~0.3.6" -csstype@^2.5.7: +csstype@^2.5.7, csstype@^2.6.8: version "2.6.14" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de" integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A== @@ -32783,6 +32861,15 @@ vue-loader@^15.9.6: vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" +vue-loader@^16.0.0: + version "16.1.2" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.1.2.tgz#5c03b6c50d2a5f983c7ceba15c50d78ca2b298f4" + integrity sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q== + dependencies: + chalk "^4.1.0" + hash-sum "^2.0.0" + loader-utils "^2.0.0" + vue-property-decorator@8.3.0: version "8.3.0" resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.3.0.tgz#536f027dc7d626f37c8d85a2dc02f0a6cb979440" @@ -32821,6 +32908,15 @@ vue@^2.6.12: resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123" integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg== +vue@^3.0.0: + version "3.0.5" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1" + integrity sha512-TfaprOmtsAfhQau7WsomXZ8d9op/dkQLNIq8qPV3A0Vxs6GR5E+c1rfJS1SDkXRQj+dFyfnec7+U0Be1huiScg== + dependencies: + "@vue/compiler-dom" "3.0.5" + "@vue/runtime-dom" "3.0.5" + "@vue/shared" "3.0.5" + vuex@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.0.tgz#95efa56a58f7607c135b053350833a09e01aa813" From c42981ce0b8c83624884b63df3b4eb51eab895cd Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Thu, 28 Jan 2021 15:59:28 -0700 Subject: [PATCH 02/10] feat: add vue3 generator to CLI --- lib/cli/src/detect.test.ts | 31 +++++--- lib/cli/src/frameworks/vue3/Button.stories.js | 39 ++++++++++ lib/cli/src/frameworks/vue3/Button.vue | 53 +++++++++++++ lib/cli/src/frameworks/vue3/Header.stories.js | 20 +++++ lib/cli/src/frameworks/vue3/Header.vue | 49 ++++++++++++ lib/cli/src/frameworks/vue3/Page.stories.js | 23 ++++++ lib/cli/src/frameworks/vue3/Page.vue | 78 +++++++++++++++++++ lib/cli/src/generators/VUE3/index.ts | 9 +++ lib/cli/src/initiate.ts | 6 ++ lib/cli/src/project_types.ts | 20 +++-- 10 files changed, 313 insertions(+), 15 deletions(-) create mode 100644 lib/cli/src/frameworks/vue3/Button.stories.js create mode 100644 lib/cli/src/frameworks/vue3/Button.vue create mode 100644 lib/cli/src/frameworks/vue3/Header.stories.js create mode 100644 lib/cli/src/frameworks/vue3/Header.vue create mode 100644 lib/cli/src/frameworks/vue3/Page.stories.js create mode 100644 lib/cli/src/frameworks/vue3/Page.vue create mode 100644 lib/cli/src/generators/VUE3/index.ts diff --git a/lib/cli/src/detect.test.ts b/lib/cli/src/detect.test.ts index 90a71aaa2b03..b746af51f9e5 100644 --- a/lib/cli/src/detect.test.ts +++ b/lib/cli/src/detect.test.ts @@ -52,6 +52,27 @@ const MOCK_FRAMEWORK_FILES = [ }, }, }, + { + name: ProjectType.VUE3, + files: { + 'package.json': { + dependencies: { + vue: '^3.0.0', + }, + }, + }, + }, + { + name: ProjectType.VUE3, + files: { + 'package.json': { + dependencies: { + // Testing the `next` tag too + vue: 'next', + }, + }, + }, + }, { name: ProjectType.EMBER, files: { @@ -315,16 +336,6 @@ describe('Detect', () => { expect(result).toBe(ProjectType.UNDETECTED); }); - // TODO(blaine): Remove once Vue3 is supported - it(`UNSUPPORTED for Vue framework above version 3.0.0`, () => { - const result = detectFrameworkPreset({ - dependencies: { - vue: '3.0.0', - }, - }); - expect(result).toBe(ProjectType.UNSUPPORTED); - }); - // TODO(blaine): Remove once Nuxt3 is supported it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => { const result = detectFrameworkPreset({ diff --git a/lib/cli/src/frameworks/vue3/Button.stories.js b/lib/cli/src/frameworks/vue3/Button.stories.js new file mode 100644 index 000000000000..fbbe2472db86 --- /dev/null +++ b/lib/cli/src/frameworks/vue3/Button.stories.js @@ -0,0 +1,39 @@ +import MyButton from './Button.vue'; + +export default { + title: 'Example/Button', + component: MyButton, + argTypes: { + backgroundColor: { control: 'color' }, + size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyButton }, + template: '', +}); + +export const Primary = Template.bind({}); +Primary.args = { + primary: true, + label: 'Button', +}; + +export const Secondary = Template.bind({}); +Secondary.args = { + label: 'Button', +}; + +export const Large = Template.bind({}); +Large.args = { + size: 'large', + label: 'Button', +}; + +export const Small = Template.bind({}); +Small.args = { + size: 'small', + label: 'Button', +}; diff --git a/lib/cli/src/frameworks/vue3/Button.vue b/lib/cli/src/frameworks/vue3/Button.vue new file mode 100644 index 000000000000..ead2b4594460 --- /dev/null +++ b/lib/cli/src/frameworks/vue3/Button.vue @@ -0,0 +1,53 @@ + + + diff --git a/lib/cli/src/frameworks/vue3/Header.stories.js b/lib/cli/src/frameworks/vue3/Header.stories.js new file mode 100644 index 000000000000..ea0235b26282 --- /dev/null +++ b/lib/cli/src/frameworks/vue3/Header.stories.js @@ -0,0 +1,20 @@ +import MyHeader from './Header.vue'; + +export default { + title: 'Example/Header', + component: MyHeader, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyHeader }, + template: '', +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + user: {}, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = {}; diff --git a/lib/cli/src/frameworks/vue3/Header.vue b/lib/cli/src/frameworks/vue3/Header.vue new file mode 100644 index 000000000000..eec3f73b6057 --- /dev/null +++ b/lib/cli/src/frameworks/vue3/Header.vue @@ -0,0 +1,49 @@ + + + diff --git a/lib/cli/src/frameworks/vue3/Page.stories.js b/lib/cli/src/frameworks/vue3/Page.stories.js new file mode 100644 index 000000000000..4ca7c3c9b39c --- /dev/null +++ b/lib/cli/src/frameworks/vue3/Page.stories.js @@ -0,0 +1,23 @@ +import MyPage from './Page.vue'; +import * as HeaderStories from './Header.stories'; + +export default { + title: 'Example/Page', + component: MyPage, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyPage }, + template: '', +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + ...HeaderStories.LoggedIn.args, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = { + ...HeaderStories.LoggedOut.args, +}; diff --git a/lib/cli/src/frameworks/vue3/Page.vue b/lib/cli/src/frameworks/vue3/Page.vue new file mode 100644 index 000000000000..6b345b65ad4c --- /dev/null +++ b/lib/cli/src/frameworks/vue3/Page.vue @@ -0,0 +1,78 @@ + + + diff --git a/lib/cli/src/generators/VUE3/index.ts b/lib/cli/src/generators/VUE3/index.ts new file mode 100644 index 000000000000..db9e4e4cab94 --- /dev/null +++ b/lib/cli/src/generators/VUE3/index.ts @@ -0,0 +1,9 @@ +import { baseGenerator, Generator } from '../baseGenerator'; + +const generator: Generator = async (packageManager, npmOptions, options) => { + baseGenerator(packageManager, npmOptions, options, 'vue3', { + extraPackages: ['vue-loader@^16.0.0'], + }); +}; + +export default generator; diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts index 11ed58388c07..48b32c969f02 100644 --- a/lib/cli/src/initiate.ts +++ b/lib/cli/src/initiate.ts @@ -19,6 +19,7 @@ import reactScriptsGenerator from './generators/REACT_SCRIPTS'; import sfcVueGenerator from './generators/SFC_VUE'; import updateOrganisationsGenerator from './generators/UPDATE_PACKAGE_ORGANIZATIONS'; import vueGenerator from './generators/VUE'; +import vue3Generator from './generators/VUE3'; import webpackReactGenerator from './generators/WEBPACK_REACT'; import mithrilGenerator from './generators/MITHRIL'; import marionetteGenerator from './generators/MARIONETTE'; @@ -162,6 +163,11 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr .then(commandLog('Adding Storybook support to your "Vue" app')) .then(end); + case ProjectType.VUE3: + return vue3Generator(packageManager, npmOptions, generatorOptions) + .then(commandLog('Adding Storybook support to your "Vue 3" app')) + .then(end); + case ProjectType.ANGULAR: return angularGenerator(packageManager, npmOptions, generatorOptions) .then(commandLog('Adding Storybook support to your "Angular" app')) diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts index 77d95924b625..1ec761a9c315 100644 --- a/lib/cli/src/project_types.ts +++ b/lib/cli/src/project_types.ts @@ -15,6 +15,7 @@ export type SupportedFrameworks = | 'react' | 'react-native' | 'vue' + | 'vue3' | 'angular' | 'mithril' | 'riot' @@ -39,6 +40,7 @@ export enum ProjectType { REACT_PROJECT = 'REACT_PROJECT', WEBPACK_REACT = 'WEBPACK_REACT', VUE = 'VUE', + VUE3 = 'VUE3', SFC_VUE = 'SFC_VUE', ANGULAR = 'ANGULAR', EMBER = 'EMBER', @@ -60,6 +62,7 @@ export const SUPPORTED_FRAMEWORKS: SupportedFrameworks[] = [ 'react', 'react-native', 'vue', + 'vue3', 'angular', 'mithril', 'riot', @@ -125,8 +128,7 @@ export const supportedTemplates: TemplateConfiguration[] = [ }, { preset: ProjectType.VUE, - // The Vue template only works with Vue or Nuxt under v3 - // In a future update, a new Vue3 template will be added + // This Vue template only works with Vue or Nuxt under v3 dependencies: { vue: (versionRange) => ltMajor(versionRange, 3), nuxt: (versionRange) => ltMajor(versionRange, 3), @@ -135,6 +137,16 @@ export const supportedTemplates: TemplateConfiguration[] = [ return dependencies.some(Boolean); }, }, + { + preset: ProjectType.VUE3, + dependencies: { + // This Vue template works with Vue 3 + vue: (versionRange) => versionRange === 'next' || eqMajor(versionRange, 3), + }, + matcherFunction: ({ dependencies }) => { + return dependencies.some(Boolean); + }, + }, { preset: ProjectType.EMBER, dependencies: ['ember-cli'], @@ -258,9 +270,7 @@ export const supportedTemplates: TemplateConfiguration[] = [ export const unsupportedTemplate: TemplateConfiguration = { preset: ProjectType.UNSUPPORTED, dependencies: { - // TODO(blaine): Remove when we support Vue 3 - vue: (versionRange) => versionRange === 'next' || eqMajor(versionRange, 3), - // TODO(blaine): Remove when we support Vue 3 + // TODO(blaine): Remove when we support Nuxt 3 nuxt: (versionRange) => eqMajor(versionRange, 3), }, matcherFunction: ({ dependencies }) => { From 1761302ad47ecf2e38a9d34973bf935bc88802f8 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Thu, 28 Jan 2021 16:00:07 -0700 Subject: [PATCH 03/10] feat: scaffold vue3 example app with vue 3 cli --- examples/vue-3-cli/.browserslistrc | 3 + examples/vue-3-cli/.gitignore | 23 +++++++ examples/vue-3-cli/README.md | 7 ++ examples/vue-3-cli/babel.config.js | 3 + examples/vue-3-cli/package.json | 20 ++++++ examples/vue-3-cli/public/favicon.ico | Bin 0 -> 4286 bytes examples/vue-3-cli/public/index.html | 17 +++++ examples/vue-3-cli/src/App.vue | 27 ++++++++ examples/vue-3-cli/src/assets/logo.png | Bin 0 -> 6849 bytes .../vue-3-cli/src/components/HelloWorld.vue | 60 ++++++++++++++++++ examples/vue-3-cli/src/main.ts | 4 ++ examples/vue-3-cli/src/shims-vue.d.ts | 6 ++ examples/vue-3-cli/tsconfig.json | 39 ++++++++++++ 13 files changed, 209 insertions(+) create mode 100644 examples/vue-3-cli/.browserslistrc create mode 100644 examples/vue-3-cli/.gitignore create mode 100644 examples/vue-3-cli/README.md create mode 100644 examples/vue-3-cli/babel.config.js create mode 100644 examples/vue-3-cli/package.json create mode 100644 examples/vue-3-cli/public/favicon.ico create mode 100644 examples/vue-3-cli/public/index.html create mode 100644 examples/vue-3-cli/src/App.vue create mode 100644 examples/vue-3-cli/src/assets/logo.png create mode 100644 examples/vue-3-cli/src/components/HelloWorld.vue create mode 100644 examples/vue-3-cli/src/main.ts create mode 100644 examples/vue-3-cli/src/shims-vue.d.ts create mode 100644 examples/vue-3-cli/tsconfig.json diff --git a/examples/vue-3-cli/.browserslistrc b/examples/vue-3-cli/.browserslistrc new file mode 100644 index 000000000000..214388fe43cd --- /dev/null +++ b/examples/vue-3-cli/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/examples/vue-3-cli/.gitignore b/examples/vue-3-cli/.gitignore new file mode 100644 index 000000000000..403adbc1e527 --- /dev/null +++ b/examples/vue-3-cli/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/vue-3-cli/README.md b/examples/vue-3-cli/README.md new file mode 100644 index 000000000000..78f59e7afdf6 --- /dev/null +++ b/examples/vue-3-cli/README.md @@ -0,0 +1,7 @@ +# Storybook Demo + +This is a demo app to test Vue 3's CLI integration with Storybook. + +Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook. + +You can also try `yarn serve` to see that vue-cli service also works. diff --git a/examples/vue-3-cli/babel.config.js b/examples/vue-3-cli/babel.config.js new file mode 100644 index 000000000000..078c0056ff32 --- /dev/null +++ b/examples/vue-3-cli/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['@vue/cli-plugin-babel/preset'], +}; diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json new file mode 100644 index 000000000000..ac83784ac348 --- /dev/null +++ b/examples/vue-3-cli/package.json @@ -0,0 +1,20 @@ +{ + "name": "vue-3-cli-example", + "version": "6.2.0-alpha.19", + "private": true, + "scripts": { + "build": "vue-cli-service build", + "serve": "vue-cli-service serve" + }, + "dependencies": { + "core-js": "^3.6.5", + "vue": "^3.0.0" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "~4.5.0", + "@vue/cli-plugin-typescript": "~4.5.0", + "@vue/cli-service": "~4.5.0", + "@vue/compiler-sfc": "^3.0.0", + "typescript": "~3.9.3" + } +} diff --git a/examples/vue-3-cli/public/favicon.ico b/examples/vue-3-cli/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/examples/vue-3-cli/public/index.html b/examples/vue-3-cli/public/index.html new file mode 100644 index 000000000000..3e5a13962197 --- /dev/null +++ b/examples/vue-3-cli/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + + diff --git a/examples/vue-3-cli/src/App.vue b/examples/vue-3-cli/src/App.vue new file mode 100644 index 000000000000..76c1ac0b151e --- /dev/null +++ b/examples/vue-3-cli/src/App.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/examples/vue-3-cli/src/assets/logo.png b/examples/vue-3-cli/src/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 GIT binary patch literal 6849 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 +
+

{{ msg }}

+

+ For a guide and recipes on how to configure / customize this project,
+ check out the + vue-cli documentation. +

+

Installed CLI Plugins

+ +

Essential Links

+ +

Ecosystem

+ +
+ + + + + + diff --git a/examples/vue-3-cli/src/main.ts b/examples/vue-3-cli/src/main.ts new file mode 100644 index 000000000000..684d04215d72 --- /dev/null +++ b/examples/vue-3-cli/src/main.ts @@ -0,0 +1,4 @@ +import { createApp } from 'vue'; +import App from './App.vue'; + +createApp(App).mount('#app'); diff --git a/examples/vue-3-cli/src/shims-vue.d.ts b/examples/vue-3-cli/src/shims-vue.d.ts new file mode 100644 index 000000000000..3804a43e2f31 --- /dev/null +++ b/examples/vue-3-cli/src/shims-vue.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable */ +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/examples/vue-3-cli/tsconfig.json b/examples/vue-3-cli/tsconfig.json new file mode 100644 index 000000000000..e621cbc36545 --- /dev/null +++ b/examples/vue-3-cli/tsconfig.json @@ -0,0 +1,39 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "strict": true, + "jsx": "preserve", + "importHelpers": true, + "moduleResolution": "node", + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "sourceMap": true, + "baseUrl": ".", + "types": [ + "webpack-env" + ], + "paths": { + "@/*": [ + "src/*" + ] + }, + "lib": [ + "esnext", + "dom", + "dom.iterable", + "scripthost" + ] + }, + "include": [ + "src/**/*.ts", + "src/**/*.tsx", + "src/**/*.vue", + "tests/**/*.ts", + "tests/**/*.tsx" + ], + "exclude": [ + "node_modules" + ] +} From 9c35e55ce6cf6f8695a9424d2d0b33261dce2a84 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Fri, 29 Jan 2021 17:19:14 -0700 Subject: [PATCH 04/10] feat: use generator to add storybook into vue3 example --- examples/vue-3-cli/.storybook/main.js | 4 + examples/vue-3-cli/.storybook/preview.js | 3 + examples/vue-3-cli/package.json | 13 +- .../vue-3-cli/src/stories/Button.stories.js | 39 +++ examples/vue-3-cli/src/stories/Button.vue | 53 ++++ .../vue-3-cli/src/stories/Header.stories.js | 20 ++ examples/vue-3-cli/src/stories/Header.vue | 49 ++++ .../src/stories/Introduction.stories.mdx | 207 ++++++++++++++++ .../vue-3-cli/src/stories/Page.stories.js | 23 ++ examples/vue-3-cli/src/stories/Page.vue | 78 ++++++ .../src/stories/assets/code-brackets.svg | 1 + .../vue-3-cli/src/stories/assets/colors.svg | 1 + .../vue-3-cli/src/stories/assets/comments.svg | 1 + .../src/stories/assets/direction.svg | 1 + .../vue-3-cli/src/stories/assets/flow.svg | 1 + .../vue-3-cli/src/stories/assets/plugin.svg | 1 + .../vue-3-cli/src/stories/assets/repo.svg | 1 + .../vue-3-cli/src/stories/assets/stackalt.svg | 1 + examples/vue-3-cli/src/stories/button.css | 30 +++ examples/vue-3-cli/src/stories/header.css | 26 ++ examples/vue-3-cli/src/stories/page.css | 69 ++++++ yarn.lock | 234 ++++++++++++++++-- 22 files changed, 834 insertions(+), 22 deletions(-) create mode 100644 examples/vue-3-cli/.storybook/main.js create mode 100644 examples/vue-3-cli/.storybook/preview.js create mode 100644 examples/vue-3-cli/src/stories/Button.stories.js create mode 100644 examples/vue-3-cli/src/stories/Button.vue create mode 100644 examples/vue-3-cli/src/stories/Header.stories.js create mode 100644 examples/vue-3-cli/src/stories/Header.vue create mode 100644 examples/vue-3-cli/src/stories/Introduction.stories.mdx create mode 100644 examples/vue-3-cli/src/stories/Page.stories.js create mode 100644 examples/vue-3-cli/src/stories/Page.vue create mode 100644 examples/vue-3-cli/src/stories/assets/code-brackets.svg create mode 100644 examples/vue-3-cli/src/stories/assets/colors.svg create mode 100644 examples/vue-3-cli/src/stories/assets/comments.svg create mode 100644 examples/vue-3-cli/src/stories/assets/direction.svg create mode 100644 examples/vue-3-cli/src/stories/assets/flow.svg create mode 100644 examples/vue-3-cli/src/stories/assets/plugin.svg create mode 100644 examples/vue-3-cli/src/stories/assets/repo.svg create mode 100644 examples/vue-3-cli/src/stories/assets/stackalt.svg create mode 100644 examples/vue-3-cli/src/stories/button.css create mode 100644 examples/vue-3-cli/src/stories/header.css create mode 100644 examples/vue-3-cli/src/stories/page.css diff --git a/examples/vue-3-cli/.storybook/main.js b/examples/vue-3-cli/.storybook/main.js new file mode 100644 index 000000000000..7f8369b40d74 --- /dev/null +++ b/examples/vue-3-cli/.storybook/main.js @@ -0,0 +1,4 @@ +module.exports = { + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], +}; diff --git a/examples/vue-3-cli/.storybook/preview.js b/examples/vue-3-cli/.storybook/preview.js new file mode 100644 index 000000000000..b285aacafd88 --- /dev/null +++ b/examples/vue-3-cli/.storybook/preview.js @@ -0,0 +1,3 @@ +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, +}; diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json index ac83784ac348..eca47d1a0819 100644 --- a/examples/vue-3-cli/package.json +++ b/examples/vue-3-cli/package.json @@ -4,17 +4,26 @@ "private": true, "scripts": { "build": "vue-cli-service build", - "serve": "vue-cli-service serve" + "build-storybook": "build-storybook", + "serve": "vue-cli-service serve", + "storybook": "start-storybook -p 6006" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }, "devDependencies": { + "@babel/core": "^7.12.10", + "@storybook/addon-actions": "^6.2.0-alpha.19", + "@storybook/addon-essentials": "^6.2.0-alpha.19", + "@storybook/addon-links": "^6.2.0-alpha.19", + "@storybook/vue3": "6.2.0-alpha.19", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", - "typescript": "~3.9.3" + "babel-loader": "^8.2.2", + "typescript": "~3.9.3", + "vue-loader": "^16.1.2" } } diff --git a/examples/vue-3-cli/src/stories/Button.stories.js b/examples/vue-3-cli/src/stories/Button.stories.js new file mode 100644 index 000000000000..fbbe2472db86 --- /dev/null +++ b/examples/vue-3-cli/src/stories/Button.stories.js @@ -0,0 +1,39 @@ +import MyButton from './Button.vue'; + +export default { + title: 'Example/Button', + component: MyButton, + argTypes: { + backgroundColor: { control: 'color' }, + size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyButton }, + template: '', +}); + +export const Primary = Template.bind({}); +Primary.args = { + primary: true, + label: 'Button', +}; + +export const Secondary = Template.bind({}); +Secondary.args = { + label: 'Button', +}; + +export const Large = Template.bind({}); +Large.args = { + size: 'large', + label: 'Button', +}; + +export const Small = Template.bind({}); +Small.args = { + size: 'small', + label: 'Button', +}; diff --git a/examples/vue-3-cli/src/stories/Button.vue b/examples/vue-3-cli/src/stories/Button.vue new file mode 100644 index 000000000000..ead2b4594460 --- /dev/null +++ b/examples/vue-3-cli/src/stories/Button.vue @@ -0,0 +1,53 @@ + + + diff --git a/examples/vue-3-cli/src/stories/Header.stories.js b/examples/vue-3-cli/src/stories/Header.stories.js new file mode 100644 index 000000000000..ea0235b26282 --- /dev/null +++ b/examples/vue-3-cli/src/stories/Header.stories.js @@ -0,0 +1,20 @@ +import MyHeader from './Header.vue'; + +export default { + title: 'Example/Header', + component: MyHeader, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyHeader }, + template: '', +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + user: {}, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = {}; diff --git a/examples/vue-3-cli/src/stories/Header.vue b/examples/vue-3-cli/src/stories/Header.vue new file mode 100644 index 000000000000..eec3f73b6057 --- /dev/null +++ b/examples/vue-3-cli/src/stories/Header.vue @@ -0,0 +1,49 @@ + + + diff --git a/examples/vue-3-cli/src/stories/Introduction.stories.mdx b/examples/vue-3-cli/src/stories/Introduction.stories.mdx new file mode 100644 index 000000000000..d9740958edea --- /dev/null +++ b/examples/vue-3-cli/src/stories/Introduction.stories.mdx @@ -0,0 +1,207 @@ +import { Meta } from '@storybook/addon-docs/blocks'; +import Code from './assets/code-brackets.svg'; +import Colors from './assets/colors.svg'; +import Comments from './assets/comments.svg'; +import Direction from './assets/direction.svg'; +import Flow from './assets/flow.svg'; +import Plugin from './assets/plugin.svg'; +import Repo from './assets/repo.svg'; +import StackAlt from './assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `src/stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ + + +
Learn
+ + + +
+ TipEdit the Markdown in{' '} + src/stories/Introduction.stories.mdx +
diff --git a/examples/vue-3-cli/src/stories/Page.stories.js b/examples/vue-3-cli/src/stories/Page.stories.js new file mode 100644 index 000000000000..4ca7c3c9b39c --- /dev/null +++ b/examples/vue-3-cli/src/stories/Page.stories.js @@ -0,0 +1,23 @@ +import MyPage from './Page.vue'; +import * as HeaderStories from './Header.stories'; + +export default { + title: 'Example/Page', + component: MyPage, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyPage }, + template: '', +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + ...HeaderStories.LoggedIn.args, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = { + ...HeaderStories.LoggedOut.args, +}; diff --git a/examples/vue-3-cli/src/stories/Page.vue b/examples/vue-3-cli/src/stories/Page.vue new file mode 100644 index 000000000000..6b345b65ad4c --- /dev/null +++ b/examples/vue-3-cli/src/stories/Page.vue @@ -0,0 +1,78 @@ + + + diff --git a/examples/vue-3-cli/src/stories/assets/code-brackets.svg b/examples/vue-3-cli/src/stories/assets/code-brackets.svg new file mode 100644 index 000000000000..73de94776001 --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/assets/colors.svg b/examples/vue-3-cli/src/stories/assets/colors.svg new file mode 100644 index 000000000000..17d58d516e14 --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/assets/comments.svg b/examples/vue-3-cli/src/stories/assets/comments.svg new file mode 100644 index 000000000000..6493a139f523 --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/assets/direction.svg b/examples/vue-3-cli/src/stories/assets/direction.svg new file mode 100644 index 000000000000..65676ac27229 --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/assets/flow.svg b/examples/vue-3-cli/src/stories/assets/flow.svg new file mode 100644 index 000000000000..8ac27db403c2 --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/assets/plugin.svg b/examples/vue-3-cli/src/stories/assets/plugin.svg new file mode 100644 index 000000000000..29e5c690c0a2 --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/assets/repo.svg b/examples/vue-3-cli/src/stories/assets/repo.svg new file mode 100644 index 000000000000..f386ee902c1f --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/assets/stackalt.svg b/examples/vue-3-cli/src/stories/assets/stackalt.svg new file mode 100644 index 000000000000..9b7ad2743506 --- /dev/null +++ b/examples/vue-3-cli/src/stories/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/examples/vue-3-cli/src/stories/button.css b/examples/vue-3-cli/src/stories/button.css new file mode 100644 index 000000000000..dc91dc76370b --- /dev/null +++ b/examples/vue-3-cli/src/stories/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/examples/vue-3-cli/src/stories/header.css b/examples/vue-3-cli/src/stories/header.css new file mode 100644 index 000000000000..acadc9ec8c7f --- /dev/null +++ b/examples/vue-3-cli/src/stories/header.css @@ -0,0 +1,26 @@ +.wrapper { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 15px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +svg { + display: inline-block; + vertical-align: top; +} + +h1 { + font-weight: 900; + font-size: 20px; + line-height: 1; + margin: 6px 0 6px 10px; + display: inline-block; + vertical-align: top; +} + +button + button { + margin-left: 10px; +} diff --git a/examples/vue-3-cli/src/stories/page.css b/examples/vue-3-cli/src/stories/page.css new file mode 100644 index 000000000000..51c9d099a139 --- /dev/null +++ b/examples/vue-3-cli/src/stories/page.css @@ -0,0 +1,69 @@ +section { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 24px; + padding: 48px 20px; + margin: 0 auto; + max-width: 600px; + color: #333; +} + +h2 { + font-weight: 900; + font-size: 32px; + line-height: 1; + margin: 0 0 4px; + display: inline-block; + vertical-align: top; +} + +p { + margin: 1em 0; +} + +a { + text-decoration: none; + color: #1ea7fd; +} + +ul { + padding-left: 30px; + margin: 1em 0; +} + +li { + margin-bottom: 8px; +} + +.tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +.tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +.tip-wrapper svg { + display: inline-block; + height: 12px; + width: 12px; + margin-right: 4px; + vertical-align: top; + margin-top: 3px; +} + +.tip-wrapper svg path { + fill: #1ea7fd; +} diff --git a/yarn.lock b/yarn.lock index db2af29e4301..8b31ba7c4ab5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5246,6 +5246,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== +"@types/json-schema@^7.0.4": + version "7.0.7" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" + integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -5669,7 +5674,7 @@ "@types/webpack" "*" loglevel "^1.6.2" -"@types/webpack-dev-server@*": +"@types/webpack-dev-server@*", "@types/webpack-dev-server@^3.11.0": version "3.11.1" resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.11.1.tgz#f8f4dac1da226d530bd15a1d5dc34b23ba766ccb" integrity sha512-rIb+LtUkKnh7+oIJm3WiMJONd71Q0lZuqGLcSqhZ5qjN9gV/CNmZe7Bai+brnBPZ/KVYOsr+4bFLiNZwjBicLw== @@ -5680,7 +5685,7 @@ "@types/serve-static" "*" "@types/webpack" "*" -"@types/webpack-env@^1.15.1", "@types/webpack-env@^1.16.0": +"@types/webpack-env@^1.15.1", "@types/webpack-env@^1.15.2", "@types/webpack-env@^1.16.0": version "1.16.0" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.0.tgz#8c0a9435dfa7b3b1be76562f3070efb3f92637b4" integrity sha512-Fx+NpfOO0CpeYX2g9bkvX8O5qh9wrU1sOF4g8sft4Mu7z+qfe387YlyY8w8daDyDsKY5vUxM0yxkAYnbkRbZEw== @@ -5730,7 +5735,7 @@ "@types/webpack-sources" "*" source-map "^0.6.0" -"@types/webpack@^4.41.26": +"@types/webpack@^4.0.0", "@types/webpack@^4.41.26": version "4.41.26" resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.26.tgz#27a30d7d531e16489f9c7607c747be6bc1a459ef" integrity sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA== @@ -5909,6 +5914,28 @@ core-js-compat "^3.6.5" semver "^6.1.0" +"@vue/babel-preset-app@^4.5.11": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.5.11.tgz#f677bc10472e418f71f61f10dde5a79976a215b8" + integrity sha512-9VoFlm/9vhynKNGM+HA7qBsoQSUEnuG5i5kcFI9vTLLrh8A0fxrwUyVLLppO6T1sAZ6vrKdQFnEkjL+RkRAwWQ== + dependencies: + "@babel/core" "^7.11.0" + "@babel/helper-compilation-targets" "^7.9.6" + "@babel/helper-module-imports" "^7.8.3" + "@babel/plugin-proposal-class-properties" "^7.8.3" + "@babel/plugin-proposal-decorators" "^7.8.3" + "@babel/plugin-syntax-dynamic-import" "^7.8.3" + "@babel/plugin-syntax-jsx" "^7.8.3" + "@babel/plugin-transform-runtime" "^7.11.0" + "@babel/preset-env" "^7.11.0" + "@babel/runtime" "^7.11.0" + "@vue/babel-plugin-jsx" "^1.0.0-0" + "@vue/babel-preset-jsx" "^1.1.2" + babel-plugin-dynamic-import-node "^2.3.3" + core-js "^3.6.5" + core-js-compat "^3.6.5" + semver "^6.1.0" + "@vue/babel-preset-jsx@^1.1.2", "@vue/babel-preset-jsx@^1.2.4": version "1.2.4" resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz#92fea79db6f13b01e80d3a0099e2924bdcbe4e87" @@ -5977,6 +6004,11 @@ resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.5.9.tgz#393418b6d5eaf8638f599c939cb425838257d37c" integrity sha512-E2PWv6tCdUz+eEDj2Th2oxiKmzMe02qi0PcxiNaO7oaqggmEOrp1rLgop7DWpiLDBiqUZk2x0vjK/q2Tz8z/eg== +"@vue/cli-overlay@^4.5.11": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.5.11.tgz#ea99493131182285f7ac2762290354d6e5b188e8" + integrity sha512-aDQNw+oGk5+KR0vL9TocjfzyYHTJxR2lS8iPbcL4lRglCs2dudOE7QWXypj5dM4rQus0jJ5fxJTS55o9uy9fcQ== + "@vue/cli-plugin-babel@~4.3.1": version "4.3.1" resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.3.1.tgz#6e3a6aa18595b98ad5c52898a2850d452404712b" @@ -5990,6 +6022,19 @@ thread-loader "^2.1.3" webpack "^4.0.0" +"@vue/cli-plugin-babel@~4.5.0": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.11.tgz#7c1db4ca2f911e2156e7d1cf774fe2ad0f7428eb" + integrity sha512-ogUMeO2waDtghIWwmuAzMJAnnPdmqRdJlwJDca9u6BK9jX1bxNThBSFS/MN2VmlYzulOnqH4zAC87jTWNg/czg== + dependencies: + "@babel/core" "^7.11.0" + "@vue/babel-preset-app" "^4.5.11" + "@vue/cli-shared-utils" "^4.5.11" + babel-loader "^8.1.0" + cache-loader "^4.1.0" + thread-loader "^2.1.3" + webpack "^4.0.0" + "@vue/cli-plugin-router@^4.3.1": version "4.5.9" resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.5.9.tgz#b3d23a8083d26a81bd09bf9c8d010a3e4e4b13d0" @@ -5997,6 +6042,13 @@ dependencies: "@vue/cli-shared-utils" "^4.5.9" +"@vue/cli-plugin-router@^4.5.11": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.5.11.tgz#3b6df738c5a1a5f50376822bf661d9a3b0c3fa62" + integrity sha512-09tzw3faOs48IUPwLutYaNC7eoyyL140fKruTwdFdXuBLDdSQVida57Brx0zj2UKXc5qF8hk4GoGrOshN0KfNg== + dependencies: + "@vue/cli-shared-utils" "^4.5.11" + "@vue/cli-plugin-typescript@~4.3.1": version "4.3.1" resolved "https://registry.yarnpkg.com/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.3.1.tgz#dd403b78680376b8682f90de3db851ae5ecc71e8" @@ -6013,11 +6065,34 @@ webpack "^4.0.0" yorkie "^2.0.0" +"@vue/cli-plugin-typescript@~4.5.0": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.5.11.tgz#846ee0bf2b4dc3db1243c3dabea709af8d14fcf6" + integrity sha512-oVv4p/gec/xqFuJOUqBxVuThk7fj2QMfoDpe6QfkWIVQU+g8JLpZvOQo0wDMoiHtURQKtqGQCwC57jkKOCufqg== + dependencies: + "@types/webpack-env" "^1.15.2" + "@vue/cli-shared-utils" "^4.5.11" + cache-loader "^4.1.0" + fork-ts-checker-webpack-plugin "^3.1.1" + globby "^9.2.0" + thread-loader "^2.1.3" + ts-loader "^6.2.2" + tslint "^5.20.1" + webpack "^4.0.0" + yorkie "^2.0.0" + optionalDependencies: + fork-ts-checker-webpack-plugin-v5 "npm:fork-ts-checker-webpack-plugin@^5.0.11" + "@vue/cli-plugin-vuex@^4.3.1": version "4.5.9" resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.9.tgz#5ae8f1500c7e29406b02fac82cceaeab86c1e83a" integrity sha512-mFNIJhYiJjzCgytkDHX00ROy5Yzl7prkZpUbeDE0biwcLteMf2s3qZVbESOQl6GcviqcfEt2f3tHQQtLNa+OLg== +"@vue/cli-plugin-vuex@^4.5.11": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.11.tgz#f6f619bcfb66c86cc45340d73152844635e548bd" + integrity sha512-JBPeZLubiSHbRkEKDj0tnLiU43AJ3vt6JULn4IKWH1XWZ6MFC8vElaP5/AA4O3Zko5caamDDBq3TRyxdA2ncUQ== + "@vue/cli-service@~4.3.1": version "4.3.1" resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.3.1.tgz#94b2121d08e343a55f7ecef260af5257a9ffe7e5" @@ -6076,6 +6151,69 @@ webpack-dev-server "^3.10.3" webpack-merge "^4.2.2" +"@vue/cli-service@~4.5.0": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.5.11.tgz#b157e2eee2351889cbbd4ccb4a4a9d8575409175" + integrity sha512-FXeJh2o6B8q/njv2Ebhe9EsLXt9sPMXGDY5zVvcV5jgj9wkoej9yLfnmwWCau5kegNClP6bcM+BEHuMYxJ+ubQ== + dependencies: + "@intervolga/optimize-cssnano-plugin" "^1.0.5" + "@soda/friendly-errors-webpack-plugin" "^1.7.1" + "@soda/get-current-script" "^1.0.0" + "@types/minimist" "^1.2.0" + "@types/webpack" "^4.0.0" + "@types/webpack-dev-server" "^3.11.0" + "@vue/cli-overlay" "^4.5.11" + "@vue/cli-plugin-router" "^4.5.11" + "@vue/cli-plugin-vuex" "^4.5.11" + "@vue/cli-shared-utils" "^4.5.11" + "@vue/component-compiler-utils" "^3.1.2" + "@vue/preload-webpack-plugin" "^1.1.0" + "@vue/web-component-wrapper" "^1.2.0" + acorn "^7.4.0" + acorn-walk "^7.1.1" + address "^1.1.2" + autoprefixer "^9.8.6" + browserslist "^4.12.0" + cache-loader "^4.1.0" + case-sensitive-paths-webpack-plugin "^2.3.0" + cli-highlight "^2.1.4" + clipboardy "^2.3.0" + cliui "^6.0.0" + copy-webpack-plugin "^5.1.1" + css-loader "^3.5.3" + cssnano "^4.1.10" + debug "^4.1.1" + default-gateway "^5.0.5" + dotenv "^8.2.0" + dotenv-expand "^5.1.0" + file-loader "^4.2.0" + fs-extra "^7.0.1" + globby "^9.2.0" + hash-sum "^2.0.0" + html-webpack-plugin "^3.2.0" + launch-editor-middleware "^2.2.1" + lodash.defaultsdeep "^4.6.1" + lodash.mapvalues "^4.6.0" + lodash.transform "^4.6.0" + mini-css-extract-plugin "^0.9.0" + minimist "^1.2.5" + pnp-webpack-plugin "^1.6.4" + portfinder "^1.0.26" + postcss-loader "^3.0.0" + ssri "^7.1.0" + terser-webpack-plugin "^2.3.6" + thread-loader "^2.1.3" + url-loader "^2.2.0" + vue-loader "^15.9.2" + vue-style-loader "^4.1.2" + webpack "^4.0.0" + webpack-bundle-analyzer "^3.8.0" + webpack-chain "^6.4.0" + webpack-dev-server "^3.11.0" + webpack-merge "^4.2.2" + optionalDependencies: + vue-loader-v16 "npm:vue-loader@^16.1.0" + "@vue/cli-shared-utils@^4.3.1", "@vue/cli-shared-utils@^4.5.9": version "4.5.9" resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.5.9.tgz#487cea4b4282f4dff907ee7d8abba8dd0dd03ccd" @@ -6094,6 +6232,24 @@ semver "^6.1.0" strip-ansi "^6.0.0" +"@vue/cli-shared-utils@^4.5.11": + version "4.5.11" + resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.5.11.tgz#fff71673ee9128f998c691515b9d327071b4f41e" + integrity sha512-+aaQ+ThQG3+WMexfSWNl0y6f43edqVqRNbguE53F3TIH81I7saS5S750ayqXhZs2r6STJJyqorQnKtAWfHo29A== + dependencies: + "@hapi/joi" "^15.0.1" + chalk "^2.4.2" + execa "^1.0.0" + launch-editor "^2.2.1" + lru-cache "^5.1.1" + node-ipc "^9.1.1" + open "^6.3.0" + ora "^3.4.0" + read-pkg "^5.1.1" + request "^2.88.2" + semver "^6.1.0" + strip-ansi "^6.0.0" + "@vue/compiler-core@3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.2.tgz#7790b7a1fcbba5ace4d81a70ce59096fa5c95734" @@ -6211,7 +6367,7 @@ "@vue/compiler-dom" "3.0.5" "@vue/shared" "3.0.5" -"@vue/component-compiler-utils@^3.0.2", "@vue/component-compiler-utils@^3.1.0": +"@vue/component-compiler-utils@^3.0.2", "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2": version "3.2.0" resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d" integrity sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw== @@ -6872,7 +7028,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d" integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== -ajv@6.12.6, ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5: +ajv@6.12.6, ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5: version "6.12.6" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== @@ -11712,7 +11868,7 @@ css-loader@^2.1.1: postcss-value-parser "^3.3.0" schema-utils "^1.0.0" -css-loader@^3.4.2, css-loader@^3.6.0: +css-loader@^3.4.2, css-loader@^3.5.3, css-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645" integrity sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ== @@ -15729,6 +15885,23 @@ forever-agent@~0.6.1: resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE= +"fork-ts-checker-webpack-plugin-v5@npm:fork-ts-checker-webpack-plugin@^5.0.11": + version "5.2.1" + resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz#79326d869797906fa8b24e2abcf9421fc805450d" + integrity sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw== + dependencies: + "@babel/code-frame" "^7.8.3" + "@types/json-schema" "^7.0.5" + chalk "^4.1.0" + cosmiconfig "^6.0.0" + deepmerge "^4.2.2" + fs-extra "^9.0.0" + memfs "^3.1.2" + minimatch "^3.0.4" + schema-utils "2.7.0" + semver "^7.3.2" + tapable "^1.0.0" + fork-ts-checker-webpack-plugin@1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz#ce1d77190b44d81a761b10b6284a373795e41f0c" @@ -15967,6 +16140,11 @@ fs-minipass@^2.0.0, fs-minipass@^2.1.0: dependencies: minipass "^3.0.0" +fs-monkey@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.1.tgz#4a82f36944365e619f4454d9fff106553067b781" + integrity sha512-fcSa+wyTqZa46iWweI7/ZiUfegOZl0SG8+dltIwFXo7+zYU9J9kpS3NB6pZcSlJdhvIwp81Adx2XhZorncxiaA== + fs-readdir-recursive@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27" @@ -22380,6 +22558,13 @@ memfs-or-file-map-to-github-branch@^1.1.0: dependencies: "@octokit/rest" "^16.43.1" +memfs@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.2.0.tgz#f9438e622b5acd1daa8a4ae160c496fdd1325b26" + integrity sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A== + dependencies: + fs-monkey "1.0.1" + memoize-id@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/memoize-id/-/memoize-id-0.2.0.tgz#19f018135f7607278639a23667683cbf3cf171cf" @@ -28907,6 +29092,15 @@ scheduler@^0.20.1: loose-envify "^1.1.0" object-assign "^4.1.1" +schema-utils@2.7.0: + version "2.7.0" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7" + integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A== + dependencies: + "@types/json-schema" "^7.0.4" + ajv "^6.12.2" + ajv-keywords "^3.4.1" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" @@ -30924,7 +31118,7 @@ terminal-link@^2.0.0: ansi-escapes "^4.2.1" supports-hyperlinks "^2.0.0" -terser-webpack-plugin@2.3.8, terser-webpack-plugin@^2.1.3, terser-webpack-plugin@^2.3.5: +terser-webpack-plugin@2.3.8, terser-webpack-plugin@^2.1.3, terser-webpack-plugin@^2.3.5, terser-webpack-plugin@^2.3.6: version "2.3.8" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz#894764a19b0743f2f704e7c2a848c5283a696724" integrity sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w== @@ -31870,7 +32064,7 @@ typescript@4.1.3, typescript@^4.1.3: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7" integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg== -typescript@^3.2.4, typescript@^3.8.3, typescript@^3.9.7: +typescript@^3.2.4, typescript@^3.8.3, typescript@^3.9.7, typescript@~3.9.3: version "3.9.7" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== @@ -32839,6 +33033,15 @@ vue-inbrowser-compiler-utils@^4.33.6: dependencies: camelcase "^5.3.1" +"vue-loader-v16@npm:vue-loader@^16.1.0", vue-loader@^16.0.0, vue-loader@^16.1.2: + version "16.1.2" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.1.2.tgz#5c03b6c50d2a5f983c7ceba15c50d78ca2b298f4" + integrity sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q== + dependencies: + chalk "^4.1.0" + hash-sum "^2.0.0" + loader-utils "^2.0.0" + vue-loader@^15.9.1: version "15.9.5" resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.5.tgz#7a960dc420a3439deaacdda038fdcdbf7c432706" @@ -32850,7 +33053,7 @@ vue-loader@^15.9.1: vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" -vue-loader@^15.9.6: +vue-loader@^15.9.2, vue-loader@^15.9.6: version "15.9.6" resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b" integrity sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg== @@ -32861,15 +33064,6 @@ vue-loader@^15.9.6: vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" -vue-loader@^16.0.0: - version "16.1.2" - resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.1.2.tgz#5c03b6c50d2a5f983c7ceba15c50d78ca2b298f4" - integrity sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q== - dependencies: - chalk "^4.1.0" - hash-sum "^2.0.0" - loader-utils "^2.0.0" - vue-property-decorator@8.3.0: version "8.3.0" resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.3.0.tgz#536f027dc7d626f37c8d85a2dc02f0a6cb979440" @@ -33115,7 +33309,7 @@ webidl-conversions@^6.1.0: resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514" integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w== -webpack-bundle-analyzer@^3.4.1, webpack-bundle-analyzer@^3.6.1: +webpack-bundle-analyzer@^3.4.1, webpack-bundle-analyzer@^3.6.1, webpack-bundle-analyzer@^3.8.0: version "3.9.0" resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz#f6f94db108fb574e415ad313de41a2707d33ef3c" integrity sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA== @@ -33274,7 +33468,7 @@ webpack-dev-server@3.11.1: ws "^6.2.1" yargs "^13.3.2" -webpack-dev-server@^3.11.2: +webpack-dev-server@^3.11.0, webpack-dev-server@^3.11.2: version "3.11.2" resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz#695ebced76a4929f0d5de7fd73fafe185fe33708" integrity sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ== From 429c3cc296b15f23754300fbfefa94dc2702cc24 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Fri, 29 Jan 2021 19:03:14 -0700 Subject: [PATCH 05/10] test: add e2e test for vue3 --- scripts/run-e2e-config.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scripts/run-e2e-config.ts b/scripts/run-e2e-config.ts index 42714a268fb8..58475d81ab1a 100644 --- a/scripts/run-e2e-config.ts +++ b/scripts/run-e2e-config.ts @@ -154,6 +154,12 @@ export const vue: Parameters = { generator: `npx @vue/cli@{{version}} create {{name}}-{{version}} --default --packageManager=yarn --no-git --force`, }; +export const vue3: Parameters = { + name: 'vue3', + version: 'next', + generator: `npx @vue/cli@{{version}} create {{name}}-{{version}} --default --packageManager=yarn --no-git --force`, +}; + export const web_components: Parameters = { name: 'web_components', version: 'latest', From fafc6fc6d210a9eb5b80e9a416b132fcaa07c419 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Fri, 29 Jan 2021 20:20:20 -0700 Subject: [PATCH 06/10] fix: write actual error message --- app/vue3/src/client/preview/render.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/vue3/src/client/preview/render.ts b/app/vue3/src/client/preview/render.ts index 5206e2238e80..3a825d00ee8c 100644 --- a/app/vue3/src/client/preview/render.ts +++ b/app/vue3/src/client/preview/render.ts @@ -16,7 +16,8 @@ export const storybookApp = createApp({ setup() { return () => { - if (!activeStoryComponent.value) throw new Error('TODO: No Vue3 story'); + if (!activeStoryComponent.value) + throw new Error('No Vue 3 Story available. Was it set correctly?'); return h(activeStoryComponent.value, activeProps.value); }; }, From 6237d92a54932f401be8b6fd7bffe1dcc40e711b Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Mon, 1 Feb 2021 14:37:55 -0700 Subject: [PATCH 07/10] fix: ensure vue 2 is a devDep of addon-docs --- addons/docs/package.json | 1 + yarn.lock | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/addons/docs/package.json b/addons/docs/package.json index 46961dc15270..bd5618b8ca4d 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -118,6 +118,7 @@ "terser-webpack-plugin": "^3.1.0", "tmp": "^0.2.1", "tslib": "^2.1.0", + "vue": "^2.6.10", "web-component-analyzer": "^1.1.6", "webpack": "^4.46.0", "zone.js": "^0.11.3" diff --git a/yarn.lock b/yarn.lock index 8b31ba7c4ab5..9657f4cbde1a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -33097,7 +33097,7 @@ vue-template-es2015-compiler@^1.9.0: resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== -vue@^2.6.12: +vue@^2.6.10, vue@^2.6.12: version "2.6.12" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123" integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg== From 2bdb5273dddd8b723b3066e95a963a5d4fa8d636 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Mon, 1 Feb 2021 15:19:05 -0700 Subject: [PATCH 08/10] fix: use vue 3 preset in e2e test --- scripts/run-e2e-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/run-e2e-config.ts b/scripts/run-e2e-config.ts index 58475d81ab1a..3fdd66d2dc92 100644 --- a/scripts/run-e2e-config.ts +++ b/scripts/run-e2e-config.ts @@ -157,7 +157,7 @@ export const vue: Parameters = { export const vue3: Parameters = { name: 'vue3', version: 'next', - generator: `npx @vue/cli@{{version}} create {{name}}-{{version}} --default --packageManager=yarn --no-git --force`, + generator: `npx @vue/cli@{{version}} create {{name}}-{{version}} --preset=__default_vue_3__ --packageManager=yarn --no-git --force`, }; export const web_components: Parameters = { From 4024692ff991ff17349470d484d1548fed6042d4 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Mon, 1 Feb 2021 15:48:07 -0700 Subject: [PATCH 09/10] fix: utilize vue/cli at v4 to rely on webpack 4 --- scripts/run-e2e-config.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/run-e2e-config.ts b/scripts/run-e2e-config.ts index 3fdd66d2dc92..e8a6559a5941 100644 --- a/scripts/run-e2e-config.ts +++ b/scripts/run-e2e-config.ts @@ -157,7 +157,8 @@ export const vue: Parameters = { export const vue3: Parameters = { name: 'vue3', version: 'next', - generator: `npx @vue/cli@{{version}} create {{name}}-{{version}} --preset=__default_vue_3__ --packageManager=yarn --no-git --force`, + // Vue CLI v4 utilizes webpack 4, and the 5-alpha uses webpack 5 so we force ^4 here + generator: `npx @vue/cli@^4 create {{name}}-{{version}} --preset=__default_vue_3__ --packageManager=yarn --no-git --force`, }; export const web_components: Parameters = { From 6d31d1ee593eff529e3716899645d764498fa5a5 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Mon, 1 Feb 2021 17:19:23 -0700 Subject: [PATCH 10/10] fix: setup onClick action for e2e tests --- examples/vue-3-cli/src/stories/Button.stories.js | 3 ++- lib/cli/src/frameworks/vue3/Button.stories.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/vue-3-cli/src/stories/Button.stories.js b/examples/vue-3-cli/src/stories/Button.stories.js index fbbe2472db86..e6314882e387 100644 --- a/examples/vue-3-cli/src/stories/Button.stories.js +++ b/examples/vue-3-cli/src/stories/Button.stories.js @@ -6,13 +6,14 @@ export default { argTypes: { backgroundColor: { control: 'color' }, size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }, + onClick: {}, }, }; const Template = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { MyButton }, - template: '', + template: '', }); export const Primary = Template.bind({}); diff --git a/lib/cli/src/frameworks/vue3/Button.stories.js b/lib/cli/src/frameworks/vue3/Button.stories.js index fbbe2472db86..e6314882e387 100644 --- a/lib/cli/src/frameworks/vue3/Button.stories.js +++ b/lib/cli/src/frameworks/vue3/Button.stories.js @@ -6,13 +6,14 @@ export default { argTypes: { backgroundColor: { control: 'color' }, size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }, + onClick: {}, }, }; const Template = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { MyButton }, - template: '', + template: '', }); export const Primary = Template.bind({});