Skip to content

Commit 07b5821

Browse files
sparrow-jssparrow-js
committed
add custom template
1 parent f49b103 commit 07b5821

File tree

2 files changed

+91
-141
lines changed

2 files changed

+91
-141
lines changed

‎components/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,9 @@ function App() {
119119
setGeneratedCode(template.code);
120120
addHistory("create", updateInstruction, referenceImages, referenceText, template.code, partValue.message);
121121
setAppState(AppState.CODE_READY);
122+
if (template) {
123+
setTemplate(template)
124+
}
122125
return;
123126
}
124127

@@ -434,11 +437,13 @@ ${error.stack}
434437
</p>
435438
</div>
436439
) : (
440+
(referenceImages[0] || template.imageUrl) ? (
437441
<img
438442
className="w-[340px] border border-gray-200 rounded-md"
439443
src={referenceImages[0] || template.imageUrl}
440444
alt="Reference"
441445
/>
446+
) : <></>
442447
)}
443448
</div>
444449
<div className="text-gray-400 uppercase text-sm text-center mt-1">

‎components/compiler/index.ts‎

Lines changed: 86 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import TS, {
1111
import Hash from 'object-hash';
1212
import { generateConsistentUID } from './uid-utils';
1313
import { GeneratedCodeConfig } from "../types";
14+
import { get } from 'lodash';
1415

1516

1617
let jsxContainerList: any[] = [];
@@ -62,14 +63,43 @@ function parseFunction(initializer: any) {
6263
}
6364

6465
function parseVariableDeclarationList(declarations: any[]) {
65-
for (let i = 0; i < declarations.length; i++) {
66-
const { initializer, name } = declarations[i];
67-
if (initializer.kind === TS.SyntaxKind.ArrowFunction) {
68-
parseArrowFunction(initializer, name.escapedText);
66+
for (let i = 0; i < declarations.length; i++) {
67+
const { initializer, name } = declarations[i];
68+
if (initializer.kind === TS.SyntaxKind.ArrowFunction) {
69+
parseArrowFunction(initializer, name.escapedText);
70+
}
71+
}
72+
}
73+
74+
function parseJsxExpression(node: any) {
75+
76+
function walk(node: any) {
77+
if (node.kind === TS.SyntaxKind.JsxElement) {
78+
} else if (node.kind === TS.SyntaxKind.JsxSelfClosingElement) {
79+
} else if (node.kind === TS.SyntaxKind.JsxExpression) {
80+
const jsxNode = get(node, 'expression.arguments[0].body.expression');
81+
if (jsxNode && jsxNode.kind === TS.SyntaxKind.JsxElement) {
82+
jsxContainerList.push(jsxNode);
83+
parseJsxExpression(jsxNode);
6984
}
85+
} else {
86+
return null;
87+
}
88+
89+
const { children } = node as any;
90+
91+
if (children) {
92+
children.reduce((result:any, currNode: any) => {
93+
walk(currNode);
94+
}, []);
95+
}
96+
7097
}
98+
walk(node)
7199
}
72100

101+
102+
73103
function findJsxNode(node: Node) {
74104
jsxContainerList = [];
75105
const dfs = function (node: any) {
@@ -98,6 +128,9 @@ function findJsxNode(node: Node) {
98128
child.forEach(item => {
99129
dfs(item);
100130
});
131+
for (let i = 0; i < jsxContainerList.length; i++) {
132+
parseJsxExpression(jsxContainerList[i]);
133+
}
101134
return jsxContainerList;
102135
}
103136

@@ -217,6 +250,7 @@ export default function setCodeUid (code: string, anchorUid: string = '', path:
217250
alreadyExistingUIDs.set(path, new Set());
218251
const sourceFile = TS.createSourceFile(path, code, TS.ScriptTarget.ESNext);
219252
const nodeObject = sourceFile.getChildren()[0];
253+
220254
findJsxNode(nodeObject);
221255
const cacheJsx = setJsxElementUid(jsxContainerList,sourceFile, anchorUid);
222256

@@ -315,154 +349,65 @@ export function setUidAnchorPoint(uid: string, code: string, generatedCodeConfig
315349
// const codeHtml = `
316350
// <html>
317351
// <head>
318-
// <title>E-commerce Dashboard</title>
352+
// <title>Hacker News Clone</title>
319353
// <script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
320354
// <script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
321355
// <script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
322356
// <script src="https://cdn.tailwindcss.com"></script>
323-
// <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
324357
// <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
358+
// <style>
359+
// body {
360+
// font-family: 'Verdana', sans-serif;
361+
// }
362+
// </style>
325363
// </head>
326-
// <body>
364+
// <body class="bg-gray-200">
327365
// <div id="app"></div>
328366

329-
// <script type="text/babel">
330-
// const Dashboard = () => {
331-
// return (
332-
// <div className="flex h-screen bg-gray-100">
333-
// <div className="flex flex-col w-64 bg-white shadow-lg">
334-
// <div className="flex items-center justify-center h-20 shadow-md">
335-
// <h1 className="text-3xl uppercase text-indigo-500">Logo</h1>
336-
// </div>
337-
// <ul className="flex flex-col py-4">
338-
// <li>
339-
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
340-
// <i className="fas fa-tachometer-alt pr-2"></i>
341-
// Dashboard
342-
// </a>
343-
// </li>
344-
// <li>
345-
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
346-
// <i className="fas fa-box pr-2"></i>
347-
// Products
348-
// </a>
349-
// </li>
350-
// <li>
351-
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
352-
// <i className="fas fa-users pr-2"></i>
353-
// Customers
354-
// </a>
355-
// </li>
356-
// <li>
357-
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
358-
// <i className="fas fa-file-invoice-dollar pr-2"></i>
359-
// Orders
360-
// </a>
361-
// </li>
362-
// <li>
363-
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
364-
// <i className="fas fa-chart-line pr-2"></i>
365-
// Reports
366-
// </a>
367-
// </li>
368-
// <li>
369-
// <a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
370-
// <i className="fas fa-cog pr-2"></i>
371-
// Settings
372-
// </a>
373-
// </li>
374-
// </ul>
375-
// </div>
376-
// <div className="flex-1 flex flex-col overflow-hidden">
377-
// <header className="flex justify-between items-center p-6 bg-white border-b-2 border-gray-200">
378-
// <div className="flex items-center space-x-4">
379-
// <i className="fas fa-bars text-gray-600 text-2xl"></i>
380-
// <h1 className="text-2xl text-gray-700 font-semibold">Dashboard</h1>
381-
// </div>
382-
// <div className="flex items-center space-x-4">
383-
// <i className="fas fa-bell text-gray-600 text-2xl"></i>
384-
// <i className="fas fa-user-circle text-gray-600 text-2xl"></i>
385-
// </div>
386-
// </header>
387-
// <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
388-
// <div className="container mx-auto px-6 py-8">
389-
// <h3 className="text-gray-700 text-3xl font-medium">Recent Orders</h3>
390-
// <div className="mt-8">
391-
// <div className="flex flex-col">
392-
// <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
393-
// <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
394-
// <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
395-
// <table className="min-w-full divide-y divide-gray-200">
396-
// <thead className="bg-gray-50">
397-
// <tr>
398-
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
399-
// Order ID
400-
// </th>
401-
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
402-
// Product
403-
// </th>
404-
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
405-
// Customer
406-
// </th>
407-
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
408-
// Status
409-
// </th>
410-
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
411-
// Total
412-
// </th>
413-
// <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
414-
// Date
415-
// </th>
416-
// <th scope="col" className="relative px-6 py-3">
417-
// <span className="sr-only">Edit</span>
418-
// </th>
419-
// </tr>
420-
// </thead>
421-
// <tbody className="bg-white divide-y divide-gray-200">
422-
// <tr>
423-
// <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
424-
// #001
425-
// </td>
426-
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
427-
// Product Name 1
428-
// </td>
429-
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
430-
// Customer Name 1
431-
// </td>
432-
// <td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
433-
// Completed
434-
// </td>
435-
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
436-
// $100.00
437-
// </td>
438-
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
439-
// 01/01/2021
440-
// </td>
441-
// <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
442-
// <a href="#" className="text-indigo-600 hover:text-indigo-900">Edit</a>
443-
// </td>
444-
// </tr>
445-
// {/* Repeat for each order */}
446-
// {/* ... other orders ... */}
447-
// </tbody>
448-
// </table>
449-
// </div>
450-
// </div>
451-
// </div>
367+
368+
369+
// <script type="text/babel">
370+
// const newsItems = [
371+
// { id: 1, title: "Czech republic sets IPv4 end date", points: 95, author: "deadbunny", time: "1 hour ago", comments: 39, url: "konecipv4.cz" },
372+
// // ... Add all other news items here with the same structure
373+
// { id: 20, title: "Depth Anything: Unleashing the Power of Large-Scale Unlabeled Data", points: 9, author: "liheyoung", time: "1 hour ago", comments: 0, url: "github.com/liheyoung" }
374+
// ];
375+
// function App() {
376+
// return (<div className="bg-white p-4">
377+
// <header className="flex justify-between items-center mb-4 bg-orange-400">
378+
// <h1 className="text-lg font-bold">Hacker News</h1>
379+
// <nav>
380+
// <a href="#" className="text-red-600 hover:underline">new</a> |
381+
// <a href="#" className="hover:underline">past</a> |
382+
// <a href="#" className="hover:underline">comments</a> |
383+
// <a href="#" className="hover:underline">ask</a> |
384+
// <a href="#" className="hover:underline">show</a> |
385+
// <a href="#" className="hover:underline">jobs</a> |
386+
// <a href="#" className="hover:underline">submit</a>
387+
// </nav>
388+
// <a href="#" className="hover:underline">login</a>
389+
// </header>
390+
// <main>
391+
// <ul>
392+
// {newsItems.map(item => (<li key={item.id} className="mb-2">
393+
// <span className="text-orange-400 mr-2">{item.id}.</span>
394+
// <a href={item.url} className="text-black hover:underline">{item.title}</a>
395+
// <span className="text-gray-600 text-sm ml-2">({item.url})</span>
396+
// <div className="text-gray-600 text-sm">
397+
// {item.points} points by {item.author} {item.time} | <a href="#" className="hover:underline">hide</a> | {item.comments} comments
452398
// </div>
453-
// </div>
454-
// </div>
455-
// </main>
456-
// </div>
457-
// </div>
458-
// );
459-
// };
460-
461-
// ReactDOM.render(<Dashboard />, document.getElementById('app'));
462-
// </script>
399+
// </li>))}
400+
// </ul>
401+
// </main>
402+
// </div>);
403+
// }
404+
// ReactDOM.render(<App />, document.getElementById("app"));
405+
406+
// </script>
407+
408+
463409
// </body>
464410
// </html>
465-
466411
// `;
467412

468413

0 commit comments

Comments
 (0)