From 684c7e0c48d60c0fc6b836e352e6841deaeeb95e Mon Sep 17 00:00:00 2001 From: pqcqaq <905739777@qq.com> Date: Sat, 20 Jul 2024 16:35:44 +0800 Subject: [PATCH] no render call in code text --- src/data/functionBlocks.ts | 11 +++++++++++ src/pages/app/index.tsx | 22 ++++++++++++++++------ src/pages/creation/index.tsx | 9 +-------- src/pages/editor/index.tsx | 11 ++--------- src/utils/minify/index.ts | 5 +++-- src/utils/transpile/index.ts | 17 ++++++++++++----- 6 files changed, 45 insertions(+), 30 deletions(-) diff --git a/src/data/functionBlocks.ts b/src/data/functionBlocks.ts index 06eb466..db01e6f 100644 --- a/src/data/functionBlocks.ts +++ b/src/data/functionBlocks.ts @@ -26,6 +26,8 @@ const Banner = (props: { ); }; + +export default Banner `, props: { title: "AI智能建站助手", @@ -85,6 +87,7 @@ const Banner = (props: { ); }; + export default Feature; `, props: { title: "功能介绍", @@ -139,6 +142,8 @@ const Banner = (props: { ); }; + + export default Case; `, props: { title: "使用案例", @@ -191,6 +196,8 @@ const Banner = (props: { ); }; + + export default Review; `, props: { title: "用户评价", @@ -253,6 +260,8 @@ const Banner = (props: { ); }; + + export default Faq; `, props: { title: "常见问题", @@ -285,6 +294,8 @@ const Banner = (props: { ); }; + + export default Contant; `, props: { title: "联系我们", diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index 4d556ea..85c98af 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -18,7 +18,7 @@ export const App = () => { console.error(error); }; - const transforms: Transform[] = ["jsx", "typescript", "imports"]; + const transforms: Transform[] = ["jsx", "typescript"]; const render = (element: ComponentType) => { const Component = errorBoundary(element, errorCallBack); @@ -36,7 +36,7 @@ export const App = () => { // 开发环境下，useEffect会执行两次，模拟装载和卸载组件，生产环境没事。 useEffect(() => { - const allCpns = functionBlockList.map((item) => item.code).join("\n"); + const allCpns = functionBlockList.map((item) => item.code).join("\n").replace(/export default/g, ""); const allPage = functionBlockList .map((item, index) => `<${item.cpnName} { ...props[${index}] }/>`) .join("\n"); @@ -51,7 +51,7 @@ export const App = () => { ); }; - render(ApplicationContext) + export default ApplicationContext `; const propsList = functionBlockList.map((item) => item.props); @@ -60,8 +60,16 @@ export const App = () => { setTimeout(async () => { const minifiedCode = await minifyCode(allTransformed); - - evalCode(minifiedCode, { React, render, props: propsList }); + const codeToRun = minifiedCode.replace(/export default/g, "return") + const ApplicationContext = evalCode( + codeToRun, + { + React, + props: propsList, + } + ); + console.log(ApplicationContext); + render(ApplicationContext); }, 1000); }, []); @@ -75,7 +83,9 @@ export const App = () => { ))} - {results.length === 0 &&
模拟从服务器获取页面信息，加载中......
} + {results.length === 0 && ( +
模拟从服务器获取页面信息，加载中......
+ )} ); diff --git a/src/pages/creation/index.tsx b/src/pages/creation/index.tsx index 2e4d7fd..32076d6 100644 --- a/src/pages/creation/index.tsx +++ b/src/pages/creation/index.tsx @@ -52,13 +52,6 @@ export const Creation = () => { const [code, setCode] = React.useState(functionBlockList[0].code); - const renderCode = (code: string) => { - return ` - ${code} - render(${componentName}); - `; - }; - const onChange = React.useCallback((value: string) => { setCode(value); }, []); @@ -82,7 +75,7 @@ export const Creation = () => { className="border border-black rounded p-2 w-full" /> - +
` -${func} -render(${cpnName}) -`; - const editor = (setShowEdit: React.Dispatch>) => { return (
@@ -31,12 +26,10 @@ const editor = (setShowEdit: React.Dispatch>) => { key={index} > { functionBlockList[index].code = code - .replace(/render\(\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*\)/g, "") - .trim(); }} /> {/* 插入按钮 */} @@ -113,7 +106,7 @@ export const Editor = () => { {functionBlockList.map((func, index) => { return ( diff --git a/src/utils/minify/index.ts b/src/utils/minify/index.ts index d246c0f..34d700d 100644 --- a/src/utils/minify/index.ts +++ b/src/utils/minify/index.ts @@ -1,4 +1,5 @@ import { minify } from "terser"; +import { jsxConst } from "../handler"; export default async function minifyCode(code: string) { const replaced = code @@ -12,8 +13,8 @@ export default async function minifyCode(code: string) { .replace(RegExp(`React.useReducer`, "g"), `rd`) .replace(RegExp(`React.memo`, "g"), `rm`) .replace( - `"use strict";`, - `"use strict"; const rc=React.createElement,rf=React.Fragment,rs=React.useState,re=React.useEffect,rcp=React.Component,rcc=React.createContext,rcu=React.useContext,rd=React.useReducer,rm=React.memo;` + jsxConst, + `${jsxConst} const rc=React.createElement,rf=React.Fragment,rs=React.useState,re=React.useEffect,rcp=React.Component,rcc=React.createContext,rcu=React.useContext,rd=React.useReducer,rm=React.memo;` ); const { code: minifiedCode } = await minify(replaced, { diff --git a/src/utils/transpile/index.ts b/src/utils/transpile/index.ts index 1fc0bd6..e9b741d 100644 --- a/src/utils/transpile/index.ts +++ b/src/utils/transpile/index.ts @@ -52,20 +52,27 @@ export const renderElementAsync = ( ) => { const render = (element: ComponentType) => { if (typeof element === "undefined") { - errorCallback(new SyntaxError("`render` must be called with valid JSX.")); + errorCallback(new SyntaxError("The Code didn't return a valid JSX element!")); } else { resultCallback(errorBoundary(element, errorCallback)); } }; - if (!/render\s*\(/.test(code)) { + if (!/export default \s*/.test(code)) { return errorCallback( - new SyntaxError("No-Inline evaluations must call `render`.") + new SyntaxError("No default export module was found!") ); } - const transforms: Transform[] = ["jsx", "imports"]; + const transforms: Transform[] = ["jsx"]; enableTypeScript && transforms.splice(1, 0, "typescript"); - evalCode(transform({ transforms })(code), { React, ...scope, render }); + const codeTorun = transform({ transforms })(code).replace( + /export default/g, + "return" + ); + + const Cpn = evalCode(codeTorun, { React, ...scope, render }); + + render(Cpn); };