diff --git a/__mocks__/inject-decorator.angular-stories.txt b/__mocks__/inject-decorator.angular-stories.txt
new file mode 100644
index 000000000000..5baa440d797b
--- /dev/null
+++ b/__mocks__/inject-decorator.angular-stories.txt
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { storiesOf } from '@storybook/angular';
+
+@Component({
+ selector: 'storybook-with-ng-content',
+ template: `
`,
+})
+class WithNgContentComponent {}
+
+storiesOf('Custom|ng-content', module).add('Default', () => ({
+ template: `This is rendered in ng-content
+
+ ))
+);
+
+storiesOf('Addons|Info.Options.styles', module)
+ .add(
+ 'Extend info styles with an object',
+ withInfo({
+ styles: {
+ button: {
+ base: {
+ background: 'purple',
+ },
+ },
+ header: {
+ h1: {
+ color: 'green',
+ },
+ },
+ },
+ })(() =>
+
+ ))
+);
diff --git a/addons/storysource/README.md b/addons/storysource/README.md
new file mode 100644
index 000000000000..f4daf4f1f074
--- /dev/null
+++ b/addons/storysource/README.md
@@ -0,0 +1,33 @@
+# Storybook Storysource Addon
+
+This addon is used to show stories source in the addon panel.
+
+## Getting Started
+
+First, install the addon
+
+```sh
+npm install -D @storybook/addon-storysource
+```
+
+Add this line to your `addons.js` file
+
+```js
+import '@storybook/addon-storysource/register';
+```
+
+Use this hook to a custom webpack.config. This will generate a decorator call in every story:
+
+```js
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.stories\.jsx?$/,
+ loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ enforce: 'pre',
+ },
+ ],
+ },
+};
+```
\ No newline at end of file
diff --git a/addons/storysource/loader.js b/addons/storysource/loader.js
new file mode 100644
index 000000000000..6cc4e38b8d14
--- /dev/null
+++ b/addons/storysource/loader.js
@@ -0,0 +1 @@
+module.exports = require('./dist/loader');
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
new file mode 100644
index 000000000000..a867b047996a
--- /dev/null
+++ b/addons/storysource/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "@storybook/addon-storysource",
+ "version": "3.4.0-alpha.8",
+ "description": "Stories addon for storybook",
+ "keywords": [
+ "storybook"
+ ],
+ "homepage": "https://github.com/storybooks/storybook/tree/master/addons/storysource",
+ "bugs": {
+ "url": "https://github.com/storybooks/storybook/issues"
+ },
+ "license": "MIT",
+ "main": "dist/index.js",
+ "jsnext:main": "src/index.js",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/storybooks/storybook.git"
+ },
+ "scripts": {
+ "prepare": "node ../../scripts/prepare.js"
+ },
+ "dependencies": {
+ "acorn": "^5.3.0",
+ "acorn-es7": "^0.1.0",
+ "acorn-jsx": "^4.1.1",
+ "acorn-stage3": "^0.4.0",
+ "estraverse": "^4.2.0",
+ "line-column": "^1.0.2",
+ "prop-types": "^15.5.10",
+ "react-syntax-highlighter": "^7.0.0"
+ },
+ "peerDependencies": {
+ "@storybook/addons": "^3.3.0",
+ "react": "*",
+ "react-dom": "*"
+ }
+}
diff --git a/addons/storysource/register.js b/addons/storysource/register.js
new file mode 100644
index 000000000000..e69edbea3ed1
--- /dev/null
+++ b/addons/storysource/register.js
@@ -0,0 +1 @@
+require('./dist').register();
diff --git a/addons/storysource/src/StoryPanel.js b/addons/storysource/src/StoryPanel.js
new file mode 100644
index 000000000000..06c3bccfcb3a
--- /dev/null
+++ b/addons/storysource/src/StoryPanel.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import jsx from 'react-syntax-highlighter/languages/prism/jsx';
+import { darcula } from 'react-syntax-highlighter/styles/prism';
+import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
+import { createElement } from 'react-syntax-highlighter';
+import { EVENT_ID } from './';
+
+registerLanguage('jsx', jsx);
+
+export default class StoryPanel extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = { source: '// Here will be dragons 🐉' };
+
+ const { channel } = props;
+
+ channel.on(EVENT_ID, ({ source, location }) => {
+ this.setState({
+ source,
+ location,
+ });
+ });
+
+ this.lineRenderer = this.lineRenderer.bind(this);
+ }
+
+ createPart(rows, stylesheet, useInlineStyles) {
+ return rows.map((node, i) =>
+ createElement({
+ node,
+ stylesheet,
+ useInlineStyles,
+ key: `code-segement${i}`,
+ })
+ );
+ }
+
+ lineRenderer({ rows, stylesheet, useInlineStyles }) {
+ const { location } = this.state;
+
+ if (location) {
+ const first = location.startLoc.line - 1;
+ const last = location.endLoc.line;
+
+ const start = this.createPart(rows.slice(0, first), stylesheet, useInlineStyles);
+ const selected = this.createPart(rows.slice(first, last), stylesheet, useInlineStyles);
+ const end = this.createPart(rows.slice(last), stylesheet, useInlineStyles);
+
+ return (
+
+ {start}
+ {selected}
+ {end}
+
+ );
+ }
+
+ return this.createPart(rows, stylesheet, useInlineStyles);
+ }
+
+ render() {
+ return (
+
+ {this.state.source}
+
+ );
+ }
+}
+
+StoryPanel.propTypes = {
+ channel: PropTypes.shape({
+ emit: PropTypes.func,
+ on: PropTypes.func,
+ removeListener: PropTypes.func,
+ }).isRequired,
+};
diff --git a/addons/storysource/src/index.js b/addons/storysource/src/index.js
new file mode 100644
index 000000000000..d24b2a4f9853
--- /dev/null
+++ b/addons/storysource/src/index.js
@@ -0,0 +1,6 @@
+export const ADDON_ID = 'storybook/stories';
+export const PANEL_ID = `${ADDON_ID}/stories-panel`;
+export const EVENT_ID = `${ADDON_ID}/story-event`;
+
+export { register } from './manager';
+export { withStorySource } from './preview';
diff --git a/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap b/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap
new file mode 100644
index 000000000000..065b5599ec2c
--- /dev/null
+++ b/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap
@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
+Object {
+ "Custom|ng-content@Default": Object {
+ "endLoc": Object {
+ "col": 3,
+ "line": 15,
+ },
+ "startLoc": Object {
+ "col": 44,
+ "line": 10,
+ },
+ },
+}
+`;
+
+exports[`inject-decorator positive - angular injects 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(withStorySource(__STORY__, __ADDS_MAP__)).add('Default', () => ({
+ template: \`This is rendered in ng-content
+
+ ))
+);
+
+storiesOf('Addons|Info.Options.styles', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__))
+ .add(
+ 'Extend info styles with an object',
+ withInfo({
+ styles: {
+ button: {
+ base: {
+ background: 'purple',
+ },
+ },
+ header: {
+ h1: {
+ color: 'green',
+ },
+ },
+ },
+ })(() =>
+
+ ))
+);
+"
+`;
+
+exports[`inject-decorator will not change the source when there are no "storiesOf" functions 1`] = `
+"while(true) {
+ console.log(\\"it's a kind of magic\\");
+}"
+`;
diff --git a/addons/storysource/src/loader/index.js b/addons/storysource/src/loader/index.js
new file mode 100644
index 000000000000..cb7ac63d2810
--- /dev/null
+++ b/addons/storysource/src/loader/index.js
@@ -0,0 +1,27 @@
+import injectDecorator from './inject-decorator';
+
+const ADD_DECORATOR_STATEMENT = '.addDecorator(withStorySource(__STORY__, __ADDS_MAP__))';
+
+function transform(source) {
+ const result = injectDecorator(source, ADD_DECORATOR_STATEMENT);
+
+ if (!result.changed) {
+ return source;
+ }
+
+ const sourceJson = JSON.stringify(source)
+ .replace(/\u2028/g, '\\u2028')
+ .replace(/\u2029/g, '\\u2029');
+
+ const addsMap = JSON.stringify(result.addsMap);
+
+ return `
+ var withStorySource = require('@storybook/addon-storysource').withStorySource;
+ var __STORY__ = ${sourceJson};
+ var __ADDS_MAP__ = ${addsMap};
+
+ ${result.source}
+ `;
+}
+
+export default transform;
diff --git a/addons/storysource/src/loader/inject-decorator.js b/addons/storysource/src/loader/inject-decorator.js
new file mode 100644
index 000000000000..fe0d4774b45b
--- /dev/null
+++ b/addons/storysource/src/loader/inject-decorator.js
@@ -0,0 +1,73 @@
+import lineColumn from 'line-column';
+import { handleADD, handleSTORYOF } from './parse-helpers';
+
+const estraverse = require('estraverse');
+const acorn = require('acorn');
+
+require('acorn-stage3/inject')(acorn);
+require('acorn-jsx/inject')(acorn);
+require('acorn-es7')(acorn);
+
+const acornConfig = {
+ ecmaVersion: '6',
+ sourceType: 'module',
+ plugins: {
+ jsx: true,
+ stage3: true,
+ es7: true,
+ },
+};
+
+function calculateLocations(source, adds) {
+ const addsKeys = Object.keys(adds);
+
+ if (!addsKeys.length) {
+ return {};
+ }
+
+ const lineColumnFinder = lineColumn(source);
+
+ return addsKeys.reduce((map, key) => {
+ const value = adds[key];
+
+ // eslint-disable-next-line no-param-reassign
+ map[key] = {
+ startLoc: lineColumnFinder.fromIndex(value.start),
+ endLoc: lineColumnFinder.fromIndex(value.end),
+ };
+
+ return map;
+ }, {});
+}
+
+function inject(source, decorator) {
+ const ast = acorn.parse(source, acornConfig);
+
+ let lastIndex = 0;
+ const parts = [source];
+ const adds = {};
+
+ estraverse.traverse(ast, {
+ fallback: 'iteration',
+ enter: (node, parent) => {
+ if (node.type === 'MemberExpression') {
+ handleADD(node, parent, adds);
+ }
+
+ if (node.type === 'CallExpression') {
+ lastIndex = handleSTORYOF(node, parts, source, lastIndex);
+ }
+ },
+ });
+
+ const addsMap = calculateLocations(source, adds);
+ const newSource = parts.join(decorator);
+
+ return {
+ changed: lastIndex > 0,
+ source: newSource,
+ addsMap,
+ };
+}
+
+export default inject;
diff --git a/addons/storysource/src/loader/inject-decorator.test.js b/addons/storysource/src/loader/inject-decorator.test.js
new file mode 100644
index 000000000000..5fe68ddb8d02
--- /dev/null
+++ b/addons/storysource/src/loader/inject-decorator.test.js
@@ -0,0 +1,50 @@
+import fs from 'fs';
+import injectDecorator from './inject-decorator';
+
+const ADD_DECORATOR_STATEMENT = '.addDecorator(withStorySource(__STORY__, __ADDS_MAP__))';
+
+describe('inject-decorator', () => {
+ describe('positive', () => {
+ const source = fs.readFileSync('./__mocks__/inject-decorator.stories.txt', 'utf-8');
+ const result = injectDecorator(source, ADD_DECORATOR_STATEMENT);
+
+ it('returns "changed" flag', () => {
+ expect(result.changed).toBeTruthy();
+ });
+
+ it('injects stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+
+ it('calculates "adds" map', () => {
+ expect(result.addsMap).toMatchSnapshot();
+ });
+ });
+
+ describe('positive - angular', () => {
+ const source = fs.readFileSync('./__mocks__/inject-decorator.angular-stories.txt', 'utf-8');
+ const result = injectDecorator(source, ADD_DECORATOR_STATEMENT);
+
+ it('returns "changed" flag', () => {
+ expect(result.changed).toBeTruthy();
+ });
+
+ it('injects stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+
+ it('calculates "adds" map', () => {
+ expect(result.addsMap).toMatchSnapshot();
+ });
+ });
+
+ it('will not change the source when there are no "storiesOf" functions', () => {
+ const source = fs.readFileSync('./__mocks__/inject-decorator.no-stories.txt', 'utf-8');
+
+ const result = injectDecorator(source, ADD_DECORATOR_STATEMENT);
+
+ expect(result.changed).toBeFalsy();
+ expect(result.addsMap).toEqual({});
+ expect(result.source).toMatchSnapshot();
+ });
+});
diff --git a/addons/storysource/src/loader/parse-helpers.js b/addons/storysource/src/loader/parse-helpers.js
new file mode 100644
index 000000000000..d89764f5f1c7
--- /dev/null
+++ b/addons/storysource/src/loader/parse-helpers.js
@@ -0,0 +1,82 @@
+const STORIES_OF = 'storiesOf';
+
+function pushParts(source, parts, from, to) {
+ const start = source.slice(from, to);
+ parts.push(start);
+
+ const end = source.slice(to);
+ parts.push(end);
+}
+
+function getKindFromStoryOfNode(object) {
+ if (object.arguments.length < 1) {
+ return '';
+ }
+
+ const kindArgument = object.arguments[0];
+
+ if (kindArgument.type === 'Literal') {
+ return kindArgument.value;
+ }
+
+ if (kindArgument.type === 'TemplateLiteral') {
+ // we can generate template, but it will not be a real value
+ // until the full template compilation. probably won't fix.
+ return '';
+ }
+
+ // other options may include some complex usages.
+ return '';
+}
+
+function findRelatedKind(object) {
+ if (!object || !object.callee) {
+ return '';
+ }
+
+ if (object.callee.name === STORIES_OF) {
+ return getKindFromStoryOfNode(object);
+ }
+
+ return findRelatedKind(object.callee.object);
+}
+
+export function handleADD(node, parent, adds) {
+ if (!node.property || !node.property.name || node.property.name.indexOf('add') !== 0) {
+ return;
+ }
+
+ const addArgs = parent.arguments;
+
+ if (!addArgs || addArgs.length < 2) {
+ return;
+ }
+
+ const storyName = addArgs[0];
+ const lastArg = addArgs[addArgs.length - 1];
+
+ if (storyName.type !== 'Literal') {
+ // if story name is not literal, it much harder to extract it
+ return;
+ }
+
+ const kind = findRelatedKind(node.object) || '';
+ const key = `${kind}@${storyName.value}`;
+
+ // eslint-disable-next-line no-param-reassign
+ adds[key] = {
+ // Debug: code: source.slice(storyName.start, lastArg.end),
+ start: storyName.start,
+ end: lastArg.end,
+ };
+}
+
+export function handleSTORYOF(node, parts, source, lastIndex) {
+ if (!node.callee || !node.callee.name || node.callee.name !== STORIES_OF) {
+ return lastIndex;
+ }
+
+ parts.pop();
+ pushParts(source, parts, lastIndex, node.end);
+ return node.end;
+}
diff --git a/addons/storysource/src/manager.js b/addons/storysource/src/manager.js
new file mode 100644
index 000000000000..bdfd4b4d5db4
--- /dev/null
+++ b/addons/storysource/src/manager.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import StoryPanel from './StoryPanel';
+import { ADDON_ID, PANEL_ID } from './';
+
+export function register() {
+ addons.register(ADDON_ID, () => {
+ const channel = addons.getChannel();
+ addons.addPanel(PANEL_ID, {
+ title: 'Story',
+ render: () =>