scope and styled and importmap

package.json

@@ -31,6 +31,7 @@
     "react-router-dom": "^6.24.1",
     "react-transition-group": "^4.4.5",
     "sort-by": "^1.2.0",
+    "styled-components": "^4.0.0-beta.8",
     "sucrase": "^3.31.0",
     "terser": "^5.31.3",
     "use-editable": "^2.3.3",
@@ -41,6 +42,7 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-transition-group": "^4.4.10",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",

src/components/Live/LiveProdView.tsx

@@ -12,6 +12,7 @@ type Props = {
   props: Record<string, unknown>;
   mockTimeout?: number;
   onError?: (error: Error | null) => void;
+  scope?: Record<string, unknown>;
 };
 
 const LiveProdView: React.FC<Props> = ({
@@ -20,6 +21,7 @@ const LiveProdView: React.FC<Props> = ({
   props,
   mockTimeout,
   onError,
+  scope,
 }: Props) => {
   const [results, setResults] = useState<ComponentType[]>([]);
   const [error, setError] = useState<Error | null>(null);
@@ -50,9 +52,11 @@ const LiveProdView: React.FC<Props> = ({
         code: code,
         dependencies: getter,
       });
+
       const app = evalCode(prod, {
         React,
         props,
+        ...scope,
       });
       render(app);
       errorCallBack(null);

src/data/functionBlocks.ts

@@ -3,13 +3,29 @@ import { CodeBlock } from "../../typings/index";
 export const functionBlockList: CodeBlock[] = [
   {
     code: `
+import styled from "styled-components";
 
 const Banner = (props: {
   title: string;
   subTitle: string;
   btnText: string;
 }) => {
+
+    const move = keyframes\`
+        0%{
+            transform :scale(0) rotate(0);
+        }  
+        100%{
+            transform :scale(1) rotate(360deg);
+        }
+    \`;
+
+    const TransFormDiv = styled.div\`
+        animation: \${move} 2s ease;
+    \`;
+
   return (
+  <TransFormDiv> 
     <div className="bg-primary-1 py-16 px-8">
       <div className="max-w-7xl mx-auto text-center">
         <h1 className="text-primary-7 text-5xl md:text-7xl font-extrabold mb-4">
@@ -25,6 +41,7 @@ const Banner = (props: {
         </button>
       </div>
     </div>
+  </TransFormDiv>
   );
 };
 

src/data/scope.ts

@@ -0,0 +1,6 @@
+import styled, { keyframes } from "styled-components";
+
+export const ImportMap = {
+  styled,
+  keyframes,
+};

src/pages/app/index.tsx

@@ -1,8 +1,8 @@
-import { useEffect } from "react";
 import { functionBlockList } from "../../data/functionBlocks";
 import "./style.css";
 import LiveProdView from "../../components/Live/LiveProdView";
 import { ImportInfo } from "../../../typings";
+import { ImportMap } from "../../data/scope";
 
 export const App = () => {
   // 开发环境下，useEffect会执行两次，模拟装载和卸载组件，生产环境没事。
@@ -28,6 +28,12 @@ export const App = () => {
   const propsList = functionBlockList.map((item) => item.props);
 
   const getter = (item: ImportInfo) => {
+    if (item.identifier in ImportMap) {
+      return {
+        code: "// import by scope",
+        identifier: item.identifier,
+      }
+    }
     return {
       code: functionBlockList.find((i) => i.cpnName === item.identifier)?.code,
       identifier: item.identifier,
@@ -42,6 +48,7 @@ export const App = () => {
       props={{
         props: propsList,
       }}
+      scope={ImportMap}
     />
   );
 };

src/pages/creation/index.tsx

@@ -15,6 +15,7 @@ import LiveProdView from "../../components/Live/LiveProdView";
 import { ImportInfo } from "../../../typings";
 import ErrorViewer from "../../components/Live/ErrorViewer";
 import jsxUnclosedTagsLinter from "./extensions/jsxUnclosedTagsLinter";
+import { ImportMap } from "../../data/scope";
 
 loadLanguage("tsx");
 const extensions = [
@@ -24,9 +25,11 @@ const extensions = [
   variableImportLinter,
   jsxIdentifierLinter,
   classNameExtension,
-  jsxUnclosedTagsLinter
+  jsxUnclosedTagsLinter,
 ];
 
+
+
 export const Creation = () => {
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -80,6 +83,12 @@ export const Creation = () => {
   };
 
   const getter = (item: ImportInfo) => {
+    if (item.identifier in ImportMap) {
+      return {
+        code: "// import by scope",
+        identifier: item.identifier,
+      };
+    }
     return {
       code: functionBlockList.find((i) => i.cpnName === item.identifier)?.code,
       identifier: item.identifier,
@@ -134,6 +143,7 @@ export const Creation = () => {
                 getter={getter}
                 props={componentsProps}
                 onError={setError}
+                scope={ImportMap}
               ></LiveProdView>
             </div>
           </div>

src/utils/function/index.ts

@@ -38,3 +38,24 @@ export function compareObjects(
 
   return changes;
 }
+
+type Curried<T extends any[], R> = T extends []
+  ? () => R
+  : T extends [infer P]
+  ? (p1: P) => R
+  : T extends [infer P, ...infer L]
+  ? (p1: P) => Curried<L, R>
+  : never;
+
+export function curry<A extends any[], P>(
+  fn: (...args: A) => P
+): Curried<A, P> {
+  function curried(...args: any[]) {
+    if (args.length >= fn.length) {
+      return fn(...(args as A));
+    } else {
+      return (...moreArgs: any[]) => curried(...args, ...moreArgs);
+    }
+  }
+  return curried as Curried<A, P>;
+}