From 91b9c8018bba65b794157a571398539606d9bfa3 Mon Sep 17 00:00:00 2001 From: pqcqaq <905739777@qq.com> Date: Wed, 17 Jul 2024 16:16:25 +0800 Subject: [PATCH] single block editor --- bun.lockb | Bin 126506 -> 128816 bytes package.json | 7 + src/components/Live/style.css | 2 +- src/pages/app/index.tsx | 101 ++++++------ src/pages/app/transpiled.ts | 251 +----------------------------- src/pages/creation/completions.ts | 98 ++++++++++++ src/pages/creation/index.tsx | 191 +++++++++++++++++++++++ src/pages/editor/index.tsx | 8 +- src/router/index.tsx | 33 ++-- src/utils/minify/index.ts | 31 ++++ 10 files changed, 409 insertions(+), 313 deletions(-) create mode 100644 src/pages/creation/completions.ts create mode 100644 src/pages/creation/index.tsx create mode 100644 src/utils/minify/index.ts diff --git a/bun.lockb b/bun.lockb index de784a95405b0f730a98513109003a6aed2326b4..7512e08796923fbdb01acf2e12d590b36d2a6526 100644 GIT binary patch delta 23515 zcmeHvcU)A**Z!R=t1g0yp@Sl^qaaNdMAwD|*Ah`&u+vnK4i;>z#+ul0)N5Cwv0x>{ zh%Hv4Ce|2xk1<9pi8Y!;e4lfRn8bYF_w%d&Ce|h@y_61j0K4$`5o$|~c;<~WBQNFp^ z37J_5nS!uW6oeXrU};!E5Ue3A6-AeTJAyB;5(F1W7o8xuL5h%0 zkhzE_S-+wnI6!6%kIRh7N)TRv+k>YkX2xVEWCRwDK;n zMplUG$wk3Dv`!jzM*maAtyDR3Xky$@Se%%ZFe(A^BI3!S;`fw>(_^xSdJjv;(S|51 zEi>CYHb>Ztex`b=V6dr29-}N7_!Y*34LD_QxH&vWg;Z1wj?M#*U|+6a%LY$l(kqx)`cvs zEeQCt9K(&`*F)BUoC^6qdgF{x>Z@q&<$6+1jJIbOK#r96$tAZY}OA?fK^qsGrwd9IqCqQ*z7@$DdK=$oqC z8IpWhRO5ecq||#E(!MJk@9J-l!bI^ zASEGlNCLvmnkz0pI3_DQ1Nkx&hG$XL`w&lx%?wps|0*OsllA2M7|HnL5mc{`s5Tgr zIYj2s;Peb_03%mO$VyI3%@%~_tpuSSxH}}dPMJ}W3m~bX+mPg%ry69$FeW5PmX#};3r=S8-Xh4{f9}|hJ`4w>LvBAkP+1Uy4!U#2A z5!{3nO3LzC4)>%Nz4|EAMoEQ)e@Wa;I5Tx<=&1^)V~Bt>YRWiwYRC#*h_i5;Pf%cG4Tn0 z;I>Gw2}z@z2^C4U@2$iKK-K^cF)QT+NUG00N{RmsoF=5}knpZLmO5(2Cu#*Y;7-U; z1ss!(Ra&lr;wy+bEXf4FAgQO1ABOiHvQ6I&xZbvGHMMGH^)MVL)XQVDNjDVzu z20&stvxE-iHLUA*c1u#+VtJx6kn@pT8_6LkPcjEqQwPOBQn4sVawF&{$3w^iRXv4I zv<@2dXkwq&YwNH!3#wb%1oYqB{)hWJUH8>~b$Zh4ZOeamc1S%}H6*o$gDL#tue0NK zuKeLqj_;0NntG;o&Uv)$!sS-G$G@~o7*-Z|e9@rrxGL{YkG!R zFwk~kQL*(BSQm9 zvGuPY2(8tWirlZJoL`@b*tUpeywKTT`#D%EFjOMgYjui$RNzVBMty*lAatP$_@f2} zaf=mC@-&KpI$q#u)PIDwx*@FsRU=-|aW6!MRuqKJO5L>#;>L=+)WIm)RN`KaMlq%m zPl8xdi5EaTti($ljrtaqF=@)R_&FHF5tVt8lTj?L%nKmOD)Ul^etPcZY!tuK^CXDo z*1P~>gf%a9HtM$FsgL3h456ZJ6`tf`6#G=+1rVQA;iWD{{clwS0Z%@3d;}dMZFrKa zQNIL_8bwy-k6aA;I6SDtDxud5`i)@JV-FrGSMR_I8BZYo#@zR4w2JYS8Mx*J8O>fEcQQ6Gs%gBq!XAu;IZt4wL~ELa%Q z&?Gc&V8^{`8O209o&-^7#|vs1^-u7q(x9N@YZ>&BcrKJCQJE;!;7J}vy@;tj2w6ng z#NcuU9aF(*h>!+W0)`o0wWbPYsTNAr(7z*?k#BMe)lWun2cA^NC{}gk1rXgGd1)P^ex{>R64t>zPCD|Wx<*m�ww> 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 div *:not(div), .preview-box > div div *:not(div) { - cursor: default; + /* cursor: initial; */ } \ No newline at end of file diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index c0bc58e..f47a3f3 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -5,32 +5,42 @@ import evalCode from "../../utils/transpile/evalCode"; import transform from "../../utils/transpile/transform"; import { ThemeProvider } from "../../components/Theme/ThemePrivider"; import errorBoundary from "../../utils/transpile/errorBoundary"; -import "./style.css" -import { CSSTransition, TransitionGroup } from 'react-transition-group'; +import "./style.css"; +import { CSSTransition, TransitionGroup } from "react-transition-group"; +import minifyCode from "../../utils/minify"; +// import ReactDOM from "react-dom/client"; export const App = () => { - // 定义成一个数组便于下面操作，实际上只有一个元素 - const [results, setResults] = useState([]); + // 定义成一个数组便于下面操作，实际上只有一个元素 + const [results, setResults] = useState([]); - const errorCallBack = (error: Error) => { - console.error(error); - }; - - const transforms: Transform[] = ["jsx", "typescript", "imports"]; - - const render = (element: ComponentType) => { - if (typeof element === "undefined") { - errorCallBack(new SyntaxError("`render` must be called with valid JSX.")); - } else { - setResults([errorBoundary(element, errorCallBack)]); - } - }; - - // 开发环境下，useEffect会执行两次，模拟装载和卸载组件，生产环境没事。 - useEffect(() => { - const allCpns = functionBlockList.map(item => item.code).join("\n"); - const allPage = functionBlockList.map((item,index) => `<${item.cpnName} { ...props[${index}] }/>`).join("\n"); - const allCode = ` + const errorCallBack = (error: Error) => { + console.error(error); + }; + + const transforms: Transform[] = ["jsx", "typescript", "imports"]; + + const render = (element: ComponentType) => { + const Component = errorBoundary(element, errorCallBack); + if (typeof element === "undefined") { + errorCallBack(new SyntaxError("`render` must be called with valid JSX.")); + } else { + setResults([Component]); + } + // ReactDOM.createRoot(document.querySelector(".test-app") as HTMLElement).render( + // + // < Component /> + // + // ); + }; + + // 开发环境下，useEffect会执行两次，模拟装载和卸载组件，生产环境没事。 + useEffect(() => { + const allCpns = functionBlockList.map((item) => item.code).join("\n"); + const allPage = functionBlockList + .map((item, index) => `<${item.cpnName} { ...props[${index}] }/>`) + .join("\n"); + const allCode = ` ${allCpns} const ApplicationContext = () => { @@ -43,29 +53,30 @@ export const App = () => { render(ApplicationContext) `; - - const propsList = functionBlockList.map(item => item.props); - const allTransformed = transform({ transforms })(allCode); + const propsList = functionBlockList.map((item) => item.props); - setTimeout(() => { - evalCode(allTransformed, { React, render, props: propsList }); - },1000) - }, []); + const allTransformed = transform({ transforms })(allCode); - return ( - -
- - {results.map((Cpn, index) => ( - - - - ))} - - {results.length === 0 &&
loading...
} -
- - ); + setTimeout(async () => { + const minifiedCode = await minifyCode(allTransformed); + + evalCode(minifiedCode, { React, render, props: propsList }); + }, 1000); + }, []); + + return ( + +
+ + {results.map((Cpn, index) => ( + + + + ))} + + {results.length === 0 &&
loading...
} +
+ + ); }; diff --git a/src/pages/app/transpiled.ts b/src/pages/app/transpiled.ts index 907b4fa..4dc84c6 100644 --- a/src/pages/app/transpiled.ts +++ b/src/pages/app/transpiled.ts @@ -1,250 +1 @@ -export const remotecode = `"use strict";const _jsxFileName = ""; - - const Banner = (props - - - -) => { - function handleClick() { - console.log("Hi there!"); - } - - return ( - React.createElement('div', { className: "bg-primary-1 py-16 px-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 13}} - , React.createElement('div', { className: "max-w-7xl mx-auto text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 14}} - , React.createElement('h1', { className: "text-primary text-5xl md:text-7xl font-extrabold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 15}} - , props.title - ) - , React.createElement('p', { className: "text-primary text-xl md:text-2xl mb-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 18}} - , props.subTitle - ) - , React.createElement('button', { - onClick: handleClick, - className: "font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 ease-in-out" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 21}} - - , props.btnText - ) - ) - ) - ); - }; - - - const Feature = (props - - - - - - - - -) => { - return ( - React.createElement('div', { className: "bg-background-2 py-16 px-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 44}} - , React.createElement('div', { className: "max-w-7xl mx-auto" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 45}} - , React.createElement('h2', { className: "text-text-1 text-4xl font-bold mb-4 text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 46}} - , props.title - ) - , React.createElement('p', { className: "text-text-2 text-lg mb-8 text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 49}} - , props.subTitle - ) - , React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-3 gap-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 52}} - , React.createElement('div', { className: "bg-data-2 p-6 rounded-lg shadow-lg text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 53}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 54}} - , props.featureTitle1 - ) - , React.createElement('p', { className: "text-text-1", __self: this, __source: {fileName: _jsxFileName, lineNumber: 57}} - , props.featureDesc1 - ) - ) - , React.createElement('div', { className: "bg-data-8 p-6 rounded-lg shadow-lg text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 61}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 62}} - , props.featureTitle2 - ) - , React.createElement('p', { className: "text-text-1", __self: this, __source: {fileName: _jsxFileName, lineNumber: 65}} - , props.featureDesc2 - ) - ) - , React.createElement('div', { className: "bg-data-10 p-6 rounded-lg shadow-lg text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 69}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 70}} - , props.featureTitle3 - ) - , React.createElement('p', { className: "text-text-1", __self: this, __source: {fileName: _jsxFileName, lineNumber: 73}} - , props.featureDesc3 - ) - ) - ) - ) - ) - ); - }; - - - const Case = (props - - - - - - -) => { - return ( - React.createElement('div', { className: "bg-background-1 py-16 px-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 93}} - , React.createElement('div', { className: "max-w-7xl mx-auto text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 94}} - , React.createElement('h2', { className: "text-text-1 text-4xl font-bold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 95}} - , props.title - ) - , React.createElement('p', { className: "text-text-2 text-lg mb-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 98}} - , props.subTitle - ) - , React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 gap-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 101}} - , React.createElement('div', { className: "bg-data-18 p-6 rounded-lg shadow-lg" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 102}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 103}} - , props.caseTitle1 - ) - , React.createElement('p', { className: "text-text-1", __self: this, __source: {fileName: _jsxFileName, lineNumber: 106}} - , props.caseDesc1 - ) - ) - , React.createElement('div', { className: "bg-data-16 p-6 rounded-lg shadow-lg" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 110}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 111}} - , props.caseTitle2 - ) - , React.createElement('p', { className: "text-text-1", __self: this, __source: {fileName: _jsxFileName, lineNumber: 114}} - , props.caseDesc2 - ) - ) - ) - ) - ) - ); - }; - - - const Review = (props - - - - - - -) => { - return ( - React.createElement('div', { className: "bg-background-2 py-16 px-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 134}} - , React.createElement('div', { className: "max-w-7xl mx-auto text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 135}} - , React.createElement('h2', { className: "text-text-1 text-4xl font-bold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 136}} - , props.title - ) - , React.createElement('p', { className: "text-text-2 text-lg mb-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 139}} - , props.subTitle - ) - , React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 gap-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 142}} - , React.createElement('div', { className: "bg-data-4 p-6 rounded-lg shadow-lg" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 143}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 144}} - , props.reviewUser1 - ) - , React.createElement('p', { className: "text-text-1", __self: this, __source: {fileName: _jsxFileName, lineNumber: 147}} - , props.reviewDesc1 - ) - ) - , React.createElement('div', { className: "bg-data-8 p-6 rounded-lg shadow-lg" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 151}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 152}} - , props.reviewUser2 - ) - , React.createElement('p', { className: "text-text-1", __self: this, __source: {fileName: _jsxFileName, lineNumber: 155}} - , props.reviewDesc2 - ) - ) - ) - ) - ) - ); - }; - - - const Faq = (props - - - - - - - - -) => { - return ( - React.createElement('div', { className: "bg-background-1 py-16 px-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 177}} - , React.createElement('div', { className: "max-w-7xl mx-auto text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 178}} - , React.createElement('h2', { className: "text-text-1 text-4xl font-bold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 179}} - , props.title - ) - , React.createElement('p', { className: "text-text-2 text-lg mb-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 182}} - , props.subTitle - ) - , React.createElement('div', { className: "text-left max-w-3xl mx-auto" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 185}} - , React.createElement('div', { className: "mb-8", __self: this, __source: {fileName: _jsxFileName, lineNumber: 186}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-2" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 187}} - , props.faq1 - ) - , React.createElement('p', { className: "text-text-3", __self: this, __source: {fileName: _jsxFileName, lineNumber: 190}} - , props.faqAnswer1 - ) - ) - , React.createElement('div', { className: "mb-8", __self: this, __source: {fileName: _jsxFileName, lineNumber: 194}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-2" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 195}} - , props.faq2 - ) - , React.createElement('p', { className: "text-text-3", __self: this, __source: {fileName: _jsxFileName, lineNumber: 198}} - , props.faqAnswer2 - ) - ) - , React.createElement('div', { className: "mb-8", __self: this, __source: {fileName: _jsxFileName, lineNumber: 202}} - , React.createElement('h3', { className: "text-primary text-2xl font-semibold mb-2" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 203}} - , props.faq3 - ) - , React.createElement('p', { className: "text-text-3", __self: this, __source: {fileName: _jsxFileName, lineNumber: 206}} - , props.faqAnswer3 - ) - ) - ) - ) - ) - ); - }; - - - const Contant = (props - - -) => { - return ( - React.createElement('div', { className: "bg-primary-1 py-16 px-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 222}} - , React.createElement('div', { className: "max-w-7xl mx-auto text-center" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 223}} - , React.createElement('h2', { className: "text-text-1 text-4xl font-bold mb-4" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 224}} - , props.title - ) - , React.createElement('p', { className: "text-text-2 text-lg mb-8" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 227}} - , props.subTitle - ) - ) - ) - ); - }; - - - const ApplicationContext = () => { - return ( - React.createElement('div', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 238}} - , React.createElement(Banner, { ...props[0] , __self: this, __source: {fileName: _jsxFileName, lineNumber: 239}}) -, React.createElement(Feature, { ...props[1] , __self: this, __source: {fileName: _jsxFileName, lineNumber: 240}}) -, React.createElement(Case, { ...props[2] , __self: this, __source: {fileName: _jsxFileName, lineNumber: 241}}) -, React.createElement(Review, { ...props[3] , __self: this, __source: {fileName: _jsxFileName, lineNumber: 242}}) -, React.createElement(Faq, { ...props[4] , __self: this, __source: {fileName: _jsxFileName, lineNumber: 243}}) -, React.createElement(Contant, { ...props[5] , __self: this, __source: {fileName: _jsxFileName, lineNumber: 244}}) - ) - ); - }; - - render(ApplicationContext) - ` \ No newline at end of file +export const remotecode = `"use strict";const e=React.createElement,s=React.Fragment,l=React.useState,t=React.useEffect,i=React.Component,a=React.createContext,m=React.useContext,_=React.useReducer,r=React.memo,N="",u=s=>e("div",{className:"bg-primary-1 py-16 px-8",__self:this,__source:{fileName:N,lineNumber:13}},e("div",{className:"max-w-7xl mx-auto text-center",__self:this,__source:{fileName:N,lineNumber:14}},e("h1",{className:"text-primary text-5xl md:text-7xl font-extrabold mb-4",__self:this,__source:{fileName:N,lineNumber:15}},s.title),e("p",{className:"text-primary text-xl md:text-2xl mb-8",__self:this,__source:{fileName:N,lineNumber:18}},s.subTitle),e("button",{onClick:function(){},className:"font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 ease-in-out",__self:this,__source:{fileName:N,lineNumber:21}},s.btnText))),c=s=>e("div",{className:"bg-background-2 py-16 px-8",__self:this,__source:{fileName:N,lineNumber:44}},e("div",{className:"max-w-7xl mx-auto",__self:this,__source:{fileName:N,lineNumber:45}},e("h2",{className:"text-text-1 text-4xl font-bold mb-4 text-center",__self:this,__source:{fileName:N,lineNumber:46}},s.title),e("p",{className:"text-text-2 text-lg mb-8 text-center",__self:this,__source:{fileName:N,lineNumber:49}},s.subTitle),e("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-8",__self:this,__source:{fileName:N,lineNumber:52}},e("div",{className:"bg-data-2 p-6 rounded-lg shadow-lg text-center",__self:this,__source:{fileName:N,lineNumber:53}},e("h3",{className:"text-primary text-2xl font-semibold mb-4",__self:this,__source:{fileName:N,lineNumber:54}},s.featureTitle1),e("p",{className:"text-text-1",__self:this,__source:{fileName:N,lineNumber:57}},s.featureDesc1)),e("div",{className:"bg-data-8 p-6 rounded-lg shadow-lg text-center",__self:this,__source:{fileName:N,lineNumber:61}},e("h3",{className:"text-primary text-2xl font-semibold mb-4",__self:this,__source:{fileName:N,lineNumber:62}},s.featureTitle2),e("p",{className:"text-text-1",__self:this,__source:{fileName:N,lineNumber:65}},s.featureDesc2)),e("div",{className:"bg-data-10 p-6 rounded-lg shadow-lg text-center",__self:this,__source:{fileName:N,lineNumber:69}},e("h3",{className:"text-primary text-2xl font-semibold mb-4",__self:this,__source:{fileName:N,lineNumber:70}},s.featureTitle3),e("p",{className:"text-text-1",__self:this,__source:{fileName:N,lineNumber:73}},s.featureDesc3))))),f=s=>e("div",{className:"bg-background-1 py-16 px-8",__self:this,__source:{fileName:N,lineNumber:93}},e("div",{className:"max-w-7xl mx-auto text-center",__self:this,__source:{fileName:N,lineNumber:94}},e("h2",{className:"text-text-1 text-4xl font-bold mb-4",__self:this,__source:{fileName:N,lineNumber:95}},s.title),e("p",{className:"text-text-2 text-lg mb-8",__self:this,__source:{fileName:N,lineNumber:98}},s.subTitle),e("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",__self:this,__source:{fileName:N,lineNumber:101}},e("div",{className:"bg-data-18 p-6 rounded-lg shadow-lg",__self:this,__source:{fileName:N,lineNumber:102}},e("h3",{className:"text-primary text-2xl font-semibold mb-4",__self:this,__source:{fileName:N,lineNumber:103}},s.caseTitle1),e("p",{className:"text-text-1",__self:this,__source:{fileName:N,lineNumber:106}},s.caseDesc1)),e("div",{className:"bg-data-16 p-6 rounded-lg shadow-lg",__self:this,__source:{fileName:N,lineNumber:110}},e("h3",{className:"text-primary text-2xl font-semibold mb-4",__self:this,__source:{fileName:N,lineNumber:111}},s.caseTitle2),e("p",{className:"text-text-1",__self:this,__source:{fileName:N,lineNumber:114}},s.caseDesc2))))),o=s=>e("div",{className:"bg-background-2 py-16 px-8",__self:this,__source:{fileName:N,lineNumber:134}},e("div",{className:"max-w-7xl mx-auto text-center",__self:this,__source:{fileName:N,lineNumber:135}},e("h2",{className:"text-text-1 text-4xl font-bold mb-4",__self:this,__source:{fileName:N,lineNumber:136}},s.title),e("p",{className:"text-text-2 text-lg mb-8",__self:this,__source:{fileName:N,lineNumber:139}},s.subTitle),e("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",__self:this,__source:{fileName:N,lineNumber:142}},e("div",{className:"bg-data-4 p-6 rounded-lg shadow-lg",__self:this,__source:{fileName:N,lineNumber:143}},e("h3",{className:"text-primary text-2xl font-semibold mb-4",__self:this,__source:{fileName:N,lineNumber:144}},s.reviewUser1),e("p",{className:"text-text-1",__self:this,__source:{fileName:N,lineNumber:147}},s.reviewDesc1)),e("div",{className:"bg-data-8 p-6 rounded-lg shadow-lg",__self:this,__source:{fileName:N,lineNumber:151}},e("h3",{className:"text-primary text-2xl font-semibold mb-4",__self:this,__source:{fileName:N,lineNumber:152}},s.reviewUser2),e("p",{className:"text-text-1",__self:this,__source:{fileName:N,lineNumber:155}},s.reviewDesc2))))),x=s=>e("div",{className:"bg-background-1 py-16 px-8",__self:this,__source:{fileName:N,lineNumber:177}},e("div",{className:"max-w-7xl mx-auto text-center",__self:this,__source:{fileName:N,lineNumber:178}},e("h2",{className:"text-text-1 text-4xl font-bold mb-4",__self:this,__source:{fileName:N,lineNumber:179}},s.title),e("p",{className:"text-text-2 text-lg mb-8",__self:this,__source:{fileName:N,lineNumber:182}},s.subTitle),e("div",{className:"text-left max-w-3xl mx-auto",__self:this,__source:{fileName:N,lineNumber:185}},e("div",{className:"mb-8",__self:this,__source:{fileName:N,lineNumber:186}},e("h3",{className:"text-primary text-2xl font-semibold mb-2",__self:this,__source:{fileName:N,lineNumber:187}},s.faq1),e("p",{className:"text-text-3",__self:this,__source:{fileName:N,lineNumber:190}},s.faqAnswer1)),e("div",{className:"mb-8",__self:this,__source:{fileName:N,lineNumber:194}},e("h3",{className:"text-primary text-2xl font-semibold mb-2",__self:this,__source:{fileName:N,lineNumber:195}},s.faq2),e("p",{className:"text-text-3",__self:this,__source:{fileName:N,lineNumber:198}},s.faqAnswer2)),e("div",{className:"mb-8",__self:this,__source:{fileName:N,lineNumber:202}},e("h3",{className:"text-primary text-2xl font-semibold mb-2",__self:this,__source:{fileName:N,lineNumber:203}},s.faq3),e("p",{className:"text-text-3",__self:this,__source:{fileName:N,lineNumber:206}},s.faqAnswer3))))),b=s=>e("div",{className:"bg-primary-1 py-16 px-8",__self:this,__source:{fileName:N,lineNumber:222}},e("div",{className:"max-w-7xl mx-auto text-center",__self:this,__source:{fileName:N,lineNumber:223}},e("h2",{className:"text-text-1 text-4xl font-bold mb-4",__self:this,__source:{fileName:N,lineNumber:224}},s.title),e("p",{className:"text-text-2 text-lg mb-8",__self:this,__source:{fileName:N,lineNumber:227}},s.subTitle))),n=()=>e("div",{__self:this,__source:{fileName:N,lineNumber:238}},e(u,{...props[0],__self:this,__source:{fileName:N,lineNumber:239}}),e(c,{...props[1],__self:this,__source:{fileName:N,lineNumber:240}}),e(f,{...props[2],__self:this,__source:{fileName:N,lineNumber:241}}),e(o,{...props[3],__self:this,__source:{fileName:N,lineNumber:242}}),e(x,{...props[4],__self:this,__source:{fileName:N,lineNumber:243}}),e(b,{...props[5],__self:this,__source:{fileName:N,lineNumber:244}}));render(n);`; diff --git a/src/pages/creation/completions.ts b/src/pages/creation/completions.ts new file mode 100644 index 0000000..4b8700b --- /dev/null +++ b/src/pages/creation/completions.ts @@ -0,0 +1,98 @@ +import { Extension } from '@codemirror/state'; +import { CompletionContext, autocompletion, Completion } from '@codemirror/autocomplete'; + +const colorMap = [ + { label: "--primary-7", type: "variable", info: "(点击（click）)" }, + { label: "--primary-6", type: "variable", info: "(常规)" }, + { label: "--primary-5", type: "variable", info: "(悬浮（hover）)" }, + { label: "--primary-4", type: "variable", info: "(特殊场景)" }, + { label: "--primary-3", type: "variable", info: "(一般禁用)" }, + { label: "--primary-2", type: "variable", info: "(文字禁用)" }, + { label: "--primary-1", type: "variable", info: "(浅色/白底悬浮)" }, + { label: "--success-7", type: "variable", info: "(点击（click）)" }, + { label: "--success-6", type: "variable", info: "(常规)" }, + { label: "--success-5", type: "variable", info: "(悬浮（hover）)" }, + { label: "--success-4", type: "variable", info: "(特殊场景)" }, + { label: "--success-3", type: "variable", info: "(一般禁用)" }, + { label: "--success-2", type: "variable", info: "(文字禁用)" }, + { label: "--success-1", type: "variable", info: "(浅色/白底悬浮)" }, + { label: "--warning-7", type: "variable", info: "(点击（click）)" }, + { label: "--warning-6", type: "variable", info: "(常规)" }, + { label: "--warning-5", type: "variable", info: "(悬浮（hover）)" }, + { label: "--warning-4", type: "variable", info: "(特殊场景)" }, + { label: "--warning-3", type: "variable", info: "(一般禁用)" }, + { label: "--warning-2", type: "variable", info: "(文字禁用)" }, + { label: "--warning-1", type: "variable", info: "(浅色/白底悬浮)" }, + { label: "--danger-7", type: "variable", info: "(点击（click）)" }, + { label: "--danger-6", type: "variable", info: "(常规)" }, + { label: "--danger-5", type: "variable", info: "(悬浮（hover）)" }, + { label: "--danger-4", type: "variable", info: "(特殊场景)" }, + { label: "--danger-3", type: "variable", info: "(一般禁用)" }, + { label: "--danger-2", type: "variable", info: "(文字禁用)" }, + { label: "--danger-1", type: "variable", info: "(浅色/白底悬浮)" }, + { label: "--link-7", type: "variable", info: "(点击（click）)" }, + { label: "--link-6", type: "variable", info: "(常规)" }, + { label: "--link-5", type: "variable", info: "(悬浮（hover）)" }, + { label: "--link-4", type: "variable", info: "(特殊场景)" }, + { label: "--link-3", type: "variable", info: "(一般禁用)" }, + { label: "--link-2", type: "variable", info: "(文字禁用)" }, + { label: "--link-1", type: "variable", info: "(浅色/白底悬浮)" }, + { label: "--data-1", type: "variable", info: "" }, + { label: "--data-2", type: "variable", info: "" }, + { label: "--data-3", type: "variable", info: "" }, + { label: "--data-4", type: "variable", info: "" }, + { label: "--data-5", type: "variable", info: "" }, + { label: "--data-6", type: "variable", info: "" }, + { label: "--data-7", type: "variable", info: "" }, + { label: "--data-8", type: "variable", info: "" }, + { label: "--data-9", type: "variable", info: "" }, + { label: "--data-10", type: "variable", info: "" }, + { label: "--data-11", type: "variable", info: "" }, + { label: "--data-12", type: "variable", info: "" }, + { label: "--data-13", type: "variable", info: "" }, + { label: "--data-14", type: "variable", info: "" }, + { label: "--data-15", type: "variable", info: "" }, + { label: "--data-16", type: "variable", info: "" }, + { label: "--data-17", type: "variable", info: "" }, + { label: "--data-18", type: "variable", info: "" }, + { label: "--data-19", type: "variable", info: "" }, + { label: "--data-20", type: "variable", info: "" }, + { label: "--color-border-1", type: "variable", info: "(浅色)" }, + { label: "--color-border-2", type: "variable", info: "(一般)" }, + { label: "--color-border-3", type: "variable", info: "(深/悬浮)" }, + { label: "--color-border-4", type: "variable", info: "(重/按钮描边)" }, + { label: "--color-fill-1", type: "variable", info: "(浅/禁用)" }, + { label: "--color-fill-2", type: "variable", info: "(常规/白底悬浮)" }, + { label: "--color-fill-3", type: "variable", info: "(深/灰底悬浮)" }, + { label: "--color-fill-4", type: "variable", info: "(重/特殊场景)" }, + { label: "--color-text-1", type: "variable", info: "(强调/正文标题)" }, + { label: "--color-text-2", type: "variable", info: "(次强调/正文标题)" }, + { label: "--color-text-3", type: "variable", info: "(次要信息)" }, + { label: "--color-text-4", type: "variable", info: "(置灰信息)" }, + { label: "--color-bg-1", type: "variable", info: "(整体背景色)" }, + { label: "--color-bg-2", type: "variable", info: "(一级容器背景)" }, + { label: "--color-bg-3", type: "variable", info: "(二级容器背景)" }, + { label: "--color-bg-4", type: "variable", info: "(三级容器背景)" }, + { label: "--color-bg-5", type: "variable", info: "(下拉弹出框、Tooltip 背景颜色)" }, + { label: "--color-bg-white", type: "variable", info: "(白色背景)" } +]; + +export function colorCompletions(data: Completion[] = []): Extension { + return autocompletion({ + override: [ + (context: CompletionContext) => { + let word = context.matchBefore(/--\w+/g); + if (!word) return null; + if (word && word.from == word.to && !context.explicit) { + return null; + } + return { + from: word?.from!, + options: [...data], + }; + }, + ], + }); +} + +export const plugin = colorCompletions(colorMap); \ No newline at end of file diff --git a/src/pages/creation/index.tsx b/src/pages/creation/index.tsx new file mode 100644 index 0000000..537531d --- /dev/null +++ b/src/pages/creation/index.tsx @@ -0,0 +1,191 @@ +import React from "react"; +import CodeMirror, { basicSetup } from "@uiw/react-codemirror"; +import { loadLanguage, langs } from "@uiw/codemirror-extensions-langs"; +import LiveProvider from "../../components/Live/LiveProvider"; +import LivePreview from "../../components/Live/LivePreview"; +import LiveError from "../../components/Live/LiveError"; +import { color, colorView, colorTheme } from "@uiw/codemirror-extensions-color"; +import JsonViewEditor from "@uiw/react-json-view/editor"; +import { ThemeProvider } from "../../components/Theme/ThemePrivider"; +import { plugin as colorCom } from "./completions"; + +loadLanguage("tsx"); +const extensions = [color, langs.tsx(), colorView(false), colorTheme, colorCom]; + +export const Creation = () => { + // useEffect 拦截ctrls等操作，避免浏览器默认行为 + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.ctrlKey && event.key === "s") { + event.preventDefault(); + // 弹出已经保存的提示 + } + }; + document.addEventListener("keydown", handleKeyDown); + return () => { + document.removeEventListener("keydown", handleKeyDown); + }; + }, []); + + const [componentName, setComponentName] = React.useState("Banner"); + + const [componentsProps, setComponentsProps] = React.useState({ + title: "AI智能建站助手", + subTitle: "让我们帮助您快速构建和优化您的网站", + btnText: "立即开始", + }); + + const [newPropKey, setNewPropKey] = React.useState(""); + + const handleAddProp = () => { + if (newPropKey.trim() !== "") { + setComponentsProps((prevProps) => ({ + ...prevProps, + [newPropKey]: "", + })); + setNewPropKey(""); + } + }; + + const [code, setCode] = React.useState(` + const Banner = (props: { + title: string + subTitle: string + btnText: string + }) => { + function handleClick() { + console.log("Hi there!"); + } + return ( +
+
+

+ {props.title} +

+

+ {props.subTitle} +

+ +
+
+ ); + }; +`); + + const renderCode = (code: string) => { + return ` + ${code} + render(${componentName}); + `; + }; + + const onChange = React.useCallback((value: string) => { + setCode(value); + }, []); + + const handleComponentNameChange = ( + event: React.ChangeEvent + ) => { + setComponentName(event.target.value); + }; + + return ( + +
+
+ + +
+ +
+
+ +
+
+ +
+
+ + +
+

Props 编辑器

+
+
+ +
+ setNewPropKey(e.target.value)} + className="border border-text-1 rounded p-2 flex-grow" + /> + +
+
+ { + const updateNestedProp = ( + obj: Record, + path: string[], + value: unknown + ) => { + if (path.length === 1) { + obj[path[0]] = value; + } else { + if (!obj[path[0]]) { + obj[path[0]] = {}; + } + updateNestedProp(obj[path[0]], path.slice(1), value); + } + }; + const updatedProps = { ...componentsProps }; + updateNestedProp( + updatedProps, + (opts as any).namespace, + opts.value + ); + setComponentsProps(updatedProps); + return true; + }} + /> +
+
+
+ + ); +}; diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx index ec16b8b..ce69644 100644 --- a/src/pages/editor/index.tsx +++ b/src/pages/editor/index.tsx @@ -7,7 +7,7 @@ import { useState } from "react"; import { functionBlockList } from "../../data/functionBlocks"; import ClickContextProvider from "../../components/Selected/ClickContext"; -const code = (func: string,cpnName:string) => ` +const code = (func: string, cpnName: string) => ` ${func} render(${cpnName}) `; @@ -112,7 +112,11 @@ export const Editor = () => { )} {functionBlockList.map((func, index) => { return ( - + Hello world!, - }, - { - path: "/editor", - element: , - }, - { - path: "/app", - element: , - } + { + path: "/", + element:
Hello world!
, + }, + { + path: "/editor", + element: , + }, + { + path: "/app", + element: , + }, + { + path: "/create", + element: , + }, ]); diff --git a/src/utils/minify/index.ts b/src/utils/minify/index.ts new file mode 100644 index 0000000..d246c0f --- /dev/null +++ b/src/utils/minify/index.ts @@ -0,0 +1,31 @@ +import { minify } from "terser"; + +export default async function minifyCode(code: string) { + const replaced = code + .replace(RegExp(`React.createElement`, "g"), `rc`) + .replace(RegExp(`React.Fragment`, "g"), `rf`) + .replace(RegExp(`React.useState`, "g"), `rs`) + .replace(RegExp(`React.useEffect`, "g"), `re`) + .replace(RegExp(`React.Component`, "g"), `rcp`) + .replace(RegExp(`React.createContext`, "g"), `rcc`) + .replace(RegExp(`React.useContext`, "g"), `rcu`) + .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;` + ); + + const { code: minifiedCode } = await minify(replaced, { + compress: { + passes: 2, + drop_console: true, + drop_debugger: true, + arguments: true, + }, + mangle: { + toplevel: true, + }, + }); + return minifiedCode || ""; +}