Merge remote-tracking branch 'origin/master' into tmeasday/add-params-to-options-addon

.circleci/config.yml

@@ -39,6 +39,7 @@ jobs:
             - examples/official-storybook/node_modules
             - examples/polymer-cli/node_modules
             - examples/vue-kitchen-sink/node_modules
+            - examples/svelte-kitchen-sink/node_modules
             - examples/marko-cli/node_modules
       - save_cache:
           name: "Cache core dist"
@@ -72,6 +73,11 @@ jobs:
           command: |
             cd examples/vue-kitchen-sink
             yarn build-storybook
+      - run:
+          name: "Build svelte kitchen-sink"
+          command: |
+            cd examples/svelte-kitchen-sink
+            yarn build-storybook
       - run:
           name: "Build angular-cli"
           command: |
@@ -126,6 +132,11 @@ jobs:
           command: |
             cd examples/vue-kitchen-sink
             yarn storybook --smoke-test
+      - run:
+          name: "Run svelte kitchen-sink (smoke test)"
+          command: |
+            cd examples/svelte-kitchen-sink
+            yarn storybook --smoke-test
       - run:
           name: "Run angular-cli (smoke test)"
           command: |

.editorconfig

@@ -3,6 +3,6 @@ root = true
 [*]
 end_of_line = lf
 
-[*.{js,json,ts,vue,html}]
+[*.{js,json,ts,vue,svelte,html}]
 indent_style = space
 indent_size = 2

.github/CODEOWNERS

@@ -13,7 +13,7 @@
 /addons/links/ @hypnosphi @ndelangen
 /addons/notes/ @alexandrebodin
 /addons/options/ @danielduan @UsulPro
-/addons/storyshots/ @igor-dv @thomasbertet @hypnosphi 
+/addons/storyshots/ @igor-dv @thomasbertet @hypnosphi
 /addons/storysource/ @igor-dv
 /addons/viewport/ @saponifi3d
 
@@ -22,16 +22,18 @@
 /app/react/ @xavcz @shilman @thomasbertet
 /app/react-native/ @rmevans9 @danielduan @Gongreg @tmeasday
 /app/vue/ @thomasbertet @kazupon
+/app/svelte/ @plumpNation
 
 /docs/ @ndelangen @shilman @hypnosphi
 
 /examples/angular-cli/ @igor-dv @alterx
-/examples/cra-kitchen-sink/ @ndelangen @UsulPro @hypnosphi 
+/examples/cra-kitchen-sink/ @ndelangen @UsulPro @hypnosphi
 /examples/crna-kitchen-sink/ @Gongreg @danielduan
 /examples/official-storybook/ @hypnosphi @danielduan @UsulPro
 /examples/polymer-cli/ @naipath @igor-dv
 /examples/react-native-vanilla/ @tmeasday @danielduan
 /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
+/examples/svelte-kitchen-sink/ @plumpNation
 
 /lib/addons/ @ndelangen @theinterned
 /lib/channel-postmessage/ @mnmtanish @ndelangen

.github/autolabeler.yml

@@ -17,6 +17,7 @@
 'app: react-native': ["app/react-native/**"]
 'app: react': ["app/react/**"]
 'app: vue': ["app/vue/**"]
+'app: svelte': ["app/svelte/**"]
 'app: mithril': ["app/mithril/**"]
 'babel / webpack': ["webpack", "babel"]
 'cli': ["lib/cli/**"]

.spelling

@@ -6,6 +6,7 @@
 addon
 1
 vue
+svelte
 webcomponents
 aurelia
 iframe

.teamcity/OpenSourceProjects_Storybook/buildTypes/StotybookApp.kt

@@ -15,7 +15,7 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
     HTML("HTML", "html-kitchen-sink"),
     MARKO("Marko", "marko-cli"),
     HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
-    SVELTE("Svelte", "svelte-kitchen-sink", false);
+    SVELTE("Svelte", "svelte-kitchen-sink");
 
     val lowerName = appName.toLowerCase()
 

ADDONS_SUPPORT.md

@@ -1,19 +1,19 @@
 ## Addon / Framework Support Table
 
-| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)|
-| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)              |+| |+|+|+|+|+|+|
-|[actions](addons/actions)        |+|+|+|+|+|+|+|+|
-|[backgrounds](addons/backgrounds)  |+| |+|+|+|+|+|+|
-|[centered](addons/centered)      |+| |+|+| |+|+| |
-|[events](addons/events)          |+| |+|+|+|+|+|+|
-|[graphql](addons/graphql)        |+| | | | | | | |
-|[info](addons/info)              |+| | | | | | | |
-|[jest](addons/jest)              |+| | |+| | |+| |
-|[knobs](addons/knobs)            |+|+|+|+|+|+|+|+|
-|[links](addons/links)            |+|+|+|+|+|+|+| |
-|[notes](addons/notes)            |+| |+|+|+|+|+| |
-|[options](addons/options)        |+|+|+|+|+|+|+| |
-|[storyshots](addons/storyshots)  |+|+|+|+| | |+| |
-|[storysource](addons/storysource)|+| |+|+|+|+|+|+|
-|[viewport](addons/viewport)      |+| |+|+|+|+|+|+|
+| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)|
+| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
+|[a11y](addons/a11y)              |+| |+|+|+|+|+|+| |
+|[actions](addons/actions)        |+|+|+|+|+|+|+|+|+|
+|[backgrounds](addons/backgrounds)  |+| |+|+|+|+|+|+|+|
+|[centered](addons/centered)      |+| |+|+| |+|+| |+|
+|[events](addons/events)          |+| |+|+|+|+|+|+| |
+|[graphql](addons/graphql)        |+| | | | | | | | |
+|[info](addons/info)              |+| | | | | | | | |
+|[jest](addons/jest)              |+| | |+| | |+| | |
+|[knobs](addons/knobs)            |+|+|+|+|+|+|+|+|+|
+|[links](addons/links)            |+|+|+|+|+|+|+| |+|
+|[notes](addons/notes)            |+| |+|+|+|+|+| |+|
+|[options](addons/options)        |+|+|+|+|+|+|+| |+|
+|[storyshots](addons/storyshots)  |+|+|+|+| | |+| |+|
+|[storysource](addons/storysource)|+| |+|+|+|+|+|+|+|
+|[viewport](addons/viewport)      |+| |+|+|+|+|+|+|+|

CONTRIBUTING.md

@@ -53,7 +53,7 @@ You can use the `--update` flag to update snapshots or screenshots as needed.
 
 You can also pick suites from CLI.  Suites available are listed below.
 
-##### Core & React & Vue Tests
+##### Core & React & Vue & Svelte Tests
 
 `yarn test --core`
 
@@ -72,7 +72,7 @@ Before these tests are ran, the project must be bootstrapped with the React Nati
 `yarn test --image`
 
 This option executes tests from `<rootdir>/examples/official-storybook`
-In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date : 
+In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date :
 
 ```javascript
 cd examples/official-storybook

README.md

@@ -16,7 +16,7 @@ It allows you to browse a component library, view the different states of each c
 
 ## Intro
 
-![Storybook Screenshot](media/demo.gif)
+![Storybook Screenshot](media/storybook-intro.gif)
 
 Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
 
@@ -77,6 +77,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [Mithril](app/mithril) <sup>alpha</sup>
 -   [Marko](app/marko) <sup>alpha</sup>
 -   [HTML](app/html) <sup>alpha</sup>
+-   [Svelte](app/svelte) <sup>alpha</sup>
 
 ### Sub Projects
 
@@ -115,6 +116,7 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
 - [Mithril](https://storybooks-mithril.netlify.com/)
 - [Marko](https://storybooks-marko.netlify.com/)
 - [HTML](https://storybooks-html.netlify.com/)
+- [Svelte](https://storybooks-svelte.netlify.com/)
 
 ### 3.4
 - [React Official](https://release-3-4--storybooks-official.netlify.com)

addons/backgrounds/src/index.js

@@ -2,7 +2,7 @@ import addons, { makeDecorator } from '@storybook/addons';
 import CoreEvents from '@storybook/core-events';
 import deprecate from 'util-deprecate';
 
-import Events, { ADDON_ID } from './constants';
+import Events from './constants';
 
 let prevBackgrounds;
 
@@ -12,7 +12,7 @@ const subscription = () => () => {
 };
 
 export const withBackgrounds = makeDecorator({
-  name: ADDON_ID,
+  name: 'withBackgrounds',
   parameterName: 'backgrounds',
   skipIfNoParametersOrOptions: true,
   allowDeprecatedUsage: true,

addons/centered/README.md

@@ -47,6 +47,25 @@ storiesOf('MyComponent', module)
   }));
 ```
 
