17 | }
18 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | import Vue from 'vue'
3 | export default Vue
4 | }
5 |
6 | declare module '*.css' {
7 | const modules: {
8 | [className: string]: string
9 | }
10 |
11 | export default modules
12 | }
13 |
--------------------------------------------------------------------------------
/src/utils/constructorToString.spec.ts:
--------------------------------------------------------------------------------
1 | import constructorToString from './constructorToString'
2 |
3 | it('Label of String to equal "string"', () => {
4 | expect(constructorToString(String)).toBe('string')
5 | })
6 |
7 | it('Label of Number to equal "number"', () => {
8 | expect(constructorToString(Number)).toBe('number')
9 | })
10 |
11 | it('Label of Object to equal "object"', () => {
12 | expect(constructorToString(Object)).toBe('object')
13 | })
14 |
15 | it('Label of Boolean to equal "boolean"', () => {
16 | expect(constructorToString(Boolean)).toBe('boolean')
17 | })
18 |
19 | it('Label of Function to equal "function"', () => {
20 | expect(constructorToString(Function)).toBe('function')
21 | })
22 |
23 | it('Label of Symbol to equal "Symbol"', () => {
24 | expect(constructorToString(Symbol)).toBe('Symbol')
25 | })
26 |
27 | it('Label of Function to equal "function"', () => {
28 | expect(constructorToString(Array)).toBe('array')
29 | })
30 |
31 | it('Label of Class to equal its name', () => {
32 | function MyClass() {}
33 |
34 | expect(constructorToString(MyClass)).toBe('MyClass')
35 | })
36 |
37 | it('Other value will be "unknown"', () => {
38 | expect(constructorToString(() => null)).toBe('unknown')
39 | })
40 |
--------------------------------------------------------------------------------
/src/utils/constructorToString.ts:
--------------------------------------------------------------------------------
1 | type Constructor = () => void
2 |
3 | /**
4 | * Returns type string of constructor.
5 | * @param constructor Constructor function
6 | */
7 | export const constructorToString = (
8 | constructor: Constructor | Constructor[]
9 | ): string => {
10 | if (constructor instanceof Array) {
11 | return constructor.map(constructorToString).join(' | ')
12 | } else if (constructor === Number) {
13 | return 'number'
14 | } else if (constructor === String) {
15 | return 'string'
16 | } else if (constructor === Object) {
17 | return 'object'
18 | } else if (constructor === Boolean) {
19 | return 'boolean'
20 | } else if (constructor === Function) {
21 | return `function`
22 | } else if (constructor === Symbol) {
23 | return 'Symbol'
24 | } else if (constructor === Array) {
25 | return 'array'
26 | } else {
27 | return constructor.name || 'unknown'
28 | }
29 | }
30 |
31 | export default constructorToString
32 |
--------------------------------------------------------------------------------
/src/utils/getJSXFromRenderFn.spec.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | import getJSXFromRenderFn, { CreateJSX } from './getJSXFromRenderFn'
4 |
5 | it('First argument for createElement will be tag name', () => {
6 | expect(getJSXFromRenderFn(h => h('div'))).toBe('')
7 |
8 | const MyButton = Vue.component('my-button', {
9 | template: ''
10 | })
11 |
12 | expect(getJSXFromRenderFn(h => h(MyButton))).toBe('')
13 | })
14 |
15 | it('Anonymous component will be shown as ', () => {
16 | const MyLabel = Vue.extend({
17 | template: ''
18 | })
19 |
20 | expect(getJSXFromRenderFn(h => h(MyLabel))).toBe('')
21 |
22 | expect(getJSXFromRenderFn(h => h(MyLabel, [h(MyLabel)]))).toBe(
23 | ''
24 | )
25 | })
26 |
27 | it('Renders children', () => {
28 | const render = (h: CreateJSX) => h('div', [h('span', [h('a')])])
29 |
30 | expect(getJSXFromRenderFn(render)).toBe('')
31 | })
32 |
33 | it('Renderes text node', () => {
34 | expect(getJSXFromRenderFn(h => 'foo')).toBe('foo')
35 |
36 | expect(getJSXFromRenderFn(h => h('p', ['foo']))).toBe('foo
')
37 | })
38 |
39 | it('Renderes attributes and props', () => {
40 | const bar = false
41 |
42 | const render = (h: CreateJSX) =>
43 | h('div', {
44 | props: {
45 | foo: 'foo',
46 | bar
47 | },
48 | attrs: {
49 | label: 'baz'
50 | },
51 | on: {
52 | click: (ev: any) => console.log(ev)
53 | }
54 | })
55 |
56 | expect(getJSXFromRenderFn(render)).toBe(
57 | ''
58 | )
59 | })
60 |
--------------------------------------------------------------------------------
/src/utils/getJSXFromRenderFn.ts:
--------------------------------------------------------------------------------
1 | import { AsyncComponent, Component, VNodeData } from 'vue'
2 |
3 | import { AnyComponent } from '../types/vue'
4 |
5 | export type RenderFn = (h: CreateJSX) => any
6 |
7 | /**
8 | * Get JSX strings from render function.
9 | * @param render
10 | */
11 | export const getJSXFromRenderFn = (render: RenderFn): string => {
12 | return render(createJSX)
13 | }
14 |
15 | export default getJSXFromRenderFn
16 |
17 | export interface CreateJSX {
18 | (tag?: Tag, children?: JSXStringChildren): string
19 | (tag?: Tag, data?: VNodeData, children?: JSXStringChildren): string
20 | }
21 |
22 | function createJSX(tag?: Tag, children?: JSXStringChildren): string
23 | function createJSX(
24 | tag?: Tag,
25 | data?: VNodeData,
26 | children?: JSXStringChildren
27 | ): string
28 |
29 | /**
30 | * Custom renderer building JSX strings.
31 | */
32 | function createJSX(
33 | tag?: Tag,
34 | childrenOrData?: VNodeData | JSXStringChildren,
35 | _children?: JSXStringChildren
36 | ): string {
37 | const data = (childrenOrData instanceof Array ? {} : childrenOrData) || {}
38 | const children =
39 | (childrenOrData instanceof Array ? childrenOrData : _children) || []
40 |
41 | const tagName = getTagName(tag)
42 |
43 | const props = formatDataObject(data)
44 |
45 | return children.length
46 | ? `<${tagName}${props ? ' ' + props : ''}>${children.join('')}`
47 | : `<${tagName}${props ? ' ' + props : ''}/>`
48 | }
49 |
50 | export type JSXStringChildren = string[]
51 | export type Tag = string | AnyComponent | undefined
52 |
53 | /** Tag name for components that have no name on runtime */
54 | const Anonymous = 'Anonymous'
55 |
56 | /**
57 | * Get tag name from 1st argument for h (createJSX).
58 | * @param tag
59 | */
60 | const getTagName = (tag: Tag) => {
61 | if (!tag) {
62 | return Anonymous
63 | } else if (typeof tag === 'string') {
64 | return tag
65 | } else if (tag.name) {
66 | const t = tag as any
67 |
68 | if (!t.options) {
69 | return t.name || Anonymous
70 | } else {
71 | return t.options.name || Anonymous
72 | }
73 | } else {
74 | return Anonymous
75 | }
76 | }
77 |
78 | const formatDataObject = (dataObject: VNodeData): string =>
79 | [
80 | ...formatDataObjectItem(dataObject.props),
81 | ...formatDataObjectItem(dataObject.attrs),
82 | ...formatDataObjectItem(dataObject.domProps, 'domProps'),
83 | ...formatDataObjectItem(dataObject.on, 'on'),
84 | ...formatDataObjectItem(dataObject.nativeOn, 'nativeOn'),
85 | ...(dataObject.class ? [formatProp('class', dataObject.class)] : []),
86 | ...(dataObject.style ? [formatProp('style', dataObject.style)] : []),
87 | ...(dataObject.key ? [formatProp('key', dataObject.key)] : []),
88 | ...(dataObject.ref ? [formatProp('ref', dataObject.ref)] : []),
89 | ...(dataObject.slot ? [formatProp('slot', dataObject.slot)] : [])
90 | ].join(' ')
91 |
92 | const formatDataObjectItem = (
93 | item?: { [key: string]: any },
94 | prefix: string = ''
95 | ) =>
96 | item
97 | ? Object.keys(item).map(key =>
98 | formatProp(
99 | prefix ? prefix + key[0].toUpperCase() + key.slice(1) : key,
100 | item[key]
101 | )
102 | )
103 | : []
104 |
105 | const formatProp = (k: string, v: any): string =>
106 | typeof v === 'string'
107 | ? `${k}="${v}"`
108 | : typeof v === 'function'
109 | ? `${k}={${v.toString()}}`
110 | : `${k}={${JSON.stringify(v)}}`
111 |
--------------------------------------------------------------------------------
/src/utils/getTagNames.spec.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | import { fromJSX, fromTemplate } from './getTagNames'
4 |
5 | describe('#fromTemplate', () => {
6 | it('Returns ["p"] for ', () => {
7 | expect(fromTemplate('')).toEqual(['p'])
8 | })
9 |
10 | it('Returns ["p"] for ', () => {
11 | expect(fromTemplate('')).toEqual(['p'])
12 | })
13 |
14 | it('Returns ["div","span","a"] for ', () => {
15 | expect(fromTemplate('')).toEqual([
16 | 'div',
17 | 'span',
18 | 'a'
19 | ])
20 | })
21 |
22 | it('Remove duplicate tags', () => {
23 | expect(fromTemplate('')).toEqual(['div'])
24 | })
25 |
26 | it('Works with multiline template', () => {
27 | expect(
28 | fromTemplate(`
29 |
32 | `)
33 | ).toEqual(['div', 'p'])
34 | })
35 |
36 | it('Keeps case of tag names', () => {
37 | expect(fromTemplate('')).toEqual(['FooBar'])
38 | })
39 | })
40 |
41 | describe('#fromJSX', () => {
42 | it('Returns ["p"] for h("p")', () => {
43 | expect(fromJSX(h => h('p'))).toEqual(['p'])
44 | })
45 |
46 | it('Returns ["span", "a", "p"] for h("p", [h("span"), h("a")])', () => {
47 | expect(fromJSX(h => h('p', [h('span'), h('a')]))).toEqual([
48 | 'span',
49 | 'a',
50 | 'p'
51 | ])
52 | })
53 |
54 | it('Parse component', () => {
55 | const Component = Vue.extend({
56 | render(h) {
57 | return h('div')
58 | }
59 | })
60 |
61 | expect(fromJSX(h => h(Component))).toEqual([])
62 | })
63 |
64 | it('Parse component', () => {
65 | const Component = Vue.component('foo', {
66 | render(h) {
67 | return h('div')
68 | }
69 | })
70 |
71 | expect(fromJSX(h => h(Component))).toEqual(['foo'])
72 | })
73 | })
74 |
--------------------------------------------------------------------------------
/src/utils/getTagNames.ts:
--------------------------------------------------------------------------------
1 | import dedent from 'dedent-tabs'
2 | import { VNodeChildren } from 'vue'
3 | import { ASTElement, compile } from 'vue-template-compiler'
4 |
5 | import removeDuplicates from './removeDuplicates'
6 |
7 | /**
8 | * Returns tags used in template.
9 | * @param template
10 | */
11 | export const fromTemplate = (template: string): string[] => {
12 | const { ast } = compile(dedent(template))
13 |
14 | if (!ast) {
15 | return []
16 | }
17 |
18 | return removeDuplicates(retrieveTagNamesFromAST(ast))
19 | }
20 |
21 | const retrieveTagNamesFromAST = (el: ASTElement): string[] => {
22 | return [
23 | ...Array.from(el.children || []).map(e => retrieveTagNamesFromAST(e))
24 | ].reduce((dest, cur) => [...dest, ...cur], el.tag ? [el.tag] : [])
25 | }
26 |
27 | type Render = (
28 | h: (tag: any, dataObject?: any, children?: VNodeChildren) => any,
29 | hack: any
30 | ) => any
31 |
32 | /**
33 | * Returns outermost tag name in JSX.
34 | * @param render
35 | */
36 | export const fromJSX = (render: Render): string[] => {
37 | const result: string[] = []
38 |
39 | render((tag, dataObject, _children) => {
40 | switch (typeof tag) {
41 | case 'string':
42 | result.push(tag)
43 | return
44 | case 'object':
45 | if (tag.name) {
46 | result.push(tag.name)
47 | return
48 | }
49 |
50 | return
51 | case 'function':
52 | // component created with Vue.component/Vue.extend
53 | if (tag.options && typeof tag.options.name === 'string') {
54 | result.push(tag.options.name)
55 | return
56 | }
57 |
58 | return
59 | default:
60 | console.warn(tag)
61 | return
62 | }
63 | }, {})
64 |
65 | return removeDuplicates(result)
66 | }
67 |
--------------------------------------------------------------------------------
/src/utils/removeDuplicates.spec.ts:
--------------------------------------------------------------------------------
1 | import removeDuplicates from './removeDuplicates'
2 |
3 | it('Remove duplicates', () => {
4 | expect(removeDuplicates([1, 2, 3, '1', 'bar', 3, 'foo', 'foo'])).toEqual([
5 | 1,
6 | 2,
7 | 3,
8 | '1',
9 | 'bar',
10 | 'foo'
11 | ])
12 | })
13 |
--------------------------------------------------------------------------------
/src/utils/removeDuplicates.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Remove duplicates from given array.
3 | */
4 | export default (arr: P[]): P[] => {
5 | return arr.filter((e, i) => arr.indexOf(e) === i)
6 | }
7 |
--------------------------------------------------------------------------------
/src/view/index.ts:
--------------------------------------------------------------------------------
1 | import addons from '@storybook/addons'
2 |
3 | import { Events } from '../addon'
4 | import { InfoAddonOptions } from '../options'
5 | import { StoryInfo } from '../types/info'
6 |
7 | export function renderToPanel(
8 | info: StoryInfo,
9 | options: InfoAddonOptions
10 | ): void {
11 | const channel = addons.getChannel()
12 |
13 | channel.emit(Events.ShowDocs, { info, options })
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./lib",
4 | "lib": ["dom", "es5", "es2015", "es2015.promise"],
5 | "jsx": "react",
6 | "target": "es5",
7 | "strict": true,
8 | "module": "es2015",
9 | "moduleResolution": "node",
10 | "removeComments": true,
11 | "emitDecoratorMetadata": true,
12 | "experimentalDecorators": true,
13 | "allowSyntheticDefaultImports": true,
14 | "esModuleInterop": true,
15 | "strictNullChecks": true,
16 | "declaration": true
17 | },
18 | "include": ["src/**/*.ts", "src/**/*.d.ts"],
19 | "exclude": ["node_modules", "lib"]
20 | }
21 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "tslint:latest",
4 | "tslint-config-prettier"
5 | ],
6 | "rules": {
7 | "no-console": false,
8 | "interface-name": [
9 | true,
10 | "never-prefix"
11 | ],
12 | "object-literal-sort-keys": false,
13 | "variable-name": [
14 | true,
15 | "check-format",
16 | "allow-leading-underscore",
17 | "allow-pascal-case"
18 | ],
19 | "unified-signatures": false
20 | },
21 | "linterOptions": {
22 | "exclude": [
23 | "**/*.spec.ts"
24 | ]
25 | }
26 | }
--------------------------------------------------------------------------------
86 |