diff --git a/.babelrc.js b/.babelrc.js index 3fa92abb65dd..b60cfbe892d7 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -54,6 +54,7 @@ module.exports = { }, { test: './lib', + exclude: './addons/storysource/src/loader', presets: [ ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }], '@babel/preset-react', @@ -77,6 +78,7 @@ module.exports = { './lib/core/src/server', './lib/node-logger', './lib/codemod', + './lib/source-loader/src', './addons/storyshots', './addons/storysource/src/loader', './app/**/src/server/**', diff --git a/examples/angular-cli/.storybook/webpack.config.ts b/examples/angular-cli/.storybook/webpack.config.ts index 3a2d1f390e3f..3a8badcaf3a1 100644 --- a/examples/angular-cli/.storybook/webpack.config.ts +++ b/examples/angular-cli/.storybook/webpack.config.ts @@ -5,7 +5,7 @@ module.exports = async ({ config }: { config: any }) => { test: [/\.stories\.tsx?$/, /index\.ts$/], loaders: [ { - loader: require.resolve('@storybook/addon-storysource/loader'), + loader: require.resolve('@storybook/source-loader'), options: { parser: 'typescript', }, diff --git a/examples/ember-cli/.storybook/webpack.config.js b/examples/ember-cli/.storybook/webpack.config.js index 915eb22693e8..d382a097d811 100644 --- a/examples/ember-cli/.storybook/webpack.config.js +++ b/examples/ember-cli/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../')], enforce: 'pre', }); diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index 6425b7f90722..6df3e90e628a 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -27,6 +27,7 @@ "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", "@storybook/ember": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "babel-loader": "^8", "broccoli-asset-rev": "^3.0.0", "cross-env": "^5.2.0", diff --git a/examples/html-kitchen-sink/.storybook/webpack.config.js b/examples/html-kitchen-sink/.storybook/webpack.config.js index d2d694457e04..49d6279ea521 100644 --- a/examples/html-kitchen-sink/.storybook/webpack.config.js +++ b/examples/html-kitchen-sink/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../stories')], enforce: 'pre', }); diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index ff3ce8a491df..e41d18dc8b9e 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -31,6 +31,7 @@ "@storybook/core": "5.2.0-alpha.23", "@storybook/core-events": "5.2.0-alpha.23", "@storybook/html": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "eventemitter3": "^3.1.0", "format-json": "^1.0.3", "global": "^4.3.2" diff --git a/examples/marko-cli/.storybook/webpack.config.js b/examples/marko-cli/.storybook/webpack.config.js index 8c62bf31bd42..5c4768c30ce1 100644 --- a/examples/marko-cli/.storybook/webpack.config.js +++ b/examples/marko-cli/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json index 57d3538ab5ca..9adedcf735cb 100644 --- a/examples/marko-cli/package.json +++ b/examples/marko-cli/package.json @@ -31,6 +31,7 @@ "@storybook/addon-storysource": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", "@storybook/marko": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "prettier": "^1.16.4", "webpack": "^4.33.0" } diff --git a/examples/mithril-kitchen-sink/.storybook/webpack.config.js b/examples/mithril-kitchen-sink/.storybook/webpack.config.js index 8c62bf31bd42..5c4768c30ce1 100644 --- a/examples/mithril-kitchen-sink/.storybook/webpack.config.js +++ b/examples/mithril-kitchen-sink/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json index ea7802446a95..73e02448770d 100644 --- a/examples/mithril-kitchen-sink/package.json +++ b/examples/mithril-kitchen-sink/package.json @@ -24,6 +24,7 @@ "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", "@storybook/mithril": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "webpack": "^4.33.0" } } diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 68da05717790..96af26fd720d 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -41,6 +41,7 @@ "@storybook/core-events": "5.2.0-alpha.23", "@storybook/node-logger": "5.2.0-alpha.23", "@storybook/react": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "@storybook/theming": "5.2.0-alpha.23", "cors": "^2.8.5", "cross-env": "^5.2.0", diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js index 3429adc0ed4d..b027a4b06a0e 100644 --- a/examples/official-storybook/webpack.config.js +++ b/examples/official-storybook/webpack.config.js @@ -39,8 +39,13 @@ module.exports = async ({ config }) => ({ exclude: [/node_modules/, /dist/], }, { - test: /\.stories\.jsx?$/, - use: require.resolve('@storybook/addon-storysource/loader'), + test: /\.stories\.[tj]sx?$/, + use: [ + { + loader: require.resolve('@storybook/source-loader'), + options: { injectParameters: true }, + }, + ], include: [ path.resolve(__dirname, './stories'), path.resolve(__dirname, '../../lib/ui/src'), diff --git a/examples/polymer-cli/.storybook/webpack.config.js b/examples/polymer-cli/.storybook/webpack.config.js index 3e7ae19f52be..0be010861597 100644 --- a/examples/polymer-cli/.storybook/webpack.config.js +++ b/examples/polymer-cli/.storybook/webpack.config.js @@ -4,7 +4,7 @@ const webpack = require('webpack'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index ba93e8862d40..f4753f186cb0 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -20,6 +20,7 @@ "@storybook/addon-storysource": "5.2.0-alpha.23", "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/polymer": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "@webcomponents/webcomponentsjs": "^1.2.0", "global": "^4.3.2", "lit-html": "^1.0.0", diff --git a/examples/preact-kitchen-sink/.storybook/webpack.config.js b/examples/preact-kitchen-sink/.storybook/webpack.config.js index 46ba330e6665..c8a75926b7ca 100644 --- a/examples/preact-kitchen-sink/.storybook/webpack.config.js +++ b/examples/preact-kitchen-sink/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index 5b3d6aa7a813..230d12286847 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -30,6 +30,7 @@ "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", "@storybook/preact": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^3.0.1", diff --git a/examples/rax-kitchen-sink/.storybook/webpack.config.js b/examples/rax-kitchen-sink/.storybook/webpack.config.js index 99e298d739f2..39dff33950d1 100644 --- a/examples/rax-kitchen-sink/.storybook/webpack.config.js +++ b/examples/rax-kitchen-sink/.storybook/webpack.config.js @@ -5,7 +5,7 @@ module.exports = { rules: [ { test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }, diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json index 98ca817db918..bb929a018746 100644 --- a/examples/rax-kitchen-sink/package.json +++ b/examples/rax-kitchen-sink/package.json @@ -40,6 +40,7 @@ "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", "@storybook/rax": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "babel-eslint": "^8.2.2", "babel-preset-rax": "^1.0.0-beta.0", "rax-scripts": "^1.0.0-beta.10", diff --git a/examples/riot-kitchen-sink/.storybook/webpack.config.js b/examples/riot-kitchen-sink/.storybook/webpack.config.js index 9eb381789988..5f6354c3c594 100644 --- a/examples/riot-kitchen-sink/.storybook/webpack.config.js +++ b/examples/riot-kitchen-sink/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json index cf3f892e7380..275d1c24e000 100644 --- a/examples/riot-kitchen-sink/package.json +++ b/examples/riot-kitchen-sink/package.json @@ -29,6 +29,7 @@ "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", "@storybook/riot": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^3.0.1", diff --git a/examples/svelte-kitchen-sink/.storybook/webpack.config.js b/examples/svelte-kitchen-sink/.storybook/webpack.config.js index a943831441ac..243b6489507a 100644 --- a/examples/svelte-kitchen-sink/.storybook/webpack.config.js +++ b/examples/svelte-kitchen-sink/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index 4eac0f34f862..e01a46e3cf4f 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -23,6 +23,7 @@ "@storybook/addon-storysource": "5.2.0-alpha.23", "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "@storybook/svelte": "5.2.0-alpha.23" } } diff --git a/examples/vue-kitchen-sink/.storybook/webpack.config.js b/examples/vue-kitchen-sink/.storybook/webpack.config.js index a943831441ac..243b6489507a 100644 --- a/examples/vue-kitchen-sink/.storybook/webpack.config.js +++ b/examples/vue-kitchen-sink/.storybook/webpack.config.js @@ -3,7 +3,7 @@ const path = require('path'); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], + loaders: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 68e71bddc0a9..03ed7ca76e4c 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -29,6 +29,7 @@ "@storybook/addon-storysource": "5.2.0-alpha.23", "@storybook/addon-viewport": "5.2.0-alpha.23", "@storybook/addons": "5.2.0-alpha.23", + "@storybook/source-loader": "5.2.0-alpha.23", "@storybook/vue": "5.2.0-alpha.23", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.5", diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json new file mode 100644 index 000000000000..60d4a783a1c4 --- /dev/null +++ b/lib/source-loader/package.json @@ -0,0 +1,38 @@ +{ + "name": "@storybook/source-loader", + "version": "5.2.0-alpha.23", + "description": "Source loader", + "keywords": [ + "lib", + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/source-loader", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "lib/source-loader" + }, + "license": "MIT", + "main": "dist/index.js", + "jsnext:main": "src/index.js", + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", + "core-js": "^3.0.1", + "estraverse": "^4.2.0", + "global": "^4.3.2", + "loader-utils": "^1.2.3", + "prettier": "^1.16.4", + "prop-types": "^15.7.2", + "regenerator-runtime": "^0.12.1" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap new file mode 100644 index 000000000000..6cd7c5d832e7 --- /dev/null +++ b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap @@ -0,0 +1,858 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`inject-decorator injectDecorator option is false - angular does not inject stories decorator after the all "storiesOf" functions 1`] = ` +"import { Component } from '@angular/core'; +import { storiesOf } from '@storybook/angular'; + +@Component({ + selector: 'storybook-with-ng-content', + template: \`
\`, +}) +class WithNgContentComponent {} + +storiesOf('Custom|ng-content', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add('Default', () => ({ + template: \`

This is rendered in ng-content

\`, + moduleMetadata: { + declarations: [WithNgContentComponent], + }, +})); +" +`; + +exports[`inject-decorator injectDecorator option is false - flow does not inject stories decorator after the all "storiesOf" functions 1`] = ` +"// @flow +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withInfo } from '@storybook/addon-info'; + +import TableComponent from '../components/TableComponent'; + +import type { JssClasses } from '../types'; + +type State = { + value: any, +}; + +type Props = { + classes: JssClasses, + name: string, +}; + +class Table extends React.Component { + constructor(props) { + super(props); + this.state = { + value: undefined, + }; + } + + state: State; + + render() { + return ; + } +} + +const stories = storiesOf('Table', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)); +stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => )); +" +`; + +exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = ` +"var addSourceDecorator = require(\\"@storybook/source-loader\\").addSource; +import { Component } from '@angular/core'; +import { Store, StoreModule } from '@ngrx/store'; +import { storiesOf, moduleMetadata } from '@storybook/angular'; + +@Component({ + selector: 'storybook-comp-with-store', + template: '
{{this.getSotreState()}}
', +}) +class WithStoreComponent { + private store: Store; + + constructor(store: Store) { + this.store = store; + } + + getSotreState(): string { + return this.store === undefined ? 'Store is NOT injected' : 'Store is injected'; + } +} + +storiesOf('ngrx|Store', module) + .addDecorator( + moduleMetadata({ + imports: [StoreModule.forRoot({})], + declarations: [WithStoreComponent], + }) + ) + .add('With component', () => { + return { + component: WithStoreComponent, + }; + });" +`; + +exports[`inject-decorator injectDecorator option is false does not inject stories decorator after the all "storiesOf" functions 1`] = ` +"import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withInfo } from '@storybook/addon-info'; +import { action } from '@storybook/addon-actions'; + +import DocgenButton from '../components/DocgenButton'; +import FlowTypeButton from '../components/FlowTypeButton'; +import BaseButton from '../components/BaseButton'; +import TableComponent from '../components/TableComponent'; + +storiesOf('Addons|Info.React Docgen', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)) + .add( + 'Comments from PropType declarations', + withInfo( + 'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' + )(() => ) + ) + .add( + 'Comments from Flow declarations', + withInfo( + 'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' + )(() => ) + ) + .add( + 'Comments from component declaration', + withInfo( + 'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading' + )(() => ) + ); + +const markdownDescription = \` +#### You can use markdown in your withInfo() description. + +Sometimes you might want to manually include some code examples: +~~~js +const Button = () =>