Preact-Vite: Add framework

code/frameworks/preact-vite/README.md

@@ -0,0 +1,48 @@
+# Storybook for Preact <!-- omit in toc -->
+
+## Requirements
+
+- [Preact](https://preactjs.com/) >= 10.x
+- [Storybook](https://storybook.js.org/) >= 7.x
+
+## Getting Started
+
+### In a project without Storybook
+
+Follow the prompts after running this command in your Next.js project's root directory:
+
+```bash
+npx storybook@next init
+```
+
+[More on getting started with Storybook](https://storybook.js.org/docs/preact/get-started/install)
+
+### In a project with Storybook
+
+This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
+
+```bash
+npx storybook@next upgrade --prerelease
+```
+
+#### Manual migration
+
+Install the framework:
+
+```bash
+yarn add --dev @storybook/preact-vite@next
+```
+
+Update your `main.js` to change the framework property:
+
+```js
+// .storybook/main.js
+module.exports = {
+  // ...
+  framework: {
+    // name: '@storybook/react-webpack5', // Remove this
+    name: '@storybook/preact-vite', // Add this
+    options: {},
+  },
+};
+```

code/frameworks/preact-vite/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/frameworks/preact-vite/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@storybook/preact-vite",
+  "version": "7.0.0-beta.15",
+  "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/preact-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/preact-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": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@preact/preset-vite": "^2.5.0",
+    "@rollup/pluginutils": "^4.2.0",
+    "@storybook/builder-vite": "7.0.0-beta.15",
+    "@storybook/preact": "7.0.0-beta.15",
+    "ast-types": "^0.14.2",
+    "magic-string": "^0.26.1"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "~4.9.3",
+    "vite": "^4.0.0"
+  },
+  "peerDependencies": {
+    "preact": ">=10",
+    "vite": "^3.0.0 || ^4.0.0"
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  }
+}

code/frameworks/preact-vite/preset.js

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

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

@@ -0,0 +1 @@
+export type { StorybookConfig } from '@storybook/builder-vite';

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

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/builder-vite';
+import { hasVitePlugins } from '@storybook/builder-vite';
+import preact from '@preact/preset-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/preact',
+};
+
+export const viteFinal: StorybookConfig['viteFinal'] = async (config) => {
+  const { plugins = [] } = config;
+
+  // Add Preact plugin if not present
+  if (!(await hasVitePlugins(plugins, ['vite:preact-jsx']))) {
+    plugins.push(preact());
+  }
+
+  // TODO: Add docgen plugin per issue https://github.com/storybookjs/storybook/issues/19739
+
+  return config;
+};

code/frameworks/preact-vite/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node"],
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src/**/*"]
+}

code/lib/builder-vite/src/vite-config.ts

@@ -94,12 +94,6 @@ export async function pluginConfig(options: ExtendedOptions) {
     externalGlobals(globals),
   ] as PluginOption[];
 
