feat(dev-server-storybook): add support for mdx

Author: LarsDenBakker

docs/docs/dev-server/plugins/storybook.md

@@ -6,7 +6,7 @@ Plugin for using Storybook with Web Dev Server using es modules.
 
 ## How it works
 
-This plugin uses an [opinionated build](https://github.com/modernweb-dev/storybook-prebuilt) of Storybook, making it possible to use it with native es modules.
+This plugin uses an [opinionated build](https://github.com/modernweb-dev/storybook-prebuilt) of Storybook, making it possible to use it with native es modules and buildless workflows.
 
 This build installs a default set of addons:
 
@@ -100,4 +100,35 @@ export default {
 
 ## Production build
 
-Building the storybook for production is currently not supported. We plan to add this later.
+You can run a build on your storybook demo before shipping it to production. Regular storybook uses webpack, which might require considerable configuration to make it work for the buildless storybook. To keep the build simple we are using Rollup.
+
+### Running a build
+
+To run a production build, execute the `build-storybook` command. This takes a few parameters:
+
+| name       | type   | description                                                            |
+| ---------- | ------ | ---------------------------------------------------------------------- |
+| config-dir | string | Directory to read storybook config from. defaults to `.storybook`      |
+| output-dir | string | Directory to write the build output to. defaults to `storybook-static` |
+| type       | string | Project type. Defaults to `web-components`                             |
+
+### Customizing the build
+
+You can customize the rollup config from your `main.js` config:
+
+```js
+const pluginA = require('rollup-plugin-a');
+const pluginB = require('rollup-plugin-b');
+
+module.exports = {
+  rollupConfig(config) {
+    // add a new plugin to the build
+    config.plugins.push(pluginA());
+
+    // use unshift to make sure it runs before other plugins
+    config.plugins.unshift(pluginB());
+
+    return config;
+  },
+};
+```

…-server-storybook/demo/preact/preview.js …rybook/demo/preact/.storybook/preview.jspackages/dev-server-storybook/demo/preact/preview.js renamed to packages/dev-server-storybook/demo/preact/.storybook/preview.js packages/dev-server-storybook/demo/preact/preview.js renamed to packages/dev-server-storybook/demo/preact/.storybook/preview.js

@@ -4,7 +4,7 @@ export default {
   title: 'Example/Button',
   argTypes: {
     backgroundColor: { control: 'color' },
-    // onClick: { action: 'onClick' },
+    onClick: { action: 'onClick' },
   },
 };
 

packages/dev-server-storybook/demo/preact/stories/Button.stories.js

@@ -1,3 +1,6 @@
 module.exports = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  rollupConfig(config) {
+    // console.log('rollup config', config);
+  },
 };

packages/dev-server-storybook/demo/wc/.storybook/main.js

@@ -0,0 +1,34 @@
+import { Meta, Story, Canvas, ArgsTable } from '@web/storybook-prebuilt/addon-docs/blocks.js';
+import { Button } from '../src/Button.js';
+
+<Meta title="Docs/Button" component={'my-button'} />
+
+# Button
+
+This is a demo showing the button component
+
+export const Template = args => Button(args);
+
+<Canvas>
+  <Story name="Unchecked" args={{ primary: true, label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+  <Story name="Secondary" args={{ label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+  <Story name="Large" args={{ size: 'large', label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+  <Story name="Small" args={{ size: 'small', label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Level 2 heading
+
+- a list
+- of things
+- to be
+- listed
+
+[A link somewhere](./foo.js)

…/dev-server-storybook/demo/wc/preview.js …-storybook/demo/wc/.storybook/preview.jspackages/dev-server-storybook/demo/wc/preview.js renamed to packages/dev-server-storybook/demo/wc/.storybook/preview.js packages/dev-server-storybook/demo/wc/preview.js renamed to packages/dev-server-storybook/demo/wc/.storybook/preview.js

@@ -14,6 +14,9 @@
   "author": "modern-web",
   "homepage": "https://github.com/modernweb-dev/web/tree/master/packages/dev-server-storybook",
   "main": "dist/index.js",
+  "bin": {
+    "build-storybook": "dist/build/cli.js"
+  },
   "engines": {
     "node": ">=10.0.0"
   },
@@ -44,9 +47,16 @@
     "esm"
   ],
   "dependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/generator": "^7.12.5",
+    "@babel/parser": "^7.12.5",
+    "@babel/plugin-transform-react-jsx": "^7.12.5",
+    "@mdx-js/mdx": "^1.6.19",
     "@web/dev-server-core": "^0.2.15",
-    "@web/storybook-prebuilt": "^0.0.5",
+    "@web/storybook-prebuilt": "^0.1.3",
     "globby": "^11.0.1",
+    "js-string-escape": "^1.0.1",
+    "lodash": "^4.17.20",
     "rollup": "^2.33.1"
   },
   "devDependencies": {

packages/dev-server-storybook/demo/wc/stories/Button-docs.stories.mdx

@@ -1,6 +1,6 @@
 import { RollupOptions } from 'rollup';
-import { MainJs } from '../shared/readStorybookConfig';
+import { MainJs } from '../shared/config/readStorybookConfig';
 
 export interface RollupMainJs extends MainJs {
-  rollupConfigDecorator?: (config: RollupOptions) => Promise<RollupOptions> | RollupOptions;
+  rollupConfig?: (config: RollupOptions) => Promise<RollupOptions> | RollupOptions;
 }

packages/dev-server-storybook/package.json

@@ -0,0 +1,78 @@
+import { readStorybookConfig } from '../shared/config/readStorybookConfig';
+import { validatePluginConfig } from '../shared/config/validatePluginConfig';
+
+import { createRollupConfig } from './rollup/createRollupConfig';
+import { buildAndWrite } from './rollup/buildAndWrite';
+import { MainJs } from '../shared/config/readStorybookConfig';
+import { createManagerHtml } from '../shared/html/createManagerHtml';
+import { createPreviewHtml } from '../shared/html/createPreviewHtml';
+import { findStories } from '../shared/stories/findStories';
+import { StorybookPluginConfig } from '../shared/config/StorybookPluginConfig';
+import { RollupMainJs } from './RollupMainJs';
+
+interface BuildPreviewParams {
+  pluginConfig: StorybookPluginConfig;
+  outputDir: string;
+  rootDir: string;
+  mainJs: RollupMainJs;
+  mainJsPath: string;
+  previewJsPath: string;
+}
+
+async function buildPreview(params: BuildPreviewParams) {
+  const { pluginConfig, outputDir, rootDir, mainJs, mainJsPath, previewJsPath } = params;
+  const { storyImports, storyFilePaths } = await findStories(rootDir, mainJsPath, mainJs.stories);
+  const previewHtml = createPreviewHtml(rootDir, pluginConfig, previewJsPath, storyImports);
+
+  let config = createRollupConfig({
+    outputDir,
+    indexFilename: 'iframe.html',
+    indexHtmlString: previewHtml,
+    storyFilePaths,
+  });
+
+  console.log('main.js', mainJs);
+  if (mainJs.rollupConfig) {
+    config = (await mainJs.rollupConfig(config)) ?? config;
+  }
+
+  await buildAndWrite(config);
+}
+
+interface BuildmanagerParams {
+  outputDir: string;
+  mainJs: MainJs;
+}
+
+async function buildManager(params: BuildmanagerParams) {
+  const managerHtml = createManagerHtml(params.mainJs);
+  const config = createRollupConfig({
+    outputDir: params.outputDir,
+    indexFilename: 'index.html',
+    indexHtmlString: managerHtml,
+  });
+
+  await buildAndWrite(config);
+}
+
+export interface BuildParams {
+  type: 'web-components' | 'preact';
+  outputDir: string;
+  configDir: string;
+}
+
+export async function build(params: BuildParams) {
+  const { outputDir } = params;
+  validatePluginConfig(params);
+
+  const { mainJs, mainJsPath, previewJsPath } = readStorybookConfig(params);
+  await buildManager({ outputDir, mainJs });
+  await buildPreview({
+    pluginConfig: params,
+    outputDir,
+    rootDir: process.cwd(),
+    mainJs,
+    mainJsPath,
+    previewJsPath,
+  });
+}