mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-01 05:05:25 +08:00
Vue3: Remove support for Webpack 5
Deleted related packages and updated migration documentation. Users are now directed to use the Vite builder for Vue3 projects.
This commit is contained in:
Valentin Palkovic
parent
4f7cc51d25
commit
4f1fbc2ede
@ -1008,18 +1008,18 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 33
|
||||
parallelism: 32
|
||||
requires:
|
||||
- build
|
||||
# - smoke-test-sandboxes: # disabled for now
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 30
|
||||
parallelism: 29
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- e2e-production:
|
||||
parallelism: 28
|
||||
parallelism: 27
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- e2e-dev:
|
||||
@ -1027,7 +1027,7 @@ workflows:
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-production:
|
||||
parallelism: 28
|
||||
parallelism: 27
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- vitest-integration:
|
||||
|
||||
@ -46,7 +46,6 @@
|
||||
# /code/frameworks/svelte-webpack5/ @kasperpeulen @JReinhold
|
||||
# /code/frameworks/sveltekit/ @kasperpeulen @JReinhold
|
||||
# /code/frameworks/vue3-vite/ @kasperpeulen @yannbf @JReinhold
|
||||
# /code/frameworks/vue3-webpack5/ @kasperpeulen @yannbf @JReinhold
|
||||
# /code/frameworks/web-components-vite/ @kasperpeulen @JReinhold
|
||||
# /code/frameworks/web-components-webpack5/ @kasperpeulen @JReinhold
|
||||
|
||||
|
||||
21
MIGRATION.md
21
MIGRATION.md
@ -30,6 +30,7 @@
|
||||
- [Angular = Require v18 and up](#angular--require-v18-and-up)
|
||||
- [Next.js = Require v14 and up](#nextjs--require-v14-and-up)
|
||||
- [Preact = Dropped webpack5 builder support](#preact--dropped-webpack5-builder-support)
|
||||
- [Vue3 = Dropped webpack5 builder support](#vue3--dropped-webpack5-builder-support)
|
||||
- [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
|
||||
- [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
|
||||
- [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
|
||||
@ -843,6 +844,26 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
#### Vue3 = Dropped webpack5 builder support
|
||||
The `@storybook/vue3-webpack5` package has been removed. For Vue3 projects, please use the Vite builder instead:
|
||||
|
||||
```bash
|
||||
npm remove @storybook/vue3-webpack5 @storybook/preset-vue3-webpack
|
||||
npm install @storybook/vue3-vite --save-dev
|
||||
```
|
||||
|
||||
Then update your `.storybook/main.js|ts`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
framework: {
|
||||
name: '@storybook/vue3-vite',
|
||||
options: {},
|
||||
},
|
||||
// ... other configurations
|
||||
};
|
||||
```
|
||||
|
||||
## From version 8.5.x to 8.6.x
|
||||
|
||||
### Angular: Support experimental zoneless support
|
||||
|
||||
@ -164,7 +164,6 @@ export const frameworkToDefaultBuilder: Record<
|
||||
'svelte-webpack5': CoreBuilder.Webpack5,
|
||||
sveltekit: CoreBuilder.Vite,
|
||||
'vue3-vite': CoreBuilder.Vite,
|
||||
'vue3-webpack5': CoreBuilder.Webpack5,
|
||||
'web-components-vite': CoreBuilder.Vite,
|
||||
'web-components-webpack5': CoreBuilder.Webpack5,
|
||||
// Only to pass type checking, will never be used
|
||||
|
||||
@ -22,7 +22,6 @@ export const frameworkToRenderer: Record<
|
||||
'svelte-webpack5': 'svelte',
|
||||
sveltekit: 'svelte',
|
||||
'vue3-vite': 'vue3',
|
||||
'vue3-webpack5': 'vue3',
|
||||
nuxt: 'vue3',
|
||||
'web-components-vite': 'web-components',
|
||||
'web-components-webpack5': 'web-components',
|
||||
|
||||
@ -42,7 +42,6 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
|
||||
'@storybook/vue3-vite': 'vue3-vite',
|
||||
'@storybook/experimental-nextjs-vite': 'experimental-nextjs-vite',
|
||||
'@storybook/react-native-web-vite': 'react-native-web-vite',
|
||||
'@storybook/vue3-webpack5': 'vue3-webpack5',
|
||||
'@storybook/web-components-vite': 'web-components-vite',
|
||||
'@storybook/web-components-webpack5': 'web-components-webpack5',
|
||||
// community (outside of monorepo)
|
||||
|
||||
@ -32,7 +32,6 @@ export default {
|
||||
'@storybook/svelte-webpack5': '9.0.0-alpha.11',
|
||||
'@storybook/sveltekit': '9.0.0-alpha.11',
|
||||
'@storybook/vue3-vite': '9.0.0-alpha.11',
|
||||
'@storybook/vue3-webpack5': '9.0.0-alpha.11',
|
||||
'@storybook/web-components-vite': '9.0.0-alpha.11',
|
||||
'@storybook/web-components-webpack5': '9.0.0-alpha.11',
|
||||
'@storybook/blocks': '9.0.0-alpha.11',
|
||||
@ -49,7 +48,6 @@ export default {
|
||||
'@storybook/preset-react-webpack': '9.0.0-alpha.11',
|
||||
'@storybook/preset-server-webpack': '9.0.0-alpha.11',
|
||||
'@storybook/preset-svelte-webpack': '9.0.0-alpha.11',
|
||||
'@storybook/preset-vue3-webpack': '9.0.0-alpha.11',
|
||||
'@storybook/html': '9.0.0-alpha.11',
|
||||
'@storybook/preact': '9.0.0-alpha.11',
|
||||
'@storybook/react': '9.0.0-alpha.11',
|
||||
|
||||
@ -15,7 +15,6 @@ export type SupportedFrameworks =
|
||||
| 'svelte-webpack5'
|
||||
| 'sveltekit'
|
||||
| 'vue3-vite'
|
||||
| 'vue3-webpack5'
|
||||
| 'web-components-vite'
|
||||
| 'web-components-webpack5'
|
||||
| 'qwik'
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
# Storybook for Vue 3 and Webpack
|
||||
|
||||
See [documentation](https://storybook.js.org/docs/get-started/frameworks/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more.
|
||||
@ -1,87 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/vue3-webpack5",
|
||||
"version": "9.0.0-alpha.11",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/vue3-webpack5",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/frameworks/vue3-webpack5"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"node": "./dist/index.js",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preset": {
|
||||
"types": "./dist/preset.d.ts",
|
||||
"require": "./dist/preset.js"
|
||||
},
|
||||
"./node": {
|
||||
"types": "./dist/node/index.d.ts",
|
||||
"node": "./dist/node/index.js",
|
||||
"import": "./dist/node/index.mjs",
|
||||
"require": "./dist/node/index.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"template/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "workspace:*",
|
||||
"@storybook/preset-vue3-webpack": "workspace:*",
|
||||
"@storybook/vue3": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.0.0",
|
||||
"@vue/compiler-sfc": "3.0.0",
|
||||
"typescript": "^5.7.3",
|
||||
"vue": "3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"storybook": "workspace:^",
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"entries": [
|
||||
"./src/index.ts",
|
||||
"./src/preset.ts",
|
||||
"./src/node/index.ts"
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/preset');
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "vue3-webpack5",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from '@storybook/vue3';
|
||||
export * from './types';
|
||||
@ -1,5 +0,0 @@
|
||||
import type { StorybookConfig } from '../types';
|
||||
|
||||
export function defineMain(config: StorybookConfig) {
|
||||
return config;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { dirname, join } from 'node:path';
|
||||
|
||||
import type { PresetProperty } from 'storybook/internal/types';
|
||||
|
||||
const getAbsolutePath = <I extends string>(input: I): I =>
|
||||
dirname(require.resolve(join(input, 'package.json'))) as any;
|
||||
|
||||
export const addons: PresetProperty<'addons'> = [getAbsolutePath('@storybook/preset-vue3-webpack')];
|
||||
|
||||
export const core: PresetProperty<'core'> = async (config, options) => {
|
||||
const framework = await options.presets.apply('framework');
|
||||
|
||||
return {
|
||||
...config,
|
||||
builder: {
|
||||
name: getAbsolutePath('@storybook/builder-webpack5'),
|
||||
options: typeof framework === 'string' ? {} : framework.options.builder || {},
|
||||
},
|
||||
renderer: getAbsolutePath('@storybook/vue3'),
|
||||
};
|
||||
};
|
||||
|
||||
export const typescript: PresetProperty<'typescript'> = async (config) => ({
|
||||
...config,
|
||||
skipCompiler: true,
|
||||
});
|
||||
@ -1,45 +0,0 @@
|
||||
import type { CompatibleString } from 'storybook/internal/types';
|
||||
|
||||
import type {
|
||||
BuilderOptions,
|
||||
StorybookConfigWebpack,
|
||||
TypescriptOptions as TypescriptOptionsBuilder,
|
||||
} from '@storybook/builder-webpack5';
|
||||
import type {
|
||||
StorybookConfig as StorybookConfigBase,
|
||||
TypescriptOptions as TypescriptOptionsReact,
|
||||
} from '@storybook/preset-vue3-webpack';
|
||||
|
||||
type FrameworkName = CompatibleString<'@storybook/vue3-webpack5'>;
|
||||
type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
|
||||
|
||||
export type FrameworkOptions = {
|
||||
builder?: BuilderOptions;
|
||||
};
|
||||
|
||||
type StorybookConfigFramework = {
|
||||
framework:
|
||||
| FrameworkName
|
||||
| {
|
||||
name: FrameworkName;
|
||||
options: FrameworkOptions;
|
||||
};
|
||||
core?: StorybookConfigBase['core'] & {
|
||||
builder?:
|
||||
| BuilderName
|
||||
| {
|
||||
name: BuilderName;
|
||||
options: BuilderOptions;
|
||||
};
|
||||
};
|
||||
typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> &
|
||||
StorybookConfigBase['typescript'];
|
||||
};
|
||||
|
||||
/** The interface for Storybook configuration in `main.ts` files. */
|
||||
export type StorybookConfig = Omit<
|
||||
StorybookConfigBase,
|
||||
keyof StorybookConfigWebpack | keyof StorybookConfigFramework
|
||||
> &
|
||||
StorybookConfigWebpack &
|
||||
StorybookConfigFramework;
|
||||
@ -1,3 +0,0 @@
|
||||
declare module 'vue-loader' {
|
||||
export const VueLoaderPlugin: any;
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: MyButton,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] },
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
||||
args: { onClick: fn() },
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
||||
export const Primary = {
|
||||
args: {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
args: {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './button.css';
|
||||
import { reactive, computed } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'my-button',
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
primary: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['small', 'medium', 'large'].indexOf(value) !== -1;
|
||||
},
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['click'],
|
||||
|
||||
setup(props, { emit }) {
|
||||
props = reactive(props);
|
||||
return {
|
||||
classes: computed(() => ({
|
||||
'storybook-button': true,
|
||||
'storybook-button--primary': props.primary,
|
||||
'storybook-button--secondary': !props.primary,
|
||||
[`storybook-button--${props.size || 'medium'}`]: true,
|
||||
})),
|
||||
style: computed(() => ({
|
||||
backgroundColor: props.backgroundColor,
|
||||
})),
|
||||
onClick() {
|
||||
emit('click');
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,48 +0,0 @@
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
import MyHeader from './Header.vue';
|
||||
|
||||
export default {
|
||||
title: 'Example/Header',
|
||||
component: MyHeader,
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
render: (args) => ({
|
||||
// Components used in your story `template` are defined in the `components` object
|
||||
components: {
|
||||
MyHeader,
|
||||
},
|
||||
// The story's `args` need to be mapped into the template through the `setup()` method
|
||||
setup() {
|
||||
// Story args can be spread into the returned object
|
||||
return {
|
||||
...args,
|
||||
};
|
||||
},
|
||||
// Then, the spread values can be accessed directly in the template
|
||||
template: '<my-header :user="user" />',
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
onLogin: fn(),
|
||||
onLogout: fn(),
|
||||
onCreateAccount: fn(),
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedIn = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut = {
|
||||
args: {
|
||||
user: null,
|
||||
},
|
||||
};
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="storybook-header">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
<span class="welcome" v-if="user"
|
||||
>Welcome, <b>{{ user.name }}</b
|
||||
>!</span
|
||||
>
|
||||
<my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
|
||||
<my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
|
||||
<my-button
|
||||
primary
|
||||
size="small"
|
||||
@click="$emit('createAccount')"
|
||||
label="Sign up"
|
||||
v-if="!user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './header.css';
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
export default {
|
||||
name: 'my-header',
|
||||
|
||||
components: { MyButton },
|
||||
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['login', 'logout', 'createAccount'],
|
||||
};
|
||||
</script>
|
||||
@ -1,34 +0,0 @@
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
|
||||
import MyPage from './Page.vue';
|
||||
|
||||
export default {
|
||||
title: 'Example/Page',
|
||||
component: MyPage,
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut = {};
|
||||
|
||||
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
|
||||
export const LoggedIn = {
|
||||
render: () => ({
|
||||
components: {
|
||||
MyPage,
|
||||
},
|
||||
template: '<my-page />',
|
||||
}),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const loginButton = canvas.getByRole('button', { name: /Log in/i });
|
||||
await expect(loginButton).toBeInTheDocument();
|
||||
await userEvent.click(loginButton);
|
||||
await expect(loginButton).not.toBeInTheDocument();
|
||||
|
||||
const logoutButton = canvas.getByRole('button', { name: /Log out/i });
|
||||
await expect(logoutButton).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<my-header :user="user" @login="onLogin" @logout="onLogout" @createAccount="onCreateAccount" />
|
||||
|
||||
<section class="storybook-page">
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a
|
||||
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
||||
<strong>component-driven</strong>
|
||||
</a>
|
||||
process starting with atomic components and ending with pages.
|
||||
</p>
|
||||
<p>
|
||||
Render pages with mock data. This makes it easy to build and review page states without
|
||||
needing to navigate to them in your app. Here are some handy patterns for managing page data
|
||||
in Storybook:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the
|
||||
"args" of child component stories
|
||||
</li>
|
||||
<li>
|
||||
Assemble data in the page component from your services. You can mock these services out
|
||||
using Storybook.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Get a guided tutorial on component-driven development at
|
||||
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
|
||||
>Storybook tutorials</a
|
||||
>
|
||||
. Read more in the
|
||||
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
|
||||
.
|
||||
</p>
|
||||
<div class="tip-wrapper">
|
||||
<span class="tip">Tip</span>
|
||||
Adjust the width of the canvas with the
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
|
||||
id="a"
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './page.css';
|
||||
import MyHeader from './Header.vue';
|
||||
|
||||
export default {
|
||||
name: 'my-page',
|
||||
|
||||
components: { MyHeader },
|
||||
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLogin() {
|
||||
this.user = { name: 'Jane Doe' };
|
||||
},
|
||||
onLogout() {
|
||||
this.user = null;
|
||||
},
|
||||
onCreateAccount() {
|
||||
this.user = { name: 'Jane Doe' };
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,57 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-webpack5';
|
||||
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
import Button from './Button.vue';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
||||
const meta = {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
size: { control: 'select', options: ['small', 'medium', 'large'] },
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
args: {
|
||||
primary: false,
|
||||
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
||||
onClick: fn(),
|
||||
},
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
/*
|
||||
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
||||
* See https://storybook.js.org/docs/api/csf
|
||||
* to learn how to use render functions.
|
||||
*/
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
primary: false,
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
size: 'large',
|
||||
},
|
||||
};
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
size: 'small',
|
||||
},
|
||||
};
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import './button.css';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* The label of the button
|
||||
*/
|
||||
label: string,
|
||||
/**
|
||||
* primary or secondary button
|
||||
*/
|
||||
primary?: boolean,
|
||||
/**
|
||||
* size of the button
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large',
|
||||
/**
|
||||
* background color of the button
|
||||
*/
|
||||
backgroundColor?: string,
|
||||
|
||||
}>(), { primary: false });
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', id: number): void;
|
||||
}>();
|
||||
|
||||
const classes = computed(() => ({
|
||||
'storybook-button': true,
|
||||
'storybook-button--primary': props.primary,
|
||||
'storybook-button--secondary': !props.primary,
|
||||
[`storybook-button--${props.size || 'medium'}`]: true,
|
||||
}));
|
||||
|
||||
const style = computed(() => ({
|
||||
backgroundColor: props.backgroundColor
|
||||
}));
|
||||
|
||||
const onClick = () => {
|
||||
emit("click", 1)
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -1,49 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-webpack5';
|
||||
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
import MyHeader from './Header.vue';
|
||||
|
||||
const meta = {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/configure/#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Example/Header',
|
||||
component: MyHeader,
|
||||
render: (args: any) => ({
|
||||
components: { MyHeader },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: '<my-header :user="args.user" />',
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
onLogin: fn(),
|
||||
onLogout: fn(),
|
||||
onCreateAccount: fn(),
|
||||
},
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof MyHeader>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const LoggedIn: Story = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut: Story = {
|
||||
args: {
|
||||
user: null,
|
||||
},
|
||||
};
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="storybook-header">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
|
||||
<path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
|
||||
<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
<span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
|
||||
<my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
|
||||
<my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
|
||||
<my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import './header.css';
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
defineProps<{ user: { name: string } | null }>();
|
||||
|
||||
defineEmits<{
|
||||
(event: 'createAccount'): void;
|
||||
(event: 'login'): void;
|
||||
(event: 'logout'): void;
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-webpack5';
|
||||
|
||||
import MyPage from './Page.vue';
|
||||
|
||||
const meta = {
|
||||
title: 'Example/Page',
|
||||
component: MyPage,
|
||||
render: () => ({
|
||||
components: { MyPage },
|
||||
template: '<my-page />',
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof MyPage>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
|
||||
export const LoggedIn: Story = {
|
||||
play: async ({ canvasElement }: any) => {
|
||||
const canvas = within(canvasElement);
|
||||
const loginButton = canvas.getByRole('button', { name: /Log in/i });
|
||||
await expect(loginButton).toBeInTheDocument();
|
||||
await userEvent.click(loginButton);
|
||||
await expect(loginButton).not.toBeInTheDocument();
|
||||
|
||||
const logoutButton = canvas.getByRole('button', { name: /Log out/i });
|
||||
await expect(logoutButton).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut: Story = {};
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
|
||||
|
||||
<section class="storybook-page">
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a
|
||||
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
||||
<strong>component-driven</strong>
|
||||
</a>
|
||||
process starting with atomic components and ending with pages.
|
||||
</p>
|
||||
<p>
|
||||
Render pages with mock data. This makes it easy to build and review page states without
|
||||
needing to navigate to them in your app. Here are some handy patterns for managing page data
|
||||
in Storybook:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the
|
||||
"args" of child component stories
|
||||
</li>
|
||||
<li>
|
||||
Assemble data in the page component from your services. You can mock these services out
|
||||
using Storybook.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Get a guided tutorial on component-driven development at
|
||||
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
|
||||
>Storybook tutorials</a
|
||||
>
|
||||
. Read more in the
|
||||
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
|
||||
.
|
||||
</p>
|
||||
<div class="tip-wrapper">
|
||||
<span class="tip">Tip</span>
|
||||
Adjust the width of the canvas with the
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
|
||||
id="a"
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import './page.css';
|
||||
import MyHeader from './Header.vue';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
const user = ref<{ name: string } | null>(null);
|
||||
|
||||
const onLogin = () => {
|
||||
user.value = { name: 'Jane Doe' };
|
||||
};
|
||||
const onLogout = () => {
|
||||
user.value = null;
|
||||
};
|
||||
const onCreateAccount = () => {
|
||||
user.value = { name: 'Jane Doe' };
|
||||
};
|
||||
</script>
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -9,6 +9,8 @@ const minimalVersionsMap = {
|
||||
'react-scripts': '5.0.0',
|
||||
'@storybook/preact-webpack5': '9.0.0',
|
||||
'@storybook/preset-preact-webpack': '9.0.0',
|
||||
'@storybook/vue3-webpack5': '9.0.0',
|
||||
'@storybook/preset-vue3-webpack': '9.0.0',
|
||||
next: '14.1.0',
|
||||
preact: '10.0.0',
|
||||
svelte: '4.0.0',
|
||||
@ -67,6 +69,13 @@ export const blocker = createBlocker({
|
||||
Please see the migration guide for more information:
|
||||
${picocolors.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#preact--dropped-webpack5-builder-support')}
|
||||
`;
|
||||
case '@storybook/vue3-webpack5':
|
||||
case '@storybook/preset-vue3-webpack':
|
||||
return dedent`
|
||||
Support for Vue3 Webpack5 has been removed.
|
||||
Please see the migration guide for more information:
|
||||
${picocolors.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3--dropped-webpack5-builder-support')}
|
||||
`;
|
||||
case 'vue':
|
||||
return dedent`
|
||||
Support for Vue 2 has been removed.
|
||||
|
||||
@ -569,18 +569,6 @@ export const baseTemplates = {
|
||||
// Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
|
||||
skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench', 'vitest-integration'],
|
||||
},
|
||||
'vue-cli/default-js': {
|
||||
name: 'Vue CLI v3 (Webpack | JavaScript)',
|
||||
script:
|
||||
'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
|
||||
expected: {
|
||||
framework: '@storybook/vue3-webpack5',
|
||||
renderer: '@storybook/vue3',
|
||||
builder: '@storybook/builder-webpack5',
|
||||
},
|
||||
// Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
|
||||
skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench', 'vitest-integration'],
|
||||
},
|
||||
'preact-vite/default-js': {
|
||||
name: 'Preact Latest (Vite | JavaScript)',
|
||||
script: 'npm create vite --yes {{beforeDir}} -- --template preact',
|
||||
@ -872,7 +860,6 @@ export const daily: TemplateKey[] = [
|
||||
'react-vite/prerelease-ts',
|
||||
'react-webpack/prerelease-ts',
|
||||
'vue3-vite/default-js',
|
||||
'vue-cli/default-js',
|
||||
'lit-vite/default-js',
|
||||
// 'svelte-kit/skeleton-js',
|
||||
'svelte-kit/prerelease-ts',
|
||||
|
||||
@ -23,7 +23,6 @@ export const supportedFrameworks = [
|
||||
'vue3-rsbuild',
|
||||
'vue3-vite',
|
||||
'react-native',
|
||||
'vue3-webpack5',
|
||||
'web-components-vite',
|
||||
'web-components-webpack5',
|
||||
] as const;
|
||||
@ -41,7 +40,6 @@ export const supportedFrameworksPackages = {
|
||||
'svelte-webpack5': '@storybook/svelte-webpack5',
|
||||
'vue3-rsbuild': 'storybook-vue3-rsbuild',
|
||||
'vue3-vite': '@storybook/vue3-vite',
|
||||
'vue3-webpack5': '@storybook/vue3-webpack5',
|
||||
'web-components-vite': '@storybook/web-components-vite',
|
||||
'web-components-webpack5': '@storybook/web-components-webpack5',
|
||||
|
||||
@ -70,7 +68,6 @@ export const supportedFrameworksNames = {
|
||||
'svelte-webpack5': 'Svelte with Webpack 5',
|
||||
'vue3-rsbuild': 'Vue 3 with Rsbuild',
|
||||
'vue3-vite': 'Vue 3 with Vite',
|
||||
'vue3-webpack5': 'Vue 3 with Webpack 5',
|
||||
'web-components-vite': 'Web Components with Vite',
|
||||
'web-components-webpack5': 'Web Components with Webpack 5',
|
||||
angular: 'Angular',
|
||||
|
||||
@ -139,7 +139,6 @@
|
||||
"@storybook/preset-react-webpack": "workspace:*",
|
||||
"@storybook/preset-server-webpack": "workspace:*",
|
||||
"@storybook/preset-svelte-webpack": "workspace:*",
|
||||
"@storybook/preset-vue3-webpack": "workspace:*",
|
||||
"@storybook/react": "workspace:*",
|
||||
"@storybook/react-vite": "workspace:*",
|
||||
"@storybook/react-webpack5": "workspace:*",
|
||||
@ -151,7 +150,6 @@
|
||||
"@storybook/testing-library": "next",
|
||||
"@storybook/vue3": "workspace:*",
|
||||
"@storybook/vue3-vite": "workspace:*",
|
||||
"@storybook/vue3-webpack5": "workspace:*",
|
||||
"@storybook/web-components": "workspace:*",
|
||||
"@storybook/web-components-vite": "workspace:*",
|
||||
"@storybook/web-components-webpack5": "workspace:*",
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
# Storybook Webpack preset for Vue3
|
||||
|
||||
This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=vue) that configures Storybook's webpack settings for handling Vue 3.
|
||||
It's an internal package that's not intended to be used directly by users.
|
||||
|
||||
- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/install?renderer=vue)
|
||||
@ -1,95 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/preset-vue3-webpack",
|
||||
"version": "9.0.0-alpha.11",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/presets/vue3-webpack",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/presets/vue3-webpack"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"node": "./dist/index.js",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preset": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"node": "./dist/index.js",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./dist/framework-preset-vue3-docs": {
|
||||
"types": "./dist/framework-preset-vue3-docs.d.ts",
|
||||
"import": "./dist/framework-preset-vue3-docs.mjs",
|
||||
"require": "./dist/framework-preset-vue3-docs.js"
|
||||
},
|
||||
"./dist/framework-preset-vue3": {
|
||||
"types": "./dist/framework-preset-vue3.d.ts",
|
||||
"import": "./dist/framework-preset-vue3.mjs",
|
||||
"require": "./dist/framework-preset-vue3.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-webpack": "workspace:*",
|
||||
"ts-loader": "^9.2.8",
|
||||
"vue-docgen-api": "^4.75.1",
|
||||
"vue-docgen-loader": "^1.5.1",
|
||||
"vue-loader": "^16.0.0",
|
||||
"webpack": "5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.0.0",
|
||||
"@vue/compiler-sfc": "^3.2.33",
|
||||
"typescript": "^5.7.3",
|
||||
"vue": "^3.2.33"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"storybook": "workspace:^",
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"entries": [
|
||||
"./src/index.ts",
|
||||
"./src/framework-preset-vue3-docs.ts",
|
||||
"./src/framework-preset-vue3.ts"
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/index');
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "vue3-webpack",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
import { hasDocsOrControls } from 'storybook/internal/docs-tools';
|
||||
|
||||
import type { StorybookConfig } from '@storybook/core-webpack';
|
||||
|
||||
export const webpackFinal: StorybookConfig['webpackFinal'] = (config, options) => {
|
||||
if (!hasDocsOrControls(options)) {
|
||||
return config;
|
||||
}
|
||||
|
||||
let vueDocgenOptions = {};
|
||||
|
||||
options.presetsList?.forEach((preset) => {
|
||||
if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) {
|
||||
const appendableOptions = preset.options.vueDocgenOptions;
|
||||
vueDocgenOptions = {
|
||||
...vueDocgenOptions,
|
||||
...appendableOptions,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
config.module?.rules?.push({
|
||||
test: /\.vue$/,
|
||||
loader: require.resolve('vue-docgen-loader', {
|
||||
paths: [require.resolve('@storybook/preset-vue3-webpack')],
|
||||
}),
|
||||
enforce: 'post',
|
||||
options: {
|
||||
docgenOptions: {
|
||||
alias: config.resolve?.alias,
|
||||
...vueDocgenOptions,
|
||||
},
|
||||
},
|
||||
});
|
||||
return config;
|
||||
};
|
||||
@ -1,63 +0,0 @@
|
||||
import type { StorybookConfig } from '@storybook/core-webpack';
|
||||
|
||||
import { VueLoaderPlugin } from 'vue-loader';
|
||||
import { DefinePlugin } from 'webpack';
|
||||
|
||||
export const webpack: StorybookConfig['webpack'] = (config) => {
|
||||
return {
|
||||
...config,
|
||||
plugins: [
|
||||
...(config.plugins ?? []),
|
||||
new VueLoaderPlugin(),
|
||||
new DefinePlugin({
|
||||
__VUE_OPTIONS_API__: JSON.stringify(true),
|
||||
__VUE_PROD_DEVTOOLS__: JSON.stringify(true),
|
||||
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(true),
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
...config.module,
|
||||
rules: [
|
||||
...(config.module?.rules ?? []),
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: require.resolve('vue-loader'),
|
||||
options: {},
|
||||
},
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('ts-loader'),
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
appendTsSuffixTo: [/\.vue$/],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.tsx$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('ts-loader'),
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
// Note this is different from the `appendTsSuffixTo` above!
|
||||
appendTsxSuffixTo: [/\.vue$/],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
...config.resolve,
|
||||
extensions: [...(config.resolve?.extensions ?? []), '.vue'],
|
||||
alias: {
|
||||
...config.resolve?.alias,
|
||||
vue$: require.resolve('vue/dist/vue.esm-bundler.js'),
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
import type { PresetProperty } from 'storybook/internal/types';
|
||||
|
||||
export * from './types';
|
||||
|
||||
export const addons: PresetProperty<'addons'> = [
|
||||
require.resolve('@storybook/preset-vue3-webpack/dist/framework-preset-vue3'),
|
||||
require.resolve('@storybook/preset-vue3-webpack/dist/framework-preset-vue3-docs'),
|
||||
];
|
||||
@ -1 +0,0 @@
|
||||
export type { BuilderResult, TypescriptOptions, StorybookConfig } from '@storybook/core-webpack';
|
||||
3
code/presets/vue3-webpack/src/typings.d.ts
vendored
3
code/presets/vue3-webpack/src/typings.d.ts
vendored
@ -1,3 +0,0 @@
|
||||
declare module 'vue-loader' {
|
||||
export const VueLoaderPlugin: any;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -42,7 +42,6 @@
|
||||
"@storybook/preset-react-webpack": "file:../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "file:../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "file:../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "file:../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "file:../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "file:../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "file:../../code/frameworks/react-vite",
|
||||
@ -56,7 +55,6 @@
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "file:../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "file:../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
"@storybook/preset-react-webpack": "file:../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "file:../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "file:../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "file:../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "file:../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "file:../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "file:../../code/frameworks/react-vite",
|
||||
@ -56,7 +55,6 @@
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "file:../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "file:../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
|
||||
|
||||
@ -45,7 +45,6 @@
|
||||
"@storybook/preset-react-webpack": "file:../../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "file:../../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "file:../../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "file:../../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "file:../../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "file:../../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "file:../../../code/frameworks/react-vite",
|
||||
@ -59,7 +58,6 @@
|
||||
"@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "file:../../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "file:../../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5"
|
||||
|
||||
@ -49,7 +49,6 @@
|
||||
"@storybook/preset-react-webpack": "file:../../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "file:../../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "file:../../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "file:../../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "file:../../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "file:../../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "file:../../../code/frameworks/react-vite",
|
||||
@ -63,7 +62,6 @@
|
||||
"@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "file:../../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "file:../../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5",
|
||||
|
||||
@ -46,7 +46,6 @@
|
||||
"@storybook/preset-react-webpack": "portal:../../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "portal:../../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "portal:../../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "portal:../../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "portal:../../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "portal:../../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "portal:../../../code/frameworks/react-vite",
|
||||
@ -60,7 +59,6 @@
|
||||
"@storybook/sveltekit": "portal:../../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "portal:../../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "portal:../../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "portal:../../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "portal:../../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "portal:../../../code/frameworks/web-components-webpack5",
|
||||
|
||||
@ -47,7 +47,6 @@
|
||||
"@storybook/preset-react-webpack": "file:../../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "file:../../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "file:../../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "file:../../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "file:../../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "file:../../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "file:../../../code/frameworks/react-vite",
|
||||
@ -61,7 +60,6 @@
|
||||
"@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "file:../../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "file:../../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5",
|
||||
|
||||
@ -45,7 +45,6 @@
|
||||
"@storybook/preset-react-webpack": "file:../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "file:../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "file:../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "file:../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "file:../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "file:../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "file:../../code/frameworks/react-vite",
|
||||
@ -59,7 +58,6 @@
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "file:../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "file:../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
|
||||
|
||||
@ -38,7 +38,6 @@
|
||||
"@storybook/preset-react-webpack": "file:../../code/presets/react-webpack",
|
||||
"@storybook/preset-server-webpack": "file:../../code/presets/server-webpack",
|
||||
"@storybook/preset-svelte-webpack": "file:../../code/presets/svelte-webpack",
|
||||
"@storybook/preset-vue3-webpack": "file:../../code/presets/vue3-webpack",
|
||||
"@storybook/react": "file:../../code/renderers/react",
|
||||
"@storybook/react-dom-shim": "file:../../code/lib/react-dom-shim",
|
||||
"@storybook/react-vite": "file:../../code/frameworks/react-vite",
|
||||
@ -52,7 +51,6 @@
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/vue3": "file:../../code/renderers/vue3",
|
||||
"@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite",
|
||||
"@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5",
|
||||
"@storybook/web-components": "file:../../code/renderers/web-components",
|
||||
"@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite",
|
||||
"@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user