riot integration

README.md

@@ -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
 

app/riot/.babelrc

@@ -0,0 +1,24 @@
+{
+  "ignore": [],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "modules": false, "loose": true
+          }
+        ]
+      ],
+      "plugins": [
+        "@babel/plugin-transform-runtime",
+        [
+          "@babel/plugin-transform-modules-commonjs",
+          {
+            "allowTopLevelThis": false
+          }
+        ]
+      ]
+    }
+  }
+}

app/riot/.npmignore

@@ -0,0 +1,3 @@
+docs
+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 --html
+```
+
+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,65 @@
+{
+  "name": "@storybook/riot",
+  "version": "4.0.0-alpha.16",
+  "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": {
+    "test": "cross-env NODE_ENV=test jest",
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-rc.2",
+    "@storybook/core": "4.0.0-alpha.16",
+    "common-tags": "^1.8.0",
+    "global": "^4.3.2",
+    "moment": "^2.22.2",
+    "riot": "^3.11.1",
+    "riot-hot-reload": "^1.0.0",
+    "riot-tag-loader": "^2.1.0",
+    "raw-loader": "^0.5.1",
+    "riot-compiler": "^3.5.1",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "@babel/core": "^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",
+    "babel-jest": "^23.4.2",
+    "jest": "^23.5.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    },
+    "rootDir": ".",
+    "verbose": true,
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ]
+  },
+  "peerDependencies": {
+    "babel-core": "6.x || ^7.0.0-0 || ^8.0.0"
+  }
+}

app/riot/src/client/index.js

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

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,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/riot/src/client/preview/render.js

@@ -0,0 +1,70 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+import { unregister, mount } from 'riot';
+import compiler from 'riot-compiler';
+
+const rootElement = document.getElementById('root');
+
+function guessRootName(stringified) {
+  return stringified.trim().match(/^<[^ >]+\/>$/) ? stringified.trim().replace(/[<>/]/g, '') :
+    stringified.substring(stringified.indexOf('<') + 1,
+      Math.min(stringified.indexOf(' ', stringified.indexOf('<') + 1), stringified.indexOf('>')));
+}
+
+function renderStringified({ tags, scenario = `<${(tags[0]||[]).boundAs || guessRootName(tags[0]||'')}/>` }) {
+  unregister('root')
+  unregister('div')
+  unregister('p')
+  unregister('span')
+  const toMount = tags.map(({ boundAs }) => `_riot.mount('${boundAs}', opts)`).join(';');
+  tags.forEach(oneTag => oneTag.boundAs ? unregister(oneTag.boundAs) : unregister(guessRootName(oneTag)))
+  tags.forEach(oneTag => {
+    const { boundAs = guessRootName(oneTag), content } = oneTag || {}
+    const sourceCode = (content||oneTag)
+      .replace(`</${boundAs}>`, `<script>${toMount}</script></${boundAs}>`)
+      .replace("var riot = require('riot')", '')
+      .trim();
+    eval(`_${compiler.compile(sourceCode, {})}`); // eslint-disable-line no-eval
+  });
+  const rootName =guessRootName(scenario)
+  const sourceCode = `<root>${scenario.replace(
+    `</${rootName}>`,
+    `<script>${toMount}</script></${rootName}>`
+  )}</root>`;
+  eval(`_${compiler.compile(sourceCode, {})}`); // eslint-disable-line no-eval
+  mount('*');
+}
+
+function renderRaw(sourceCode) {
+  unregister('root')
+  eval(`_${compiler.compile(
+    sourceCode.replace("var riot = require('riot')", '').trim(), {})}`);// eslint-disable-line no-eval
+  mount('root', /riot\.tag2\s*\(\s*'([^']+)'/.exec(sourceCode)[1], {});
+}
+
+function renderCompiledObject(component) {
+  rootElement.appendChild(
+    (!component.length ? story() : component)[0].__.root); // eslint-disable-line no-underscore-dangle
+}
+
+export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+  showMain();
+  rootElement.innerHTML = '<root></root>';
+  const component = story();
+  const { tags } = component || {};
+  if (typeof component === 'string'){
+    renderRaw(component);
+  } else if (Array.isArray(tags)) {
+    renderStringified(component);
+  } else if (typeof component === 'object') {
+    renderCompiledObject(component)
+  } else {
+    showError({
+      title: `Expecting a riot snippet or a riot component from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the component snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `,
+    });
+  }
+}

app/riot/src/client/preview/render.test.js

@@ -0,0 +1,15 @@
+import renderMain from './render'
+
+describe('render a riot element', () => {
+
+  it('should not work with nothing', () => {
+    renderMain({story: () => null, selectedKind: 'test with null', selectedStory: 'empty story',
+                showMain: () => {}, showError: () => {}})
+  })
+
+  it('can work with some text', () => {
+    renderMain({story: () => '<div><p>some test</p></div>', selectedKind: 'test with null', selectedStory: 'empty story',
+      showMain: () => {}, showError: () => {}})
+  })
+
+})

app/riot/src/server/build.js

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

app/riot/src/server/index.js

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

app/riot/src/server/options.js

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

app/riot/src/server/wrapInitialConfig.js

@@ -0,0 +1,17 @@
+export default config => ({
+  ...config,
+  module: {
+    ...config.module,
+    rules: [
+      ...config.module.rules,
+      {
+        test: /\.tag$/,
+        use: [
+          {
+            loader: require.resolve('riot-tag-loader'),
+          },
+        ],
+      },
+    ],
+  },
+});

examples/riot-kitchen-sink/.gitignore

@@ -0,0 +1,15 @@
+# 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

examples/riot-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-viewport/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-backgrounds/register';

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

@@ -0,0 +1,15 @@
+import { configure } from '@storybook/riot';
+import { setOptions } from '@storybook/addon-options';
+
+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/riot-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/riot-kitchen-sink/README.md

@@ -0,0 +1,3 @@
+# Storybook Demo
+
+This is a demo app to test riot.js integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook.

examples/riot-kitchen-sink/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>demo2</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>