From dbdc4c421d9a366318c1b730809c180e139e7b2c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 19 Nov 2022 01:50:01 +0100 Subject: [PATCH 1/6] use tsup to build vite-builder --- code/lib/builder-vite/package.json | 49 +++++++++++++++++++++++++++--- 1 file changed, 45 insertions(+), 4 deletions(-) diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index 533cf8a27a3d..641728dfec9a 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -3,19 +3,42 @@ "version": "7.0.0-alpha.50", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, "repository": { "type": "git", "url": "https://github.com/storybookjs/storybook.git", "directory": "code/lib/builder-vite" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, "license": "MIT", "author": "Eirik Sletteberg", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./input/iframe.html": "./input/iframe.html", + "./input/react-dom-client-placeholder.js": "./input/react-dom-client-placeholder.js", + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*", + "input/**/*", + "*.js", + "*.d.ts" + ], "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "node ../../../scripts/prepare.js" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5", @@ -42,8 +65,26 @@ "typescript": "^4.9.3", "vite": "^3.1.3" }, + "peerDependencies": { + "@preact/preset-vite": "*", + "vite-plugin-glimmerx": "*" + }, + "peerDependenciesMeta": { + "@preact/preset-vite": { + "optional": true + }, + "vite-plugin-glimmerx": { + "optional": true + } + }, "publishConfig": { "access": "public" }, + "bundler": { + "entries": [ + "./src/index.ts" + ], + "platform": "node" + }, "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242" } From 934225e6506557a8406f81a8961b616abf61d200 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 19 Nov 2022 01:52:06 +0100 Subject: [PATCH 2/6] fix lockfile because of new peerDependencies --- code/yarn.lock | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/yarn.lock b/code/yarn.lock index 31b6d5b54f40..5f7a26c3ac7b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5887,6 +5887,14 @@ __metadata: slash: ^3.0.0 typescript: ^4.9.3 vite: ^3.1.3 + peerDependencies: + "@preact/preset-vite": "*" + vite-plugin-glimmerx: "*" + peerDependenciesMeta: + "@preact/preset-vite": + optional: true + vite-plugin-glimmerx: + optional: true languageName: unknown linkType: soft From 3e67f8f82bca56c843004ad3bda078b08579caba Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 20 Nov 2022 22:33:21 +0100 Subject: [PATCH 3/6] fixes --- code/lib/builder-vite/src/index.ts | 2 +- code/lib/builder-vite/src/plugins/code-generator-plugin.ts | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts index fccf5694b8f8..4a2878687291 100644 --- a/code/lib/builder-vite/src/index.ts +++ b/code/lib/builder-vite/src/index.ts @@ -46,7 +46,7 @@ function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): Requ } const indexHtml = fs.readFileSync( - path.resolve(__dirname, '../..', 'input', 'iframe.html'), + path.resolve(__dirname, '..', 'input', 'iframe.html'), 'utf-8' ); const generated = await transformIframeHtml(indexHtml, options); diff --git a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts index 6efa3d6ae4a2..46baba00cd50 100644 --- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts @@ -21,7 +21,7 @@ import { } from '../virtual-file-names'; export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { - const iframePath = path.resolve(__dirname, '../../..', 'input', 'iframe.html'); + const iframePath = path.resolve(__dirname, '../..', 'input', 'iframe.html'); let iframeId: string; // noinspection JSUnusedGlobalSymbols @@ -132,10 +132,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { } if (id === iframeId) { - return fs.readFileSync( - path.resolve(__dirname, '../../..', 'input', 'iframe.html'), - 'utf-8' - ); + return fs.readFileSync(path.resolve(__dirname, '../..', 'input', 'iframe.html'), 'utf-8'); } return undefined; From ce395e27ce0b93b12a3ed74dacd9c7f65b9aaaf4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 20 Nov 2022 22:42:44 +0100 Subject: [PATCH 4/6] fixes --- code/lib/builder-vite/src/index.ts | 2 +- code/lib/builder-vite/src/plugins/code-generator-plugin.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts index 4a2878687291..6c00c3fd9529 100644 --- a/code/lib/builder-vite/src/index.ts +++ b/code/lib/builder-vite/src/index.ts @@ -46,7 +46,7 @@ function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): Requ } const indexHtml = fs.readFileSync( - path.resolve(__dirname, '..', 'input', 'iframe.html'), + require.resolve('@storybook/builder-vite/input/iframe.html'), 'utf-8' ); const generated = await transformIframeHtml(indexHtml, options); diff --git a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts index 46baba00cd50..272e246ea494 100644 --- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts @@ -21,7 +21,7 @@ import { } from '../virtual-file-names'; export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { - const iframePath = path.resolve(__dirname, '../..', 'input', 'iframe.html'); + const iframePath = require.resolve('@storybook/builder-vite/input/iframe.html'); let iframeId: string; // noinspection JSUnusedGlobalSymbols @@ -132,7 +132,10 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { } if (id === iframeId) { - return fs.readFileSync(path.resolve(__dirname, '../..', 'input', 'iframe.html'), 'utf-8'); + return fs.readFileSync( + require.resolve('@storybook/builder-vite/input/iframe.html'), + 'utf-8' + ); } return undefined; From f55703082a413e26583a923791024565553434ee Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 20 Nov 2022 22:52:00 +0100 Subject: [PATCH 5/6] fixes --- code/lib/builder-vite/src/plugins/code-generator-plugin.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts index 272e246ea494..d99e5b6e75cc 100644 --- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts @@ -75,11 +75,8 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') { config.resolve = mergeConfig(config.resolve ?? {}, { alias: { - 'react-dom/client': path.resolve( - __dirname, - '../../..', - 'input', - 'react-dom-client-placeholder.js' + 'react-dom/client': require.resolve( + '@storybook/builder-vite/input/react-dom-client-placeholder.js' ), }, }); From ced3531af2526abb680be489cbd303ee35da57f3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 20 Nov 2022 23:00:42 +0100 Subject: [PATCH 6/6] cleanup --- code/lib/builder-vite/src/index.ts | 1 - code/lib/builder-vite/src/plugins/code-generator-plugin.ts | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts index 6c00c3fd9529..8f4aa2570b7f 100644 --- a/code/lib/builder-vite/src/index.ts +++ b/code/lib/builder-vite/src/index.ts @@ -1,7 +1,6 @@ // noinspection JSUnusedGlobalSymbols import * as fs from 'fs'; -import * as path from 'path'; import type { Builder, StorybookConfig as StorybookBaseConfig, Options } from '@storybook/types'; import type { RequestHandler, Request, Response } from 'express'; import type { InlineConfig, UserConfig, ViteDevServer } from 'vite'; diff --git a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts index d99e5b6e75cc..e4460515a45c 100644 --- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts @@ -1,7 +1,6 @@ /* eslint-disable no-param-reassign */ import * as fs from 'fs'; -import * as path from 'path'; import { mergeConfig } from 'vite'; import type { Plugin } from 'vite'; import { transformIframeHtml } from '../transform-iframe-html'; @@ -44,7 +43,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { // Adding new story files is not covered by the change event above. So we need to detect this and trigger // HMR to update the importFn. - // eslint-disable-next-line @typescript-eslint/no-shadow + server.watcher.on('add', (path) => { // TODO maybe use the stories declaration in main if (/\.stories\.([tj])sx?$/.test(path) || /\.(story|stories).mdx$/.test(path)) {