mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 21:21:05 +08:00
MIGRATE app/vue to typescript in 1 hour
This commit is contained in:
Norbert de Langen
parent
14a482983b
commit
5b1374717e
@ -31,7 +31,8 @@
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/mini-css-extract-plugin": "^0.2.1",
|
||||
|
||||
@ -1,94 +0,0 @@
|
||||
import { start } from '@storybook/core/client';
|
||||
import Vue from 'vue';
|
||||
|
||||
import './globals';
|
||||
import render, { VALUES } from './render';
|
||||
import { extractProps } from './util';
|
||||
|
||||
export const WRAPS = 'STORYBOOK_WRAPS';
|
||||
|
||||
function prepare(rawStory, innerStory) {
|
||||
let story = rawStory;
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
if (!story._isVue) {
|
||||
if (typeof story === 'string') {
|
||||
story = { template: story };
|
||||
}
|
||||
if (innerStory) {
|
||||
story.components = { ...(story.components || {}), story: innerStory };
|
||||
}
|
||||
story = Vue.extend(story);
|
||||
} else if (story.options[WRAPS]) {
|
||||
return story;
|
||||
}
|
||||
|
||||
return Vue.extend({
|
||||
[WRAPS]: story,
|
||||
[VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) },
|
||||
functional: true,
|
||||
render(h, { data, parent, children }) {
|
||||
return h(
|
||||
story,
|
||||
{
|
||||
...data,
|
||||
props: { ...(data.props || {}), ...parent.$root[VALUES] },
|
||||
},
|
||||
children
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function decorateStory(getStory, decorators) {
|
||||
return decorators.reduce(
|
||||
(decorated, decorator) => (context = {}) => {
|
||||
let story;
|
||||
|
||||
const decoratedStory = decorator((p = {}) => {
|
||||
story = decorated(
|
||||
p
|
||||
? {
|
||||
...context,
|
||||
...p,
|
||||
parameters: {
|
||||
...context.parameters,
|
||||
...p.parameters,
|
||||
},
|
||||
}
|
||||
: context
|
||||
);
|
||||
|
||||
return story;
|
||||
}, context);
|
||||
|
||||
if (!story) {
|
||||
story = decorated(context);
|
||||
}
|
||||
|
||||
if (decoratedStory === story) {
|
||||
return story;
|
||||
}
|
||||
|
||||
return prepare(decoratedStory, story);
|
||||
},
|
||||
context => prepare(getStory(context))
|
||||
);
|
||||
}
|
||||
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render, { decorateStory });
|
||||
|
||||
export const {
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'vue';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import Vue from 'vue';
|
||||
import { start } from '@storybook/core/client';
|
||||
import { ClientStoryApi, StoryFn, DecoratorFunction } from '@storybook/addons';
|
||||
import { ClientStoryApi, StoryFn, DecoratorFunction, StoryContext } from '@storybook/addons';
|
||||
|
||||
import './globals';
|
||||
import { IStorybookSection, StoryFnVueReturnType } from './types';
|
||||
@ -11,7 +11,7 @@ import { extractProps } from './util';
|
||||
|
||||
export const WRAPS = 'STORYBOOK_WRAPS';
|
||||
|
||||
function prepare(rawStory, innerStory) {
|
||||
function prepare(rawStory: any, innerStory?: any): StoryFnVueReturnType {
|
||||
let story = rawStory;
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
if (!story._isVue) {
|
||||
@ -27,6 +27,7 @@ function prepare(rawStory, innerStory) {
|
||||
}
|
||||
|
||||
return Vue.extend({
|
||||
// @ts-ignore // some Vue expert needs to look at this
|
||||
[WRAPS]: story,
|
||||
[VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) },
|
||||
functional: true,
|
||||
@ -35,6 +36,7 @@ function prepare(rawStory, innerStory) {
|
||||
story,
|
||||
{
|
||||
...data,
|
||||
// @ts-ignore // some Vue expert needs to look at this
|
||||
props: { ...(data.props || {}), ...parent.$root[VALUES] },
|
||||
},
|
||||
children
|
||||
@ -43,16 +45,23 @@ function prepare(rawStory, innerStory) {
|
||||
});
|
||||
}
|
||||
|
||||
const defaultContext: StoryContext = {
|
||||
id: 'unspecified',
|
||||
name: 'unspecified',
|
||||
kind: 'unspecified',
|
||||
parameters: {},
|
||||
};
|
||||
|
||||
// (storyFn: StoryFn, decorators: DecoratorFunction[])
|
||||
function decorateStory(
|
||||
storyFn: StoryFn<StoryFnVueReturnType>,
|
||||
decorators: DecoratorFunction<StoryFnVueReturnType>[]
|
||||
) {
|
||||
): StoryFn<StoryFnVueReturnType> {
|
||||
return decorators.reduce(
|
||||
(decorated, decorator) => (context = {}) => {
|
||||
let story;
|
||||
(decorated, decorator) => (context: StoryContext = defaultContext) => {
|
||||
let story: StoryFn<StoryFnVueReturnType>;
|
||||
|
||||
const decoratedStory = decorator((p = {}) => {
|
||||
const decoratedStory = decorator(p => {
|
||||
story = decorated(
|
||||
p
|
||||
? {
|
||||
@ -79,7 +88,7 @@ function decorateStory(
|
||||
|
||||
return prepare(decoratedStory, story);
|
||||
},
|
||||
context => prepare(getStory(context))
|
||||
(context => prepare(storyFn(context))) as StoryFn<StoryFnVueReturnType>
|
||||
);
|
||||
}
|
||||
const framework = 'vue';
|
||||
|
||||
94
app/vue/src/client/preview/old_index.js
Normal file
94
app/vue/src/client/preview/old_index.js
Normal file
@ -0,0 +1,94 @@
|
||||
// import { start } from '@storybook/core/client';
|
||||
// import Vue from 'vue';
|
||||
|
||||
// import './globals';
|
||||
// import render, { VALUES } from './render';
|
||||
// import { extractProps } from './util';
|
||||
|
||||
// export const WRAPS = 'STORYBOOK_WRAPS';
|
||||
|
||||
// function prepare(rawStory, innerStory) {
|
||||
// let story = rawStory;
|
||||
// // eslint-disable-next-line no-underscore-dangle
|
||||
// if (!story._isVue) {
|
||||
// if (typeof story === 'string') {
|
||||
// story = { template: story };
|
||||
// }
|
||||
// if (innerStory) {
|
||||
// story.components = { ...(story.components || {}), story: innerStory };
|
||||
// }
|
||||
// story = Vue.extend(story);
|
||||
// } else if (story.options[WRAPS]) {
|
||||
// return story;
|
||||
// }
|
||||
|
||||
// return Vue.extend({
|
||||
// [WRAPS]: story,
|
||||
// [VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) },
|
||||
// functional: true,
|
||||
// render(h, { data, parent, children }) {
|
||||
// return h(
|
||||
// story,
|
||||
// {
|
||||
// ...data,
|
||||
// props: { ...(data.props || {}), ...parent.$root[VALUES] },
|
||||
// },
|
||||
// children
|
||||
// );
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
|
||||
// function decorateStory(getStory, decorators) {
|
||||
// return decorators.reduce(
|
||||
// (decorated, decorator) => (context = {}) => {
|
||||
// let story;
|
||||
|
||||
// const decoratedStory = decorator((p = {}) => {
|
||||
// story = decorated(
|
||||
// p
|
||||
// ? {
|
||||
// ...context,
|
||||
// ...p,
|
||||
// parameters: {
|
||||
// ...context.parameters,
|
||||
// ...p.parameters,
|
||||
// },
|
||||
// }
|
||||
// : context
|
||||
// );
|
||||
|
||||
// return story;
|
||||
// }, context);
|
||||
|
||||
// if (!story) {
|
||||
// story = decorated(context);
|
||||
// }
|
||||
|
||||
// if (decoratedStory === story) {
|
||||
// return story;
|
||||
// }
|
||||
|
||||
// return prepare(decoratedStory, story);
|
||||
// },
|
||||
// context => prepare(getStory(context))
|
||||
// );
|
||||
// }
|
||||
|
||||
// const { load: coreLoad, clientApi, configApi, forceReRender } = start(render, { decorateStory });
|
||||
|
||||
// export const {
|
||||
// setAddon,
|
||||
// addDecorator,
|
||||
// addParameters,
|
||||
// clearDecorators,
|
||||
// getStorybook,
|
||||
// raw,
|
||||
// } = clientApi;
|
||||
|
||||
// const framework = 'vue';
|
||||
// export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
// export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
// export const { configure } = configApi;
|
||||
// export { forceReRender };
|
||||
@ -1,5 +1,6 @@
|
||||
import { stripIndents } from 'common-tags';
|
||||
import Vue from 'vue';
|
||||
import { RenderMainArgs } from './types';
|
||||
|
||||
export const COMPONENT = 'STORYBOOK_COMPONENT';
|
||||
export const VALUES = 'STORYBOOK_VALUES';
|
||||
@ -25,7 +26,7 @@ export default function render({
|
||||
showError,
|
||||
showException,
|
||||
forceRender,
|
||||
}) {
|
||||
}: RenderMainArgs) {
|
||||
Vue.config.errorHandler = showException;
|
||||
|
||||
const element = storyFn();
|
||||
@ -11,9 +11,11 @@ export interface RenderMainArgs {
|
||||
selectedStory: string;
|
||||
showMain: () => void;
|
||||
showError: (args: ShowErrorArgs) => void;
|
||||
showException: (...args: any[]) => void;
|
||||
forceRender: boolean;
|
||||
}
|
||||
|
||||
// TODO: some vue expert needs to look at this
|
||||
export type StoryFnVueReturnType = any;
|
||||
|
||||
export interface ICollection {
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
function getType(fn) {
|
||||
function getType(fn: Function) {
|
||||
const match = fn && fn.toString().match(/^\s*function (\w+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
// https://github.com/vuejs/vue/blob/dev/src/core/util/props.js#L92
|
||||
function resolveDefault({ type, default: def }) {
|
||||
function resolveDefault({ type, default: def }: any) {
|
||||
if (typeof def === 'function' && getType(type) !== 'Function') {
|
||||
// known limitation: we dont have the component instance to pass
|
||||
// known limitation: we don't have the component instance to pass
|
||||
return def.call();
|
||||
}
|
||||
|
||||
return def;
|
||||
}
|
||||
|
||||
export function extractProps(component) {
|
||||
export function extractProps(component: any) {
|
||||
return Object.entries(component.options.props || {})
|
||||
.map(([name, prop]) => ({ [name]: resolveDefault(prop) }))
|
||||
.reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
|
||||
@ -1,6 +1,7 @@
|
||||
import VueLoaderPlugin from 'vue-loader/lib/plugin';
|
||||
import { Configuration } from 'webpack';
|
||||
|
||||
export function webpack(config) {
|
||||
export function webpack(config: Configuration) {
|
||||
return {
|
||||
...config,
|
||||
plugins: [...config.plugins, new VueLoaderPlugin()],
|
||||
@ -26,7 +27,7 @@ export function webpack(config) {
|
||||
};
|
||||
}
|
||||
|
||||
export function babelDefault(config) {
|
||||
export function babelDefault(config: any) {
|
||||
return {
|
||||
...config,
|
||||
presets: [...config.presets, require.resolve('babel-preset-vue')],
|
||||
6
app/vue/src/server/options.ts
Normal file
6
app/vue/src/server/options.ts
Normal file
@ -0,0 +1,6 @@
|
||||
const packageJson = require('../../package.json');
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
frameworkPresets: [require.resolve('./framework-preset-vue.js')],
|
||||
};
|
||||
2
app/vue/src/typings.d.ts
vendored
2
app/vue/src/typings.d.ts
vendored
@ -2,3 +2,5 @@ declare module '@storybook/core/*';
|
||||
declare module 'global';
|
||||
// todo check for correct types
|
||||
declare module 'webpack/lib/RuleSet';
|
||||
|
||||
declare module 'vue-loader/lib/plugin';
|
||||
Loading…
x
Reference in New Issue
Block a user