Merge pull request #18918 from storybookjs/norbert/sb-501-the-order-o…

…f-addon-panels-is-not-the

UI: Fix the order of addons appearing in prebuilt manager

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": {

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<StarterFunction> | ReturnType<BuilderFunction>;
 
 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,15 +120,16 @@ 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;
 
   const html = await renderHTML(
     template,
     title,
     customHead,
-    addonFiles,
+    cssFiles,
+    jsFiles,
     features,
     refs,
     logLevel,
@@ -182,22 +185,23 @@ 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,
     docsOptions,
     options
   );
 
-  yield;
-
   await Promise.all([
     //
     writeFile(join(options.outputDir, 'index.html'), html),

code/lib/builder-manager/src/types.ts

@@ -12,7 +12,10 @@ export type WithRequiredProperty<Type, Key extends keyof Type> = Type &
     [Property in Key]-?: Type[Property];
   };
 
-export type ManagerBuilder = Builder<WithRequiredProperty<BuildOptions, 'outdir'>, Stats>;
+export type ManagerBuilder = Builder<
+  WithRequiredProperty<BuildOptions, 'outdir'> & { entryPoints: string[] },
+  Stats
+>;
 export type Unpromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;
 
 export type BuilderStartOptions = Parameters<ManagerBuilder['start']>['0'];

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 };
+}

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<string, string> = {}) =>
   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<string>,
   title: Promise<string | false>,
   customHead: Promise<string | false>,
-  files: ReturnType<typeof readDeep>,
+  cssFiles: string[],
+  jsFiles: string[],
   features: Promise<Record<string, any>>,
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
@@ -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),

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: