create-gardener 1.1.10 → 1.1.12

package/Readme.md

@@ -1,43 +1,375 @@
-# Gardener 🌱
+---
+
+# 🌱 Gardener
+
+**Gardener** is a lightweight, DOM-first front-end library for building and manipulating HTML/SVG elements using a clean, declarative JavaScript object syntax.
+
+No virtual DOM.
+No JSX.
+No compilation step.
+No magic.
+
+Everything is explicit and inspectable directly in the browser.
+
+---
+
+## ✨ Philosophy
+
+Gardener follows a **DOM-first, deterministic approach**:
+
+* No Virtual DOM
+* No JSX
+* No compilation / bundler required
+* No runtime abstraction layers
+* Everything renders directly to the real DOM
+* Works natively in the browser (ES modules)
+
+If you can inspect it in DevTools, you can understand it.
+
+---
+
+## 🚀 Features
+
+* Declarative object-based DOM creation
+* Automatic SVG namespace handling
+* Development server support
+* Hot Reload (dev mode)
+* HTML → Component parser
+* Dynamic image resizing & caching
+* Static site generation
+* Lightweight reactive `State` system
+* Zero build step required
+
+---
+
+# 📦 Installation
+
+Simply include the module:
+
+```html
+<script type="module" src="/gardener.js"></script>
+```
+
+No bundler required.
+
+---
+
+# 🌿 Core API
+
+## 1️⃣ `gardener()` — Declarative Element Builder
+
+```js
+gardener({
+  t: 'div',
+  cn: ['p-6', 'flex', 'gap-4'],
+  attr: { id: 'hero', role: 'banner' },
+  txt: 'Welcome',
+  events: {
+    click: () => console.log('clicked!')
+  },
+  children: [
+    { t: 'span', txt: 'Nested child' }
+  ]
+})
+```
+
+### Supported Keys
+
+| Key        | Description                      |
+| ---------- | -------------------------------- |
+| `t`        | Tag name (HTML or SVG)           |
+| `cn`       | Array of class names             |
+| `attr`     | Attributes / properties object   |
+| `txt`      | Text content                     |
+| `events`   | `{ eventName: handler }`         |
+| `children` | Array of nested gardener objects |
+
+---
+
+## 2️⃣ DOM Helpers
+
+```js
+fetchElement(selector)
+appendElement(parent, child)
+replaceElement(oldElement, newElement)
+createElement(type, classes)
+insertText(element, text)
+addEL(parent, event, handler)
+```
+
+Example:
+
+```js
+const el = gardener({ t: 'h1', txt: 'Hello' });
+appendElement('body', el);
+```
+
+---
+
+# 🔄 SVG Support
+
+Gardener automatically uses the correct SVG namespace for:
+
+```
+svg, path, circle, rect, line, polygon, polyline, g, defs, clipPath, use
+```
+
+Example:
+
+```js
+gardener({
+  t: 'svg',
+  attr: { width: 100, height: 100 },
+  children: [
+    { t: 'circle', attr: { cx: 50, cy: 50, r: 40, fill: 'red' } }
+  ]
+})
+```
+
+---
+
+# 🧠 State Management
+
+A minimal reactive system.
+
+```js
+const count = new State(0);
+
+count.registerCb(value => {
+  console.log("New value:", value);
+});
+
+count.setTo(1);
+```
+
+### API
+
+* `new State(initialValue)`
+* `.registerCb(callback)`
+* `.setTo(newValue)`
+
+No proxies. No diffing. Just callbacks.
+
+---
+
+# 🔥 Development Mode
+
+Configure runtime behavior:
+
+```js
+const config = {
+  mode: 'dev',           // 'dev' | 'prod'
+  componentdir: 'static/components',
+  hotreload: false
+}
+```
+
+## Dev Mode Includes:
+
+* Floating "+" page creator
+* Component parser
+* Hot reload toggle
+* Static site builder
 
-**Gardener** is a small development toolkit and micro-framework for building websites with **declarative DOM JSON**, server-rendered templates, and a **custom static site generation pipeline**.
+---
+
+# ♻️ Hot Reload
+
+* State stored in `localStorage`
+* Reloads page ~1 second after change
+* Toggle with:
+
+```
+Alt + H
+```
+
+Or use the built-in checkbox (dev mode only).
+
+---
+
+# 🧩 Component Parser
+
+Turn existing HTML into reusable JS components.
+
+### Step 1 — Write HTML
+
+```html
+<div id="user-card">
+  Hello, ?name?
+</div>
+```
+
+### Step 2 — Run in console
+
+```js
+parser('#user-card')
+```
+
+### Step 3 — Generated File
+
+```js
+export default function thisfun({ name }) {
+  return gardener({
+    t: "div",
+    txt: "Hello, " + name
+  })
+}
+```
+
+---
+
+## 🧾 Parameter Syntax
+
+Use:
+
+```
+?variable?
+```
+
+Gardener extracts variables and generates a function with those parameters.
+
+---
+
+# 🖼 Image Optimization
+
+Place originals in:
+
+```
+/src/frontend/assets/
+```
+
+Use:
+
+```html
+<img src="/static/cache/photo_800x600.webp">
+```
+
+Server will:
 
