[docs-infra] Fix broken sandboxes with relative module imports

docs/src/modules/sandbox/CodeSandbox.ts

@@ -35,7 +35,29 @@ function openSandbox({ files, codeVariant, initialFile }: any) {
 
 function createReactApp(demoData: DemoData) {
   const ext = getFileExtension(demoData.codeVariant);
-  const { title, githubLocation: description } = demoData;
+  const { title, relativeModules = [], githubLocation: description } = demoData;
+
+  if (relativeModules) {
+    relativeModules.forEach(({ module, raw: content }) => {
+      // remove exports from relative module
+      content = content.replace(/export( )*(default)*( )*\w+;|export default|export/gm, '');
+      // replace import statement with relative module content
+      // the module might be imported with or without extension, so we need to cover all cases
+      // E.g.: /import .* from '(.\/top100Films.js|.\/top100Films)';/
+      const extensions = ['', '.js', '.jsx', '.ts', '.tsx', '.css', '.json'];
+      const patterns = extensions
+        .map((ex) => {
+          if (module.endsWith(ex)) {
+            return module.replace(ex, '');
+          }
+          return '';
+        })
+        .filter(Boolean)
+        .join('|');
+      const importPattern = new RegExp(`import .* from '(${patterns})';`);
+      demoData.raw = demoData.raw.replace(importPattern, content);
+    });
+  }
 
   const files: Record<string, object> = {
     'public/index.html': {

docs/src/modules/sandbox/StackBlitz.ts

@@ -7,7 +7,29 @@ import { DemoData } from 'docs/src/modules/sandbox/types';
 
 function createReactApp(demoData: DemoData) {
   const ext = getFileExtension(demoData.codeVariant);
-  const { title, githubLocation: description } = demoData;
+  const { title, relativeModules = [], githubLocation: description } = demoData;
+
+  if (relativeModules) {
+    relativeModules.forEach(({ module, raw: content }) => {
+      // remove exports from relative module
+      content = content.replace(/export( )*(default)*( )*\w+;|export default|export/gm, '');
+      // replace import statement with relative module content
+      // the module might be imported with or without extension, so we need to cover all cases
+      // E.g.: /import .* from '(.\/top100Films.js|.\/top100Films)';/
+      const extensions = ['', '.js', '.jsx', '.ts', '.tsx', '.css', '.json'];
+      const patterns = extensions
+        .map((ex) => {
+          if (module.endsWith(ex)) {
+            return module.replace(ex, '');
+          }
+          return '';
+        })
+        .filter(Boolean)
+        .join('|');
+      const importPattern = new RegExp(`import .* from '(${patterns})';`);
+      demoData.raw = demoData.raw.replace(importPattern, content);
+    });
+  }
 
   const files: Record<string, string> = {
     'index.html': CRA.getHtml(demoData),

docs/src/modules/sandbox/types.ts

@@ -2,6 +2,11 @@ import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl'
 
 export type CodeStyling = 'Tailwind' | 'MUI System';
 export type CodeVariant = 'TS' | 'JS';
+
+type RelativeModule = {
+  module: string;
+  raw: string;
+};
 export interface DemoData {
   title: string;
   language: string;
@@ -10,4 +15,5 @@ export interface DemoData {
   githubLocation: string;
   productId?: Exclude<MuiProductId, 'null'>;
   codeStyling: CodeStyling;
+  relativeModules?: RelativeModule[];
 }