From cc8f23330014b728022b36ffefb817171a31402c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Aug 2022 15:30:47 +0200 Subject: [PATCH 1/7] fix the order of addons appearing --- code/lib/builder-manager/package.json | 1 - code/lib/builder-manager/src/index.ts | 34 ++++++++++++++----- code/lib/builder-manager/src/types.ts | 5 ++- .../builder-manager/src/utils/directory.ts | 12 ------- .../lib/builder-manager/src/utils/template.ts | 11 ++---- code/yarn.lock | 3 +- 6 files changed, 34 insertions(+), 32 deletions(-) delete mode 100644 code/lib/builder-manager/src/utils/directory.ts diff --git a/code/lib/builder-manager/package.json b/code/lib/builder-manager/package.json index ecb0811946d3..9a3d77e5c8aa 100644 --- a/code/lib/builder-manager/package.json +++ b/code/lib/builder-manager/package.json @@ -54,7 +54,6 @@ "esbuild-plugin-alias": "^0.2.1", "express": "^4.17.1", "fs-extra": "^9.0.1", - "readdirp": "^3.6.0", "rollup-plugin-node-polyfills": "^0.2.1" }, "devDependencies": { diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index f857728d2ed6..04e34ebc71cd 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -1,5 +1,5 @@ import { dirname, join } from 'path'; -import { copy, writeFile, remove } from 'fs-extra'; +import { copy, writeFile, remove, write, ensureFile } from 'fs-extra'; import express from 'express'; import { logger } from '@storybook/node-logger'; @@ -19,7 +19,6 @@ import { ManagerBuilder, StarterFunction, } from './types'; -import { readDeep } from './utils/directory'; import { getData } from './utils/data'; import { safeResolve } from './utils/safeResolve'; @@ -38,6 +37,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { : addonsEntryPoints, outdir: join(options.outputDir || './', 'sb-addons'), format: 'esm', + write: false, outExtension: { '.js': '.mjs' }, loader: { '.js': 'jsx', @@ -118,15 +118,24 @@ const starter: StarterFunction = async function* starterGeneratorFn({ router.use(`/sb-addons`, express.static(addonsDir)); router.use(`/sb-manager`, express.static(coreDirOrigin)); - const addonFiles = readDeep(addonsDir); + const files = await Promise.all( + compilation.outputFiles?.map(async (file) => { + await ensureFile(file.path).then(() => writeFile(file.path, file.contents)); + return file.path.replace(addonsDir, './sb-addons'); + }) || [] + ); yield; + const jsFiles = files.filter((file) => file.endsWith('.mjs')); + const cssFiles = files.filter((file) => file.endsWith('.css')); + const html = await renderHTML( template, title, customHead, - addonFiles, + cssFiles, + jsFiles, features, refs, logLevel, @@ -182,13 +191,24 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, yield; const managerFiles = copy(coreDirOrigin, coreDirTarget); - const addonFiles = readDeep(addonsDir); + const files = await Promise.all( + compilation.outputFiles?.map(async (file) => { + await ensureFile(file.path).then(() => writeFile(file.path, file.contents)); + return file.path.replace(addonsDir, './sb-addons'); + }) || [] + ); + + yield; + + const jsFiles = files.filter((file) => file.endsWith('.mjs')); + const cssFiles = files.filter((file) => file.endsWith('.css')); const html = await renderHTML( template, title, customHead, - addonFiles, + cssFiles, + jsFiles, features, refs, logLevel, @@ -196,8 +216,6 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, options ); - yield; - await Promise.all([ // writeFile(join(options.outputDir, 'index.html'), html), diff --git a/code/lib/builder-manager/src/types.ts b/code/lib/builder-manager/src/types.ts index c14c82e13bf2..dfa97b6c02aa 100644 --- a/code/lib/builder-manager/src/types.ts +++ b/code/lib/builder-manager/src/types.ts @@ -12,7 +12,10 @@ export type WithRequiredProperty = Type & [Property in Key]-?: Type[Property]; }; -export type ManagerBuilder = Builder, Stats>; +export type ManagerBuilder = Builder< + WithRequiredProperty & { entryPoints: string[] }, + Stats +>; export type Unpromise> = T extends Promise ? U : never; export type BuilderStartOptions = Parameters['0']; diff --git a/code/lib/builder-manager/src/utils/directory.ts b/code/lib/builder-manager/src/utils/directory.ts deleted file mode 100644 index a834ce1410b5..000000000000 --- a/code/lib/builder-manager/src/utils/directory.ts +++ /dev/null @@ -1,12 +0,0 @@ -import readdirp, { ReaddirpOptions } from 'readdirp'; - -const defaults = { - fileFilter: ['*.mjs', '*.css'], - lstat: false, - type: 'files', - depth: 10, -} as ReaddirpOptions; - -export const readDeep = async (dir: string, options: ReaddirpOptions = {}) => { - return readdirp.promise(dir, { ...defaults, ...options }); -}; diff --git a/code/lib/builder-manager/src/utils/template.ts b/code/lib/builder-manager/src/utils/template.ts index dca1eab9023b..b9d619ee701e 100644 --- a/code/lib/builder-manager/src/utils/template.ts +++ b/code/lib/builder-manager/src/utils/template.ts @@ -5,8 +5,6 @@ import { render } from 'ejs'; import type { DocsOptions, Options, Ref } from '@storybook/core-common'; -import { readDeep } from './directory'; - const interpolate = (string: string, data: Record = {}) => Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string); @@ -52,7 +50,8 @@ export const renderHTML = async ( template: Promise, title: Promise, customHead: Promise, - files: ReturnType, + cssFiles: string[], + jsFiles: string[], features: Promise>, refs: Promise>, logLevel: Promise, @@ -62,14 +61,10 @@ export const renderHTML = async ( const customHeadRef = await customHead; const titleRef = await title; const templateRef = await template; - const filesRef = await files; return render(templateRef, { title: titleRef ? `${titleRef} - Storybook` : 'Storybook', - files: { - js: filesRef.filter((f) => f.path.match(/\.mjs$/)).map((f) => `./sb-addons/${f.path}`), - css: filesRef.filter((f) => f.path.match(/\.css$/)).map((f) => `./sb-addons/${f.path}`), - }, + files: { js: jsFiles, css: cssFiles }, globals: { FEATURES: JSON.stringify(await features, null, 2), REFS: JSON.stringify(await refs, null, 2), diff --git a/code/yarn.lock b/code/yarn.lock index e4e9a9a26eee..582264f180f8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7560,7 +7560,6 @@ __metadata: esbuild-plugin-alias: ^0.2.1 express: ^4.17.1 fs-extra: ^9.0.1 - readdirp: ^3.6.0 rollup-plugin-node-polyfills: ^0.2.1 typescript: ~4.6.3 languageName: unknown @@ -37478,7 +37477,7 @@ __metadata: languageName: node linkType: hard -"readdirp@npm:^3.6.0, readdirp@npm:~3.6.0": +"readdirp@npm:~3.6.0": version: 3.6.0 resolution: "readdirp@npm:3.6.0" dependencies: From ce6f4fa2e944fe8115ae9b3c936f7570fe47141d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Aug 2022 15:39:05 +0200 Subject: [PATCH 2/7] cleanup --- code/lib/builder-manager/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index 04e34ebc71cd..a9c0b61a1a84 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -1,5 +1,5 @@ import { dirname, join } from 'path'; -import { copy, writeFile, remove, write, ensureFile } from 'fs-extra'; +import { copy, writeFile, remove, ensureFile } from 'fs-extra'; import express from 'express'; import { logger } from '@storybook/node-logger'; From 92f8fc6292b64cc2c428891b4e2a88665648886c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Aug 2022 22:10:46 +0200 Subject: [PATCH 3/7] fix unit test --- code/lib/builder-manager/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index a9c0b61a1a84..8f97e3852120 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -119,7 +119,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({ router.use(`/sb-manager`, express.static(coreDirOrigin)); const files = await Promise.all( - compilation.outputFiles?.map(async (file) => { + compilation?.outputFiles?.map(async (file) => { await ensureFile(file.path).then(() => writeFile(file.path, file.contents)); return file.path.replace(addonsDir, './sb-addons'); }) || [] From 8e95ef7a7f4d2b4910441126bbfbc69e920fc5eb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Aug 2022 22:26:42 +0200 Subject: [PATCH 4/7] fix tests some more --- code/lib/builder-manager/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index 8f97e3852120..f61077dd0506 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -192,7 +192,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, const managerFiles = copy(coreDirOrigin, coreDirTarget); const files = await Promise.all( - compilation.outputFiles?.map(async (file) => { + compilation?.outputFiles?.map(async (file) => { await ensureFile(file.path).then(() => writeFile(file.path, file.contents)); return file.path.replace(addonsDir, './sb-addons'); }) || [] From 112a11a6e621061a01deb20807ca9aee5d5a5c3d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Aug 2022 14:06:10 +0200 Subject: [PATCH 5/7] extract common code into a function --- code/lib/builder-manager/src/index.ts | 24 +++++---------------- code/lib/builder-manager/src/utils/files.ts | 15 +++++++++++++ 2 files changed, 20 insertions(+), 19 deletions(-) create mode 100644 code/lib/builder-manager/src/utils/files.ts diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index f61077dd0506..55a519b28027 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -21,8 +21,10 @@ import { } from './types'; import { getData } from './utils/data'; import { safeResolve } from './utils/safeResolve'; +import { readOrdererFiles } from './utils/files'; -let compilation: Compilation; +// eslint-disable-next-line import/no-mutable-exports +export let compilation: Compilation; let asyncIterator: ReturnType | ReturnType; export const getConfig: ManagerBuilder['getConfig'] = async (options) => { @@ -118,18 +120,10 @@ const starter: StarterFunction = async function* starterGeneratorFn({ router.use(`/sb-addons`, express.static(addonsDir)); router.use(`/sb-manager`, express.static(coreDirOrigin)); - const files = await Promise.all( - compilation?.outputFiles?.map(async (file) => { - await ensureFile(file.path).then(() => writeFile(file.path, file.contents)); - return file.path.replace(addonsDir, './sb-addons'); - }) || [] - ); + const { cssFiles, jsFiles } = await readOrdererFiles(addonsDir); yield; - const jsFiles = files.filter((file) => file.endsWith('.mjs')); - const cssFiles = files.filter((file) => file.endsWith('.css')); - const html = await renderHTML( template, title, @@ -191,18 +185,10 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, yield; const managerFiles = copy(coreDirOrigin, coreDirTarget); - const files = await Promise.all( - compilation?.outputFiles?.map(async (file) => { - await ensureFile(file.path).then(() => writeFile(file.path, file.contents)); - return file.path.replace(addonsDir, './sb-addons'); - }) || [] - ); + const { cssFiles, jsFiles } = await readOrdererFiles(addonsDir); yield; - const jsFiles = files.filter((file) => file.endsWith('.mjs')); - const cssFiles = files.filter((file) => file.endsWith('.css')); - const html = await renderHTML( template, title, diff --git a/code/lib/builder-manager/src/utils/files.ts b/code/lib/builder-manager/src/utils/files.ts new file mode 100644 index 000000000000..07c963e19c8a --- /dev/null +++ b/code/lib/builder-manager/src/utils/files.ts @@ -0,0 +1,15 @@ +import { writeFile, ensureFile } from 'fs-extra'; +import { compilation } from '../index'; + +export async function readOrdererFiles(addonsDir: string) { + const files = await Promise.all( + compilation?.outputFiles?.map(async (file) => { + await ensureFile(file.path).then(() => writeFile(file.path, file.contents)); + return file.path.replace(addonsDir, './sb-addons'); + }) || [] + ); + + const jsFiles = files.filter((file) => file.endsWith('.mjs')); + const cssFiles = files.filter((file) => file.endsWith('.css')); + return { cssFiles, jsFiles }; +} From 592e2fd4dd8e2e59de307b0cf9b298fd74758e0e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Aug 2022 14:15:05 +0200 Subject: [PATCH 6/7] cleanup --- code/lib/builder-manager/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index 55a519b28027..28dbbb8df04f 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -1,5 +1,5 @@ import { dirname, join } from 'path'; -import { copy, writeFile, remove, ensureFile } from 'fs-extra'; +import { copy, writeFile, remove } from 'fs-extra'; import express from 'express'; import { logger } from '@storybook/node-logger'; From 2b256d3beda4d89d6d7468e730636b3e5d050e7e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 12 Aug 2022 20:44:12 +0800 Subject: [PATCH 7/7] Apply suggestions from code review --- code/lib/builder-manager/src/index.ts | 6 +++--- code/lib/builder-manager/src/utils/files.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index 28dbbb8df04f..9b1d96323265 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -21,7 +21,7 @@ import { } from './types'; import { getData } from './utils/data'; import { safeResolve } from './utils/safeResolve'; -import { readOrdererFiles } from './utils/files'; +import { readOrderedFiles } from './utils/files'; // eslint-disable-next-line import/no-mutable-exports export let compilation: Compilation; @@ -120,7 +120,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({ router.use(`/sb-addons`, express.static(addonsDir)); router.use(`/sb-manager`, express.static(coreDirOrigin)); - const { cssFiles, jsFiles } = await readOrdererFiles(addonsDir); + const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir); yield; @@ -185,7 +185,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, yield; const managerFiles = copy(coreDirOrigin, coreDirTarget); - const { cssFiles, jsFiles } = await readOrdererFiles(addonsDir); + const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir); yield; diff --git a/code/lib/builder-manager/src/utils/files.ts b/code/lib/builder-manager/src/utils/files.ts index 07c963e19c8a..56c6204ead56 100644 --- a/code/lib/builder-manager/src/utils/files.ts +++ b/code/lib/builder-manager/src/utils/files.ts @@ -1,7 +1,7 @@ import { writeFile, ensureFile } from 'fs-extra'; import { compilation } from '../index'; -export async function readOrdererFiles(addonsDir: string) { +export async function readOrderedFiles(addonsDir: string) { const files = await Promise.all( compilation?.outputFiles?.map(async (file) => { await ensureFile(file.path).then(() => writeFile(file.path, file.contents));