HTML: split out webpack preset

.circleci/config.yml

@@ -107,6 +107,7 @@ jobs:
             - app
             - lib
             - renderers
+            - presets
   chromatic:
     executor: sb_node_14_browsers
     parallelism: 4

app/html/package.json

@@ -42,6 +42,7 @@
     "@storybook/core-common": "6.5.0-alpha.64",
     "@storybook/core-server": "6.5.0-alpha.64",
     "@storybook/docs-tools": "6.5.0-alpha.64",
+    "@storybook/preset-html-webpack": "6.5.0-alpha.64",
     "@storybook/renderer-html": "6.5.0-alpha.64",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",

app/html/src/server/preset.ts

@@ -1,13 +1,6 @@
-import type { Configuration } from 'webpack';
 import type { StorybookConfig } from '@storybook/core-common';
 
-export function webpack(config: Configuration) {
-  config.module.rules.push({
-    test: /\.html$/,
-    use: require.resolve('html-loader') as string,
-  });
-
-  return config;
-}
-
-export const addons: StorybookConfig['addons'] = ['@storybook/renderer-html'];
+export const addons: StorybookConfig['addons'] = [
+  '@storybook/preset-html-webpack',
+  '@storybook/renderer-html',
+];

lib/core-common/src/types.ts

@@ -409,7 +409,13 @@ export interface StorybookConfig {
   refs?: StorybookRefs | ((config: Configuration, options: Options) => StorybookRefs);
 
   /**
-   * Modify or return a custom Webpack config.
+   * Modify or return a custom Webpack config after the Storybook's default configuration
+   * has run (mostly used by addons).
+   */
+  webpack?: (config: Configuration, options: Options) => Configuration | Promise<Configuration>;
+
+  /**
+   * Modify or return a custom Webpack config after every addon has run.
    */
   webpackFinal?: (
     config: Configuration,

nx.json

@@ -88,6 +88,9 @@
     "@storybook/preact": {
       "implicitDependencies": []
     },
+    "@storybook/preset-html-webpack": {
+      "implicitDependencies": []
+    },
     "@storybook/renderer-html": {
       "implicitDependencies": []
     },

package.json

@@ -43,6 +43,7 @@
       "addons/storyshots/*",
       "app/*",
       "renderers/*",
+      "presets/*",
       "examples-native/*",
       "examples/*",
       "!examples/web-components-kitchen-sink",
@@ -175,6 +176,7 @@
     "@storybook/node-logger": "workspace:*",
     "@storybook/postinstall": "workspace:*",
     "@storybook/preact": "workspace:*",
+    "@storybook/preset-html-webpack": "workspace:*",
     "@storybook/preview-web": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/renderer-html": "workspace:*",

presets/html-webpack/README.md

@@ -0,0 +1,25 @@
+# Storybook for HTML (Webpack)
+
+---
+
+Storybook for HTML is a UI development environment for your plain HTML snippets.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/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
+cd my-app
+npx sb init -t html
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/docs/html/configure/storybook-addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/html/workflows/publish-storybook) of your storybook and deploy it anywhere you want.

presets/html-webpack/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@storybook/preset-html-webpack",
+  "version": "6.5.0-alpha.64",
+  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/html-webpack",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "presets/html-webpack"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
+  "typesVersions": {
+    "<3.8": {
+      "dist/ts3.9/*": [
+        "dist/ts3.4/*"
+      ]
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/core-common": "6.5.0-alpha.64",
+    "@types/node": "^14.14.20 || ^16.0.0",
+    "@types/webpack-env": "^1.16.0",
+    "core-js": "^3.8.2",
+    "html-loader": "^1.3.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "regenerator-runtime": "^0.13.7",
+    "webpack": ">=4.0.0 <6.0.0"
+  },
+  "devDependencies": {
+    "webpack": "4"
+  },
+  "peerDependencies": {
+    "@babel/core": "*"
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "416f87dc715cae299c7b4f37f1c9db7f686d4d21",
+  "sbmodern": "dist/modern/client/index.js"
+}

presets/html-webpack/preset.js

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

presets/html-webpack/src/preset.ts

@@ -0,0 +1,10 @@
+import type { StorybookConfig } from '@storybook/core-common';
+
+export const webpack: StorybookConfig['webpack'] = (config) => {
+  config.module.rules.push({
+    test: /\.html$/,
+    use: require.resolve('html-loader') as string,
+  });
+
+  return config;
+};

presets/html-webpack/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env", "node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+}

workspace.json

@@ -305,6 +305,10 @@
       "root": "lib/preview-web",
       "type": "library"
     },
+    "@storybook/preset-html-webpack": {
+      "root": "presets/html-webpack",
+      "type": "library"
+    },
     "@storybook/renderer-html": {
       "root": "renderers/html",
       "type": "library"

yarn.lock

@@ -8061,6 +8061,7 @@ __metadata:
     "@storybook/core-common": 6.5.0-alpha.64
     "@storybook/core-server": 6.5.0-alpha.64
     "@storybook/docs-tools": 6.5.0-alpha.64
+    "@storybook/preset-html-webpack": 6.5.0-alpha.64
     "@storybook/renderer-html": 6.5.0-alpha.64
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
@@ -8356,6 +8357,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/[email protected], @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack":
+  version: 0.0.0-use.local
+  resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack"
+  dependencies:
+    "@storybook/core-common": 6.5.0-alpha.64
+    "@types/node": ^14.14.20 || ^16.0.0
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    html-loader: ^1.3.2
+    react: 16.14.0
+    react-dom: 16.14.0
+    regenerator-runtime: ^0.13.7
+    webpack: 4
+  peerDependencies:
+    "@babel/core": "*"
+  languageName: unknown
+  linkType: soft
+
 "@storybook/preset-scss@npm:^1.0.3":
   version: 1.0.3
   resolution: "@storybook/preset-scss@npm:1.0.3"
@@ -8730,6 +8749,7 @@ __metadata:
     "@storybook/node-logger": "workspace:*"
     "@storybook/postinstall": "workspace:*"
     "@storybook/preact": "workspace:*"
+    "@storybook/preset-html-webpack": "workspace:*"
     "@storybook/preview-web": "workspace:*"
     "@storybook/react": "workspace:*"
     "@storybook/renderer-html": "workspace:*"