+example for Svelte:
+
+```js
+import { storiesOf } from '@storybook/svelte';
+import Centered from '@storybook/addon-centered/svelte';
+
+import Component from '../Component.svelte';
+
+storiesOf('Addon|Centered', module)
+  .addDecorator(Centered)
+  .add('rounded', () => ({
+    Component,
+    data: {
+      rounded: true,
+      text: "Look, I'm centered!",
+    },
+  }))
+```
+
 example for Mithril:
 
 ```js
@@ -96,7 +115,7 @@ storiesOf('Addon|Centered', module)
   )
   .addDecorator(centered)
   .add('centered template', () => ({
-    template: `<storybook-button-component 
+    template: `<storybook-button-component
         [text]="text" (onClick)="onClick($event)">
       </storybook-button-component>`,
     props: {
@@ -137,6 +156,19 @@ configure(function () {
 }, module);
 ```
 
+example for Svelte:
+
+```js
+import { configure, addDecorator } from '@storybook/svelte';
+import Centered from '@storybook/addon-centered/svelte';
+
+addDecorator(Centered);
+
+configure(function () {
+  //...
+}, module);
+```
+
 example for Mithril:
 
 ```js

addons/centered/src/components/Centered.svelte

@@ -0,0 +1,16 @@
+<div class="svelte-centered-wrapper" style="{style}">
+  <div class="svelte-centered-container" style="{innerStyle}">
+    <slot></slot>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        style: '',
+        innerStyle: ''
+      };
+    }
+  };
+</script>

addons/centered/src/helpers/json2CSS.js

@@ -0,0 +1,21 @@
+import { document } from 'global';
+
+/**
+ * Not all frameworks support an object for the style attribute but we want all to
+ * consume `styles.json`. Since `styles.json` uses standard style properties for keys,
+ * we can just set them on an element and then get the string result of that element's
+ * `style` attribute. This also means that invalid styles are filtered out.
+ *
+ * @param {Object} jsonStyles
+ * @returns {string}
+ * @see https://stackoverflow.com/questions/38533544/jsx-css-to-inline-styles
+ */
+export default function jsonToCss(jsonStyles) {
+  const frag = document.createElement('div');
+
+  Object.keys(jsonStyles).forEach(key => {
+    frag.style[key] = jsonStyles[key];
+  });
+
+  return frag.getAttribute('style');
+}

addons/centered/src/svelte.js

@@ -0,0 +1,25 @@
+import Centered from './components/Centered.svelte';
+import styles from './styles';
+import json2CSS from './helpers/json2CSS';
+
+const centeredStyles = {
+  /** @type {string} */
+  style: json2CSS(styles.style),
+  /** @type {string} */
+  innerStyle: json2CSS(styles.innerStyle),
+};
+
+/**
+ * This functionality works by passing the svelte story component into another
+ * svelte component that has the single purpose of centering the story component
+ * using a wrapper and container.
+ *
+ * We use the special element <svelte:component /> to achieve this.
+ *
+ * @see https://svelte.technology/guide#svelte-component
+ */
+export default function(storyFn) {
+  const { Component: OriginalComponent, data, on } = storyFn();
+
+  return { Component: OriginalComponent, data, on, Wrapper: Centered, WrapperData: centeredStyles };
+}

addons/centered/svelte.js

@@ -0,0 +1 @@
+module.exports = require('./dist/svelte');

addons/storyshots/storyshots-core/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
       '@storybook/react',
       '@storybook/react-native',
       '@storybook/vue',
+      '@storybook/svelte',
       'enzyme',
     ],
   },

addons/storyshots/storyshots-core/src/frameworks/svelte/loader.js

@@ -0,0 +1,32 @@
+import global from 'global';
+import hasDependency from '../hasDependency';
+import configure from '../configure';
+
+function test(options) {
+  return (
+    options.framework === 'svelte' || (!options.framework && hasDependency('@storybook/svelte'))
+  );
+}
+
+function load(options) {
+  global.STORYBOOK_ENV = 'svelte';
+
+  const { configPath, config } = options;
+  const storybook = require.requireActual('@storybook/svelte');
+
+  configure({ configPath, config, storybook });
+
+  return {
+    framework: 'svelte',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for svelte');
+    },
+    storybook,
+  };
+}
+
+export default {
+  load,
+  test,
+};

addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.js

@@ -0,0 +1,29 @@
+import { document } from 'global';
+
+/**
+ * Provides functionality to convert your raw story to the resulting markup.
+ *
+ * Storybook snapshots need the rendered markup that svelte outputs,
+ * but since we only have the story config data ({ Component, data }) in
+ * the Svelte stories, we need to mount the component, and then return the
+ * resulting HTML.
+ *
+ * If we don't render to HTML, we will get a snapshot of the raw story
+ * i.e. ({ Component, data }).
+ */
+function getRenderedTree(story, context) {
+  const { Component, data } = story.render(context);
+
+  // We need to create a target to mount onto.
+  const target = document.createElement('section');
+
+  new Component({ target, data }); // eslint-disable-line
+
+  // Classify the target so that it is clear where the markup
+  // originates from, and that it is specific for snapshot tests.
+  target.className = 'storybook-snapshot-container';
+
+  return target;
+}
+
+export default getRenderedTree;

addons/storyshots/storyshots-puppeteer/package.json

@@ -19,6 +19,6 @@
     "puppeteer": "^1.6.2"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "4.0.0-alpha.9"
+    "@storybook/addon-storyshots": "4.0.0-alpha.16"
   }
 }

addons/storyshots/storyshots-puppeteer/src/index.js

@@ -59,20 +59,21 @@ export const imageSnapshot = (customConfig = {}) => {
 
     expect.assertions(1);
 
+    let image;
     try {
       await customizePage(page);
       await page.goto(url, getGotoOptions({ context, url }));
       await beforeScreenshot(page, { context, url });
-      const image = await page.screenshot(getScreenshotOptions({ context, url }));
-
-      expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
+      image = await page.screenshot(getScreenshotOptions({ context, url }));
     } catch (e) {
       logger.error(
-        `ERROR WHILE CONNECTING TO ${url}, did you start or build the storybook first ? A storybook instance should be running or a static version should be built when using image snapshot feature.`,
+        `Error when connecting to ${url}, did you start or build the storybook first? A storybook instance should be running or a static version should be built when using image snapshot feature.`,
         e
       );
       throw e;
     }
+
+    expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
   };
 
   testFn.afterAll = () => browser.close();

app/angular/README.md

@@ -3,7 +3,7 @@
 Storybook for Angular is a UI development environment for your Angular components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/demo.gif)
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

app/angular/package.json

@@ -2,7 +2,7 @@
   "name": "@storybook/angular",
   "version": "4.0.0-alpha.16",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
-  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/angular",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/angular",
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },

app/html/README.md

@@ -5,7 +5,7 @@
 Storybook for HTML is a UI development environment for your plain HTML snippets.
 With it, you can visualize different states of your UI components and develop them interactively.
 
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/app/html/docs/demo.png)
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

app/html/package.json

@@ -2,7 +2,7 @@
   "name": "@storybook/html",
   "version": "4.0.0-alpha.16",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
-  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/html",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/html",
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },

app/marko/README.md

@@ -3,7 +3,7 @@
 Storybook for Marko is a UI development environment for your Marko components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
-![Storybook Screenshot](docs/demo.gif)
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