-  // TODO: framework doesn't exist, should move into framework when/if built
-  if (frameworkName === '@storybook/preact-vite') {
-    // eslint-disable-next-line global-require
-    plugins.push(require('@preact/preset-vite').default());
-  }
-
   // TODO: framework doesn't exist, should move into framework when/if built
   if (frameworkName === '@storybook/glimmerx-vite') {
     // eslint-disable-next-line global-require, import/extensions

code/lib/cli/src/repro-generators/configs.ts

@@ -252,6 +252,13 @@ export const preact: Parameters = {
     'npx preact-cli@{{version}} create preactjs-templates/default {{appName}} --install=false --git=false',
 };
 
+export const preact_vite: Parameters = {
+  renderer: 'preact',
+  name: 'preact',
+  version: 'latest',
+  generator: 'yarn create vite@{{version}} {{appName}} --template preact',
+};
+
 export const sfcVue: Parameters = {
   renderer: 'vue',
   name: 'sfcVue',

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

@@ -26,12 +26,13 @@ export const reproNext = async ({
   branch,
   init,
 }: ReproOptions) => {
+  const filterRegex = new RegExp(`^${filterValue || ''}`, 'i');
+
   const keys = Object.keys(TEMPLATES) as Choice[];
   // get value from template and reduce through TEMPLATES to filter out the correct template
   const choices = keys.reduce<Choice[]>((acc, group) => {
     const current = TEMPLATES[group];
 
-    const filterRegex = new RegExp(filterValue, 'i');
     if (!filterValue) {
       acc.push(group);
       return acc;
@@ -56,7 +57,7 @@ export const reproNext = async ({
       boxen(
         dedent`
           🔎 You filtered out all templates. 🔍
-          
+
           After filtering all the templates with "${chalk.yellow(
             filterValue
           )}", we found no results. Please try again with a different filter.
@@ -78,13 +79,13 @@ export const reproNext = async ({
     logger.info(
       boxen(
         dedent`
-          🤗 Welcome to ${chalk.yellow('sb repro NEXT')}! 🤗 
-  
+          🤗 Welcome to ${chalk.yellow('sb repro NEXT')}! 🤗
+
           Create a ${chalk.green('new project')} to minimally reproduce Storybook issues.
-          
+
           1. select an environment that most closely matches your project setup.
           2. select a location for the reproduction, outside of your project.
-          
+
           After the reproduction is ready, we'll guide you through the next steps.
           `.trim(),
         { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any
@@ -162,7 +163,7 @@ export const reproNext = async ({
         ${initMessage}
 
         Once you've recreated the problem you're experiencing, please:
-        
+
         1. Document any additional steps in ${chalk.cyan('README.md')}
         2. Publish the repository to github
         3. Link to the repro repository in your issue

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

@@ -331,6 +331,26 @@ export const allTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
+  'preact-vite/default-js': {
+    name: 'Preact Vite (JS)',
+    script: 'yarn create vite . --template preact',
+    inDevelopment: true,
+    expected: {
+      framework: '@storybook/preact-vite',
+      renderer: '@storybook/preact',
+      builder: '@storybook/builder-vite',
+    },
+  },
+  'preact-vite/default-ts': {
+    name: 'Preact Vite (TS)',
+    script: 'yarn create vite . --template preact-ts',
+    inDevelopment: true,
+    expected: {
+      framework: '@storybook/preact-vite',
+      renderer: '@storybook/preact',
+      builder: '@storybook/builder-vite',
+    },
+  },
 } satisfies Record<string, Template>;
 
 export const ci: TemplateKey[] = ['cra/default-ts', 'react-vite/default-ts'];
@@ -351,6 +371,7 @@ export const merged: TemplateKey[] = [
   'angular-cli/14-ts',
   'angular-cli/13-ts',
   'preact-webpack5/default-ts',
+  'preact-vite/default-ts',
   'html-webpack/default',
 ];
 export const daily: TemplateKey[] = [
@@ -366,6 +387,7 @@ export const daily: TemplateKey[] = [
   'nextjs/12-js',
   'nextjs/default-js',
   'preact-webpack5/default-js',
+  'preact-vite/default-js',
 ];
 
 export const templatesByCadence = { ci, pr, merged, daily };

code/lib/cli/src/versions.ts

@@ -48,6 +48,7 @@ export default {
   '@storybook/node-logger': '7.0.0-beta.15',
   '@storybook/postinstall': '7.0.0-beta.15',
   '@storybook/preact': '7.0.0-beta.15',
+  '@storybook/preact-vite': '7.0.0-beta.15',
   '@storybook/preact-webpack5': '7.0.0-beta.15',
   '@storybook/preset-html-webpack': '7.0.0-beta.15',
   '@storybook/preset-preact-webpack': '7.0.0-beta.15',

code/package.json

@@ -203,6 +203,7 @@
     "@storybook/node-logger": "workspace:*",
     "@storybook/postinstall": "workspace:*",
     "@storybook/preact": "workspace:*",
+    "@storybook/preact-vite": "workspace:*",
     "@storybook/preact-webpack5": "workspace:*",
     "@storybook/preset-html-webpack": "workspace:*",
     "@storybook/preset-preact-webpack": "workspace:*",

code/workspace.json

@@ -261,6 +261,11 @@
       "root": "frameworks/preact-webpack5",
       "type": "library"
     },
+    "@storybook/preact-vite": {
+      "implicitDependencies": [],
+      "root": "frameworks/preact-vite",
+      "type": "library"
+    },
     "@storybook/preset-html-webpack": {
       "implicitDependencies": [],
       "root": "presets/html-webpack",