Skip to content

Commit 4aab0dd

Browse files
sparrow-jssparrow-js
committed
fix
1 parent 4437591 commit 4aab0dd

File tree

7 files changed

+500
-75
lines changed

7 files changed

+500
-75
lines changed

‎components/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -510,6 +510,7 @@ ${error.stack}
510510
sendMessageChange={(data) => {
511511
doPartUpdate(data);
512512
}}
513+
generatedCodeConfig={settings.generatedCodeConfig}
513514
history={history}
514515
/>
515516
{/* <Preview code={generatedCode} device="desktop" appState={appState} fixBug={fixBug}/> */}

‎components/compiler/index.ts‎

Lines changed: 194 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import TS, {
1010

1111
import Hash from 'object-hash';
1212
import { generateConsistentUID } from './uid-utils';
13+
import { GeneratedCodeConfig } from "../types";
14+
1315

1416
let jsxContainerList: any[] = [];
1517
let alreadyExistingUIDs: Map<string, any> = new Map();
@@ -209,27 +211,52 @@ export default function setCodeUid (code: string, path: string = '/mock.tsx') {
209211
return codeUid;
210212
}
211213

212-
export function setHtmlCodeUid(code: string, path: string = '/mock.tsx') {
213-
var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im; //匹配header
214+
export function setHtmlCodeUid(generatedCodeConfig: GeneratedCodeConfig, code: string, path: string = '/mock.tsx') {
214215
if (!code) return code;
215-
const headMatch = code.match(patternBody);
216-
if (headMatch) {
217-
const htmlCode = `
218-
function htmlRender () {
219-
return (
220-
${headMatch[0].replaceAll(/<!--((.)*)-->/img, '')}
221-
)
216+
if (generatedCodeConfig === GeneratedCodeConfig.HTML_TAILWIND) {
217+
var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im; //匹配header
218+
const headMatch = code.match(patternBody);
219+
if (headMatch) {
220+
const htmlCode = `
221+
function htmlRender () {
222+
return (
223+
${headMatch[0].replaceAll(/<!--((.)*)-->/img, '')}
224+
)
225+
}
226+
`;
227+
const codeJsx = setCodeUid(htmlCode, path);
228+
const body = codeJsx.match(patternBody);
229+
if (body) {
230+
return code.replace(patternBody, body[0]);
231+
}
232+
return code
233+
} else {
234+
return code;
222235
}
223-
`;
224-
const codeJsx = setCodeUid(htmlCode, path);
225-
const body = codeJsx.match(patternBody);
226-
if (body) {
227-
return code.replace(patternBody, body[0]);
236+
} else if (generatedCodeConfig === GeneratedCodeConfig.REACT_TAILWIND) {
237+
var patternScript = /<script type="text\/babel"[^>]*>((.|[\n\r])*)<\/script>/im; //匹配script
238+
const scriptMatch = code.match(patternScript);
239+
if (scriptMatch) {
240+
const codeJsx = setCodeUid(scriptMatch[1], path);
241+
if (codeJsx) {
242+
let codeScript = `
243+
<script type="text/babel">
244+
${codeJsx}
245+
</script>
246+
`;
247+
// todo: 这里$100.00 匹配有问题，后面研究
248+
const temp = code.replace(patternScript, `
249+
<script type="text/babel">
250+
</script>
251+
`);
252+
return temp.replace(patternScript, codeScript);
253+
254+
}
255+
return code;
228256
}
229-
return code
230-
} else {
231257
return code;
232258
}
259+
return code;
233260
}
234261

235262
export function getPartCodeUid(uid: string, path: string = '/mock.tsx') {
@@ -264,24 +291,161 @@ function htmlRender () {
264291
// function test () {
265292
// const codeHtml = `
266293

267-
// <body class="bg-white text-gray-900">
268-
// <div class="container mx-auto px-4 py-12">
269-
// <h1 class="text-5xl font-bold mb-4">Things I've made trying to put my dent in the universe.</h1>
270-
// <p class="text-lg mb-12">I've worked on tons of little projects over the years but these are the ones that I'm most proud of. Many of them are open-source, so if you see something that piques your interest, check out the code and contribute if you have ideas for how it can be improved.</p>
271-
// <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
272-
// <div class="flex flex-col items-center">
273-
// <img src="https://placehold.co/96x96" alt="Placeholder image for Planetaria project logo" class="mb-4">
274-
// <h2 class="text-xl font-semibold mb-2">Planetaria</h2>
275-
// <p class="text-center mb-4">Creating technology to empower civilians to explore space on their own terms.</p>
276-
// <a href="#" class="text-indigo-600 hover:text-indigo-800 transition-colors">planetaria.tech</a>
294+
295+
// <html>
296+
// <head>
297+
// <title>E-commerce Dashboard</title>
298+
// <script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
299+
// <script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
300+
// <script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
301+
// <script src="https://cdn.tailwindcss.com"></script>
302+
// <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
303+
// <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
304+
// </head>
305+
// <body>
306+
// <div id="app"></div>
307+
308+
// <script type="text/babel">
309+
// const Dashboard = () => {
310+
// return (
311+
// <div className="flex h-screen bg-gray-100">
312+
// <div className="flex flex-col w-64 bg-white shadow-lg">
313+
// <div className="flex items-center justify-center h-20 shadow-md">
314+
// <h1 className="text-3xl uppercase text-indigo-500">Logo</h1>
315+
// </div>
316+
// <ul className="flex flex-col py-4">
317+
// <li>
318+
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
319+
// <i className="fas fa-tachometer-alt pr-2"></i>
320+
// Dashboard
321+
// </a>
322+
// </li>
323+
// <li>
324+
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
325+
// <i className="fas fa-box pr-2"></i>
326+
// Products
327+
// </a>
328+
// </li>
329+
// <li>
330+
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
331+
// <i className="fas fa-users pr-2"></i>
332+
// Customers
333+
// </a>
334+
// </li>
335+
// <li>
336+
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
337+
// <i className="fas fa-file-invoice-dollar pr-2"></i>
338+
// Orders
339+
// </a>
340+
// </li>
341+
// <li>
342+
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
343+
// <i className="fas fa-chart-line pr-2"></i>
344+
// Reports
345+
// </a>
346+
// </li>
347+
// <li>
348+
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
349+
// <i className="fas fa-cog pr-2"></i>
350+
// Settings
351+
// </a>
352+
// </li>
353+
// </ul>
277354
// </div>
278-
// </div>
279-
// </div>
280-
// </body>
355+
// <div className="flex-1 flex flex-col overflow-hidden">
356+
// <header className="flex justify-between items-center p-6 bg-white border-b-2 border-gray-200">
357+
// <div className="flex items-center space-x-4">
358+
// <i className="fas fa-bars text-gray-600 text-2xl"></i>
359+
// <h1 className="text-2xl text-gray-700 font-semibold">Dashboard</h1>
360+
// </div>
361+
// <div className="flex items-center space-x-4">
362+
// <i className="fas fa-bell text-gray-600 text-2xl"></i>
363+
// <i className="fas fa-user-circle text-gray-600 text-2xl"></i>
364+
// </div>
365+
// </header>
366+
// <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
367+
// <div className="container mx-auto px-6 py-8">
368+
// <h3 className="text-gray-700 text-3xl font-medium">Recent Orders</h3>
369+
// <div className="mt-8">
370+
// <div className="flex flex-col">
371+
// <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
372+
// <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
373+
// <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
374+
// <table className="min-w-full divide-y divide-gray-200">
375+
// <thead className="bg-gray-50">
376+
// <tr>
377+
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
378+
// Order ID
379+
// </th>
380+
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
381+
// Product
382+
// </th>
383+
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
384+
// Customer
385+
// </th>
386+
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
387+
// Status
388+
// </th>
389+
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
390+
// Total
391+
// </th>
392+
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
393+
// Date
394+
// </th>
395+
// <th scope="col" className="relative px-6 py-3">
396+
// <span className="sr-only">Edit</span>
397+
// </th>
398+
// </tr>
399+
// </thead>
400+
// <tbody className="bg-white divide-y divide-gray-200">
401+
// <tr>
402+
// <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
403+
// #001
404+
// </td>
405+
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
406+
// Product Name 1
407+
// </td>
408+
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
409+
// Customer Name 1
410+
// </td>
411+
// <td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
412+
// Completed
413+
// </td>
414+
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
415+
// $100.00
416+
// </td>
417+
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
418+
// 01/01/2021
419+
// </td>
420+
// <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
421+
// <a href="#" className="text-indigo-600 hover:text-indigo-900">Edit</a>
422+
// </td>
423+
// </tr>
424+
// {/* Repeat for each order */}
425+
// {/* ... other orders ... */}
426+
// </tbody>
427+
// </table>
428+
// </div>
429+
// </div>
430+
// </div>
431+
// </div>
432+
// </div>
433+
// </div>
434+
// </main>
435+
// </div>
436+
// </div>
437+
// );
438+
// };
439+
440+
// ReactDOM.render(<Dashboard />, document.getElementById('app'));
441+
// </script>
442+
// </body>
443+
// </html>
444+
281445
// `;
282446

283447

284-
// const code = setHtmlCodeUid(codeHtml.replaceAll(/<!--((.)*)-->/img, ''));
448+
// const code = setHtmlCodeUid(GeneratedCodeConfig.REACT_TAILWIND, codeHtml.replaceAll(/<!--((.)*)-->/img, ''));
285449
// console.log('*******', code);
286450
// }
287451

‎components/components/SettingsDialog.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ function SettingsDialog({ settings, setSettings }: Props) {
6060
...settings,
6161
llm: data,
6262
})
63-
console.log(data)
6463
}} className="flex item-center" color="indigo" defaultValue={settings.llm}>
6564
<Label className="flex item-center" htmlFor="openai-llm">
6665
<span className="mr-2">openai</span>

‎engine/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState, useContext } from 'react';
22
import { DesignerView, Designer, AutoCodePluginManager, ILowCodePluginContext } from './designer';
33
import { Editor, globalContext } from './editor-core';
4-
import { AppState } from "../components/types";
4+
import { AppState, GeneratedCodeConfig } from "../components/types";
55
import useThrottle from "../components/hooks/useThrottle";
66
import {setHtmlCodeUid} from '../components/compiler';
77
import html2canvas from "html2canvas";
@@ -38,10 +38,11 @@ interface Props {
3838
code: string;
3939
appState: AppState;
4040
sendMessageChange: (e: any) => void;
41-
history: any
41+
history: any;
42+
generatedCodeConfig: GeneratedCodeConfig
4243
}
4344

44-
export default function PreviewBox({ code, appState, sendMessageChange, history }: Props) {
45+
export default function PreviewBox({ code, appState, sendMessageChange, history, generatedCodeConfig }: Props) {
4546
const throttledCode = useThrottle(code, 500);
4647
const {updateHistoryScreenshot} = useContext(HistoryContext);
4748

@@ -51,7 +52,6 @@ export default function PreviewBox({ code, appState, sendMessageChange, history
5152
}
5253

5354
useEffect(() => {
54-
5555
editor.on('editor.sendMessageChange', sendMessageChange);
5656
document.querySelector('.lc-simulator-content-frame')?.addEventListener('load', onIframeLoad);
5757
return () => {
@@ -63,7 +63,7 @@ export default function PreviewBox({ code, appState, sendMessageChange, history
6363

6464
useEffect(() => {
6565
if (appState === AppState.CODE_READY) {
66-
const codeUid = setHtmlCodeUid(code);
66+
const codeUid = setHtmlCodeUid(generatedCodeConfig, code);
6767
designer.project.simulator?.writeIframeDocument(codeUid);
6868
} else {
6969
// designer.project.simulator?.writeIframeDocument(throttledCode);

0 commit comments

Comments
 (0)