app/mithril/README.md

@@ -3,7 +3,7 @@
 Storybook for Mithril is a UI development environment for your Mithril components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/demo.gif)
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

app/polymer/README.md

@@ -5,7 +5,7 @@ With it, you can visualize different states of your UI components and develop th
 
 > Storybook for Polymer is at the **EXPERIMENTAL** stage!
 
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/demo.gif)
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

app/polymer/package.json

@@ -2,7 +2,7 @@
   "name": "@storybook/polymer",
   "version": "4.0.0-alpha.16",
   "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
-  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/polymer",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/polymer",
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },

app/react/README.md

@@ -3,7 +3,7 @@
 Storybook for React is a UI development environment for your React components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/demo.gif)
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

app/svelte/.npmignore

@@ -0,0 +1,2 @@
+docs
+.babelrc

app/svelte/README.md

@@ -0,0 +1,33 @@
+# Storybook for Svelte
+
+Storybook for Svelte is a UI development environment for your Svelte components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+npm i -g @storybook/cli
+cd my-svelte-app
+getstorybook
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+* * *
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
+
+## TODOs
+
+- [ ] Support `addon-info`
+- [ ] Support Svelte markup directly in stories
+- [ ] Add Svelte storybook generator
+- [ ] Provide stories that show advanced Svelte use cases
+ - [ ] Hydratable
+ - [ ] Advanced mount options

app/svelte/bin/build.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+require('../dist/server/build');

app/svelte/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/svelte/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@storybook/svelte",
+  "version": "4.0.0-alpha.16",
+  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/svelte",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "jsnext:main": "src/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/core": "4.0.0-alpha.16",
+    "common-tags": "^1.8.0",
+    "global": "^4.3.2",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0"
+  },
+  "devDependencies": {
+    "svelte": "^2.7.2",
+    "svelte-loader": "^2.9.1"
+  }
+}

app/svelte/src/client/index.js

@@ -0,0 +1,9 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+} from './preview';

app/svelte/src/client/preview/globals.js

@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'svelte';

app/svelte/src/client/preview/index.js

@@ -0,0 +1,18 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+
+const { clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
+
+export const { configure } = configApi;
+export { forceReRender };

app/svelte/src/client/preview/render.js

@@ -0,0 +1,85 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+
+let previousComponent = null;
+
+function cleanUpPreviousStory() {
+  if (!previousComponent) {
+    return;
+  }
+
+  previousComponent.destroy();
+  previousComponent = null;
+}
+
+function mountView({ Component, target, data, on, Wrapper, WrapperData }) {
+  let component;
+
+  if (Wrapper) {
+    const fragment = document.createDocumentFragment();
+    component = new Component({ target: fragment, data });
+
+    const wrapper = new Wrapper({
+      target,
+      slots: { default: fragment },
+      data: WrapperData || {},
+    });
+    component.on('destroy', () => {
+      wrapper.destroy(true);
+    });
+  } else {
+    component = new Component({ target, data });
+  }
+
+  if (on) {
+    // Attach svelte event listeners.
+    Object.keys(on).forEach(eventName => {
+      component.on(eventName, on[eventName]);
+    });
+  }
+
+  previousComponent = component;
+}
+
+export default function render({
+  story,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  // showException,
+}) {
+  const {
+    /** @type {SvelteComponent} */
+    Component,
+    /** @type {any} */
+    data,
+    /** @type {{[string]: () => {}}} Attach svelte event handlers */
+    on,
+    Wrapper,
+    WrapperData,
+  } = story();
+
+  cleanUpPreviousStory();
+
+  if (!Component) {
+    showError({
+      title: `Expecting a Svelte component from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the Svelte component configuration from the story?
+        Use "() => ({ Component: YourComponent, data: {} })"
+        when defining the story.
+      `,
+    });
+
+    return;
+  }
+
+  const target = document.getElementById('root');
+
+  target.innerHTML = '';
+
+  mountView({ Component, target, data, on, Wrapper, WrapperData });
+
+  showMain();
+}

app/svelte/src/server/build.js

@@ -0,0 +1,5 @@
+import { buildStatic } from '@storybook/core/server';
+
+import options from './options';
+
+buildStatic(options);

app/svelte/src/server/index.js

@@ -0,0 +1,5 @@
+import { buildDev } from '@storybook/core/server';
+
+import options from './options';
+
+buildDev(options);

app/svelte/src/server/options.js

@@ -0,0 +1,8 @@
+import packageJson from '../../package.json';
+
+import wrapInitialConfig from './wrapInitialConfig';
+
+export default {
+  packageJson,
+  wrapInitialConfig,
+};

app/svelte/src/server/wrapInitialConfig.js

@@ -0,0 +1,19 @@
+export default config => ({
+  ...config,
+  module: {
+    ...config.module,
+    rules: [
+      ...config.module.rules,
+      {
+        test: /\.(svelte|html)$/,
+        loader: require.resolve('svelte-loader'),
+        options: {},
+      },
+    ],
+  },
+  resolve: {
+    ...config.resolve,
+    extensions: [...config.resolve.extensions, '.svelte'],
+    alias: config.resolve.alias,
+  },
+});

app/vue/README.md

@@ -3,7 +3,7 @@
 Storybook for Vue is a UI development environment for your Vue components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/demo.gif)
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

app/vue/package.json

@@ -2,7 +2,7 @@
   "name": "@storybook/vue",
   "version": "4.0.0-alpha.16",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
-  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/vue",
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },

docs/.travis.yml

@@ -1,21 +0,0 @@
-language: node_js
-branches:
-  except:
-    - master
-cache:
-  directories:
-  - node_modules
-  - ".cache"
-notifications:
-  email: false
-node_js:
-- node
-before_install: "./scripts/travis/before_install.sh"
-after_success: "./scripts/travis/after_success.sh"
-script:
-- npm run lint
-git:
-  depth: 1
-env:
-  global:
-  - secure: yNNjO4HvIcBH2r+EpWr29TQZzUJoQCC7MlxDtWW5XCsiL7lwnAxRk9DJ1edjYyd2lt4UWVyiQYD7708YMq7sR9TQWN195kcVnd1k5JzNBvePK9VjrmX2e2gRsbSQmWYQXFuUvbEbBmZUPhWbgaTzDzSdzsoFpTqJg3Q328S2GleixtPLBly5SC59Zar9tGw7OyVmPRN9GdKbVQfPQcmHDY+fHKzAqBaenlL/dC6UR9N+w5oWr3KFH/smrVzbDEonoKaZqvj02LnHVctGL6XCopoNbm7ldf/A6qKS/9D/MrLiLP3O3umCPhnGH8L8bNw7I6pdIKbroISUd+v5FqoCLN1iLO5wDY73gKUdwYUAt37KEhFUJPDwr/YYxRP0fZHIF0lI44w0RgN7N27ISwu9dw6Zq6a28+UcBRyemsvfXodBO9jiAW8R0pQhqWZ9yc2vZfFVfRh5SbHBLqIc0uHcqAtnkx8XU72bDDbqmA0dCA+LwAPX3doaaP37C5BzO+khGODpG+4R0nSsuTdPB6+jbBuS84V9YUAAl95hhMlYA9hvI3GdDjPkahuaYdUrYmqSh3v2XIhEA+D6BjXaGLYwcFpZzLB8pzZbRZVR4RdmuGF1J+ozxZNiKPPqcmK7XFlGWJ2b2+fFw3ZuHU6grDdCe1zpLYzrx1Om6QBUir83oGM=

