@storybook/vue3 6.5.9 → 7.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -43
- package/dist/chunk-5QBITULU.mjs +4 -0
- package/dist/config.d.ts +23 -0
- package/dist/config.js +4 -0
- package/dist/config.mjs +1 -0
- package/dist/index.d.ts +61 -0
- package/dist/index.js +4 -0
- package/dist/index.mjs +1 -0
- package/dist/render-ea26216d.d.ts +23 -0
- package/package.json +35 -39
- package/preview.js +1 -0
- package/bin/build.js +0 -4
- package/bin/index.js +0 -3
- package/dist/cjs/client/docs/config.js +0 -24
- package/dist/cjs/client/docs/extractArgTypes.js +0 -62
- package/dist/cjs/client/docs/prepareForInline.js +0 -61
- package/dist/cjs/client/index.js +0 -103
- package/dist/cjs/client/preview/config.js +0 -33
- package/dist/cjs/client/preview/decorateStory.js +0 -75
- package/dist/cjs/client/preview/globals.js +0 -9
- package/dist/cjs/client/preview/index.js +0 -62
- package/dist/cjs/client/preview/render.js +0 -82
- package/dist/cjs/client/preview/types-6-0.js +0 -5
- package/dist/cjs/client/preview/types-7-0.js +0 -5
- package/dist/cjs/client/preview/types.js +0 -5
- package/dist/cjs/server/build.js +0 -9
- package/dist/cjs/server/framework-preset-vue3-docs.js +0 -50
- package/dist/cjs/server/framework-preset-vue3.js +0 -66
- package/dist/cjs/server/index.js +0 -9
- package/dist/cjs/server/options.js +0 -17
- package/dist/cjs/server/preset.js +0 -8
- package/dist/esm/client/docs/config.js +0 -12
- package/dist/esm/client/docs/extractArgTypes.js +0 -45
- package/dist/esm/client/docs/prepareForInline.js +0 -22
- package/dist/esm/client/index.js +0 -6
- package/dist/esm/client/preview/config.js +0 -5
- package/dist/esm/client/preview/decorateStory.js +0 -64
- package/dist/esm/client/preview/globals.js +0 -4
- package/dist/esm/client/preview/index.js +0 -38
- package/dist/esm/client/preview/render.js +0 -60
- package/dist/esm/client/preview/types-6-0.js +0 -1
- package/dist/esm/client/preview/types-7-0.js +0 -1
- package/dist/esm/client/preview/types.js +0 -1
- package/dist/esm/server/build.js +0 -3
- package/dist/esm/server/framework-preset-vue3-docs.js +0 -37
- package/dist/esm/server/framework-preset-vue3.js +0 -52
- package/dist/esm/server/index.js +0 -3
- package/dist/esm/server/options.js +0 -8
- package/dist/esm/server/preset.js +0 -1
- package/dist/modern/client/docs/config.js +0 -12
- package/dist/modern/client/docs/extractArgTypes.js +0 -42
- package/dist/modern/client/docs/prepareForInline.js +0 -22
- package/dist/modern/client/index.js +0 -6
- package/dist/modern/client/preview/config.js +0 -5
- package/dist/modern/client/preview/decorateStory.js +0 -59
- package/dist/modern/client/preview/globals.js +0 -6
- package/dist/modern/client/preview/index.js +0 -38
- package/dist/modern/client/preview/render.js +0 -60
- package/dist/modern/client/preview/types-6-0.js +0 -1
- package/dist/modern/client/preview/types-7-0.js +0 -1
- package/dist/modern/client/preview/types.js +0 -1
- package/dist/modern/server/build.js +0 -3
- package/dist/modern/server/framework-preset-vue3-docs.js +0 -37
- package/dist/modern/server/framework-preset-vue3.js +0 -52
- package/dist/modern/server/index.js +0 -3
- package/dist/modern/server/options.js +0 -8
- package/dist/modern/server/preset.js +0 -1
- package/dist/ts3.4/client/docs/config.d.ts +0 -10
- package/dist/ts3.4/client/docs/extractArgTypes.d.ts +0 -2
- package/dist/ts3.4/client/docs/prepareForInline.d.ts +0 -4
- package/dist/ts3.4/client/index.d.ts +0 -2
- package/dist/ts3.4/client/preview/config.d.ts +0 -5
- package/dist/ts3.4/client/preview/decorateStory.d.ts +0 -3
- package/dist/ts3.4/client/preview/globals.d.ts +0 -1
- package/dist/ts3.4/client/preview/index.d.ts +0 -31
- package/dist/ts3.4/client/preview/render.d.ts +0 -7
- package/dist/ts3.4/client/preview/types-6-0.d.ts +0 -35
- package/dist/ts3.4/client/preview/types-7-0.d.ts +0 -9
- package/dist/ts3.4/client/preview/types.d.ts +0 -15
- package/dist/ts3.4/server/build.d.ts +0 -1
- package/dist/ts3.4/server/framework-preset-vue3-docs.d.ts +0 -3
- package/dist/ts3.4/server/framework-preset-vue3.d.ts +0 -4
- package/dist/ts3.4/server/index.d.ts +0 -1
- package/dist/ts3.4/server/options.d.ts +0 -3
- package/dist/ts3.4/server/preset.d.ts +0 -2
- package/dist/ts3.9/client/docs/config.d.ts +0 -10
- package/dist/ts3.9/client/docs/extractArgTypes.d.ts +0 -2
- package/dist/ts3.9/client/docs/prepareForInline.d.ts +0 -4
- package/dist/ts3.9/client/index.d.ts +0 -2
- package/dist/ts3.9/client/preview/config.d.ts +0 -5
- package/dist/ts3.9/client/preview/decorateStory.d.ts +0 -3
- package/dist/ts3.9/client/preview/globals.d.ts +0 -1
- package/dist/ts3.9/client/preview/index.d.ts +0 -31
- package/dist/ts3.9/client/preview/render.d.ts +0 -7
- package/dist/ts3.9/client/preview/types-6-0.d.ts +0 -35
- package/dist/ts3.9/client/preview/types-7-0.d.ts +0 -9
- package/dist/ts3.9/client/preview/types.d.ts +0 -15
- package/dist/ts3.9/server/build.d.ts +0 -1
- package/dist/ts3.9/server/framework-preset-vue3-docs.d.ts +0 -3
- package/dist/ts3.9/server/framework-preset-vue3.d.ts +0 -4
- package/dist/ts3.9/server/index.d.ts +0 -1
- package/dist/ts3.9/server/options.d.ts +0 -3
- package/dist/ts3.9/server/preset.d.ts +0 -2
- package/preset.js +0 -1
- package/standalone.js +0 -8
- package/types-6-0.d.ts +0 -1
- package/types-7-0.d.ts +0 -1
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
var _templateObject;
|
|
2
|
-
|
|
3
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
4
|
-
|
|
5
|
-
import "core-js/modules/es.function.name.js";
|
|
6
|
-
import "core-js/modules/es.array.concat.js";
|
|
7
|
-
import "core-js/modules/es.array.slice.js";
|
|
8
|
-
import "core-js/modules/es.object.freeze.js";
|
|
9
|
-
import dedent from 'ts-dedent';
|
|
10
|
-
import { createApp, h, shallowRef } from 'vue';
|
|
11
|
-
export var render = function render(props, context) {
|
|
12
|
-
var id = context.id,
|
|
13
|
-
Component = context.component;
|
|
14
|
-
|
|
15
|
-
if (!Component) {
|
|
16
|
-
throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
|
|
17
|
-
} // TODO remove this hack
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return h(Component, props);
|
|
21
|
-
};
|
|
22
|
-
export var activeStoryComponent = shallowRef(null);
|
|
23
|
-
var root = null;
|
|
24
|
-
export var storybookApp = createApp({
|
|
25
|
-
// If an end-user calls `unmount` on the app, we need to clear our root variable
|
|
26
|
-
unmounted: function unmounted() {
|
|
27
|
-
root = null;
|
|
28
|
-
},
|
|
29
|
-
setup: function setup() {
|
|
30
|
-
return function () {
|
|
31
|
-
if (!activeStoryComponent.value) throw new Error('No Vue 3 Story available. Was it set correctly?');
|
|
32
|
-
return h(activeStoryComponent.value);
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
export function renderToDOM(_ref, domElement) {
|
|
37
|
-
var title = _ref.title,
|
|
38
|
-
name = _ref.name,
|
|
39
|
-
storyFn = _ref.storyFn,
|
|
40
|
-
showMain = _ref.showMain,
|
|
41
|
-
showError = _ref.showError,
|
|
42
|
-
showException = _ref.showException;
|
|
43
|
-
storybookApp.config.errorHandler = showException;
|
|
44
|
-
var element = storyFn();
|
|
45
|
-
|
|
46
|
-
if (!element) {
|
|
47
|
-
showError({
|
|
48
|
-
title: "Expecting a Vue component from the story: \"".concat(name, "\" of \"").concat(title, "\"."),
|
|
49
|
-
description: dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n Did you forget to return the Vue component from the story?\n Use \"() => ({ template: '<my-comp></my-comp>' })\" or \"() => ({ components: MyComp, template: '<my-comp></my-comp>' })\" when defining the story.\n "])))
|
|
50
|
-
});
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
showMain();
|
|
55
|
-
activeStoryComponent.value = element;
|
|
56
|
-
|
|
57
|
-
if (!root) {
|
|
58
|
-
root = storybookApp.mount(domElement);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/esm/server/build.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import { findDistEsm } from '@storybook/core-common';
|
|
8
|
-
import { hasDocsOrControls } from '@storybook/docs-tools';
|
|
9
|
-
export function webpackFinal(webpackConfig = {}, options) {
|
|
10
|
-
var _options$presetsList;
|
|
11
|
-
|
|
12
|
-
if (!hasDocsOrControls(options)) return webpackConfig;
|
|
13
|
-
var vueDocgenOptions = {};
|
|
14
|
-
(_options$presetsList = options.presetsList) === null || _options$presetsList === void 0 ? void 0 : _options$presetsList.forEach(function (preset) {
|
|
15
|
-
if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) {
|
|
16
|
-
var appendableOptions = preset.options.vueDocgenOptions;
|
|
17
|
-
vueDocgenOptions = _objectSpread(_objectSpread({}, vueDocgenOptions), appendableOptions);
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
webpackConfig.module.rules.push({
|
|
21
|
-
test: /\.vue$/,
|
|
22
|
-
loader: require.resolve('vue-docgen-loader', {
|
|
23
|
-
paths: [require.resolve('@storybook/vue3')]
|
|
24
|
-
}),
|
|
25
|
-
enforce: 'post',
|
|
26
|
-
options: {
|
|
27
|
-
docgenOptions: _objectSpread({
|
|
28
|
-
alias: webpackConfig.resolve.alias
|
|
29
|
-
}, vueDocgenOptions)
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
return webpackConfig;
|
|
33
|
-
}
|
|
34
|
-
export var previewAnnotations = function (entry = [], options) {
|
|
35
|
-
if (!hasDocsOrControls(options)) return entry;
|
|
36
|
-
return [...entry, findDistEsm(__dirname, 'client/docs/config')];
|
|
37
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import { VueLoaderPlugin } from 'vue-loader';
|
|
8
|
-
import { DefinePlugin } from 'webpack';
|
|
9
|
-
import { findDistEsm } from '@storybook/core-common';
|
|
10
|
-
export function webpack(config) {
|
|
11
|
-
return _objectSpread(_objectSpread({}, config), {}, {
|
|
12
|
-
plugins: [...config.plugins, new VueLoaderPlugin(), new DefinePlugin({
|
|
13
|
-
__VUE_OPTIONS_API__: JSON.stringify(true),
|
|
14
|
-
__VUE_PROD_DEVTOOLS__: JSON.stringify(true)
|
|
15
|
-
})],
|
|
16
|
-
module: _objectSpread(_objectSpread({}, config.module), {}, {
|
|
17
|
-
rules: [...config.module.rules, {
|
|
18
|
-
test: /\.vue$/,
|
|
19
|
-
loader: require.resolve('vue-loader'),
|
|
20
|
-
options: {}
|
|
21
|
-
}, {
|
|
22
|
-
test: /\.ts$/,
|
|
23
|
-
use: [{
|
|
24
|
-
loader: require.resolve('ts-loader'),
|
|
25
|
-
options: {
|
|
26
|
-
transpileOnly: true,
|
|
27
|
-
appendTsSuffixTo: [/\.vue$/]
|
|
28
|
-
}
|
|
29
|
-
}]
|
|
30
|
-
}, {
|
|
31
|
-
test: /\.tsx$/,
|
|
32
|
-
use: [{
|
|
33
|
-
loader: require.resolve('ts-loader'),
|
|
34
|
-
options: {
|
|
35
|
-
transpileOnly: true,
|
|
36
|
-
// Note this is different from the `appendTsSuffixTo` above!
|
|
37
|
-
appendTsxSuffixTo: [/\.vue$/]
|
|
38
|
-
}
|
|
39
|
-
}]
|
|
40
|
-
}]
|
|
41
|
-
}),
|
|
42
|
-
resolve: _objectSpread(_objectSpread({}, config.resolve), {}, {
|
|
43
|
-
extensions: [...config.resolve.extensions, '.vue'],
|
|
44
|
-
alias: _objectSpread(_objectSpread({}, config.resolve.alias), {}, {
|
|
45
|
-
vue$: require.resolve('vue/dist/vue.esm-bundler.js')
|
|
46
|
-
})
|
|
47
|
-
})
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
export var previewAnnotations = function (entry = []) {
|
|
51
|
-
return [...entry, findDistEsm(__dirname, 'client/preview/config')];
|
|
52
|
-
};
|
package/dist/esm/server/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export var addons = [require.resolve('./framework-preset-vue3'), require.resolve('./framework-preset-vue3-docs')];
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
|
|
2
|
-
import { extractArgTypes } from './extractArgTypes';
|
|
3
|
-
import { prepareForInline } from './prepareForInline';
|
|
4
|
-
export const parameters = {
|
|
5
|
-
docs: {
|
|
6
|
-
inlineStories: true,
|
|
7
|
-
prepareForInline,
|
|
8
|
-
extractArgTypes,
|
|
9
|
-
extractComponentDescription
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
export const argTypesEnhancers = [enhanceArgTypes];
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
|
|
2
|
-
const SECTIONS = ['props', 'events', 'slots'];
|
|
3
|
-
export const extractArgTypes = component => {
|
|
4
|
-
if (!hasDocgen(component)) {
|
|
5
|
-
return null;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const results = {};
|
|
9
|
-
SECTIONS.forEach(section => {
|
|
10
|
-
const props = extractComponentProps(component, section);
|
|
11
|
-
props.forEach(({
|
|
12
|
-
propDef,
|
|
13
|
-
docgenInfo,
|
|
14
|
-
jsDocTags
|
|
15
|
-
}) => {
|
|
16
|
-
const {
|
|
17
|
-
name,
|
|
18
|
-
type,
|
|
19
|
-
description,
|
|
20
|
-
defaultValue: defaultSummary,
|
|
21
|
-
required
|
|
22
|
-
} = propDef;
|
|
23
|
-
const sbType = section === 'props' ? convert(docgenInfo) : {
|
|
24
|
-
name: 'void'
|
|
25
|
-
};
|
|
26
|
-
results[name] = {
|
|
27
|
-
name,
|
|
28
|
-
description,
|
|
29
|
-
type: Object.assign({
|
|
30
|
-
required
|
|
31
|
-
}, sbType),
|
|
32
|
-
table: {
|
|
33
|
-
type,
|
|
34
|
-
jsDocTags,
|
|
35
|
-
defaultValue: defaultSummary,
|
|
36
|
-
category: section
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
});
|
|
40
|
-
});
|
|
41
|
-
return results;
|
|
42
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import * as Vue from 'vue';
|
|
3
|
-
import { app } from '../index'; // This is cast as `any` to workaround type errors caused by Vue 2 types
|
|
4
|
-
|
|
5
|
-
const {
|
|
6
|
-
render,
|
|
7
|
-
h
|
|
8
|
-
} = Vue;
|
|
9
|
-
export const prepareForInline = (storyFn, {
|
|
10
|
-
args
|
|
11
|
-
}) => {
|
|
12
|
-
const component = storyFn();
|
|
13
|
-
const vnode = h(component, args); // By attaching the app context from `@storybook/vue3` to the vnode
|
|
14
|
-
// like this, these stoeis are able to access any app config stuff
|
|
15
|
-
// the end-user set inside `.storybook/preview.js`
|
|
16
|
-
|
|
17
|
-
vnode.appContext = app._context; // eslint-disable-line no-underscore-dangle
|
|
18
|
-
|
|
19
|
-
return /*#__PURE__*/React.createElement('div', {
|
|
20
|
-
ref: node => node ? render(vnode, node) : null
|
|
21
|
-
});
|
|
22
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw, app, activeStoryComponent } from './preview';
|
|
2
|
-
export * from './preview/types-6-0';
|
|
3
|
-
|
|
4
|
-
if (module && module.hot && module.hot.decline) {
|
|
5
|
-
module.hot.decline();
|
|
6
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import "core-js/modules/es.array.reduce.js";
|
|
2
|
-
import { h } from 'vue';
|
|
3
|
-
import { sanitizeStoryContextUpdate } from '@storybook/store';
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
This normalizes a functional component into a render method in ComponentOptions.
|
|
7
|
-
|
|
8
|
-
The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup`
|
|
9
|
-
method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator.
|
|
10
|
-
*/
|
|
11
|
-
function normalizeFunctionalComponent(options) {
|
|
12
|
-
return typeof options === 'function' ? {
|
|
13
|
-
render: options,
|
|
14
|
-
name: options.name
|
|
15
|
-
} : options;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function prepare(rawStory, innerStory) {
|
|
19
|
-
const story = rawStory;
|
|
20
|
-
|
|
21
|
-
if (story == null) {
|
|
22
|
-
return null;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
if (innerStory) {
|
|
26
|
-
return Object.assign({}, normalizeFunctionalComponent(story), {
|
|
27
|
-
components: Object.assign({}, story.components || {}, {
|
|
28
|
-
story: innerStory
|
|
29
|
-
})
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return {
|
|
34
|
-
render() {
|
|
35
|
-
return h(story);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export function decorateStory(storyFn, decorators) {
|
|
42
|
-
return decorators.reduce((decorated, decorator) => context => {
|
|
43
|
-
let story;
|
|
44
|
-
const decoratedStory = decorator(update => {
|
|
45
|
-
story = decorated(Object.assign({}, context, sanitizeStoryContextUpdate(update)));
|
|
46
|
-
return story;
|
|
47
|
-
}, context);
|
|
48
|
-
|
|
49
|
-
if (!story) {
|
|
50
|
-
story = decorated(context);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
if (decoratedStory === story) {
|
|
54
|
-
return story;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
return prepare(decoratedStory, story);
|
|
58
|
-
}, context => prepare(storyFn(context)));
|
|
59
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { start } from '@storybook/core';
|
|
2
|
-
import './globals';
|
|
3
|
-
import { decorateStory } from './decorateStory';
|
|
4
|
-
import { render, renderToDOM, storybookApp } from './render';
|
|
5
|
-
const framework = 'vue3';
|
|
6
|
-
const api = start(renderToDOM, {
|
|
7
|
-
decorateStory,
|
|
8
|
-
render
|
|
9
|
-
});
|
|
10
|
-
export const storiesOf = (kind, m) => {
|
|
11
|
-
return api.clientApi.storiesOf(kind, m).addParameters({
|
|
12
|
-
framework
|
|
13
|
-
});
|
|
14
|
-
};
|
|
15
|
-
export const configure = (...args) => api.configure(framework, ...args);
|
|
16
|
-
export const {
|
|
17
|
-
addDecorator
|
|
18
|
-
} = api.clientApi;
|
|
19
|
-
export const {
|
|
20
|
-
addParameters
|
|
21
|
-
} = api.clientApi;
|
|
22
|
-
export const {
|
|
23
|
-
clearDecorators
|
|
24
|
-
} = api.clientApi;
|
|
25
|
-
export const {
|
|
26
|
-
setAddon
|
|
27
|
-
} = api.clientApi;
|
|
28
|
-
export const {
|
|
29
|
-
forceReRender
|
|
30
|
-
} = api;
|
|
31
|
-
export const {
|
|
32
|
-
getStorybook
|
|
33
|
-
} = api.clientApi;
|
|
34
|
-
export const {
|
|
35
|
-
raw
|
|
36
|
-
} = api.clientApi;
|
|
37
|
-
export const app = storybookApp;
|
|
38
|
-
export { activeStoryComponent } from './render';
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import dedent from 'ts-dedent';
|
|
2
|
-
import { createApp, h, shallowRef } from 'vue';
|
|
3
|
-
export const render = (props, context) => {
|
|
4
|
-
const {
|
|
5
|
-
id,
|
|
6
|
-
component: Component
|
|
7
|
-
} = context;
|
|
8
|
-
|
|
9
|
-
if (!Component) {
|
|
10
|
-
throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
|
|
11
|
-
} // TODO remove this hack
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return h(Component, props);
|
|
15
|
-
};
|
|
16
|
-
export const activeStoryComponent = shallowRef(null);
|
|
17
|
-
let root = null;
|
|
18
|
-
export const storybookApp = createApp({
|
|
19
|
-
// If an end-user calls `unmount` on the app, we need to clear our root variable
|
|
20
|
-
unmounted() {
|
|
21
|
-
root = null;
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
setup() {
|
|
25
|
-
return () => {
|
|
26
|
-
if (!activeStoryComponent.value) throw new Error('No Vue 3 Story available. Was it set correctly?');
|
|
27
|
-
return h(activeStoryComponent.value);
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
});
|
|
32
|
-
export function renderToDOM({
|
|
33
|
-
title,
|
|
34
|
-
name,
|
|
35
|
-
storyFn,
|
|
36
|
-
showMain,
|
|
37
|
-
showError,
|
|
38
|
-
showException
|
|
39
|
-
}, domElement) {
|
|
40
|
-
storybookApp.config.errorHandler = showException;
|
|
41
|
-
const element = storyFn();
|
|
42
|
-
|
|
43
|
-
if (!element) {
|
|
44
|
-
showError({
|
|
45
|
-
title: `Expecting a Vue component from the story: "${name}" of "${title}".`,
|
|
46
|
-
description: dedent`
|
|
47
|
-
Did you forget to return the Vue component from the story?
|
|
48
|
-
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
|
|
49
|
-
`
|
|
50
|
-
});
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
showMain();
|
|
55
|
-
activeStoryComponent.value = element;
|
|
56
|
-
|
|
57
|
-
if (!root) {
|
|
58
|
-
root = storybookApp.mount(domElement);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import { findDistEsm } from '@storybook/core-common';
|
|
8
|
-
import { hasDocsOrControls } from '@storybook/docs-tools';
|
|
9
|
-
export function webpackFinal(webpackConfig = {}, options) {
|
|
10
|
-
var _options$presetsList;
|
|
11
|
-
|
|
12
|
-
if (!hasDocsOrControls(options)) return webpackConfig;
|
|
13
|
-
var vueDocgenOptions = {};
|
|
14
|
-
(_options$presetsList = options.presetsList) === null || _options$presetsList === void 0 ? void 0 : _options$presetsList.forEach(function (preset) {
|
|
15
|
-
if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) {
|
|
16
|
-
var appendableOptions = preset.options.vueDocgenOptions;
|
|
17
|
-
vueDocgenOptions = _objectSpread(_objectSpread({}, vueDocgenOptions), appendableOptions);
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
webpackConfig.module.rules.push({
|
|
21
|
-
test: /\.vue$/,
|
|
22
|
-
loader: require.resolve('vue-docgen-loader', {
|
|
23
|
-
paths: [require.resolve('@storybook/vue3')]
|
|
24
|
-
}),
|
|
25
|
-
enforce: 'post',
|
|
26
|
-
options: {
|
|
27
|
-
docgenOptions: _objectSpread({
|
|
28
|
-
alias: webpackConfig.resolve.alias
|
|
29
|
-
}, vueDocgenOptions)
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
return webpackConfig;
|
|
33
|
-
}
|
|
34
|
-
export var previewAnnotations = function (entry = [], options) {
|
|
35
|
-
if (!hasDocsOrControls(options)) return entry;
|
|
36
|
-
return [...entry, findDistEsm(__dirname, 'client/docs/config')];
|
|
37
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import { VueLoaderPlugin } from 'vue-loader';
|
|
8
|
-
import { DefinePlugin } from 'webpack';
|
|
9
|
-
import { findDistEsm } from '@storybook/core-common';
|
|
10
|
-
export function webpack(config) {
|
|
11
|
-
return _objectSpread(_objectSpread({}, config), {}, {
|
|
12
|
-
plugins: [...config.plugins, new VueLoaderPlugin(), new DefinePlugin({
|
|
13
|
-
__VUE_OPTIONS_API__: JSON.stringify(true),
|
|
14
|
-
__VUE_PROD_DEVTOOLS__: JSON.stringify(true)
|
|
15
|
-
})],
|
|
16
|
-
module: _objectSpread(_objectSpread({}, config.module), {}, {
|
|
17
|
-
rules: [...config.module.rules, {
|
|
18
|
-
test: /\.vue$/,
|
|
19
|
-
loader: require.resolve('vue-loader'),
|
|
20
|
-
options: {}
|
|
21
|
-
}, {
|
|
22
|
-
test: /\.ts$/,
|
|
23
|
-
use: [{
|
|
24
|
-
loader: require.resolve('ts-loader'),
|
|
25
|
-
options: {
|
|
26
|
-
transpileOnly: true,
|
|
27
|
-
appendTsSuffixTo: [/\.vue$/]
|
|
28
|
-
}
|
|
29
|
-
}]
|
|
30
|
-
}, {
|
|
31
|
-
test: /\.tsx$/,
|
|
32
|
-
use: [{
|
|
33
|
-
loader: require.resolve('ts-loader'),
|
|
34
|
-
options: {
|
|
35
|
-
transpileOnly: true,
|
|
36
|
-
// Note this is different from the `appendTsSuffixTo` above!
|
|
37
|
-
appendTsxSuffixTo: [/\.vue$/]
|
|
38
|
-
}
|
|
39
|
-
}]
|
|
40
|
-
}]
|
|
41
|
-
}),
|
|
42
|
-
resolve: _objectSpread(_objectSpread({}, config.resolve), {}, {
|
|
43
|
-
extensions: [...config.resolve.extensions, '.vue'],
|
|
44
|
-
alias: _objectSpread(_objectSpread({}, config.resolve.alias), {}, {
|
|
45
|
-
vue$: require.resolve('vue/dist/vue.esm-bundler.js')
|
|
46
|
-
})
|
|
47
|
-
})
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
export var previewAnnotations = function (entry = []) {
|
|
51
|
-
return [...entry, findDistEsm(__dirname, 'client/preview/config')];
|
|
52
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export var addons = [require.resolve('./framework-preset-vue3'), require.resolve('./framework-preset-vue3-docs')];
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { extractComponentDescription } from '@storybook/docs-tools';
|
|
2
|
-
export declare const parameters: {
|
|
3
|
-
docs: {
|
|
4
|
-
inlineStories: boolean;
|
|
5
|
-
prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("..").VueFramework, import("@storybook/csf").Args>, { args }: import("@storybook/csf").StoryContext<import("..").VueFramework, import("@storybook/csf").Args>) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
6
|
-
extractArgTypes: import("@storybook/docs-tools").ArgTypesExtractor;
|
|
7
|
-
extractComponentDescription: typeof extractComponentDescription;
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("@storybook/addons").Parameters)[];
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StoryContext, PartialStoryFn } from '@storybook/csf';
|
|
3
|
-
import { VueFramework } from '../index';
|
|
4
|
-
export declare const prepareForInline: (storyFn: PartialStoryFn<VueFramework>, { args }: StoryContext<VueFramework>) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/// <reference types="webpack-env" />
|
|
2
|
-
/// <reference types="node" />
|
|
3
|
-
import { App } from 'vue';
|
|
4
|
-
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
|
5
|
-
import './globals';
|
|
6
|
-
import { IStorybookSection } from './types';
|
|
7
|
-
import { VueFramework } from './types-6-0';
|
|
8
|
-
interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
|
|
9
|
-
setAddon(addon: any): void;
|
|
10
|
-
configure(loader: Loadable, module: NodeModule): void;
|
|
11
|
-
getStorybook(): IStorybookSection[];
|
|
12
|
-
clearDecorators(): void;
|
|
13
|
-
forceReRender(): void;
|
|
14
|
-
raw: () => any;
|
|
15
|
-
load: (...args: any[]) => void;
|
|
16
|
-
app: App;
|
|
17
|
-
}
|
|
18
|
-
export declare const storiesOf: ClientApi['storiesOf'];
|
|
19
|
-
export declare const configure: ClientApi['configure'];
|
|
20
|
-
export declare const addDecorator: (() => never) | ((decorator: import("@storybook/csf").DecoratorFunction<VueFramework, import("@storybook/addons").Args>) => void);
|
|
21
|
-
export declare const addParameters: (() => never) | (({ globals, globalTypes, ...parameters }: import("@storybook/csf/dist/story").Parameters & {
|
|
22
|
-
globals?: import("@storybook/csf").Globals;
|
|
23
|
-
globalTypes?: import("@storybook/csf").GlobalTypes;
|
|
24
|
-
}) => void);
|
|
25
|
-
export declare const clearDecorators: (() => never) | (() => void);
|
|
26
|
-
export declare const setAddon: (() => never) | ((addon: any) => void);
|
|
27
|
-
export declare const forceReRender: (() => never) | (() => void);
|
|
28
|
-
export declare const getStorybook: (() => never) | (() => import("@storybook/client-api/dist/ts3.9/ClientApi").GetStorybookKind<VueFramework>[]);
|
|
29
|
-
export declare const raw: (() => never) | (() => import("@storybook/store").BoundStory<VueFramework>[]);
|
|
30
|
-
export declare const app: ClientApi['app'];
|
|
31
|
-
export { activeStoryComponent } from './render';
|