Merge pull request #3770 from plumpNation/svelte-support

Svelte support

.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

@@ -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/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"
   }
 }

app/svelte/.npmignore

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