GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 23:11:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19375 from storybookjs/norbert/sb-735-bug-report-addons-are-not-loading-in

Browse Source 
UI: Fix addon URL escaping in manager
This commit is contained in:
Norbert de Langen 2022-10-11 16:33:49 +03:00 committed by GitHub
commit 4af32ed934
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
code/lib/builder-manager/src/index.ts
View File

@ -23,8 +23,7 @@ import { getData } from './utils/data';
import { safeResolve } from './utils/safeResolve';
import { readOrderedFiles } from './utils/files';
// eslint-disable-next-line import/no-mutable-exports
export let compilation: Compilation;
let compilation: Compilation;
let asyncIterator: ReturnType<StarterFunction> | ReturnType<BuilderFunction>;
export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
@ -128,7 +127,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 readOrderedFiles(addonsDir);
const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
yield;
@ -193,7 +192,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
yield;
const managerFiles = copy(coreDirOrigin, coreDirTarget);
const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir);
const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
yield;

19
code/lib/builder-manager/src/utils/files.test.ts Normal file
View File

@ -0,0 +1,19 @@
import { sanitizePath } from './files';
test('sanitizePath', () => {
const addonsDir = '/Users/username/Projects/projectname/storybook';
const text = 'demo text';
const file = {
path: '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs',
contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))),
text,
};
const { location, url } = sanitizePath(file, addonsDir);
expect(location).toMatchInlineSnapshot(
`"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"`
);
expect(url).toMatchInlineSnapshot(
`"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"`
);
});

25
code/lib/builder-manager/src/utils/files.ts
View File

@ -1,11 +1,19 @@
import { OutputFile } from 'esbuild';
import { writeFile, ensureFile } from 'fs-extra';
import { compilation } from '../index';
import { join } from 'path';
import { Compilation } from '../types';
export async function readOrderedFiles(addonsDir: string) {
export async function readOrderedFiles(
addonsDir: string,
outputFiles: Compilation['outputFiles'] | undefined
) {
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');
outputFiles?.map(async (file) => {
// convert deeply nested paths to a single level, also remove special characters
const { location, url } = sanitizePath(file, addonsDir);
await ensureFile(location).then(() => writeFile(location, file.contents));
return url;
}) || []
);
@ -13,3 +21,10 @@ export async function readOrderedFiles(addonsDir: string) {
const cssFiles = files.filter((file) => file.endsWith('.css'));
return { cssFiles, jsFiles };
}
export function sanitizePath(file: OutputFile, addonsDir: string) {
const filePath = file.path.replace(addonsDir, '');
const location = join(addonsDir, filePath);
const url = `./sb-addons${filePath.split('/').map(encodeURIComponent).join('/')}`;
return { location, url };
}