Svelte support

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)      |+| |+|+|+|+|+|+| |

addons/backgrounds/svelte.js

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

addons/centered/src/components/Centered.svelte

@@ -0,0 +1,34 @@
+<div class="style">
+  <div class="inner-style">
+    <svelte:component this="{Story}" {...data} />
+  </div>
+</div>
+
+<style>
+  .style {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+  }
+
+  .inner-style {
+    margin: auto;
+    max-height: 100%; /* Hack for centering correctly in IE11 */
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        Story: null,
+        style: {}
+      }
+    }
+  };
+</script>

addons/centered/src/index.js

@@ -2,5 +2,15 @@ import { window } from 'global';
 import ReactCentered from './react';
 import VueCentered from './vue';
 
-const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
+function getCentered(env) {
+  switch (env) {
+    case 'vue':
+      return VueCentered;
+    default:
+      return ReactCentered;
+  }
+}
+
+const Centered = getCentered(window.STORYBOOK_ENV);
+
 export default Centered;

addons/centered/src/svelte.js

@@ -0,0 +1,9 @@
+import Centered from './components/Centered.svelte';
+
+export default function(storyFn) {
+  const { Component, data } = storyFn();
+
+  data.Story = Component;
+
+  return { Component: Centered, data };
+}

addons/centered/svelte.js

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

addons/knobs/svelte.js

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

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,7 @@
+function getRenderedTree(story, context) {
+  const storyElement = story.render(context);
+
+  return storyElement;
+}
+
+export default getRenderedTree;

app/svelte/.npmignore

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

app/svelte/README.md

@@ -0,0 +1,33 @@
+# Storybook for Svelte
+
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
+[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
+
+* * *
+
+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/app/svelte/docs/demo.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.

app/svelte/bin/build.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+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,39 @@
+{
+  "name": "@storybook/svelte",
+  "version": "4.0.0-alpha.9",
+  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
+  "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.9",
+    "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"
+  },
+  "peerDependencies": {
+    "svelte": "2.7.2",
+    "svelte-loader": "2.9.1"
+  }
+}

app/svelte/src/client/index.js

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

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

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

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

@@ -0,0 +1,26 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+
+// const createWrapperComponent = Target => ({
+//   functional: true,
+//   render(h, c) {
+//     return h(Target, c.data, c.children);
+//   },
+// });
+
+const { clientApi, configApi, forceReRender } = start(render);
+// const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
+
+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,39 @@
+import { stripIndents } from 'common-tags';
+
+const target = document.getElementById('root'); // eslint-disable-line
+
+export default function render({
+  story,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  // showException,
+}) {
+  const { Component, data, methods } = story();
+
+  target.innerHTML = '';
+
+  if (!Component) {
+    showError({
+      title: `Expecting a Svelte component from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the Svelte component from the story?
+        Use "() => ({ Component: YourComponent, data: {} })"
+        when defining the story.
+      `,
+    });
+
+    return;
+  }
+
+  const component = new Component({target, data}); // eslint-disable-line
+
+  if (methods) {
+    Object.keys(methods).forEach(methodName => {
+      component[methodName] = methods[methodName];
+    });
+  }
+
+  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$/,
+        loader: require.resolve('svelte-loader'),
+        options: {},
+      },
+    ],
+  },
+  resolve: {
+    ...config.resolve,
+    extensions: [...config.resolve.extensions, '.svelte'],
+    alias: config.resolve.alias,
+  },
+});