no render call in code text

src/data/functionBlocks.ts

@@ -26,6 +26,8 @@ const Banner = (props: {
     </div>
   );
 };
+
+export default Banner
       `,
     props: {
       title: "AI智能建站助手",
@@ -85,6 +87,7 @@ const Banner = (props: {
             </div>
           );
         };
+        export default Feature;
       `,
     props: {
       title: "功能介绍",
@@ -139,6 +142,8 @@ const Banner = (props: {
             </div>
           );
         };
+
+        export default Case;
       `,
     props: {
       title: "使用案例",
@@ -191,6 +196,8 @@ const Banner = (props: {
             </div>
           );
         };
+
+        export default Review;
       `,
     props: {
       title: "用户评价",
@@ -253,6 +260,8 @@ const Banner = (props: {
             </div>
           );
         };
+
+        export default Faq;
       `,
     props: {
       title: "常见问题",
@@ -285,6 +294,8 @@ const Banner = (props: {
             </div>
           );
         };
+
+        export default Contant;
       `,
     props: {
       title: "联系我们",

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 = () => {
             </CSSTransition>
           ))}
         </TransitionGroup>
-        {results.length === 0 && <div className="loading">模拟从服务器获取页面信息，加载中......</div>}
+        {results.length === 0 && (
+          <div className="loading">模拟从服务器获取页面信息，加载中......</div>
+        )}
       </div>
     </ThemeProvider>
   );

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"
         />
       </div>
-      <LiveProvider code={renderCode(code)} noInline>
+      <LiveProvider code={code} noInline>
         <div className="h-full grid lg:grid-cols-2 gap-4 border p-4 rounded shadow">
           <div className="border rounded p-2">
             <CodeMirror

src/pages/editor/index.tsx

@@ -7,11 +7,6 @@ import { useState } from "react";
 import { functionBlockList } from "../../data/functionBlocks";
 import ClickContextProvider from "../../components/Selected/ClickContext";
 
-const code = (func: string, cpnName: string) => `
-${func}
-render(${cpnName})
-`;
-
 const editor = (setShowEdit: React.Dispatch<React.SetStateAction<boolean>>) => {
   return (
     <div className="bg-primary-1 fixed inset-0 flex flex-col items-center bg-gray-900 p-4 overflow-y-auto">
@@ -31,12 +26,10 @@ const editor = (setShowEdit: React.Dispatch<React.SetStateAction<boolean>>) => {
               key={index}
             >
               <LiveEditor
-                code={code(func.code, func.cpnName)}
+                code={func.code}
                 language={"tsx"}
                 onChange={(code) => {
                   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 (
             <LiveProvider
-              code={code(func.code, func.cpnName)}
+              code={func.code}
               noInline
               key={index}
             >

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, {

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);
 };