From 765423f3af4b1d8636e6e254db916c6954ac36f0 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 21 Sep 2022 23:12:14 -0400 Subject: [PATCH 01/15] Add vue-vite framework --- code/frameworks/vue-vite/README.md | 48 +++++++++++ code/frameworks/vue-vite/package.json | 82 +++++++++++++++++++ code/frameworks/vue-vite/preset.js | 1 + code/frameworks/vue-vite/src/index.ts | 2 + .../vue-vite/src/plugins/vue-docgen.ts | 27 ++++++ code/frameworks/vue-vite/src/preset.ts | 44 ++++++++++ code/frameworks/vue-vite/tsconfig.json | 9 ++ code/lib/cli/src/repro-templates.ts | 15 ++++ code/lib/cli/src/versions.ts | 1 + code/workspace.json | 5 ++ code/yarn.lock | 52 +++++++++++- 11 files changed, 285 insertions(+), 1 deletion(-) create mode 100644 code/frameworks/vue-vite/README.md create mode 100644 code/frameworks/vue-vite/package.json create mode 100644 code/frameworks/vue-vite/preset.js create mode 100644 code/frameworks/vue-vite/src/index.ts create mode 100644 code/frameworks/vue-vite/src/plugins/vue-docgen.ts create mode 100644 code/frameworks/vue-vite/src/preset.ts create mode 100644 code/frameworks/vue-vite/tsconfig.json diff --git a/code/frameworks/vue-vite/README.md b/code/frameworks/vue-vite/README.md new file mode 100644 index 000000000000..60aad7efd48e --- /dev/null +++ b/code/frameworks/vue-vite/README.md @@ -0,0 +1,48 @@ +# Storybook for Vue and Vite + +Storybook for Vue is a UI development environment for your Vue components. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/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-vue-app +npx storybook init +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework + + + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. + +## Vue Notes + +- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`. + +## Known Limitations + +In Storybook story and decorator components, you can not access the Vue instance +in factory functions for default prop values: + +```js +{ + props: { + foo: { + default() { + return this.bar; // does not work! + } + } + } +} +``` diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json new file mode 100644 index 000000000000..7233366291ba --- /dev/null +++ b/code/frameworks/vue-vite/package.json @@ -0,0 +1,82 @@ +{ + "name": "@storybook/vue-vite", + "version": "7.0.0-alpha.33", + "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/vue-vite", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "frameworks/vue-vite" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./preset": { + "require": "./dist/preset.js", + "import": "./dist/preset.mjs", + "types": "./dist/preset.d.ts" + }, + "./package.json": { + "require": "./package.json", + "import": "./package.json", + "types": "./package.json" + } + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "check": "../../../scripts/node_modules/.bin/tsc --noEmit", + "prep": "../../../scripts/prepare/bundle.ts" + }, + "dependencies": { + "@storybook/builder-vite": "7.0.0-alpha.33", + "@storybook/core-common": "7.0.0-alpha.33", + "@storybook/core-server": "7.0.0-alpha.33", + "@storybook/vue": "7.0.0-alpha.33", + "magic-string": "^0.26.1", + "vite": "^3.1.3", + "vue-docgen-api": "^4.40.0" + }, + "devDependencies": { + "typescript": "~4.6.3", + "vue": "^2.7.10" + }, + "peerDependencies": { + "vue": "^2.7.0" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "bundler": { + "entries": [ + "./src/index.ts", + "./src/preset.ts" + ], + "platform": "node" + }, + "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a" +} diff --git a/code/frameworks/vue-vite/preset.js b/code/frameworks/vue-vite/preset.js new file mode 100644 index 000000000000..a83f95279e7f --- /dev/null +++ b/code/frameworks/vue-vite/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset'); diff --git a/code/frameworks/vue-vite/src/index.ts b/code/frameworks/vue-vite/src/index.ts new file mode 100644 index 000000000000..1327acc566ac --- /dev/null +++ b/code/frameworks/vue-vite/src/index.ts @@ -0,0 +1,2 @@ +export * from '@storybook/vue'; +export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts new file mode 100644 index 000000000000..6bed6a1fed98 --- /dev/null +++ b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts @@ -0,0 +1,27 @@ +import { parse } from 'vue-docgen-api'; +import type { PluginOption } from 'vite'; +import { createFilter } from 'vite'; +import MagicString from 'magic-string'; + +export function vueDocgen(): PluginOption { + const include = /\.(vue)$/; + const filter = createFilter(include); + + return { + name: 'storybook:vue-docgen-plugin', + + async transform(src: string, id: string) { + if (!filter(id)) return undefined; + + const metaData = await parse(id); + const metaSource = JSON.stringify(metaData); + const s = new MagicString(src); + s.append(`;_sfc_main.__docgenInfo = ${metaSource}`); + + return { + code: s.toString(), + map: s.generateMap({ hires: true, source: id }), + }; + }, + }; +} diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts new file mode 100644 index 000000000000..1542d42930bd --- /dev/null +++ b/code/frameworks/vue-vite/src/preset.ts @@ -0,0 +1,44 @@ +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/builder-vite'; +import { vueDocgen } from './plugins/vue-docgen'; + +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + + return { + ...config, + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-vite', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework?.options.builder || {}, + }, + }; +}; + +export const addons: StorybookConfig['addons'] = ['@storybook/vue']; + +export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({ + ...config, + skipBabel: true, +}); + +export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { + const { plugins = [] } = config; + + plugins.push(vueDocgen()); + + const updated = { + ...config, + plugins, + resolve: { + ...config.resolve, + alias: { + ...config.resolve?.alias, + vue: 'vue/dist/vue.esm.js', + }, + }, + }; + return updated; +}; diff --git a/code/frameworks/vue-vite/tsconfig.json b/code/frameworks/vue-vite/tsconfig.json new file mode 100644 index 000000000000..88fbabf6e314 --- /dev/null +++ b/code/frameworks/vue-vite/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "strict": true, + "resolveJsonModule": true + }, + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index 8910264bc56c..c9a0721b3a42 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -67,6 +67,20 @@ const vue3ViteTemplates = { }, }; +const vue2ViteTemplates = { + 'vue2-vite/2.7-js': { + name: 'Vue2 Vite (vue 2.7 JS)', + script: + 'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js', + cadence: ['ci', 'daily', 'weekly'], + expected: { + framework: '@storybook/vue2-vite', + renderer: '@storybook/vue2', + builder: '@storybook/builder-vite', + }, + }, +}; + const svelteViteTemplates = { 'svelte-vite/default-js': { name: 'Svelte Vite (JS)', @@ -124,6 +138,7 @@ const vueCliTemplates = { export default { ...craTemplates, ...reactViteTemplates, + ...vue2ViteTemplates, ...vue3ViteTemplates, ...svelteViteTemplates, ...vueCliTemplates, diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 51be6451f314..fa5a3e8723a6 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -72,6 +72,7 @@ export default { '@storybook/ui': '7.0.0-alpha.33', '@storybook/vue': '7.0.0-alpha.33', '@storybook/vue-webpack5': '7.0.0-alpha.33', + '@storybook/vue-vite': '7.0.0-alpha.33', '@storybook/vue3': '7.0.0-alpha.33', '@storybook/vue3-vite': '7.0.0-alpha.33', '@storybook/vue3-webpack5': '7.0.0-alpha.33', diff --git a/code/workspace.json b/code/workspace.json index a08ed1c6f24a..8b0ee37c9b8b 100644 --- a/code/workspace.json +++ b/code/workspace.json @@ -381,6 +381,11 @@ "type": "library", "implicitDependencies": [] }, + "@storybook/vue-vite": { + "root": "frameworks/vue-vite", + "type": "library", + "implicitDependencies": [] + }, "@storybook/vue3": { "root": "renderers/vue3", "type": "library", diff --git a/code/yarn.lock b/code/yarn.lock index a7ab9b3065a1..7f5f7d09b6f2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -9553,6 +9553,24 @@ __metadata: languageName: unknown linkType: soft +"@storybook/vue-vite@workspace:frameworks/vue-vite": + version: 0.0.0-use.local + resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite" + dependencies: + "@storybook/builder-vite": 7.0.0-alpha.33 + "@storybook/core-common": 7.0.0-alpha.33 + "@storybook/core-server": 7.0.0-alpha.33 + "@storybook/vue": 7.0.0-alpha.33 + magic-string: ^0.26.1 + typescript: ~4.6.3 + vite: ^3.1.3 + vue: ^2.7.10 + vue-docgen-api: ^4.40.0 + peerDependencies: + vue: ^2.7.0 + languageName: unknown + linkType: soft + "@storybook/vue-webpack5@7.0.0-alpha.33, @storybook/vue-webpack5@workspace:*, @storybook/vue-webpack5@workspace:frameworks/vue-webpack5": version: 0.0.0-use.local resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5" @@ -44718,6 +44736,38 @@ __metadata: languageName: node linkType: hard +"vite@npm:^3.1.3": + version: 3.1.3 + resolution: "vite@npm:3.1.3" + dependencies: + esbuild: ^0.15.6 + fsevents: ~2.3.2 + postcss: ^8.4.16 + resolve: ^1.22.1 + rollup: ~2.78.0 + peerDependencies: + less: "*" + sass: "*" + stylus: "*" + terser: ^5.4.0 + dependenciesMeta: + fsevents: + optional: true + peerDependenciesMeta: + less: + optional: true + sass: + optional: true + stylus: + optional: true + terser: + optional: true + bin: + vite: bin/vite.js + checksum: c8f7062b9018d7fdb8391ede4133c98341cc15a9323a39d9c4485e03dd1db93818f40d6580313d6ce5b8a4f2058e53dd7b0dd4e39f3f6ac7ed7ca83f540e7505 + languageName: node + linkType: hard + "vlq@npm:^0.2.1": version: 0.2.3 resolution: "vlq@npm:0.2.3" @@ -45036,7 +45086,7 @@ __metadata: languageName: node linkType: hard -"vue@npm:^2.6.12": +"vue@npm:^2.6.12, vue@npm:^2.7.10": version: 2.7.10 resolution: "vue@npm:2.7.10" dependencies: From ea1bc4e51a41b78d5e4c07d4a532f95c11631cbe Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 21 Sep 2022 23:13:48 -0400 Subject: [PATCH 02/15] Synchronize vite versions Otherwise we end up with type problems between different versions. --- code/frameworks/react-vite/package.json | 4 +-- code/frameworks/svelte-vite/package.json | 4 +-- code/frameworks/vue3-vite/package.json | 4 +-- code/lib/builder-vite/package.json | 4 +-- code/yarn.lock | 40 +++--------------------- 5 files changed, 12 insertions(+), 44 deletions(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index e2df08912f5f..449845af6fc9 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -59,12 +59,12 @@ "ast-types": "^0.14.2", "magic-string": "^0.26.1", "react-docgen": "^6.0.0-alpha.3", - "vite": "3" + "vite": "^3.1.3" }, "devDependencies": { "@types/node": "^14.14.20 || ^16.0.0", "typescript": "~4.6.3", - "vite": "^3.1.0" + "vite": "^3.1.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 64e955f5d037..274bcec68309 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -59,12 +59,12 @@ "magic-string": "^0.26.1", "svelte": "^3.0.0", "sveltedoc-parser": "^4.2.1", - "vite": "3" + "vite": "^3.1.3" }, "devDependencies": { "@types/node": "^14.14.20 || ^16.0.0", "typescript": "~4.6.3", - "vite": "^3.1.0" + "vite": "^3.1.3" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index bafbd75fa6d9..076627531faf 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -56,13 +56,13 @@ "@storybook/vue3": "7.0.0-alpha.33", "@vitejs/plugin-vue": "^3.0.3", "magic-string": "^0.26.1", - "vite": "3", + "vite": "^3.1.3", "vue-docgen-api": "^4.40.0" }, "devDependencies": { "@types/node": "^14.14.20 || ^16.0.0", "typescript": "~4.6.3", - "vite": "^3.1.0" + "vite": "^3.1.3" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index d66a7fdbe63e..8ae75e0bae4d 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -35,14 +35,14 @@ "glob-promise": "^4.2.0", "magic-string": "^0.26.1", "slash": "^3.0.0", - "vite": "3" + "vite": "^3.1.3" }, "devDependencies": { "@storybook/mdx2-csf": "^0.0.3", "@types/express": "^4.17.13", "@types/node": "^17.0.23", "typescript": "~4.6.3", - "vite": "^3.1.0" + "vite": "^3.1.3" }, "peerDependencies": { "@storybook/mdx2-csf": "^0.0.3" diff --git a/code/yarn.lock b/code/yarn.lock index 7f5f7d09b6f2..5663a7c9d4b0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7758,7 +7758,7 @@ __metadata: magic-string: ^0.26.1 slash: ^3.0.0 typescript: ~4.6.3 - vite: ^3.1.0 + vite: ^3.1.3 peerDependencies: "@storybook/mdx2-csf": ^0.0.3 peerDependenciesMeta: @@ -8918,7 +8918,7 @@ __metadata: magic-string: ^0.26.1 react-docgen: ^6.0.0-alpha.3 typescript: ~4.6.3 - vite: ^3.1.0 + vite: ^3.1.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -9395,7 +9395,7 @@ __metadata: svelte: ^3.0.0 sveltedoc-parser: ^4.2.1 typescript: ~4.6.3 - vite: ^3.1.0 + vite: ^3.1.3 languageName: unknown linkType: soft @@ -9607,7 +9607,7 @@ __metadata: "@vitejs/plugin-vue": ^3.0.3 magic-string: ^0.26.1 typescript: ~4.6.3 - vite: ^3.1.0 + vite: ^3.1.3 vue-docgen-api: ^4.40.0 languageName: unknown linkType: soft @@ -44704,38 +44704,6 @@ __metadata: languageName: node linkType: hard -"vite@npm:^3.1.0": - version: 3.1.0 - resolution: "vite@npm:3.1.0" - dependencies: - esbuild: ^0.15.6 - fsevents: ~2.3.2 - postcss: ^8.4.16 - resolve: ^1.22.1 - rollup: ~2.78.0 - peerDependencies: - less: "*" - sass: "*" - stylus: "*" - terser: ^5.4.0 - dependenciesMeta: - fsevents: - optional: true - peerDependenciesMeta: - less: - optional: true - sass: - optional: true - stylus: - optional: true - terser: - optional: true - bin: - vite: bin/vite.js - checksum: 38c1a495226ebda7a3f2b341152dc01cb13cbe014a0f834c0bae2f29a6a4fefa3a18587a8d787e25e0ebbd4874da2506a87e3e37b959b26ee8a22983fed2a9e0 - languageName: node - linkType: hard - "vite@npm:^3.1.3": version: 3.1.3 resolution: "vite@npm:3.1.3" From d46a5c4daccb7b36c69c8b16de33e6ce62210c01 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 21 Sep 2022 23:15:34 -0400 Subject: [PATCH 03/15] Cleanup readPackageJson functions It's only used in the react framework, and doesn't need to be exported --- code/frameworks/react-vite/src/preset.ts | 2 +- code/frameworks/svelte-vite/src/preset.ts | 10 ---------- code/lib/builder-vite/src/vite-config.ts | 10 ---------- 3 files changed, 1 insertion(+), 21 deletions(-) diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts index 0abcdd4d9db8..5eae98e6c54f 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -9,7 +9,7 @@ export const core: StorybookConfig['core'] = { builder: '@storybook/builder-vite', }; -export function readPackageJson(): Record | false { +function readPackageJson(): Record | false { const packageJsonPath = path.resolve('package.json'); if (!fs.existsSync(packageJsonPath)) { return false; diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 8006514d2fde..4a42670aec52 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -9,16 +9,6 @@ export const core: StorybookConfig['core'] = { builder: '@storybook/builder-vite', }; -export function readPackageJson(): Record | false { - const packageJsonPath = path.resolve('package.json'); - if (!fs.existsSync(packageJsonPath)) { - return false; - } - - const jsonContent = fs.readFileSync(packageJsonPath, 'utf8'); - return JSON.parse(jsonContent); -} - export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { const { plugins = [] } = config; diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index ccc58b27dfc6..ee565912a5e8 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/code/lib/builder-vite/src/vite-config.ts @@ -20,16 +20,6 @@ import type { ExtendedOptions, EnvsRaw } from './types'; export type PluginConfigType = 'build' | 'development'; -export function readPackageJson(): Record | false { - const packageJsonPath = path.resolve('package.json'); - if (!fs.existsSync(packageJsonPath)) { - return false; - } - - const jsonContent = fs.readFileSync(packageJsonPath, 'utf8'); - return JSON.parse(jsonContent); -} - const configEnvServe: ConfigEnv = { mode: 'development', command: 'serve', From 55131bba8cc6d4c64d09ac64e7acc8456c99d11a Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 21 Sep 2022 23:15:50 -0400 Subject: [PATCH 04/15] Remove console.log --- code/frameworks/vue3-vite/preset.js | 1 - 1 file changed, 1 deletion(-) diff --git a/code/frameworks/vue3-vite/preset.js b/code/frameworks/vue3-vite/preset.js index b27b9a283650..a83f95279e7f 100644 --- a/code/frameworks/vue3-vite/preset.js +++ b/code/frameworks/vue3-vite/preset.js @@ -1,2 +1 @@ -console.log('vue3-vite preset!'); module.exports = require('./dist/preset'); From 5da1246c517a91ae17b1c190cf0baf7a3f44e983 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 21 Sep 2022 23:16:23 -0400 Subject: [PATCH 05/15] Add file extensions to vue imports Webpack doesn't need them, but Vite does --- code/lib/cli/rendererAssets/vue/Header.stories.js | 2 +- code/lib/cli/rendererAssets/vue/Page.stories.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/rendererAssets/vue/Header.stories.js b/code/lib/cli/rendererAssets/vue/Header.stories.js index af27f18a9db3..8878aa5f88af 100644 --- a/code/lib/cli/rendererAssets/vue/Header.stories.js +++ b/code/lib/cli/rendererAssets/vue/Header.stories.js @@ -1,4 +1,4 @@ -import MyHeader from './Header'; +import MyHeader from './Header.vue'; export default { title: 'Example/Header', diff --git a/code/lib/cli/rendererAssets/vue/Page.stories.js b/code/lib/cli/rendererAssets/vue/Page.stories.js index fd168a48d3fa..cdb1e24ba717 100644 --- a/code/lib/cli/rendererAssets/vue/Page.stories.js +++ b/code/lib/cli/rendererAssets/vue/Page.stories.js @@ -1,6 +1,6 @@ import { within, userEvent } from '@storybook/testing-library'; -import MyPage from './Page'; +import MyPage from './Page.vue'; export default { title: 'Example/Page', From 8366da7a93ea30433e8c40f4b6c8ded4995994ee Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 21 Sep 2022 23:24:55 -0400 Subject: [PATCH 06/15] Clean up unused imports --- code/frameworks/svelte-vite/src/preset.ts | 2 -- code/lib/builder-vite/src/vite-config.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 4a42670aec52..8c0387342d33 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -1,5 +1,3 @@ -import path from 'path'; -import fs from 'fs'; import type { StorybookConfig } from '@storybook/builder-vite'; import { svelteDocgen } from './plugins/svelte-docgen'; diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index ee565912a5e8..0eaf8c9d2a5c 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/code/lib/builder-vite/src/vite-config.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import fs from 'fs'; import { loadConfigFromFile, mergeConfig } from 'vite'; import type { ConfigEnv, From 51416472bba6d9ae2e76934caf7e6dbb91f917f2 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 22 Sep 2022 07:35:27 -0400 Subject: [PATCH 07/15] Fix parallelism --- .circleci/config.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 834a6a8d33d7..8c46a21e3ccf 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -477,7 +477,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 8 + 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: 8 + 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: 8 + 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: 8 + 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: 8 + 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: 8 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' From 8f5ba9d0916cdf73c40844e89830b3bfafc7aa50 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 23 Sep 2022 09:09:40 -0400 Subject: [PATCH 08/15] Fix docgen info location ref https://github.com/Djaler/storybook-builder-vite-vue2/blob/a0ddf85bd3f500557f4f104bb06a0c6dc4392a6e/packages/builder-vite/plugins/vue-docgen.ts#L14 --- code/frameworks/vue-vite/src/plugins/vue-docgen.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts index 6bed6a1fed98..e80ca52d60c2 100644 --- a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts @@ -8,7 +8,7 @@ export function vueDocgen(): PluginOption { const filter = createFilter(include); return { - name: 'storybook:vue-docgen-plugin', + name: 'storybook:vue2-docgen-plugin', async transform(src: string, id: string) { if (!filter(id)) return undefined; @@ -16,7 +16,7 @@ export function vueDocgen(): PluginOption { const metaData = await parse(id); const metaSource = JSON.stringify(metaData); const s = new MagicString(src); - s.append(`;_sfc_main.__docgenInfo = ${metaSource}`); + s.append(`;__component__.exports.__docgenInfo = ${metaSource}`); return { code: s.toString(), From fb8f6de6c1b63203133a16687c715c4a7c2be68d Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 26 Sep 2022 13:38:28 -0400 Subject: [PATCH 09/15] Add todo for script -> generator --- code/lib/cli/src/repro-templates.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index c9a0721b3a42..fbcdd79d0f42 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -70,6 +70,9 @@ const vue3ViteTemplates = { const vue2ViteTemplates = { 'vue2-vite/2.7-js': { name: 'Vue2 Vite (vue 2.7 JS)', + // TODO: convert this to an `npm create` script, use that instead. + // We don't really want to maintain weird custom scripts like this, + // preferring community bootstrap scripts / generators instead. script: 'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js', cadence: ['ci', 'daily', 'weekly'], From 6ebcb254596b27fcc5df9fbd3c4cec5c7b940d41 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 2 Oct 2022 20:27:54 +0800 Subject: [PATCH 10/15] Update version --- code/frameworks/vue-vite/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 7233366291ba..00f74282f2b6 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-vite", - "version": "7.0.0-alpha.33", + "version": "7.0.0-alpha.34", "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,10 +50,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.0.0-alpha.33", - "@storybook/core-common": "7.0.0-alpha.33", - "@storybook/core-server": "7.0.0-alpha.33", - "@storybook/vue": "7.0.0-alpha.33", + "@storybook/builder-vite": "7.0.0-alpha.34", + "@storybook/core-common": "7.0.0-alpha.34", + "@storybook/core-server": "7.0.0-alpha.34", + "@storybook/vue": "7.0.0-alpha.34", "magic-string": "^0.26.1", "vite": "^3.1.3", "vue-docgen-api": "^4.40.0" From 29c27aa5ab289c95917960bdfb27b52d3ab6d447 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 2 Oct 2022 21:04:18 +0800 Subject: [PATCH 11/15] Fix circle parallelism --- .circleci/config.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 26391ee84598..84b76e29a9d9 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -477,7 +477,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 9 + parallelism: 10 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: 9 + parallelism: 10 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: 9 + parallelism: 10 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: 9 + parallelism: 10 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: 9 + parallelism: 10 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -565,7 +565,7 @@ jobs: executor: class: medium+ name: sb_playwright - parallelism: 9 + parallelism: 10 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' From 537c8bdb6295d6b500cd03164cc67d0e336f12e5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 3 Oct 2022 00:46:12 +0800 Subject: [PATCH 12/15] Fix typoo --- code/lib/cli/src/repro-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index eee7b199d441..ad645505fc8b 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -78,7 +78,7 @@ const vue2ViteTemplates = { cadence: ['ci', 'daily', 'weekly'], expected: { framework: '@storybook/vue2-vite', - renderer: '@storybook/vue2', + renderer: '@storybook/vue', builder: '@storybook/builder-vite', }, }, From ed07861e5081a4723aa4940736b528b0d87a0223 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 3 Oct 2022 01:02:22 +0800 Subject: [PATCH 13/15] Add vue-vite exports for builder-vite --- code/frameworks/vue-vite/package.json | 4 ++++ code/frameworks/vue-vite/src/index.ts | 7 +++++++ code/yarn.lock | 4 ++++ 3 files changed, 15 insertions(+) diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 00f74282f2b6..60e880a121f7 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -51,8 +51,12 @@ }, "dependencies": { "@storybook/builder-vite": "7.0.0-alpha.34", + "@storybook/channel-postmessage": "7.0.0-alpha.34", + "@storybook/channel-websocket": "7.0.0-alpha.34", + "@storybook/client-api": "7.0.0-alpha.34", "@storybook/core-common": "7.0.0-alpha.34", "@storybook/core-server": "7.0.0-alpha.34", + "@storybook/preview-web": "7.0.0-alpha.34", "@storybook/vue": "7.0.0-alpha.34", "magic-string": "^0.26.1", "vite": "^3.1.3", diff --git a/code/frameworks/vue-vite/src/index.ts b/code/frameworks/vue-vite/src/index.ts index 1327acc566ac..f2f5e26c1ee6 100644 --- a/code/frameworks/vue-vite/src/index.ts +++ b/code/frameworks/vue-vite/src/index.ts @@ -1,2 +1,9 @@ +// exports for builder-vite +export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; +export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; +export { addons } from '@storybook/addons'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; +export { ClientApi } from '@storybook/client-api'; + export * from '@storybook/vue'; export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/yarn.lock b/code/yarn.lock index 7075bdb318be..af39c03f58bb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -9124,8 +9124,12 @@ __metadata: resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite" dependencies: "@storybook/builder-vite": 7.0.0-alpha.34 + "@storybook/channel-postmessage": 7.0.0-alpha.34 + "@storybook/channel-websocket": 7.0.0-alpha.34 + "@storybook/client-api": 7.0.0-alpha.34 "@storybook/core-common": 7.0.0-alpha.34 "@storybook/core-server": 7.0.0-alpha.34 + "@storybook/preview-web": 7.0.0-alpha.34 "@storybook/vue": 7.0.0-alpha.34 magic-string: ^0.26.1 typescript: ~4.6.3 From 6bb0e7454a38ee79e16b32506ef03fbc174bffd7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 3 Oct 2022 01:05:12 +0800 Subject: [PATCH 14/15] Comment test code (will get deleted soon) --- .../src/stories/components/button.stories.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/code/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/code/examples/vue-kitchen-sink/src/stories/components/button.stories.js index e071f12d20d3..e7553331a36b 100644 --- a/code/examples/vue-kitchen-sink/src/stories/components/button.stories.js +++ b/code/examples/vue-kitchen-sink/src/stories/components/button.stories.js @@ -22,14 +22,14 @@ Rounded.args = { color: '#f00', label: 'A Button with rounded edges', }; -Rounded.decorators = [ - (storyFn, context) => { - return storyFn({ ...context, args: { ...context.args, label: 'Overridden args' } }); - }, - () => ({ - template: '
', - }), -]; +// Rounded.decorators = [ +// (storyFn, context) => { +// return storyFn({ ...context, args: { ...context.args, label: 'Overridden args' } }); +// }, +// () => ({ +// template: '
', +// }), +// ]; Rounded.play = async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole('button')); From 3bfce91637c62c79b7bef32c4ac10c3007d8040d Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Sun, 2 Oct 2022 20:54:11 -0400 Subject: [PATCH 15/15] Add missing dependency on "@storybook/addons" --- code/frameworks/vue-vite/package.json | 1 + code/yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 60e880a121f7..1b18bda603d5 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -50,6 +50,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/addons": "7.0.0-alpha.34", "@storybook/builder-vite": "7.0.0-alpha.34", "@storybook/channel-postmessage": "7.0.0-alpha.34", "@storybook/channel-websocket": "7.0.0-alpha.34", diff --git a/code/yarn.lock b/code/yarn.lock index af39c03f58bb..6d695addd6b1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -9123,6 +9123,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite" dependencies: + "@storybook/addons": 7.0.0-alpha.34 "@storybook/builder-vite": 7.0.0-alpha.34 "@storybook/channel-postmessage": 7.0.0-alpha.34 "@storybook/channel-websocket": 7.0.0-alpha.34