feat: css相对模块引入

Pivot-Studio · Oct 10, 2023 · fb4c3ed · fb4c3ed
1 parent cce4d10
commit fb4c3ed
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 47 deletions.
diff --git a/packages/design/components/MonacoEditor/Editor.tsx b/packages/design/components/MonacoEditor/Editor.tsx
@@ -39,12 +39,16 @@ const MonacoEditor = (props: MocacoEditorProps) => {
       data: {
         filename: path,
         code: value,
+        modules,
       },
     });
     InitPlugin(monaco);
   };
 
+  // todo: 这里没有处罚
   const handleEditorChange: OnChange = useDebounce((value, e) => {
+    console.log(111);
+
     onChange?.(value ?? '', e);
     compilerWorker.postMessage({
       type: MessageChangeType.Compile,

diff --git a/packages/design/components/MonacoEditor/workers/compilerWorker.ts b/packages/design/components/MonacoEditor/workers/compilerWorker.ts
@@ -1,72 +1,96 @@
 import { MessageChangeType } from '../types';
-import { transformSync, transform } from '@babel/core';
+import { transformFromAstSync } from '@babel/core';
+import { parse } from '@babel/parser';
 import ReactPreset from '@babel/preset-react';
 import TSPreset from '@babel/preset-typescript';
 import { getLocalPrivateKey } from '../utils';
 import { TabsItemProps } from 'pivot-design-props';
 
-const getInternalModule = (moduleSource: string) => {
-  const moduleLocalPrivateKey = getLocalPrivateKey(moduleSource);
-  console.log(localStorage);
-
-  const module = localStorage.getItem(moduleLocalPrivateKey);
-  return { value: module, key: moduleLocalPrivateKey };
+const getInternalModule = (modules: TabsItemProps[], moduleSource: string) => {
+  return modules.find((module) => module.key === moduleSource);
 };
 const babelTransform = (
   filename: string,
   code: string,
   modules: TabsItemProps[]
 ) => {
   if (filename.endsWith('.tsx')) {
-    const { code: resultCode } = transformSync(code, {
+    /**
+     *  (浏览器）踩坑~
+     * 1. presets设置一定要有import引用，不能直接写'jsx'
+     * 2. 会在自定义plugin中会有tree shaking，而不是源代码
+     *  const { code: resultCode } = transformSync(code, {
       filename: filename,
       presets: [ReactPreset, TSPreset],
       plugins: [
         // Babel plugin to get file import names
+        function importGetter() {
+          return {
+            visitor: {}
+          }
+        }
+      ]
+    }
+     * */
+
+    const ast = parse(code, {
+      plugins: ['jsx', 'typescript'],
+      sourceType: 'unambiguous',
+    });
+    const { code: resultCode } = transformFromAstSync(ast, code, {
+      filename: filename,
+      presets: [ReactPreset, TSPreset],
+      plugins: [
         function importGetter() {
           return {
             visitor: {
               ImportDeclaration(path: any) {
                 const moduleSource: string = path.node.source.value;
+                // 相对路径模块引入
                 if (moduleSource.startsWith('.')) {
-                  console.log(modules);
-                  //   const _module = getInternalModule(moduleSource.slice(2));
-                  //   if (_module.value) {
-                  //     const js = `
-                  //     (() => {
-                  //       let stylesheet = document.getElementById('${_module.key}');
-                  //       if (!stylesheet) {
-                  //         stylesheet = document.createElement('style')
-                  //         stylesheet.setAttribute('id', '${_module.key}')
-                  //         document.head.appendChild(stylesheet)
-                  //       }
-                  //       const styles = document.createTextNode(\`${_module.value}\`)
-                  //       stylesheet.innerHTML = ''
-                  //       stylesheet.appendChild(styles)
-                  //     })()
-                  //     `;
-                  //     path.node.source.value = URL.createObjectURL(
-                  //       new Blob([js], { type: 'application/javascript' })
-                  //     );
-                  //   }
-                  //   else {
-                  //     // handle ts file
-                  //     path.node.source.value = URL.createObjectURL(
-                  //       new Blob(
-                  //         [babelTransform(_module.path, _module.content, tabs)],
-                  //         {
-                  //           type: 'application/javascript',
-                  //         }
-                  //       )
-                  //     );
-                  //   }
-                  // } else {
-                  //   // Third-party modules
-                  //   if (!importmap[module]) {
-                  //     importmap[module] = `https://esm.sh/${module}`;
-                  //   }
-                  // }
+                  const _module = getInternalModule(
+                    modules,
+                    moduleSource.slice(2)
+                  );
+                  if (_module && String(_module.key).endsWith('.css')) {
+                    const js = `
+                        let stylesheet = document.getElementById('${_module.key}');
+                        if (!stylesheet) {
+                          stylesheet = document.createElement('style')
+                          stylesheet.setAttribute('id', '${_module.key}')
+                          document.head.appendChild(stylesheet)
+                        }
+                        const styles = document.createTextNode(\`${_module.value}\`)
+                        stylesheet.innerHTML = ''
+                        stylesheet.appendChild(styles)`;
+                    path.node.source.value = URL.createObjectURL(
+                      new Blob([js], { type: 'application/javascript' })
+                    );
+                  }
                 }
+
+                //   const _module = getInternalModule(moduleSource.slice(2));
+                //   if (_module.value) {
+                //
+                //   }
+                //   else {
+                //     // handle ts file
+                //     path.node.source.value = URL.createObjectURL(
+                //       new Blob(
+                //         [babelTransform(_module.path, _module.content, tabs)],
+                //         {
+                //           type: 'application/javascript',
+                //         }
+                //       )
+                //     );
+                //   }
+                // } else {
+                //   // Third-party modules
+                //   if (!importmap[module]) {
+                //     importmap[module] = `https://esm.sh/${module}`;
+                //   }
+                // }
+                // }
               },
             },
           };
@@ -79,6 +103,7 @@ const babelTransform = (
 
 self.addEventListener('message', (e) => {
   const { type, data } = e.data;
+  console.log(e);
 
   if (type === MessageChangeType.Compile) {
     // 发送结果回主线程

diff --git a/packages/design/components/hooks/useLocalStorage.ts b/packages/design/components/hooks/useLocalStorage.ts
@@ -13,8 +13,6 @@ const useLocalStorage = (key: string, options: any) => {
   const [value, _setValue] = useState(storedValue || defaultValue);
 
   useEffect(() => {
-    console.log('set');
-
     localStorage.setItem(uniqueKey, value);
   }, [uniqueKey, value]);
   const setValue = (value: any) => {