feat: support web components (#207)

packages/framework-web-components/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rspack Contrib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/framework-web-components/README.md

@@ -0,0 +1,3 @@
+# storybook-web-components-rsbuild
+
+Check out [rspack-contrib/storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild) for documentation.

packages/framework-web-components/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "storybook-web-components-rsbuild",
+  "version": "0.1.6",
+  "description": "Storybook for web component and Rsbuild: Develop React Component in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook",
+    "rsbuild",
+    "rspack",
+    "web component",
+    "lit",
+    "lit2",
+    "lit3"
+  ],
+  "homepage": "https://storybook-rsbuild.netlify.app",
+  "bugs": {
+    "url": "https://github.com/rspack-contrib/storybook-rsbuild/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rspack-contrib/storybook-rsbuild",
+    "directory": "packages/framework-web-components"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
+    },
+    "./react-docs": {
+      "types": "./dist/react-docs.d.ts",
+      "require": "./dist/react-docs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": ["dist/**/*", "README.md", "*.js", "*.d.ts", "!src/**/*"],
+  "scripts": {
+    "build": "pnpm run prep --optimized",
+    "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts",
+    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts",
+    "prepare": "pnpm run build"
+  },
+  "dependencies": {
+    "@storybook/web-components": "^8.2.1",
+    "storybook-builder-rsbuild": "workspace:*"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.1.12",
+    "@types/node": "^18.0.0",
+    "lit": "^3.2.1",
+    "storybook": "8.5.0-alpha.22",
+    "typescript": "^5.7.2"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "^1.0.1",
+    "lit": "^2.0.0 || ^3.0.0",
+    "storybook": "^8.2.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": ["./src/index.ts", "./src/preset.ts"],
+    "platform": "node"
+  }
+}

packages/framework-web-components/preset.js

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

packages/framework-web-components/src/index.ts

@@ -0,0 +1 @@
+export * from './types'

packages/framework-web-components/src/preset.ts

@@ -0,0 +1,27 @@
+import { dirname, join } from 'node:path'
+import type { PresetProperty } from 'storybook/internal/types'
+import type { StorybookConfig } from './types'
+
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any
+
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework')
+
+  return {
+    builder: {
+      name: getAbsolutePath('storybook-builder-rsbuild'),
+      options:
+        typeof framework === 'string' ? {} : framework.options.builder || {},
+    },
+    renderer: getAbsolutePath('@storybook/web-components'),
+  }
+}
+
+export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = (
+  config,
+  options,
+) => {
+  delete config.html
+  return config
+}

packages/framework-web-components/src/types.ts

@@ -0,0 +1,46 @@
+import type {
+  BuilderOptions,
+  StorybookConfigRsbuild,
+  TypescriptOptions as TypescriptOptionsBuilder,
+} from 'storybook-builder-rsbuild'
+import type {
+  StorybookConfig as StorybookConfigBase,
+  TypescriptOptions as TypescriptOptionsWebComponents,
+} from 'storybook/internal/types'
+
+type FrameworkName = 'storybook-web-components-rsbuild'
+type BuilderName = 'storybook-builder-rsbuild'
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions
+}
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName
+        options: FrameworkOptions
+      }
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName
+          options: BuilderOptions
+        }
+  }
+  typescript?: Partial<
+    TypescriptOptionsWebComponents & TypescriptOptionsBuilder
+  >
+}
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigRsbuild | keyof StorybookConfigFramework
+> &
+  StorybookConfigRsbuild &
+  StorybookConfigFramework

packages/framework-web-components/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "resolveJsonModule": true,
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"]
+}

packages/framework-web-components/vitest.config.ts

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { vitestCommonConfig } from '../../vitest.workspace'
+
+export default mergeConfig(
+  vitestCommonConfig,
+  defineConfig({
+    test: {
+      environment: 'node',
+    },
+  }),
+)