-It is designed for developers who want:
+* Resize
+* Convert to WebP
+* Cache automatically
 
-* full control over HTML structure
-* minimal abstractions
-* a fast local dev experience
-* a deterministic static output for production
+---
+
+# 📄 Create New Pages (Dev Mode)
 
-Gardener sits somewhere between a tiny framework and a build system.
+1. Click floating `+`
+2. Enter route (e.g., `/about`)
+3. Page auto-generated
+4. Browser redirects
 
-Use it with 
+Template used:
+
+```
+/src/backend/frontendtemplate.ejs
+```
 
-`npm create-gardener filename`
 ---
 
-* [See Docs](https://ritish.site/Gardener)
+# 🏗 Static Site Generation
 
+Visit:
 
-* [Github](https://github.com/ritishDas/Gardener)
+```
+/createstatic
+```
 
+Build output:
 
+```
+/src/frontendStatic
+```
 
+---
 
-## Contributing
+# 🧩 How It Works
 
-This is a small personal/dev-focused toolkit.
+Gardener:
 
-Contributions are welcome:
+1. Converts object → real DOM
+2. Applies attributes safely
+3. Handles properties vs attributes
+4. Recursively renders children
+5. Avoids virtual DOM entirely
 
-* bug fixes
-* documentation improvements
-* build pipeline enhancements
-* security hardening
+The browser is the rendering engine.
 
 ---
 
-## License
+# 🎯 When To Use Gardener
+
+Good for:
+
+* Lightweight SPAs
+* Internal tools
+* Static + hybrid sites
+* Dev tooling
+* Projects where you want full DOM control
+* No-build-step environments
+
+Not designed to replace React/Vue — designed to avoid them when unnecessary.
+
+---
+
+# 🛠 Example App
+
+```js
+import { gardener, appendElement } from './gardener.js';
+
+const app = gardener({
+  t: 'div',
+  cn: ['app'],
+  children: [
+    { t: 'h1', txt: 'Hello World' },
+    {
+      t: 'button',
+      txt: 'Click Me',
+      events: {
+        click: () => alert('Hi!')
+      }
+    }
+  ]
+});
+
+appendElement('body', app);
+```
+
+---
+
+# 📁 Project Structure (Suggested)
+
+```
+/src
+  /frontend
+  /backend
+  /frontendStatic
+/static
+  /components
+gardener.js
+```
+
+---
+
+# 🧭 Roadmap Ideas
+
+* Fine-grained reactive bindings
+* Dev inspector panel
+* Server-side rendering mode
+* Plugin API
+* Optional diff mode
+
+---
+
+# 📜 License
+
+MIT (recommended)
+
+---
+
+# 🌿 Why Gardener?
+
+Because sometimes you don't need a forest.
 
-MIT
+Just a garden.
 

package/package.json

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

package/template/buildHelper.js

@@ -0,0 +1,11 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+async function buildHelper() {
+  const src = path.resolve('src', 'frontend');
+  const dest = path.resolve('build', 'frontend');
+
+  await fs.cp(src, dest, { recursive: true });
+}
+
+buildHelper();// const path = require('path');

package/template/package.json

@@ -1,14 +1,14 @@
 {
   "name": "create-gardener",
-  "version": "1.1.8",
+  "version": "1.1.11",
   "description": "A dom gardener converting dom elements into json and vice versa",
   "main": "src/build/server.js",
   "type": "module",
   "scripts": {
     "start": "node src/build/server.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "concurrently \"tsx watch src/backend/server.ts\" \"tailwindcss -w -i src/frontend/tailwind.css -o src/frontend/style.css\"",
- "build": "tsc"
+    "dev": "concurrently \"tsx watch src/backend/server.ts\" \"tailwindcss -w -i src/frontend/tailwind.css -o src/frontend/static/style.css\"",
+    "build": "tailwindcss -i src/frontend/tailwind.css -o src/frontend/static/style.css --minify && tsc && node buildHelper.js"
   },
   "keywords": [],
   "author": "ritishDas",

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

@@ -1,4 +1,5 @@
-import { Router } from "express"
+import type { Request, Response } from 'express';
+import { Router } from "express";
 import { addComponent, addPage, createStatic, imageOptimiser } from "../controllers/gardener.controller.js";
 
 const router: Router = Router();
@@ -16,6 +17,6 @@ router.route('/addpage').post(addPage);
 
 
 
-router.route('/').get((req, res) => res.render('_'));
-router.route('/login').get((req, res) => res.render('_login'));
+router.route('/').get((req: Request, res: Response) => res.render('_'));
+router.route('/login').get((req: Request, res: Response) => res.render('_login'));
 

package/template/src/frontend/gardenerST.js

@@ -54,7 +54,7 @@ font-size:14px;
       {
         t: 'span',
         attr: { style: 'color:#22c55e;font-weight:bold;' },
-        txt: 'Ctrl+h'
+        txt: 'Alt+h'
       },
       { t: 'span', txt: ' to toggle Hot Reload' },
       {
@@ -79,8 +79,7 @@ font-size:14px;
   applyHotReloadState();
 
   document.addEventListener('keydown', function(e) {
-    // Detect Ctrl + H
-    if (e.ctrlKey && e.key.toLowerCase() === 'h') {
+    if (e.altKey && e.key.toLowerCase() === 'h') {
       e.preventDefault();   // Stop browser from opening history
       // Your logic here...
       togglehotreload();
@@ -395,7 +394,6 @@ export function parser(element, isParent = true) {
   return obj
 
 
-  //Let Browser do the migration from html to json and then use copy paste
 }
 
 
@@ -406,25 +404,20 @@ export function addEL(parent, event, fun) {
   parent.addEventListener(event, fun)
 }
 
-export function imagePreloader(images) {
-  const body = fetchElement('body')
-  images.forEach(entry => {
-    appendElement(body, gardener({
-      t: 'img',
-      cn: ['preloaderimage'],
-      attr: {
-        src: entry,
-        alt: entry
-      }
-    }));
-
-    setTimeout(() => {
-      const images = document.querySelectorAll('.preloaderimage');
-      images.forEach(entry => { entry.style.display = 'none' });
-    }, 0)
 
-  })
+export class State {
+  constructor(value) {
+    this.value = value;
+    this.cb = [];
+  }
+  registerCb(cb) {
+    cb(this.value);
+    this.cb.push(cb);
+  }
+  setTo(val) {
+    this.value = val;
+    this.cb.forEach(cb => { cb(val) });
+  }
 }
 
 
-

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

@@ -80,7 +80,7 @@ if (config.mode === 'dev') {
       {
         t: 'span',
         cn: ['text-green-500', 'font-bold'],
-        txt: 'Ctrl+h'
+        txt: 'Alt+h'
       },
       {
         t: 'span',
@@ -116,7 +116,7 @@ if (config.mode === 'dev') {
   togglehotreload();
   document.addEventListener('keydown', function(e) {
     // Detect Ctrl + H
-    if (e.ctrlKey && e.key.toLowerCase() === 'h') {
+    if (e.altKey && e.key.toLowerCase() === 'h') {
       e.preventDefault();   // Stop browser from opening history
       // Your logic here...
       togglehotreload();
@@ -383,9 +383,6 @@ export default function thisfun({${extractedList}}) {
 }
 
 
-// Example:
-// const result = cleanStringAndList('hi "{ritish}" how are you');
-// console.log(result.cleanedString); // "hi ritish how are you"
 // console.log(result.extractedList);  // ["ritish"]
 
 
@@ -458,24 +455,19 @@ export function addEL(parent, event, fun) {
   parent.addEventListener(event, fun)
 }
 
-export function imagePreloader(images) {
-  const body = fetchElement('body')
-  images.forEach(entry => {
-    appendElement(body, gardener({
-      t: 'img',
-      cn: ['preloaderimage'],
-      attr: {
-        src: entry,
-        alt: entry
-      }
-    }));
-
-    setTimeout(() => {
-      const images = document.querySelectorAll('.preloaderimage');
-      images.forEach(entry => { entry.style.display = 'none' });
-    }, 0)
-
-  })
+export class State {
+  constructor(value) {
+    this.value = value;
+    this.cb = [];
+  }
+  registerCb(cb) {
+    cb(this.value);
+    this.cb.push(cb);
+  }
+  setTo(val) {
+    this.value = val;
+    this.cb.forEach(cb => { cb(val) });
+  }
 }
 
 

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

@@ -52,6 +52,7 @@ function pageloader() {
   setTimeout(() => loader.remove(), 400)
 
 }
+
 //console.log('hellooo');
 //parser(fetchElement('.hero'));
 //parser(fetchElement('nav'));