From 3140fae47322a09fac97212154fe133001275baa Mon Sep 17 00:00:00 2001 From: pqcqaq <905739777@qq.com> Date: Fri, 26 Jul 2024 16:45:51 +0800 Subject: [PATCH] scope and styled and importmap --- package.json | 2 ++ src/components/Live/LiveProdView.tsx | 4 ++++ src/data/functionBlocks.ts | 17 +++++++++++++++++ src/data/scope.ts | 6 ++++++ src/pages/app/index.tsx | 9 ++++++++- src/pages/creation/index.tsx | 12 +++++++++++- src/utils/function/index.ts | 21 +++++++++++++++++++++ 7 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/data/scope.ts diff --git a/package.json b/package.json index 2566502..8835623 100644 --- a/package.json +++ b/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", diff --git a/src/components/Live/LiveProdView.tsx b/src/components/Live/LiveProdView.tsx index d140d3f..fe7ff10 100644 --- a/src/components/Live/LiveProdView.tsx +++ b/src/components/Live/LiveProdView.tsx @@ -12,6 +12,7 @@ type Props = { props: Record; mockTimeout?: number; onError?: (error: Error | null) => void; + scope?: Record; }; const LiveProdView: React.FC = ({ @@ -20,6 +21,7 @@ const LiveProdView: React.FC = ({ props, mockTimeout, onError, + scope, }: Props) => { const [results, setResults] = useState([]); const [error, setError] = useState(null); @@ -50,9 +52,11 @@ const LiveProdView: React.FC = ({ code: code, dependencies: getter, }); + const app = evalCode(prod, { React, props, + ...scope, }); render(app); errorCallBack(null); diff --git a/src/data/functionBlocks.ts b/src/data/functionBlocks.ts index f040157..f4a679e 100644 --- a/src/data/functionBlocks.ts +++ b/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 ( +

@@ -25,6 +41,7 @@ const Banner = (props: {

+ ); }; diff --git a/src/data/scope.ts b/src/data/scope.ts new file mode 100644 index 0000000..30cd6c9 --- /dev/null +++ b/src/data/scope.ts @@ -0,0 +1,6 @@ +import styled, { keyframes } from "styled-components"; + +export const ImportMap = { + styled, + keyframes, +}; diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index fe216c2..b0f05bc 100644 --- a/src/pages/app/index.tsx +++ b/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} /> ); }; diff --git a/src/pages/creation/index.tsx b/src/pages/creation/index.tsx index 31ddbff..91d7a25 100644 --- a/src/pages/creation/index.tsx +++ b/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} > diff --git a/src/utils/function/index.ts b/src/utils/function/index.ts index d461f8c..281811b 100644 --- a/src/utils/function/index.ts +++ b/src/utils/function/index.ts @@ -38,3 +38,24 @@ export function compareObjects( return changes; } + +type Curried = T extends [] + ? () => R + : T extends [infer P] + ? (p1: P) => R + : T extends [infer P, ...infer L] + ? (p1: P) => Curried + : never; + +export function curry( + fn: (...args: A) => P +): Curried { + 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; +} \ No newline at end of file