From 765bc1758eca80551c45ac357014c7a3c260f05a Mon Sep 17 00:00:00 2001
From: Jinbao1001 <nodewebli@gmail.com>
Date: Tue, 13 Aug 2024 22:13:18 +0800
Subject: [PATCH] refactor: liveDemo context no longer uses require for imports

---
 .../slots/SourceCodeEditor/index.tsx          |  2 +-
 src/features/compile/index.ts                 |  6 +-
 src/loaders/markdown/index.ts                 | 59 ++++++++++++++-----
 3 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/client/theme-default/slots/SourceCodeEditor/index.tsx b/src/client/theme-default/slots/SourceCodeEditor/index.tsx
index 74737655b..bdebbedb2 100644
--- a/src/client/theme-default/slots/SourceCodeEditor/index.tsx
+++ b/src/client/theme-default/slots/SourceCodeEditor/index.tsx
@@ -89,7 +89,7 @@ const SourceCodeEditor: FC<ISourceCodeEditorProps> = (props) => {
               autoComplete="off"
               autoCorrect="off"
               autoSave="off"
-              spellcheck="false"
+              spellCheck="false"
             />
           )
         }
diff --git a/src/features/compile/index.ts b/src/features/compile/index.ts
index 68e957ab8..6d74793d6 100644
--- a/src/features/compile/index.ts
+++ b/src/features/compile/index.ts
@@ -89,9 +89,9 @@ export default (api: IApi) => {
     const loaderPath = require.resolve('../../loaders/markdown');
 
     // support require mjs packages(eg. element-plus/es)
-    memo.resolve.byDependency.set('commonjs', {
-      conditionNames: ['require', 'node', 'import'],
-    });
+    // memo.resolve.byDependency.set('commonjs', {
+    //   conditionNames: ['require', 'node', 'import'],
+    // });
 
     const loaderBaseOpts: Partial<IMdLoaderOptions> = {
       techStacks,
diff --git a/src/loaders/markdown/index.ts b/src/loaders/markdown/index.ts
index c0ea3bc35..5156edfb4 100644
--- a/src/loaders/markdown/index.ts
+++ b/src/loaders/markdown/index.ts
@@ -56,6 +56,11 @@ export type IMdLoaderOptions =
   | IMdLoaderTextModeOptions
   | IMdLoaderDemoIndexModeOptions;
 
+interface IDemoDependency {
+  key: string;
+  specifier: string;
+}
+
 function getDemoSourceFiles(demos: IMdTransformerResult['meta']['demos'] = []) {
   return demos.reduce<string[]>((ret, demo) => {
     if ('resolveMap' in demo) {
@@ -132,10 +137,43 @@ function emitDemo(
   ret: IMdTransformerResult,
 ) {
   const { demos } = ret.meta;
+  const demoDepsMap: Record<string, Record<string, string>> = {};
+
+  demos?.forEach((demo) => {
+    if ('resolveMap' in demo && 'asset' in demo) {
+      const entryFileName = Object.keys(demo.asset.dependencies)[0];
+      Object.keys(demo.resolveMap).forEach((key, index) => {
+        if (key !== entryFileName) {
+          demoDepsMap[demo.id] ??= {};
+          demoDepsMap[demo.id][key] = `${demo.id.replace(
+            /-/g,
+            '_',
+          )}_deps_${index}`;
+        }
+      });
+    }
+  });
+
+  const demosDeps = Object.entries(demoDepsMap).reduce<IDemoDependency[]>(
+    (acc, [, deps]) => {
+      return acc.concat(
+        Object.entries(deps).map(([key, specifier]) => {
+          return {
+            key,
+            specifier,
+          };
+        }),
+      );
+    },
+    [],
+  );
 
   return Mustache.render(
     `import React from 'react';
-     import '${winPath(this.getDependencies()[0])}?watch=parent';
+import '${winPath(this.getDependencies()[0])}?watch=parent';
+{{#demosDeps}}
+import * as {{{specifier}}} from '{{{key}}}';
+{{/demosDeps}}
 export const demos = {
   {{#demos}}
   '{{{id}}}': {
@@ -150,6 +188,7 @@ export const demos = {
 };`,
     {
       demos,
+      demosDeps,
       renderAsset: function renderAsset(this: NonNullable<typeof demos>[0]) {
         // do not render asset for inline demo
         if (!('asset' in this)) return 'null';
@@ -179,25 +218,15 @@ export const demos = {
       renderContext: function renderContext(
         this: NonNullable<typeof demos>[0],
       ) {
-        // do not render context for inline demo
+        // // do not render context for inline demo
         if (!('resolveMap' in this) || !('asset' in this)) return 'undefined';
-
-        const entryFileName = Object.keys(this.asset.dependencies)[0];
-
-        // render context for normal demo
-        const context = Object.entries(this.resolveMap).reduce(
-          (acc, [key, path]) => ({
+        const context = Object.entries(demoDepsMap[this.id]).reduce(
+          (acc, [key, specifier]) => ({
             ...acc,
-            // omit entry file
-            ...(key !== entryFileName
-              ? {
-                  [key]: `{{{require('${path}')}}}`,
-                }
-              : {}),
+            ...{ [key]: `{{{${specifier}}}}` },
           }),
           {},
         );
-
         return JSON.stringify(context, null, 2).replace(/"{{{|}}}"/g, '');
       },
       renderRenderOpts: function renderRenderOpts(