HTML: Add html-vite framework

code/frameworks/html-vite/README.md

@@ -0,0 +1 @@
+# Storybook for HTML

code/frameworks/html-vite/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@storybook/html-vite",
+  "version": "7.0.0-alpha.47",
+  "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/html-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/html-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/addons": "7.0.0-alpha.47",
+    "@storybook/builder-vite": "7.0.0-alpha.47",
+    "@storybook/channel-postmessage": "7.0.0-alpha.47",
+    "@storybook/channel-websocket": "7.0.0-alpha.47",
+    "@storybook/client-api": "7.0.0-alpha.47",
+    "@storybook/core-server": "7.0.0-alpha.47",
+    "@storybook/html": "7.0.0-alpha.47",
+    "@storybook/node-logger": "7.0.0-alpha.47",
+    "@storybook/preview-web": "7.0.0-alpha.47",
+    "magic-string": "^0.26.1",
+    "vite": "3"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "~4.6.3",
+    "vite": "^3.1.0"
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "1c706a4a778831e012343c905f86225fa71491a7"
+}

code/frameworks/html-vite/preset.js

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

code/frameworks/html-vite/src/index.ts

@@ -0,0 +1,8 @@
+// exports for builder-vite
+export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
+export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
+export { addons } from '@storybook/addons';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { ClientApi } from '@storybook/client-api';
+
+export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/html-vite/src/preset.ts

@@ -0,0 +1,6 @@
+import type { StorybookConfig } from '@storybook/builder-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/html',
+};

code/frameworks/html-vite/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node"],
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+}

code/lib/cli/src/automigrate/fixes/new-frameworks.ts

@@ -44,6 +44,7 @@ const packagesMap: Record<string, { webpack5?: string; vite?: string }> = {
   },
   '@storybook/html': {
     webpack5: '@storybook/html-webpack5',
+    vite: '@storybook/html-vite',
   },
 };
 

code/lib/cli/src/repro-templates.ts

@@ -149,6 +149,29 @@ const htmlWebpackTemplates = {
   },
 };
 
+const htmlViteTemplates = {
+  'html-vite/default-js': {
+    name: 'HTML Vite JS',
+    script: 'yarn create vite . --template vanilla && echo "export default {}" > vite.config.js',
+    cadence: ['daily', 'weekly'],
+    expected: {
+      framework: '@storybook/html-vite',
+      renderer: '@storybook/html',
+      builder: '@storybook/builder-vite',
+    },
+  },
+  'html-vite/default-ts': {
+    name: 'HTML Vite TS',
+    script: 'yarn create vite . --template vanilla-ts && echo "export default {}" > vite.config.js',
+    cadence: ['daily', 'weekly'],
+    expected: {
+      framework: '@storybook/html-vite',
+      renderer: '@storybook/html',
+      builder: '@storybook/builder-vite',
+    },
+  },
+};
+
 const svelteViteTemplates = {
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
@@ -324,6 +347,7 @@ const reproTemplates = {
   ...htmlWebpackTemplates,
   ...preactWebpackTemplates,
   ...nextjsTemplates,
+  ...htmlViteTemplates,
 };
 
 export default reproTemplates;

code/lib/cli/src/versions.ts

@@ -41,6 +41,7 @@ export default {
   '@storybook/docs-tools': '7.0.0-alpha.47',
   '@storybook/ember': '7.0.0-alpha.47',
   '@storybook/html': '7.0.0-alpha.47',
+  '@storybook/html-vite': '7.0.0-alpha.47',
   '@storybook/html-webpack5': '7.0.0-alpha.47',
   '@storybook/instrumenter': '7.0.0-alpha.47',
   '@storybook/nextjs': '7.0.0-alpha.47',

code/package.json

@@ -191,6 +191,7 @@
     "@storybook/ember": "workspace:*",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/html": "workspace:*",
+    "@storybook/html-vite": "workspace:*",
     "@storybook/html-webpack5": "workspace:*",
     "@storybook/instrumenter": "workspace:*",
     "@storybook/jest": "^0.0.10",

code/workspace.json

@@ -226,6 +226,11 @@
       "root": "renderers/html",
       "type": "library"
     },
+    "@storybook/html-vite": {
+      "implicitDependencies": [],
+      "root": "frameworks/html-vite",
+      "type": "library"
+    },
     "@storybook/html-webpack5": {
       "implicitDependencies": [],
       "root": "frameworks/html-webpack5",

code/yarn.lock

@@ -6759,6 +6759,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/html-vite@workspace:*, @storybook/html-vite@workspace:frameworks/html-vite":
+  version: 0.0.0-use.local
+  resolution: "@storybook/html-vite@workspace:frameworks/html-vite"
+  dependencies:
+    "@storybook/addons": 7.0.0-alpha.47
+    "@storybook/builder-vite": 7.0.0-alpha.47
+    "@storybook/channel-postmessage": 7.0.0-alpha.47
+    "@storybook/channel-websocket": 7.0.0-alpha.47
+    "@storybook/client-api": 7.0.0-alpha.47
+    "@storybook/core-server": 7.0.0-alpha.47
+    "@storybook/html": 7.0.0-alpha.47
+    "@storybook/node-logger": 7.0.0-alpha.47
+    "@storybook/preview-web": 7.0.0-alpha.47
+    "@types/node": ^16.0.0
+    magic-string: ^0.26.1
+    typescript: ~4.6.3
+    vite: ^3.1.0
+  languageName: unknown
+  linkType: soft
+
 "@storybook/html-webpack5@workspace:*, @storybook/html-webpack5@workspace:frameworks/html-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/html-webpack5@workspace:frameworks/html-webpack5"
@@ -7445,6 +7465,7 @@ __metadata:
     "@storybook/ember": "workspace:*"
     "@storybook/eslint-config-storybook": ^3.1.2
     "@storybook/html": "workspace:*"
+    "@storybook/html-vite": "workspace:*"
     "@storybook/html-webpack5": "workspace:*"
     "@storybook/instrumenter": "workspace:*"
     "@storybook/jest": ^0.0.10