(3rd review round) riot integration (good luck)

.circleci/config.yml

@@ -44,6 +44,8 @@ jobs:
             - examples/vue-kitchen-sink/node_modules
             - examples/svelte-kitchen-sink/node_modules
             - examples/marko-cli/node_modules
+            - examples/html-kitchen-sink/node_modules
+            - examples/riot-kitchen-sink/node_modules
             - addons
             - app
             - lib
@@ -87,14 +89,24 @@ jobs:
             cd examples/marko-cli
             yarn build-storybook
       - run:
-          name: Build official-storybook
+          name: Build mithril kitchen-sink
           command: |
-            cd examples/official-storybook
+            cd examples/mithril-kitchen-sink
             yarn build-storybook
       - run:
-          name: Build mithril kitchen-sink
+          name: Build html kitchen-sink
           command: |
-            cd examples/mithril-kitchen-sink
+            cd examples/html-kitchen-sink
+            yarn build-storybook
+      - run:
+          name: Build riot kitchen-sink
+          command: |
+            cd examples/riot-kitchen-sink
+            yarn build-storybook
+      - run:
+          name: Build official-storybook
+          command: |
+            cd examples/official-storybook
             yarn build-storybook
       - run:
           name: Run image snapshots
@@ -148,6 +160,11 @@ jobs:
           command: |
             cd examples/mithril-kitchen-sink
             yarn storybook --smoke-test
+      - run:
+          name: Run riot kitchen-sink (smoke test)
+          command: |
+            cd examples/riot-kitchen-sink
+            yarn storybook --smoke-test
   react-native:
     <<: *defaults
     steps:

.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt

@@ -16,7 +16,7 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
     MARKO("Marko", "marko-cli"),
     HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
     SVELTE("Svelte", "svelte-kitchen-sink"),
-    RIOT("Riot", "riot-kitchen-sink", false);
+    RIOT("Riot", "riot-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)| [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)      |+| |+|+|+|+|+|+|+|
+## 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)| [Svelte](app/svelte)| [Riot](app/riot)|
+| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
+|[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 & Svelte Tests
+##### Core & React & Vue & Svelte && Riot Tests
 
 `yarn test --core`
 

README.md

@@ -7,7 +7,7 @@
 [![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) 
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
 [![License](https://img.shields.io/github/license/storybooks/storybook.svg)](https://github.com/storybooks/storybook/blob/master/LICENSE)
 <!-- [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=<badge_key>)](https://www.browserstack.com/automate/public-build/<badge_key>) -->
@@ -87,6 +87,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [Marko](app/marko) <sup>alpha</sup> [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko)
 -   [HTML](app/html) <sup>alpha</sup> [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html)
 -   [Svelte](app/svelte) <sup>alpha</sup> [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte)
+-   [Riot](app/riot) <sup>alpha</sup> [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot)
 
 ### Sub Projects
 
@@ -126,6 +127,7 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
 - [Marko](https://storybooks-marko.netlify.com/)
 - [HTML](https://storybooks-html.netlify.com/)
 - [Svelte](https://storybooks-svelte.netlify.com/)
+- [Riot](https://storybooks-riot.netlify.com/)
 
 ### 3.4
 - [React Official](https://release-3-4--storybooks-official.netlify.com)

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

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

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

@@ -0,0 +1,33 @@
+import { document } from 'global';
+
+const riotForStorybook = require.requireActual('@storybook/riot');
+
+function bootstrapADocumentAndReturnANode() {
+  const rootElement = document.createElement('div');
+  rootElement.id = 'root';
+  document.body = document.createElement('body');
+  document.body.appendChild(rootElement);
+  return rootElement;
+}
+
+function makeSureThatResultIsRenderedSomehow({ context, result, rootElement }) {
+  if (!rootElement.firstChild) {
+    riotForStorybook.render({
+      story: () => result,
+      selectedKind: context.kind,
+      selectedStory: context.story,
+    });
+  }
+}
+
+function getRenderedTree(story, context) {
+  const rootElement = bootstrapADocumentAndReturnANode();
+
+  const result = story.render(context);
+
+  makeSureThatResultIsRenderedSomehow({ context, result, rootElement });
+
+  return rootElement;
+}
+
+export default getRenderedTree;

app/riot/.npmignore

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

app/riot/README.md

@@ -0,0 +1,26 @@
+# Storybook for Riot <sup>alpha</sup>
+
+* * *
+
+Storybook for Riot is a UI development environment for the components written with riot.js.
+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-app
+getstorybook --riot
+```
+
+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/riot/bin/build.js

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

app/riot/bin/index.js

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

app/riot/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@storybook/riot",
+  "version": "4.0.0-alpha.18",
+  "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/riot",
+  "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",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-rc.2",
+    "@storybook/core": "4.0.0-alpha.18",
+    "common-tags": "^1.8.0",
+    "global": "^4.3.2",
+    "moment": "^2.22.2",
+    "raw-loader": "^0.5.1",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "@babel/preset-flow": "^7.0.0-rc.2",
+    "@babel/preset-react": "^7.0.0-rc.2",
+    "@babel/runtime": "^7.0.0-rc.2",
+    "@babel/preset-env": "^7.0.0-rc.2",
+    "@babel/plugin-transform-runtime": "^7.0.0-rc.2",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0-rc.2"
+  },
+  "peerDependencies": {
+    "babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
+    "riot": "^3.0.0 || ^4.0.0",
+    "riot-compiler": "^3.5.1 || ^4.0.0",
+    "riot-hot-reload": "^1.0.0",
+    "riot-tag-loader": "^2.0.0 || ^3.0.0"
+  }
+}

app/riot/src/client/index.js

@@ -0,0 +1,14 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  render,
+  mount,
+  tag,
+  compileNow,
+  asCompiledCode,
+} from './preview';

app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render a riot element can nest several tags 1`] = `"<matriochka><div><tag1><div>Inside tag1:<ul><li><tag2><div>Inside tag2:<ul><li><tag3><div>Inside tag3:<ul><li><tag4><div>Inside tag4:<ul><li><tag5><div>Inside tag5:<ul><li>Content</li></ul></div></tag5></li></ul></div></tag4></li></ul></div></tag3></li></ul></div></tag2></li></ul></div></tag1></div></matriochka>"`;
+
+exports[`render a riot element can template some vars 1`] = `"<simpletest test=\\"with a parameter\\"><div>simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;

app/riot/src/client/preview/compileNow.js

@@ -0,0 +1,13 @@
+import compiler from 'riot-compiler';
+
+export function asCompiledCode(text) {
+  return compiler
+    .compile(text, {})
+    .replace('var riot = require("riot")', '')
+    .replace('riot.tag2(', 'tag2(');
+}
+
+export function compileNow(tag2, text) {
+  // eslint-disable-next-line no-eval
+  return tag2 && eval(asCompiledCode(text));
+}

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

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

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

@@ -0,0 +1,22 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import riot, { tag2, mount as vendorMount } from 'riot';
+import render from './render';
+import { compileNow as unboundCompileNow, asCompiledCode } from './compileNow';
+
+const { clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
+
+export const { configure } = configApi;
+const mount = vendorMount.bind(riot, '#root');
+const compileNow = unboundCompileNow.bind(null, tag2);
+export { forceReRender, render, tag2 as tag, mount, compileNow, asCompiledCode };