docs/package.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "main": "n/a",
   "scripts": {
-    "build": "gatsby build && cp static/**/* .travis.yml ./public",
+    "build": "gatsby build && cp static/**/* ./public",
     "build-storybook": "build-storybook",
     "deploy:ci": "gh-pages -t -r https://${GH_TOKEN}@github.com/storybooks/storybook.git -d public -o origin -b gh-pages",
     "deploy:manual": "gh-pages -t -r git@github.com:storybooks/storybook.git -d public -o origin -b gh-pages",

docs/scripts/travis/after_success.sh

@@ -1,14 +0,0 @@
-#!/bin/bash
-set -e
-
-if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
-  echo "We are in a pull request, not releasing"
-  exit 0
-fi
-
-if [[ $TRAVIS_BRANCH == 'source' ]]; then
-  npm run build
-  git config --global user.email "nobody@nobody.org"
-  git config --global user.name "Travis CI"
-  npm run deploy-travis
-fi

docs/scripts/travis/before_install.sh

@@ -1,38 +0,0 @@
-#!/bin/bash
-set -e
-# Note: do not do set -x or the passwords will leak!
-
-if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
-  echo "We are in a pull request, not setting up release"
-  exit 0
-fi
-
-if [[ $TRAVIS_BRANCH == 'master' ]]; then
-  # rm -rf .git
-  # git init
-  # git clean -dfx
-  # git remote add origin https://github.com/atlassian/lerna-semantic-release.git
-  # git fetch origin
-  # git clone https://github.com/$TRAVIS_REPO_SLUG.git $TRAVIS_REPO_SLUG
-  # git checkout $TRAVIS_BRANCH
-  #
-  # git config credential.helper store
-  # echo "https://${RELEASE_GH_USERNAME}:${RELEASE_GH_TOKEN}@github.com/atlassian/lerna-semantic-release.git" > ~/.git-credentials
-  #
-  # npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN -q
-  # npm prune
-  #
-  # git config --global user.email "design-platform@atlassian.com"
-  # git config --global user.name "Design Platform"
-  # git config --global push.default simple
-  #
-  # git fetch --tags
-  # git branch -u origin/$TRAVIS_BRANCH
-  # git fsck --full #debug
-  # echo "npm whoami"
-  # npm whoami #debug
-  # echo "git config --list"
-  # git config --list #debug
-  echo "We are on master"
-  exit 0
-fi

docs/src/components/Homepage/Demo/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import demoImg from './images/demo.gif';
+import demoImg from './images/storybook-intro.gif';
 import './style.css';
 
 const Demo = () => (

docs/src/pages/basics/guide-svelte/index.md

@@ -0,0 +1,158 @@
+---
+id: 'guide-svelte'
+title: 'Storybook for Svelte'
+---
+
+You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
+
+> This will also help you understand how Storybook works.
+
+## Starter Guide Svelte
+
+Storybook has its own Webpack setup and a dev server.
+
+The Webpack setup is very similar to [Svelte CLI's](https://github.com/sveltejs/svelte-cli), but allows you to [configure it however you want](/configurations/custom-webpack-config/).
+
+In this guide, we are trying to set up Storybook for your Svelte project.
+
+> It is very important to remember that Svelte components are precompiled from
+.svelte or .html files to vanilla javascript, so there is no 'runtime'.
+
+## Table of contents
+
+-   [Add @storybook/svelte](#add-storybooksvelte)
+-   [Create the NPM script](#create-the-npm-script)
+-   [Create the config file](#create-the-config-file)
+-   [Write your stories](#write-your-stories)
+-   [Run your Storybook](#run-your-storybook)
+
+## Add @storybook/svelte
+
+First of all, you need to add `@storybook/svelte` to your project. To do that, simply run:
+
+```sh
+yarn add @storybook/svelte --dev
+```
+
+## Create the NPM script
+
+Add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+
+```json
+{
+  "scripts": {
+    "storybook": "start-storybook -p 9001 -c .storybook"
+  }
+}
+```
+
+Those flags mean port (-p) 9001 and configuration (-c) located in the .storybook directory.
+
+## Create the config file
+
+Storybook can be configured in several different ways.
+
+That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory.
+
+Here's an example `.storybook/config.js` to get you started:
+
+```js
+import { configure } from '@storybook/svelte';
+
+function loadStories() {
+  // You can require as many stories as you need.
+  require('../src/stories');
+}
+
+configure(loadStories, module);
+```
+
+> This stories folder is just an example, you can load stories from wherever you want to.
+> We think stories are best located close to the source files.
+
+## Write your stories
+
+Now you can write some stories inside the `../stories/index.js` file, like this:
+
+```js
+// Story about MyButton
+import { storiesOf } from '@storybook/svelte';
+
+import MyButton from '../components/MyButton.svelte';
+
+storiesOf('MyButton', module)
+  .add('simple component example', () => ({
+    Component: MyButton,
+
+    data: {
+      rounded: true
+    },
+
+    on: {
+      click: event => {
+        console.log('clicked', event);
+      }
+    }
+  }));
+```
+
+Svelte storybooks don't support using templates in a story yet. Instead,
+you can create a .svelte file to compose components together, or simply to access
+all normal Svelte functionality, like slots.
+
+So you can create a story "view" file, essentially just a .svelte file to load
+your components into to test.
+
+```html
+<!-- MyButtonView  -->
+<MyButton rounded="{rounded}" on:click>
+  {buttonText}
+</Button>
+```
+
+In this example, the `on:click` that is heard on the `MyButton` component is
+simply passed up to the containing component `MyButtonView` using the svelte
+shorthand. It's the equivalent to `on:click="fire('click', event)"`, but it's
+worth knowing about especially in this "component wrapper" scenario.
+
+> If your component doesn't use slots, you don't need to do this, but if it does
+or some other svelte functionality that requires the component to exist in a svelte
+view, then this is how to do that.
+
+You would then write a story for this "view" the exact same way you did with a component.
+
+```js
+// MyButtonView
+import { storiesOf } from '@storybook/svelte';
+
+import MyButtonView from '../views/MyButtonView.svelte';
+
+storiesOf('MyButtonView', module)
+  .add('wrapped component(s) example', () => ({
+    Components: MyButtonView,
+
+    data: {
+      buttonText: 'Some button text',
+      rounded: true
+    },
+
+    on: {
+      click: (event) => {
+        console.log('clicked', event);
+      }
+    }
+  }));
+```
+
+Each story represents a single state of your component.
+
+## Run your Storybook
+
+Now everything is ready. Simply run your storybook with:
+
+```sh
+yarn storybook
+```
+
+Now you can change components and write stories whenever you need to.
+You'll get those changes into Storybook in a snap with the help of Webpack's HMR API.

docs/src/pages/basics/live-examples/index.md

@@ -13,6 +13,7 @@ title: 'Live Examples'
 - [Mithril](https://storybooks-mithril.netlify.com/)
 - [Marko](https://storybooks-marko.netlify.com/)
 - [HTML](https://storybooks-html.netlify.com/)
+- [Svelte](https://storybooks-svelte.netlify.com/)
 
 ### 3.4
 - [React Official](https://release-3-4--storybooks-official.netlify.com)

docs/src/pages/basics/quick-start-guide/index.md

@@ -4,7 +4,7 @@ title: 'Quick Start Guide'
 ---
 
 Storybook supports many different frontend frameworks with more coming!
-React, Vue, Angular, Mithril, Marko, and HTML are currently supported. Follow these steps to get started with Storybook.
+React, Vue, Angular, Mithril, Marko, HTML and Svelte are currently supported. Follow these steps to get started with Storybook.
 
 Get started using the automated command line tool. This command adds a set of boilerplate files for Storybook in your project:
 ```sh
@@ -19,6 +19,7 @@ To install storybook for HTML, add `--html` argument:
 getstorybook --html
 ```
 
+
 Start Storybook with:
 ```sh
 npm run storybook
@@ -35,6 +36,6 @@ To learn more about what `getstorybook` command does, have a look at the slow st
 * [Mithril](/basics/guide-mithril/)
 * [Marko](/basics/guide-marko/)
 * [HTML](/basics/guide-html/)
-
+* [Svelte](/basics/guide-svelte/)
 
 A tutorial is also available at [Learn Storybook](https://www.learnstorybook.com) for a step-by-step guide (only available for React).

docs/src/pages/basics/slow-start-guide/index.md

@@ -11,3 +11,4 @@ Storybook supports multiple UI libraries. The manual setup for each framework is
 -   [Storybook for Mithril](/basics/guide-mithril/)
 -   [Storybook for Marko](/basics/guide-marko/)
 -   [Storybook for HTML](/basics/guide-html/)
+-   [Storybook for Svelte](/basics/guide-svelte/)

docs/src/pages/configurations/custom-webpack-config/index.md

@@ -5,9 +5,8 @@ title: 'Custom Webpack Config'
 
 ## Default mode
 
-The default Webpack config of Storybook is balanced for a medium-size project (specially created with [Create React App](https://github.com/facebookincubator/create-react-app)) or a library. But if you already have your own Webpack setup, that's not useable.
 
-That's why we allow you to customize our Webpack setup by providing a `webpack.config.js` file exporting a **webpack 2** compatible config exported as a **commonjs module**.
+That's why we allow you to customize our webpack setup by providing a `webpack.config.js` file exporting a **webpack 2** compatible config exported as a **commonjs module**.
 
 There are a few ways to do it:
 
@@ -38,11 +37,11 @@ Since this config file stays in the Storybook directory, you need to set the inc
 
 You also need to install the loaders (style, css, sass, as well as node-sass) used in above config manually.
 
-> Once you create this `webpack.config.js` file, Storybook won't load the [default Webpack config](/configurations/default-config/) other than loading JS files with the Babel loader. This will disable included functionality like svg loading. Read on to learn how to [retain defaults](#full-control-mode--default).
+> Once you create this `webpack.config.js` file, Storybook won't load the [default webpack config](/configurations/default-config/) other than loading JS files with the Babel loader. This will disable included functionality like svg loading. Read on to learn how to [retain defaults](#full-control-mode--default).
 
 ### Supported Webpack Options
 
-You can add any kind of Webpack configuration options with the above config, whether they are plugins, loaders, or aliases.
+You can add any kind of webpack configuration options with the above config, whether they are plugins, loaders, or aliases.
 But you won't be able to change the following config options:
 
 * entry
@@ -117,9 +116,9 @@ For full instructions on Typescript setup, check [our dedicated Typescript page]
 
 ## Using Your Existing Config
 
-You may have an existing Webpack config for your project. So, you may need to copy and paste some config items into Storybook's custom Webpack config file.
+You may have an existing webpack config for your project. So, you may need to copy and paste some config items into Storybook's custom webpack config file.
 
 But you don't need to. There are a few options:
 
-* Import your main Webpack config into Storybook's `webpack.config.js` and use the loaders and plugins used in that.
-* Create a new file with common Webpack options and use it in both inside the main Webpack config and inside Storybook's `webpack.config.js`.
+* Import your main webpack config into Storybook's `webpack.config.js` and use the loaders and plugins used in that.
+* Create a new file with common webpack options and use it in both inside the main webpack config and inside Storybook's `webpack.config.js`.

docs/src/pages/configurations/typescript-config/index.md

@@ -69,6 +69,15 @@ The above example shows a working config with the TSDocgen plugin also integrate
 
 This is for the default configuration where `/stories` is a peer of `src`. If you have them all in just `src` you may wish to replace `"rootDirs": ["src", "stories"]` above with `"rootDir": "src",`.
 
+## Import tsx stories
+
+Change `config.ts` inside the Storybook config directory (by default, it’s `.storybook`) to import stories made with Typescript:
+
+```js
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.tsx$/);
+```
+
 ## Using Typescript with the TSDocgen addon
 
 The very handy [Storybook Info addon](https://github.com/storybooks/storybook/tree/master/addons/info) autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current solution is to use [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) to preprocess the Typescript files to give the Info addon what it needs. The webpack config above does this, and so for the rest of your stories you use it as per normal:

examples/official-storybook/built-storybooks/svelte-kitchen-sink

@@ -0,0 +1 @@
+../../svelte-kitchen-sink/storybook-static

examples/official-storybook/config.js

@@ -18,7 +18,14 @@ setOptions({
   theme: themes.dark,
 });
 
-addDecorator(story => <ThemeProvider theme={themes.normal}>{story()}</ThemeProvider>);
+addDecorator(
+  (story, { kind }) =>
+    kind === 'Core|Errors' ? (
+      story()
+    ) : (
+      <ThemeProvider theme={themes.normal}>{story()}</ThemeProvider>
+    )
+);
 
 configureViewport({
   viewports: {

examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot

@@ -47,3 +47,11 @@ exports[`Storyshots App|acceptance vue-kitchen-sink 1`] = `
   title="vue-kitchen-sink"
 />
 `;
+
+exports[`Storyshots App|acceptance svelte-kitchen-sink 1`] = `
+<iframe
+  src="svelte-kitchen-sink/index.html"
+  style="border:0;position:absolute;top:0;left:0;width:100vw;height:100vh"
+  title="svelte-kitchen-sink"
+/>
+`;

examples/official-storybook/stories/app-acceptance.stories.js

@@ -19,6 +19,7 @@ const style = {
 [
   'cra-kitchen-sink',
   'vue-kitchen-sink',
+  'svelte-kitchen-sink',
   'angular-cli',
   'polymer-cli',
   'mithril-kitchen-sink',

examples/official-storybook/stories/core.stories.js

@@ -3,6 +3,7 @@ import { storiesOf, addParameters } from '@storybook/react';
 import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
 import { Button } from '@storybook/components';
+import { navigator } from 'global';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -31,3 +32,19 @@ const increment = () => {
 storiesOf('Core|Events', module).add('Force re-render', () => (
   <Button onClick={increment}>Clicked: {timesClicked}</Button>
 ));
+
+// Skip these stories in storyshots, they will throw -- NOTE: would rather do this
+// via a params API, see https://github.com/storybooks/storybook/pull/3967#issuecomment-411616023
+if (
+  navigator &&
+  navigator.userAgent &&
+  !(navigator.userAgent.indexOf('jsdom') > -1) &&
+  !(navigator.userAgent.indexOf('Chromatic') > -1)
+) {
+  storiesOf('Core|Errors', module)
+    .add('story throws exception', () => {
+      throw new Error('error');
+    })
+    // Story does not return something react can render
+    .add('story errors', () => null);
+}

examples/svelte-kitchen-sink/.gitignore

@@ -0,0 +1,16 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
+yarn-error.log

examples/svelte-kitchen-sink/.storybook/addons.js

@@ -0,0 +1,8 @@
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-options/register';

examples/svelte-kitchen-sink/.storybook/config.js

@@ -0,0 +1,15 @@
+import { configure } from '@storybook/svelte';
+import { setOptions } from '@storybook/addon-options';
+
+// Used with @storybook/addon-options/register
+setOptions({ hierarchyRootSeparator: /\|/ });
+
+function loadStories() {
+  require('../src/stories');
+
+  const req = require.context('../src/stories', true, /\.stories\.js$/);
+
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

examples/svelte-kitchen-sink/.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = (storybookBaseConfig, configType, defaultConfig) => {
+  defaultConfig.module.rules.push({
+    test: [/\.stories\.js$/, /index\.js$/],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    include: [path.resolve(__dirname, '../src')],
+    enforce: 'pre',
+  });
+
+  return defaultConfig;
+};

examples/svelte-kitchen-sink/README.md

@@ -0,0 +1,5 @@
+# Storybook Svelte Demo
+
+This example directory represents the application you wish to integrate storybook into.
+
+Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.

examples/svelte-kitchen-sink/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "svelte-example",
+  "version": "4.0.0-alpha.16",
+  "private": true,
+  "scripts": {
+    "build-storybook": "build-storybook -s public",
+    "storybook": "start-storybook -p 9009 -s public"
+  },
+  "dependencies": {
+    "global": "^4.3.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "4.0.0-alpha.16",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.16",
+    "@storybook/addon-centered": "4.0.0-alpha.16",
+    "@storybook/addon-knobs": "4.0.0-alpha.16",
+    "@storybook/addon-links": "4.0.0-alpha.16",
+    "@storybook/addon-notes": "4.0.0-alpha.16",
+    "@storybook/addon-options": "4.0.0-alpha.16",
+    "@storybook/addon-storyshots": "4.0.0-alpha.16",
+    "@storybook/addon-storysource": "4.0.0-alpha.16",
+    "@storybook/addon-viewport": "4.0.0-alpha.16",
+    "@storybook/addons": "4.0.0-alpha.16",
+    "@storybook/svelte": "4.0.0-alpha.16"
+  }
+}

examples/svelte-kitchen-sink/public/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `yarn build`.
+    -->
+    <title>Svelte App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `yarn storybook`.
+      To create a production bundle, use `yarn build`.
+    -->
+  </body>
+</html>

examples/svelte-kitchen-sink/src/components/Button.svelte

@@ -0,0 +1,48 @@
+<button
+  class="button {roundedClass}"
+  on:click="onClick(event)">
+  <strong>{rounded ? 'Round' : 'Square'} corners</strong><br>
+  {text}
+  <slot></slot>
+</button>
+
+<style>
+  .rounded {
+    border-radius: 35px;
+  }
+
+  .button {
+    border: 3px solid;
+    padding: 10px 20px;
+    background-color: white;
+    outline: none;
+  }
+</style>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0,
+        text: '', // component supports both <slot> and text prop.
+        rounded: true
+      };
+    },
+
+    computed: {
+      roundedClass({ rounded }) {
+        return rounded ? 'rounded' : ''
+      }
+    },
+
+    methods: {
+      onClick(event) {
+        const {rounded} = this.get();
+
+        this.set({rounded: !rounded});
+
+        this.fire('click', event)
+      }
+    }
+  }
+</script>

examples/svelte-kitchen-sink/src/components/Button.test.js

@@ -0,0 +1,24 @@
+import { document } from 'global';
+import Button from './Button.svelte';
+
+let target;
+let component;
+
+describe('Button Component', () => {
+  beforeEach(() => {
+    target = document.createElement('div');
+
+    component = new Button({ target });
+  });
+
+  it('should render `text` property', () => {
+    const text = 'Hello world';
+    const expected = `Round corners\n  ${text}`;
+
+    component.set({ text });
+
+    const componentText = target.firstChild.textContent.trim();
+
+    expect(componentText).toEqual(expected);
+  });
+});

examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action on component method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button rounded svelte-n2tx93"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+    
+  
+    Custom text
+    
+  
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Actions Action on view method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+  
+
+  <button
+    class="button  svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+    
+  
+    
+    
+  
+    <!---->
+    You clicked
+    : 
+    0
+  </button>
+  
+
+  <p>
+    A little text to show this is a view.
+  </p>
+  
+
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+  
+
+  <p>
+    then wrapping the component up in a view
+  </p>
+  
+
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;

examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+  
+
+  <button
+    class="button  svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+    
+  
+    
+    
+  
+    <!---->
+    You clicked
+    : 
+    0
+  </button>
+  
+
+  <p>
+    A little text to show this is a view.
+  </p>
+  
+
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+  
+
+  <p>
+    then wrapping the component up in a view
+  </p>
+  
+
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;

examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Centered rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button rounded svelte-n2tx93"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+    
+  
+    Look, I'm centered!
+    
+  
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Centered with action 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button rounded svelte-n2tx93"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+    
+  
+    
+    
+  
+  </button>
+</section>
+`;

examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    style="width: 200px; height: 200px; background-color: green;"
+  >
+    <p>
+      I am interactive
+    </p>
+  </div>
+</section>
+`;

examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Links Go to welcome view 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main"
+  >
+    <h1>
+      Link Action
+    </h1>
+    
+  
+    <button
+      class="link"
+    >
+      Return to the 
+      <code
+        class="code"
+      >
+        Welcome
+      </code>
+       view story.
+    </button>
+  </div>
+</section>
+`;

examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+  
+
+  <button
+    class="button  svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+    
+  
+    
+    
+  
+    <!---->
+    🤔😳😯😮😄😩😓😱🤓😑😶😊
+    : 
+    0
+  </button>
+  
+
+  <p>
+    A little text to show this is a view.
+  </p>
+  
+
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+  
+
+  <p>
+    then wrapping the component up in a view
+  </p>
+  
+
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+  
+
+  <button
+    class="button  svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+    
+  
+    
+    
+  
+    <!---->
+    You clicked
+    : 
+    0
+  </button>
+  
+
+  <p>
+    A little text to show this is a view.
+  </p>
+  
+
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+  
+
+  <p>
+    then wrapping the component up in a view
+  </p>
+  
+
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;

examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+  
+
+  <button
+    class="button rounded svelte-n2tx93"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+    
+  
+    
+    
+  
+    <!---->
+    You clicked
+    : 
+    0
+  </button>
+  
+
+  <p>
+    A little text to show this is a view.
+  </p>
+  
+
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+  
+
+  <p>
+    then wrapping the component up in a view
+  </p>
+  
+
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+  
+
+  <button
+    class="button  svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+    
+  
+    
+    
+  
+    <!---->
+    You clicked
+    : 
+    0
+  </button>
+  
+
+  <p>
+    A little text to show this is a view.
+  </p>
+  
+
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+  
+
+  <p>
+    then wrapping the component up in a view
+  </p>
+  
+
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main svelte-1unvhkg"
+  >
+    <h1>
+      Welcome to Storybook for Svelte
+    </h1>
+    
+  
+    <p>
+      This is a UI component dev environment for your svelte app.
+    </p>
+    
+  
+    <p>
+      We've added some basic stories inside the 
+      <code
+        class="code svelte-1unvhkg"
+      >
+        src/stories
+      </code>
+       directory.
+    
+      <strong>
+        A story is like a visual test case
+      </strong>
+      
+    and represents a single state of one or more UI components.
+    You can have as many stories as you want.
+    </p>
+    
+
+  
+    <h1
+      class="logo svelte-1unvhkg"
+    >
+      Svelte
+    </h1>
+    
+
+  
+    <p>
+      Just like that, you can add your own components as stories.
+    You can also edit those components and see changes right away.
+    
+      <br />
+      
+    (Try editing the 
+      <code
+        class="code svelte-1unvhkg"
+      >
+        Button
+      </code>
+       component
+    located at 
+      <code
+        class="code svelte-1unvhkg"
+      >
+        src/stories/views/Welcome.svelte
+      </code>
+      .)
+    </p>
+    
+  
+    <p>
+      Usually we create stories with smaller UI components in the app.
+      <br />
+      
+    Have a look at the
+    
+      <a
+        class="link svelte-1unvhkg"
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+      >
+        Writing Stories
+      </a>
+      
+    section in our documentation.
+    </p>
+    
+  
+    <p
+      class="note svelte-1unvhkg"
+    >
+      <b>
+        NOTE:
+      </b>
+      
+    
+      <br />
+      
+    Have a look at the
+    
+      <code
+        class="code svelte-1unvhkg"
+      >
+        .storybook/webpack.config.js
+      </code>
+      
+    to add webpack
+    loaders and plugins you are using in this project.
+    </p>
+  </div>
+</section>
+`;

examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js

@@ -0,0 +1,22 @@
+import { storiesOf } from '@storybook/svelte';
+import { action } from '@storybook/addon-actions';
+
+import ButtonView from './views/ButtonView.svelte';
+import Button from '../components/Button.svelte';
+
+storiesOf('Addon|Actions', module)
+  .add('Action on view method', () => ({
+    Component: ButtonView,
+    on: {
+      click: action('I am logging in the actions tab'),
+    },
+  }))
+  .add('Action on component method', () => ({
+    Component: Button,
+    data: {
+      text: 'Custom text',
+    },
+    on: {
+      click: action('I am logging in the actions tab too'),
+    },
+  }));

examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/svelte';
+import { withBackgrounds } from '@storybook/addon-backgrounds';
+
+import ButtonView from './views/ButtonView.svelte';
+
+storiesOf('Addon|Backgrounds', module)
+  .addDecorator(
+    withBackgrounds([
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998', default: true },
+    ])
+  )
+  .add('story 1', () => ({
+    Component: ButtonView,
+  }));

examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js

@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/svelte';
+import Centered from '@storybook/addon-centered/svelte';
+import { action } from '@storybook/addon-actions';
+
+import Button from '../components/Button.svelte';
+
+storiesOf('Addon|Centered', module)
+  .addDecorator(Centered)
+  .add('rounded', () => ({
+    Component: Button,
+    data: {
+      rounded: true,
+      text: "Look, I'm centered!",
+    },
+  }))
+  .add('with action', () => ({
+    Component: Button,
+    on: {
+      click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
+    },
+  }));

examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js

@@ -0,0 +1,32 @@
+import { storiesOf } from '@storybook/svelte';
+import { withKnobs, text, number } from '@storybook/addon-knobs';
+
+import ActionKnobView from './views/ActionKnobView.svelte';
+
+storiesOf('Addon|Knobs', module)
+  .addDecorator(withKnobs)
+  .add('Simple', () => {
+    const backgroundColor = text('Background', 'green');
+    const width = number('Width', 200, {
+      range: true,
+      min: 100,
+      max: 1000,
+      step: 100,
+    });
+
+    const height = number('Height', 200, {
+      range: true,
+      min: 100,
+      max: 1000,
+      step: 100,
+    });
+
+    return {
+      Component: ActionKnobView,
+      data: {
+        backgroundColor,
+        width,
+        height,
+      },
+    };
+  });

examples/svelte-kitchen-sink/src/stories/addon-links.stories.js

@@ -0,0 +1,11 @@
+import { storiesOf } from '@storybook/svelte';
+import { linkTo } from '@storybook/addon-links';
+
+import ActionLinkView from './views/ActionLinkView.svelte';
+
+storiesOf('Addon|Links', module).add('Go to welcome view', () => ({
+  Component: ActionLinkView,
+  on: {
+    click: linkTo('Welcome'),
+  },
+}));

examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js

@@ -0,0 +1,32 @@
+import { storiesOf } from '@storybook/svelte';
+import { withNotes } from '@storybook/addon-notes';
+
+import ButtonView from './views/ButtonView.svelte';
+
+storiesOf('Addon|Notes', module)
+  .addDecorator(withNotes)
+  .add(
+    'Simple note',
+    () => ({
+      Component: ButtonView,
+    }),
+    { notes: 'My notes on the ButtonView component' }
+  )
+  .add(
+    'Note with HTML',
+    () => ({
+      Component: ButtonView,
+      data: {
+        text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
+      },
+    }),
+    {
+      notes: `
+      <h2>My notes on emojies</h2>
+
+      <em>It's not all that important to be honest, but..</em>
+
+      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+    `,
+    }
+  );

examples/svelte-kitchen-sink/src/stories/index.js

@@ -0,0 +1,24 @@
+import { storiesOf } from '@storybook/svelte';
+
+import WelcomeView from './views/WelcomeView.svelte';
+import ButtonView from './views/ButtonView.svelte';
+
+storiesOf('Welcome', module).add('Welcome', () => ({
+  Component: WelcomeView,
+}));
+
+storiesOf('Button', module)
+  .add('rounded', () => ({
+    Component: ButtonView,
+    data: {
+      rounded: true,
+      message: 'Rounded text',
+    },
+  }))
+  .add('square', () => ({
+    Component: ButtonView,
+    data: {
+      rounded: false,
+      message: 'Squared text',
+    },
+  }));

examples/svelte-kitchen-sink/src/stories/views/ActionKnobView.svelte

@@ -0,0 +1,15 @@
+<div style="width: {width}px; height: {height}px; background-color: {backgroundColor}">
+    <p>I am interactive</p>
+</div>
+
+<script>
+    export default {
+        data() {
+            return {
+                width: 200,
+                height: 100,
+                backgroundColor: 'yellow'
+            };
+        }
+    };
+</script>

examples/svelte-kitchen-sink/src/stories/views/ActionLinkView.svelte

@@ -0,0 +1,20 @@
+<div class="main">
+  <h1>Link Action</h1>
+  <button on:click="onClick(event)" class="link">
+    Return to the <code class="code">Welcome</code> view story.
+  </button>
+</div>
+
+<style>
+
+</style>
+
+<script>
+  export default {
+    methods: {
+      onClick(event) {
+        this.fire('click', event);
+      },
+    }
+  };
+</script>

examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte

@@ -0,0 +1,39 @@
+<h1>Button view</h1>
+<Button {rounded} on:click="handleClick(event)">{text}: {count}</Button>
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>
+
+<script>
+  import Button from '../../components/Button.svelte';
+
+  export default {
+    data() {
+      return {
+        count: 0,
+        text: 'You clicked'
+      };
+    },
+
+    methods: {
+      handleClick(event) {
+        this.incrementCount();
+
+        this.fire('click', { event });
+      },
+
+      incrementCount() {
+        let {count} = this.get();
+
+        count += 1;
+
+        this.set({count})
+      }
+    },
+
+    components: {
+      Button
+    }
+  };
+</script>

examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte

@@ -0,0 +1,83 @@
+<div class="main">
+  <h1>Welcome to Storybook for Svelte</h1>
+  <p>
+    This is a UI component dev environment for your svelte app.
+  </p>
+  <p>
+    We've added some basic stories inside the <code class="code">src/stories</code> directory.
+    <strong>A story is like a visual test case</strong>
+    and represents a single state of one or more UI components.
+    You can have as many stories as you want.
+  </p>
+
+  <h1 class="logo">Svelte</h1>
+
+  <p>
+    Just like that, you can add your own components as stories.
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the <code class="code">Button</code> component
+    located at <code class="code">src/stories/views/Welcome.svelte</code>.)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.<br />
+    Have a look at the
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+    section in our documentation.
+  </p>
+  <p class="note">
+    <b>NOTE:</b>
+    <br />
+    Have a look at the
+    <code class="code">.storybook/webpack.config.js</code>
+    to add webpack
+    loaders and plugins you are using in this project.
+  </p>
+</div>
+
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Rajdhani');
+
+  .main {
+    margin: 15px;
+    max-width: 600;
+    line-height: 1.4;
+    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+  }
+
+  .logo {
+    font-family: 'Rajdhani', sans-serif;
+    color: rgb(170,30,30);
+    font-weight: 300;
+    font-size: 8rem;
+    text-align: center;
+    margin: 0;
+  }
+
+  .link {
+    color: #1474f3;
+    text-decoration: none;
+    border-bottom: 1px solid #1474f3;
+    padding-bottom: 2px;
+  }
+
+  .code {
+    font-size: 15;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+  }
+
+  .note {
+    opacity: 0.5;
+  }
+</style>

examples/svelte-kitchen-sink/svelteshots.test.js

@@ -0,0 +1,9 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'svelte',
+  configPath: path.join(__dirname, '.storybook'),
+  integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
+  test: multiSnapshotWithOptions(),
+});

jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
     '<rootDir>/lib',
     '<rootDir>/examples/cra-kitchen-sink',
     '<rootDir>/examples/vue-kitchen-sink',
+    '<rootDir>/examples/svelte-kitchen-sink',
     '<rootDir>/examples/html-kitchen-sink',
     '<rootDir>/examples/official-storybook',
     '<rootDir>/examples/angular-cli',
@@ -25,6 +26,7 @@ module.exports = {
     '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js',
     '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
     '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+    '.*\\.(svelte)$': '<rootDir>/node_modules/svelte-jest',
   },
   testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'],
   collectCoverage: false,
@@ -41,5 +43,5 @@ module.exports = {
   setupTestFrameworkScriptFile: './scripts/jest.init.js',
   setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html', 'vue'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html', '.svelte', 'vue'],
 };

lib/core-events/index.js

@@ -10,4 +10,6 @@ module.exports = {
   FORCE_RE_RENDER: 'forceReRender',
   REGISTER_SUBSCRIPTION: 'registerSubscription',
   STORY_RENDERED: 'storyRendered',
+  STORY_ERRORED: 'storyErrored',
+  STORY_THREW_EXCEPTION: 'storyThrewException',
 };

lib/core/src/client/preview/start.js

@@ -43,14 +43,19 @@ function showErrorDisplay({ message, stack }) {
   document.body.classList.add(classes.ERROR);
 }
 
+// showError is used by the various app layers to inform the user they have done something
+// wrong -- for instance returned the wrong thing from a story
 function showError({ title, description }) {
+  addons.getChannel().emit(Events.STORY_ERRORED, { title, description });
   showErrorDisplay({
     message: title,
     stack: description,
   });
 }
 
+// showException is used if we fail to render the story and it is uncaught by the app layer
 function showException(exception) {
+  addons.getChannel().emit(Events.STORY_THREW_EXCEPTION, exception);
   showErrorDisplay(exception);
 
   // Log the stack to the console. So, user could check the source code.

lib/core/src/client/preview/start.test.js

@@ -0,0 +1,101 @@
+import addons from '@storybook/addons';
+import Events from '@storybook/core-events';
+import { document } from 'global';
+
+import start from './start';
+
+jest.mock('@storybook/client-logger');
+jest.mock('@storybook/addons');
+jest.mock('global', () => ({
+  navigator: { userAgent: 'browser' },
+  window: {
+    addEventListener: jest.fn(),
+    location: { search: '' },
+    history: { replaceState: jest.fn() },
+  },
+  document: {
+    addEventListener: jest.fn(),
+    getElementById: jest.fn().mockReturnValue({}),
+    body: { classList: { add: jest.fn(), remove: jest.fn() } },
+    documentElement: {},
+  },
+}));
+
+function mockEmit() {
+  const emit = jest.fn();
+  addons.getChannel.mockReturnValue({ emit });
+
+  return emit;
+}
+
+it('renders nopreview when you have no stories', () => {
+  const emit = mockEmit();
+
+  const render = jest.fn();
+
+  start(render);
+
+  expect(render).not.toHaveBeenCalled();
+  expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-nopreview');
+  expect(emit).toHaveBeenCalledWith(Events.STORY_RENDERED);
+});
+
+it('calls render when you add a story', () => {
+  const emit = mockEmit();
+
+  const render = jest.fn();
+
+  const { clientApi, configApi } = start(render);
+
+  emit.mockReset();
+  configApi.configure(() => {
+    clientApi.storiesOf('kind', {}).add('story', () => {});
+  }, {});
+
+  expect(render).toHaveBeenCalled();
+  expect(emit).toHaveBeenCalledWith(Events.STORY_RENDERED);
+});
+
+it('emits an exception and shows error when your story throws', () => {
+  const emit = mockEmit();
+
+  const render = jest.fn().mockImplementation(() => {
+    throw new Error('Some exception');
+  });
+
+  const { clientApi, configApi } = start(render);
+
+  emit.mockReset();
+  document.body.classList.add.mockReset();
+  configApi.configure(() => {
+    clientApi.storiesOf('kind', {}).add('story', () => {});
+  }, {});
+
+  expect(render).toHaveBeenCalled();
+  expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-errordisplay');
+  expect(emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, expect.any(Error));
+});
+
+it('emits an error and shows error when your framework calls showError', () => {
+  const emit = mockEmit();
+
+  const error = {
+    title: 'Some error',
+    description: 'description',
+  };
+  const render = jest.fn().mockImplementation(({ showError }) => {
+    showError(error);
+  });
+
+  const { clientApi, configApi } = start(render);
+
+  emit.mockReset();
+  document.body.classList.add.mockReset();
+  configApi.configure(() => {
+    clientApi.storiesOf('kind', {}).add('story', () => {});
+  }, {});
+
+  expect(render).toHaveBeenCalled();
+  expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-errordisplay');
+  expect(emit).toHaveBeenCalledWith(Events.STORY_ERRORED, error);
+});

lib/core/src/server/__snapshots__/mergeConfigs.test.js.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mergeConfigs merges partial custom config 1`] = `
+Object {
+  "devtool": "source-maps",
+  "entry": Object {
+    "bundle": "index.js",
+  },
+  "module": Object {
+    "rules": Array [
+      "r1",
+      "r2",
+    ],
+  },
+  "output": Object {
+    "filename": "[name].js",
+  },
+  "plugins": Array [
+    "p1",
+    "p2",
+    "p3",
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "A1": "src/B1",
+      "A2": "src/B2",
+    },
+    "enforceModuleExtension": true,
+    "extensions": Array [
+      ".js",
+      ".json",
+      ".ts",
+      ".tsx",
+    ],
+  },
+}
+`;
+
+exports[`mergeConfigs merges successfully if custom config is empty 1`] = `
+Object {
+  "devtool": "source-maps",
+  "entry": Object {
+    "bundle": "index.js",
+  },
+  "module": Object {
+    "rules": Array [
+      "r1",
+      "r2",
+    ],
+  },
+  "output": Object {
+    "filename": "[name].js",
+  },
+  "plugins": Array [
+    "p1",
+    "p2",
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "A1": "src/B1",
+      "A2": "src/B2",
+    },
+    "enforceModuleExtension": true,
+    "extensions": Array [
+      ".js",
+      ".json",
+    ],
+  },
+}
+`;
+
+exports[`mergeConfigs merges two full configs in one 1`] = `
+Object {
+  "devtool": "source-maps",
+  "entry": Object {
+    "bundle": "index.js",
+  },
+  "module": Object {
+    "noParse": /jquery\\|lodash/,
+    "rules": Array [
+      "r1",
+      "r2",
+      "r3",
+      "r4",
+    ],
+  },
+  "output": Object {
+    "filename": "[name].js",
+  },
+  "plugins": Array [
+    "p1",
+    "p2",
+    "p3",
+    "p4",
+  ],
+  "profile": true,
+  "resolve": Object {
+    "alias": Object {
+      "A1": "src/B1",
+      "A2": "src/B2",
+      "A3": "src/B3",
+      "A4": "src/B4",
+    },
+    "enforceExtension": false,
+    "enforceModuleExtension": true,
+    "extensions": Array [
+      ".js",
+      ".json",
+      ".ts",
+      ".tsx",
+    ],
+  },
+}
+`;

lib/core/src/server/build-dev.js

@@ -5,7 +5,6 @@ import program from 'commander';
 import path from 'path';
 import fs from 'fs';
 import chalk from 'chalk';
-import shelljs from 'shelljs';
 import { logger } from '@storybook/node-logger';
 import storybook, { webpackValid } from './middleware';
 import { parseList, getEnvConfig } from './utils';
@@ -35,23 +34,10 @@ export function buildDev({ packageJson, ...loadOptions }) {
     .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
     .option('--smoke-test', 'Exit after successful start')
     .option('--quiet', 'Suppress verbose build output')
-    .option('-d, --db-path [db-file]', 'DEPRECATED!')
-    .option('--enable-db', 'DEPRECATED!')
     .parse(process.argv);
 
   logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}`) + chalk.reset('\n'));
 
-  if (program.enableDb || program.dbPath) {
-    logger.error(
-      [
-        'Error: the experimental local database addon is no longer bundled with',
-        'storybook. Please remove these flags (-d,--db-path,--enable-db)',
-        'from the command or npm script and try again.',
-      ].join(' ')
-    );
-    process.exit(1);
-  }
-
   // The key is the field created in `program` variable for
   // each command line argument. Value is the env variable.
   getEnvConfig(program, {
@@ -125,14 +111,6 @@ export function buildDev({ packageJson, ...loadOptions }) {
   // custom `.babelrc` file and `webpack.config.js` files
   const configDir = program.configDir || './.storybook';
 
-  // The repository info is sent to the storybook while running on
-  // development mode so it'll be easier for tools to integrate.
-  const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
-  process.env.STORYBOOK_GIT_ORIGIN =
-    process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
-  process.env.STORYBOOK_GIT_BRANCH =
-    process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
-
   // NOTE changes to env should be done before calling `getBaseConfig`
   // `getBaseConfig` function which is called inside the middleware
   app.use(storybook(configDir, loadOptions, program.quiet));