From 662e2510da18d46381995b6073559d5852ca992e Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 7 Oct 2022 13:33:01 +0200
Subject: [PATCH] escape the url of the addon file for the browser

---
 code/lib/builder-manager/src/utils/files.test.ts |  6 +++---
 code/lib/builder-manager/src/utils/files.ts      | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/code/lib/builder-manager/src/utils/files.test.ts b/code/lib/builder-manager/src/utils/files.test.ts
index 807154ec679..5d8501dfbce 100644
--- a/code/lib/builder-manager/src/utils/files.test.ts
+++ b/code/lib/builder-manager/src/utils/files.test.ts
@@ -4,16 +4,16 @@ test('sanatizePath', () => {
   const addonsDir = '/Users/username/Projects/projectname/storybook';
   const text = 'demo text';
   const file = {
-    path: '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x/dist/manager.mjs',
+    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 } = sanatizePath(file, addonsDir);
 
   expect(location).toMatchInlineSnapshot(
-    `"/Users/username/Projects/projectname/storybook/node-modules-storybook-addon-x-dist-manager.mjs"`
+    `"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"`
   );
   expect(url).toMatchInlineSnapshot(
-    `"./sb-addons/node-modules-storybook-addon-x-dist-manager.mjs"`
+    `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"`
   );
 });
diff --git a/code/lib/builder-manager/src/utils/files.ts b/code/lib/builder-manager/src/utils/files.ts
index 3d8eaab3eb3..1361f758fff 100644
--- a/code/lib/builder-manager/src/utils/files.ts
+++ b/code/lib/builder-manager/src/utils/files.ts
@@ -3,7 +3,10 @@ import { writeFile, ensureFile } from 'fs-extra';
 import { join } from 'path';
 import { Compilation } from '../types';
 
-export async function readOrderedFiles(addonsDir: string, outputFiles: Compilation['outputFiles'] | undefined) {
+export async function readOrderedFiles(
+  addonsDir: string,
+  outputFiles: Compilation['outputFiles'] | undefined
+) {
   const files = await Promise.all(
     outputFiles?.map(async (file) => {
       // convert deeply nested paths to a single level, also remove special characters
@@ -20,11 +23,8 @@ export async function readOrderedFiles(addonsDir: string, outputFiles: Compilati
 }
 
 export function sanatizePath(file: OutputFile, addonsDir: string) {
-  const filePath = file.path
-    .replace(addonsDir, '')
-    .replace(/[^a-z0-9\-.]+/g, '-')
-    .replace(/^-/, '/');
+  const filePath = file.path.replace(addonsDir, '');
   const location = join(addonsDir, filePath);
-  const url = `./sb-addons${filePath}`;
+  const url = `./sb-addons${filePath.split('/').map(encodeURIComponent).join('/')}`;
   return { location, url };
 }