create-gardener 2.1.3 → 2.1.4

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/ritishDas/gardener"
   },
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A dom gardener converting dom elements into json and vice versa",
   "main": "index.js",
   "bin": {

package/template/buildHelper.js

@@ -6,6 +6,11 @@ export default async function buildHelper() {
   const src = path.resolve('src', 'frontend');
   const dest = path.resolve('build', 'frontend');
 
+  try {
+    await fs.rm(dest, { recursive: true, force: true });
+  } catch (err) {
+    console.log(err);
+  }
   await fs.cp(src, dest, { recursive: true });
 
   await fs.writeFile(

package/template/src/backend/controllers/gardener/hotReload.ts

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+import type { Request, Response } from 'express';
+
+// ── Version token ─────────────────────────────────────────────
+// Monotonically-increasing timestamp updated whenever a file
+// in src/frontend/ changes. The frontend stores the first value
+// it sees and reloads as soon as it receives a different one.
+let version: number = Date.now();
+
+// ── File watcher ──────────────────────────────────────────────
+const watchTarget = path.resolve('src', 'frontend');
+
+let debounce: ReturnType<typeof setTimeout> | null = null;
+
+fs.watch(watchTarget, { recursive: true }, (_event, filename) => {
+    // Ignore hidden files and node_modules
+    if (!filename || filename.startsWith('.')) return;
+
+    if (debounce) clearTimeout(debounce);
+    debounce = setTimeout(() => {
+        version = Date.now();
+        console.log(`[gardener] file changed: ${filename} → version ${version}`);
+    }, 100);
+});
+
+console.log(`[gardener] watching ${watchTarget} for changes…`);
+
+// ── Route handler ─────────────────────────────────────────────
+// GET /__gardener/hot-reload
+// Returns { version: <number> }
+export function hotReloadHandler(req: Request, res: Response) {
+    res.json({ version });
+}

package/template/src/backend/routes/gardener.route.ts

@@ -1,6 +1,7 @@
 import type { Request, Response } from 'express';
 import { Router } from "express";
 import { addComponent, addPage, imageOptimiser, saveTemplate } from "../controllers/gardener/index.js";
+import { hotReloadHandler } from "../controllers/gardener/hotReload.js";
 
 const router: Router = Router();
 export default router;
@@ -14,6 +15,7 @@ if (process.env.NODE_ENV !== 'production') {
   router.route('/addcomponent').post(addComponent);
   router.route('/addpage').post(addPage);
   router.route('/savetemplate').post(saveTemplate);
+  router.route('/__gardener/hot-reload').get(hotReloadHandler);
 }
 
 

package/template/src/frontend/static/components/gardener/hotReloadbtn.js

@@ -1,82 +1,29 @@
-import { gardener, fetchElement, appendElement } from '../../gardener.js'
-import { gardenerError } from './errorBox.js';
-
-const config = {
-  hotreload: false
-}
-
-let hotReload;
-let hotReloadtimeout;
-const localStore = localStorage.getItem('hotreload');
-
-if (localStore === null) hotReload = config.hotreload;
-else if (localStore === 'true') hotReload = true
-else if (localStore === 'false') hotReload = false
-
-
-export function togglehotreload() {
-  const hr = hotReload;
-  const hrcheck = fetchElement('#hrcheckbox');
-
-  localStorage.setItem('hotreload', hr);
-
-  hotReload = !hotReload;
-
-  if (hr) {
-    hrcheck.style.background = '#66e666';
-    fetchElement('.hrcheckbox').checked = true;
-    localStorage.setItem('hotreload', 'true');
-    hotReloadtimeout = setTimeout(() => window.location.reload(), 1000);
+const POLL_INTERVAL = 500;   // ms
+const ENDPOINT = '/__gardener/hot-reload';
+
+let knownVersion = null;
+
+async function poll() {
+  try {
+    const res = await fetch(ENDPOINT);
+    if (!res.ok) return;
+    const { version } = await res.json();
+
+    if (knownVersion === null) {
+      knownVersion = version;   // capture baseline on first poll
+      return;
+    }
+
+    if (version !== knownVersion) {
+      window.location.reload();
+    }
+  } catch {
+    // network hiccup — retry next tick
   }
-  else {
-    hrcheck.style.background = 'red';
-    fetchElement('.hrcheckbox').checked = false;
-    localStorage.setItem('hotreload', 'false');
-    clearTimeout(hotReloadtimeout);
-  }
-
-  //localStorage.setItem('hotreload', hotReload);
 }
 
-export function hotReloadBtn() {
-  return gardener({
-    t: 'p',
-    cn: ['bg-gray-200', 'fixed', 'bottom-0', 'z-100', 'right-0', 'border-b-1', 'p-2', 'rounded-md'],
-    children: [
-      {
-        t: 'span',
-        txt: 'Press '
-      },
-      {
-        t: 'span',
-        cn: ['text-green-500', 'font-bold'],
-        txt: 'Alt+h'
-      },
-      {
-        t: 'span',
-        txt: ' to toggle Hot Reload'
-      },
-      {
-        t: 'form',
-        attr: {
-          id: 'hrcheckbox',
-        },
-        events: {
-          click: () => togglehotreload()
-        },
-        cn: ['p-2', 'bg-red-300'],
-        children: [{
-          t: 'label',
-          txt: 'Hot Reload ',
-        }
-          , {
-          t: 'input',
-          cn: ['hrcheckbox'],
-          attr: {
-            type: 'checkbox'
-          }
-        }]
-      }
-    ]
-  })
+export function startHotReload() {
+  poll();   // immediate check
+  setInterval(poll, POLL_INTERVAL);
 }
+

package/template/src/frontend/static/gardenerDev.js

@@ -2,7 +2,7 @@ import { mode } from './gardenerConfig.js'
 import { gardener, appendElement, fetchElement } from './gardener.js'
 import { addPagebtn } from './components/gardener/pageOverlayBtn.js';
 import { parserWindow as parserWindowComponent } from './components/gardener/parserWindow.js';
-import { hotReloadBtn, togglehotreload } from './components/gardener/hotReloadbtn.js';
+import { startHotReload } from './components/gardener/hotReloadbtn.js';
 import { gardenerError } from './components/gardener/errorBox.js';
 
 const body = fetchElement('body');
@@ -20,28 +20,12 @@ const body = fetchElement('body');
 
 if (mode === 'dev') {
   appendElement(body, addPagebtn);
-
-
-  appendElement(body, hotReloadBtn())
-
-  togglehotreload();
+  startHotReload();
 }
 
 
 
 
-document.addEventListener('keydown', function(e) {
-  // Detect Ctrl + H
-  if (e.altKey && e.key.toLowerCase() === 'h') {
-    e.preventDefault();   // Stop browser from opening history
-    // Your logic here...
-    togglehotreload();
-  }
-});
-
-
-
-
 
 
 export function parserWindow(text) {

package/template/src/frontend/static/style.css

@@ -250,18 +250,12 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
   .top-1\/4 {
     top: calc(1 / 4 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .top-2\/5 {
     top: calc(2 / 5 * 100%);
   }
@@ -292,18 +286,12 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
   .left-1\/4 {
     left: calc(1 / 4 * 100%);
   }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
   .left-2\/5 {
     left: calc(2 / 5 * 100%);
   }
@@ -379,12 +367,6 @@
   .inline-block {
     display: inline-block;
   }
-  .table {
-    display: table;
-  }
-  .h-2 {
-    height: calc(var(--spacing) * 2);
-  }
   .h-2\/4 {
     height: calc(2 / 4 * 100%);
   }
@@ -403,24 +385,15 @@
   .h-screen {
     height: 100vh;
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/4 {
     width: calc(1 / 4 * 100%);
   }
-  .w-2 {
-    width: calc(var(--spacing) * 2);
-  }
   .w-2\/4 {
     width: calc(2 / 4 * 100%);
   }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
-  .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
   .w-11\/12 {
     width: calc(11 / 12 * 100%);
   }
@@ -457,21 +430,10 @@
   .flex-1 {
     flex: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -482,9 +444,6 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -709,9 +668,6 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
-  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -830,9 +786,6 @@
   .italic {
     font-style: italic;
   }
-  .underline {
-    text-decoration-line: underline;
-  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -852,19 +805,11 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1081,11 +1026,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -1170,7 +1110,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/template/src/frontend/views/_.ejs

@@ -1,83 +1,96 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg+xml" href="/static/cache/favicon_50x50.webp" />
-    <link href="/static/style.css" rel="stylesheet"/>
-    <link href="/static/style2.css" rel="stylesheet"/>
-    <title>Gardener: The Mini Web Framework</title>
-  </head>
-  <body class="bg-slate-50 text-slate-900 font-sans">
 
-    <div class='hidden' id='fileName'><%=fileName%></div>
-    <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
-    <div class='notification'></div>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="/static/cache/favicon_50x50.webp" />
+  <link href="/static/style.css" rel="stylesheet" />
+  <link href="/static/style2.css" rel="stylesheet" />
+  <title>Gardener: The Mini Web Framework</title>
+</head>
 
-    <div id='main'>
+<body class="bg-slate-50 text-slate-900 font-sans">
 
+  <div class='hidden' id='fileName'>
+    <%=fileName%>
+  </div>
+  <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
+  <div class='notification'></div>
 
-      <!-- hero -->
-      <div class='hero flex-wrap w-full h-screen bg-green-200 flex justify-center items-center px-10'>
-        <div class='w-200'>
-          <a href="https://ritish.site">Home</a> > <a href="https://ritish.site/projects">Projects</a> > <a href="/">Gardener</a>
-          <h1 class='text-6xl my-10 font-bold text-green-900'>Gardener</h1>
-          <h2 class='text-2xl font-bold text-green-800 mb-4'>Develop With No Bloat</h2>
-          <p class="text-lg mb-6 max-w-md">Gardener is a lightweight, DOM-first front-end library. No virtual DOM, no JSX, and no compilation step. Just the real DOM.</p>
-          <div class='flex gap-2 m-2'>
-          <a class="block bg-green-700 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-800 transition" href='/get-started'>Get Started</a>
-          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition" href='/documentation/#introduction'>Documentation</a>
-          </div>
-          <div class='flex gap-2 m-2'>
-          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition" href='https://github.com/ritishDas/Gardener'>View On Github</a>
-          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition" href='https://www.npmjs.com/package/create-gardener'>View On npm</a>
-          </div>
+  <div id='main'>
+
+
+    <!-- hero -->
+    <div class='hero flex-wrap w-full h-screen bg-green-200 flex justify-center items-center px-10'>
+      <div class='w-200'>
+        <a href="https://ritish.site">Home</a> > <a href="https://ritish.site/projects">Projects</a> > <a
+          href="/">Gardener</a>
+        <h1 class='text-6xl my-10 font-bold text-green-900'>Gardener</h1>
+        <h2 class='text-2xl font-bold text-green-800 mb-4'>Develop With No Bloat</h2>
+        <p class="text-lg mb-6 max-w-md">Gardener is a lightweight, DOM-first front-end library. No virtual DOM, no JSX,
+          and no compilation step. Just the real DOM.</p>
+        <div class='flex gap-2 m-2'>
+          <a class="block bg-green-700 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-800 transition"
+            href='/get-started'>Get Started</a>
+          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition"
+            href='/documentation/#introduction'>Documentation</a>
+        </div>
+        <div class='flex gap-2 m-2'>
+          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition"
+            href='https://github.com/ritishDas/Gardener'>View On Github</a>
+          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition"
+            href='https://www.npmjs.com/package/create-gardener'>View On npm</a>
         </div>
-        <img src="/static/cache/gardener_500x500.webp" alt="Gardener Logo" class="w-96 h-96 object-contain ml-10">
       </div>
+      <img src="/static/cache/gardener_500x500.webp" alt="Gardener Logo" class="w-96 h-96 object-contain ml-10">
+    </div>
 
-      <!-- Copy command -->
-<div class="flex w-1/4 items-center mx-auto my-15 justify-between gap-4 bg-[#1e1e1e] border border-gray-700 rounded-lg px-4 py-3 font-mono shadow-sm group">
-  <span class="text-sm md:text-base text-gray-300 select-all">
-    <span class="text-emerald-400 mr-2">$</span><span class='initCommand'>pnpm create gardener app</span>
-  </span>
-  
-  <button class="copybtn flex items-center justify-center p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded transition-all duration-200 active:scale-95" title="Copy to clipboard">
-    <span class="w-5 h-5" >
-      <%- include('partials/icons/clipboard') %>
-    </span>
-  </button>
-</div>
-      <!-- Philosophy -->
-      <div class="max-w-5xl mx-auto py-20 px-6 grid md:grid-cols-2 gap-12">
-        <div>
-          <h3 class="text-3xl font-bold mb-4 text-green-900">✨ Philosophy</h3>
-          <ul class="space-y-3 text-slate-700">
-            <li><strong>DOM-First:</strong> Renders directly to the real DOM.</li>
-            <li><strong>Deterministic:</strong> If you can inspect it, you can understand it.</li>
-            <li><strong>Native:</strong> Works in the browser via ES modules.</li>
-            <li><strong>Zero Build:</strong> No bundlers or magic required.</li>
-          </ul>
-        </div>
+    <!-- Copy command -->
+    <div
+      class="flex w-1/4 items-center mx-auto my-15 justify-between gap-4 bg-[#1e1e1e] border border-gray-700 rounded-lg px-4 py-3 font-mono shadow-sm group">
+      <span class="text-sm md:text-base text-gray-300 select-all">
+        <span class="text-emerald-400 mr-2">$</span><span class='initCommand'>pnpm create gardener app</span>
+      </span>
+
+      <button
+        class="copybtn flex items-center justify-center p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded transition-all duration-200 active:scale-95"
+        title="Copy to clipboard">
+        <span class="w-5 h-5">
+          <%- include('partials/icons/clipboard') %>
+        </span>
+      </button>
+    </div>
+    <!-- Philosophy -->
+    <div class="max-w-5xl mx-auto py-20 px-6 grid md:grid-cols-2 gap-12">
+      <div>
+        <h3 class="text-3xl font-bold mb-4 text-green-900">✨ Philosophy</h3>
+        <ul class="space-y-3 text-slate-700">
+          <li><strong>DOM-First:</strong> Renders directly to the real DOM.</li>
+          <li><strong>Deterministic:</strong> If you can inspect it, you can understand it.</li>
+          <li><strong>Native:</strong> Works in the browser via ES modules.</li>
+          <li><strong>Zero Build:</strong> No bundlers or magic required.</li>
+        </ul>
+      </div>
 
-        <!-- Features -->
-        <div>
-          <h3 class="text-3xl font-bold mb-4 text-green-900">🚀 Features</h3>
-          <div class="grid grid-cols-2 gap-4">
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Declarative UI</div>
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">SVG Namespace Support</div>
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Hot Reload</div>
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Image Optimization</div>
-          </div>
+      <!-- Features -->
+      <div>
+        <h3 class="text-3xl font-bold mb-4 text-green-900">🚀 Features</h3>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Declarative UI</div>
+          <div class="p-4 bg-white shadow-sm border border-green-100 rounded">SVG Namespace Support</div>
+          <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Hot Reload</div>
+          <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Image Optimization</div>
         </div>
       </div>
+    </div>
 
-      <!-- Api Example -->
-      <div class="bg-slate-900 py-20 text-white">
-        <div class="max-w-5xl mx-auto px-6">
-          <h3 class="text-3xl font-bold mb-8 text-center text-green-400">The Core API</h3>
-          <div class="bg-slate-800 p-6 rounded-xl border border-slate-700 font-mono text-sm overflow-x-auto">
-<pre class="text-blue-300">
+    <!-- Api Example -->
+    <div class="bg-slate-900 py-20 text-white">
+      <div class="max-w-5xl mx-auto px-6">
+        <h3 class="text-3xl font-bold mb-8 text-center text-green-400">The Core API</h3>
+        <div class="bg-slate-800 p-6 rounded-xl border border-slate-700 font-mono text-sm overflow-x-auto">
+          <pre class="text-blue-300">
 gardener({
   t: <span class="text-green-300">'div'</span>,
   cn: [<span class="text-green-300">'p-6'</span>, <span class="text-green-300">'flex'</span>],
@@ -91,35 +104,36 @@ gardener({
   ]
 })
 </pre>
-          </div>
         </div>
       </div>
+    </div>
 
-      <div class="max-w-5xl mx-auto py-20 px-6 text-center">
-        <h3 class="text-3xl font-bold mb-4 text-green-900">🧠 Simple State</h3>
-        <p class="mb-8 text-slate-600">No proxies. No diffing. Just clean, reactive callbacks.</p>
-        <div class="inline-block text-left bg-white p-6 rounded shadow-lg border-t-4 border-green-500 font-mono text-sm">
-          <p class="text-slate-500">// Initialize</p>
-          <p>const count = new State(0);</p>
-          <p class="text-slate-500 mt-2">// React</p>
-          <p>count.registerCb(val => updateUI(val));</p>
-        </div>
+    <div class="max-w-5xl mx-auto py-20 px-6 text-center">
+      <h3 class="text-3xl font-bold mb-4 text-green-900">🧠 Simple State</h3>
+      <p class="mb-8 text-slate-600">No proxies. No diffing. Just clean, reactive callbacks.</p>
+      <div class="inline-block text-left bg-white p-6 rounded shadow-lg border-t-4 border-green-500 font-mono text-sm">
+        <p class="text-slate-500">// Initialize</p>
+        <p>const count = new State(0);</p>
+        <p class="text-slate-500 mt-2">// React</p>
+        <p>count.registerCb(val => updateUI(val));</p>
       </div>
-
-      <!-- Footer -->
-      <footer class="bg-green-900 text-green-100 py-12 text-center">
-        <p class="text-xl italic">"Because sometimes you don't need a forest. Just a garden."</p>
-        <div class="mt-6 text-sm opacity-70">
-          MIT Licensed | Built on Express & EJS
-        </div>
-      </footer>
     </div>
 
-  </body>
-  <% if (process.env.NODE_ENV === 'production') { %>
-    <script type='module' src='/static/bundle/bundle.<%=fileName%>.js'></script>
+    <!-- Footer -->
+    <footer class="bg-green-900 text-green-100 py-12 text-center">
+      <p class="text-xl italic">"Because sometimes you don't need a forest. Just a garden."</p>
+      <div class="mt-6 text-sm opacity-70">
+        MIT Licensed | Built on Express & EJS
+      </div>
+    </footer>
+  </div>
+
+</body>
+<% if (process.env.NODE_ENV==='production' ) { %>
+  <script type='module' src='/static/bundle/bundle.<%=fileName%>.js'></script>
   <% } else { %>
     <script type='module' src='/static/global.js'></script>
     <script type='module' src='/static/pages/pages._.js'></script>
-  <% } %>
-</html>
+    <% } %>
+
+</html>

package/template/build/backend/controllers/gardener/addComponent.d.ts

@@ -1,8 +0,0 @@
-import type { Request, Response } from "express";
-interface AddComponentBody {
-    path: string;
-    component: string;
-}
-export declare function addComponent(req: Request<{}, {}, AddComponentBody>, res: Response): Promise<void>;
-export {};
-//# sourceMappingURL=addComponent.d.ts.map

package/template/build/backend/controllers/gardener/addComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"addComponent.d.ts","sourceRoot":"","sources":["../../../../src/backend/controllers/gardener/addComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIjD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAQD,wBAAsB,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,gBAAgB,CAAC,EAAE,GAAG,EAAE,QAAQ,iBAWvF"}

package/template/build/backend/controllers/gardener/addComponent.js

@@ -1,19 +0,0 @@
-import fsp from "fs/promises";
-import path from 'path';
-import { fileURLToPath } from "url";
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
-export async function addComponent(req, res) {
-    try {
-        const { path: filePath, component } = req.body;
-        await fsp.mkdir(path.join(frontendDir, 'static', 'components'), { recursive: true });
-        await fsp.writeFile(path.join(frontendDir, `${filePath}`), component, "utf8");
-        res.json({ success: true });
-    }
-    catch (err) {
-        const error = err;
-        res.json({ success: false, msg: error.message });
-    }
-}
-//# sourceMappingURL=addComponent.js.map

package/template/build/backend/controllers/gardener/addComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"addComponent.js","sourceRoot":"","sources":["../../../../src/backend/controllers/gardener/addComponent.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,aAAa,CAAC;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAE3C,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;AAE1E,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,GAAsC,EAAE,GAAa;IACtF,IAAI,CAAC;QACH,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,GAAG,CAAC,IAAI,CAAC;QAC/C,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QACrF,MAAM,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QAC9E,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9B,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,MAAM,KAAK,GAAG,GAAY,CAAC;QAC3B,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IACnD,CAAC;AACH,CAAC"}