diff --git a/code/lib/builder-manager/package.json b/code/lib/builder-manager/package.json index e06a5d2d8907..3649daef14ae 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..9b1d96323265 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -19,11 +19,12 @@ import { ManagerBuilder, StarterFunction, } from './types'; -import { readDeep } from './utils/directory'; import { getData } from './utils/data'; import { safeResolve } from './utils/safeResolve'; +import { readOrderedFiles } 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) => { @@ -38,6 +39,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,7 +120,7 @@ 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 { cssFiles, jsFiles } = await readOrderedFiles(addonsDir); yield; @@ -126,7 +128,8 @@ const starter: StarterFunction = async function* starterGeneratorFn({ template, title, customHead, - addonFiles, + cssFiles, + jsFiles, features, refs, logLevel, @@ -182,13 +185,16 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, yield; const managerFiles = copy(coreDirOrigin, coreDirTarget); - const addonFiles = readDeep(addonsDir); + const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir); + + yield; const html = await renderHTML( template, title, customHead, - addonFiles, + cssFiles, + jsFiles, features, refs, logLevel, @@ -196,8 +202,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/files.ts b/code/lib/builder-manager/src/utils/files.ts new file mode 100644 index 000000000000..56c6204ead56 --- /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 readOrderedFiles(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 }; +} 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 a09a09792fce..450d347a1a3f 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: