create-gardener 1.1.3 → 1.1.4

package/template/src/frontendStatic/gardener.js

@@ -1,404 +0,0 @@
-const config = {
-  mode: 'dev',
-  componentdir: 'components',
-  hotreload: true
-}
-
-let hotReloadtimeout;
-const body = fetchElement('body');
-let hotReload = localStorage.getItem('hotreload');
-
-if (hotReload === null) hotReload = config.hotreload;
-else if (hotReload === 'true') hotReload = true
-else if (hotReload === 'false') hotReload = false
-
-function opnPagedialog(btn = true) {
-  if (btn) {
-    const dialog = gardener({
-      t: 'form', cn: ['addpageform', 'fixed', 'left-2/5', 'bg-gray-200', 'rounded-lg', 'block', 'top-2/5', 'p-2', 'flex', 'flex-col', 'p-5', 'gap-2'], events: {
-        submit: async (e) => {
-          try {
-            e.preventDefault()
-            const data = new FormData(e.target);
-            const input = Object.fromEntries(data.entries());
-            console.log(input)
-
-            const response = await fetch('/addpage', {
-              method: 'POST',
-              headers: {
-                "Content-Type": 'application/json'
-              },
-              body: JSON.stringify(input)
-            }).then(res => res.json())
-            console.log(response)
-            opnPagedialog(false)
-            window.location.href = input.page
-          }
-          catch (err) {
-            console.log(err)
-          }
-
-        }
-      }, children: [{
-        t: 'label',
-        txt: 'ENTER PATH FOR NEW PAGE'
-      }, { t: 'input', attr: { name: 'page' }, cn: ['pathinput'] }]
-
-    })
-
-    console.log('test')
-    appendElement(body, dialog);
-    fetchElement('.pathinput').focus();
-  }
-  else {
-    console.log('removed')
-    fetchElement('.addpageform').remove();
-  }
-}
-
-if (config.mode === 'dev') {
-  const addPagebtn = gardener({
-    t: 'button',
-    cn: ['pb-1.5', 'flex', 'items-center', 'justify-center', 'h-15', 'w-15', 'bg-green-300', 'fixed', 'bottom-22', 'right-2', 'rounded-full', 'text-5xl'],
-    children: [{ t: 'span', txt: '+' }],
-    events: {
-      click: opnPagedialog
-    }
-  });
-
-  appendElement(body, addPagebtn);
-
-
-  appendElement(body, 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: 'Ctrl+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'
-          }
-        }]
-      }
-    ]
-  }))
-
-  //appendElement(body, gardener())
-
-
-  togglehotreload();
-  document.addEventListener('keydown', function(e) {
-    // Detect Ctrl + H
-    if (e.ctrlKey && e.key.toLowerCase() === 'h') {
-      e.preventDefault();   // Stop browser from opening history
-      // Your logic here...
-      togglehotreload();
-    }
-  });
-}
-
-//if (config.mode === 'dev') {
-
-
-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);
-  }
-  else {
-    hrcheck.style.background = 'red';
-    fetchElement('.hrcheckbox').checked = false;
-    localStorage.setItem('hotreload', 'false');
-    clearTimeout(hotReloadtimeout);
-  }
-
-  //localStorage.setItem('hotreload', hotReload);
-}
-
-export function parserWindow(text) {
-  if (config.mode !== 'dev') return;
-
-
-  const result = gardener({
-    t: 'div',
-    cn: ['fixed', 'border-2', 'border-black', 'bg-gray-500', 'text-white', 'rounded-lg', 'z-90', 'w-2/4', 'h-2/4', 'left-1/4', 'flex', 'flex-col', 'justify-between', 'top-1/4'],
-    children: [
-      {
-        t: 'div',
-        cn: ['bg-gray-200', 'h-15', 'text-black', 'rounded-t-lg', 'flex', 'items-center', 'justify-around'],
-        children: [
-          {
-            t: 'h3',
-            cn: ['font-bold'],
-            txt: 'Parser Window'
-          },
-          {
-            t: 'button',
-            cn: ['p-2', 'bg-red-300', 'rounded-lg', 'cursor-pointer'],
-            txt: 'Add Component',
-            attr: {
-              id: 'copybtn'
-            },
-            events: {
-              click: copytxt
-            }
-          }
-        ]
-      },
-      {
-        t: 'p',
-        cn: ['p-5', 'overflow-scroll'],
-        txt: text
-      },
-    ]
-  })
-
-  function copytxt() {
-    result.remove()
-
-    const compform = gardener({
-      t: 'form',
-      events: {
-        submit: (event) => {
-          event.preventDefault()
-          copyText(text, `${fetchElement('.componentInp').value}.js`)
-          compform.remove();
-        }
-      },
-      cn: ['fixed', 'left-2/5', 'bg-gray-500', 'rounded-lg', 'block', 'top-2/5', 'p-2'],
-      children: [
-        {
-          t: 'input',
-          cn: ['bg-white', 'componentInp'],
-          attr: {
-            type: 'text',
-            placeholder: 'Component Name'
-          }
-        }
-      ]
-    });
-    appendElement(body, compform);
-
-    fetchElement('.componentInp').focus();
-    //setTimeout(() => result.remove(), 500);
-  }
-
-  appendElement(body, result);
-}
-
-
-
-async function copyText(txt, path) {
-  // await navigator.clipboard.writeText(txt);
-  try {
-    const res = await fetch('/addcomponent', {
-      method: 'POST',
-      headers: {
-        "Content-Type": 'application/json'
-      },
-      body: JSON.stringify({ component: txt, path: `${config.componentdir}/${path}` })
-    })
-
-    if (!res.ok) console.error('wrong');
-
-    const data = await res.json()
-    console.log(data);
-
-  }
-  catch (err) {
-    console.error(err);
-  }
-
-}
-
-
-
-
-export function fetchElement(param) {
-  return document.querySelector(param);
-}
-
-export function appendElement(parent, child) {
-  parent.appendChild(child);
-}
-
-export function createElement(type, classname) {
-  let element = document.createElement(type);
-  if (classname)
-    element.classList.add(...classname);
-  return element;
-}
-
-export function insertText(element, text) {
-  element.innerText = text;
-}
-
-export function replaceElement(original, New) {
-  original.replaceWith(New);
-}
-
-export function gardener(Dom) {
-
-  if (Dom.nodeType === 1) return Dom;
-  // detect if this is an SVG element
-  const isSVG = [
-    'svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline', 'g', 'defs', 'clipPath', 'use'
-  ].includes(Dom.t);
-
-  // create element accordingly
-  let element;
-
-  if (isSVG) {
-    element = document.createElementNS('http://www.w3.org/2000/svg', Dom.t);
-    if (Dom.cn)
-      element.classList.add(...Dom.cn);
-  }
-  else {
-    element = createElement(Dom.t, Dom.cn);
-  }
-
-  // text content (skip for SVG like <path>)
-  if (Dom.txt) {
-    insertText(element, Dom.txt);
-  }
-
-  // apply attributes safely
-  const propertyNames = new Set([
-    'value', 'selected', 'muted', 'disabled',
-    'selectedIndex', 'volume', // etc.
-  ]);
-
-  if (Dom.attr) {
-    for (const [key, value] of Object.entries(Dom.attr)) {
-      if (isSVG || key.startsWith('data-') || key.startsWith('aria-')) {
-        element.setAttribute(key, value);
-      } else if (key in element && !propertyNames.has(key)) {
-        // Prefer property for known safe cases
-        try { element[key] = value === '' ? true : value; } catch (e) { element.setAttribute(key, value); }
-      } else {
-        element.setAttribute(key, value);
-      }
-    }
-  }
-
-  if (Dom.events) {
-    Object.entries(Dom.events).forEach(([eventName, handler]) => {
-      element.addEventListener(eventName, handler);
-    });
-  }
-
-  // recursively handle children
-  if (Dom.children) {
-    Dom.children.forEach(child => appendElement(element, gardener(child)));
-  }
-
-  return element;
-}
-
-export function parser(element, isParent = true) {
-  if (typeof element === 'string') {
-    // If user passes raw HTML string
-    const temp = document.createElement('div');
-    temp.innerHTML = element.trim();
-    element = temp.firstElementChild;
-  }
-
-  const obj = {
-    t: element.tagName.toLowerCase(),
-  };
-
-  // add classes if present
-  if (element.classList.length) {
-    obj.cn = Array.from(element.classList);
-  }
-
-  // add attributes if present
-  const attrs = {};
-  for (const attr of element.attributes) {
-    if (attr.name !== 'class') attrs[attr.name] = attr.value;
-  }
-  if (Object.keys(attrs).length) obj.attr = attrs;
-  // add text content (only if no children)
-  if (element.childNodes.length === 1 && element.firstChild.nodeType === Node.TEXT_NODE) {
-    obj.txt = element.textContent.trim();
-
-    if (isParent) {
-      parserWindow(JSON.stringify(obj))
-    }
-
-    return obj;
-  }
-
-  // add children recursively
-  const children = [];
-  for (const child of element.children) {
-    children.push(parser(child, false));
-  }
-  if (children.length) obj.children = children;
-
-
-  if (isParent) {
-    parserWindow(JSON.stringify(obj))
-  }
-
-  return obj
-  //Let Browser do the migration from html to json and then use copy paste
-}
-
-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)
-
-  })
-}
-
-

package/template/src/frontendStatic/global.js

@@ -1,57 +0,0 @@
-import { parser, fetchElement, replaceElement, gardener, appendElement } from './gardener.js'
-
-const body = fetchElement('#body')
-
-nextPagehandler();
-pageloader();
-
-
-function nextPagehandler() {
-  const anchor = document.querySelectorAll('a')
-  anchor.forEach(link => {
-
-    link.addEventListener('click', (e) => {
-
-      //event delegation
-      const link = e.target.closest('a');
-      if (!link) return;
-      if (link.target === '_blank') return;
-      //event delegation
-
-      e.preventDefault();
-      appendElement(body, gardener({
-        t: 'div',
-        cn: ['tempnpdiv', 'top-0', 'left-[100vw]', 'absolute', 'h-screen', 'w-screen', 'shadow-[30px_0_60px_15px_rgb(0,0,0)]'],
-      }))
-      const width = window.innerWidth
-      console.log(width)
-      body.style.transition = '.2s';
-      body.style.transform = `translateX(-${width}px)`
-      setTimeout(() => {
-        window.location.href = link.href
-      }, 200)
-    })
-  })
-
-  window.addEventListener('pagehide', () => {
-    setTimeout(() => {
-      body.style.transform = 'translateX(0px)';
-      setTimeout(() => {
-        fetchElement('.tempnpdiv').remove()
-
-      }, 200)
-    }, 200);
-  });
-
-}
-
-function pageloader() {
-  const loader = fetchElement('.loader');
-  loader.style.transition = '.4s';
-  loader.style.opacity = '0';
-  setTimeout(() => loader.remove(), 400)
-
-}
-//console.log('hellooo');
-//parser(fetchElement('.hero'));
-//parser(fetchElement('nav'));

package/template/src/frontendStatic/index.html

@@ -1,216 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Gardener – Declarative DOM Library</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Assume your custom styles are still here -->
-  <link href="/style.css" rel="stylesheet"/>
-</head>
-
-<body class="bg-slate-50 text-slate-900 antialiased">
-
-  <div class="max-w-7xl mx-auto px-6 py-12 space-y-20">
-
-    <!-- Hero / Introduction -->
-    <section class="bg-gradient-to-br from-emerald-50 to-cyan-50 rounded-3xl p-10 lg:p-16 shadow-xl">
-      <div class="flex flex-col lg:flex-row items-center justify-between gap-12">
-        <div class="max-w-2xl space-y-6">
-          <h1 class="text-4xl lg:text-5xl font-bold text-slate-800">Gardener</h1>
-          <p class="text-xl text-slate-700 leading-relaxed">
-            Gardener is a lightweight front-end library for creating and manipulating DOM elements using a clean, declarative JavaScript object syntax.
-          </p>
-          <p class="text-lg text-slate-600 leading-relaxed">
-            It comes with a development server featuring hot reload, on-the-fly component creation from existing HTML, dynamic image resizing & caching, and zero virtual DOM / JSX / build-step philosophy.
-          </p>
-        </div>
-
-        <img
-          src="/cache/gardener_500x500.webp"
-          alt="Gardener logo"
-          class="w-64 lg:w-80 rounded-2xl shadow-2xl"
-        />
-      </div>
-    </section>
-
-    <!-- Design Philosophy -->
-    <section class="bg-linear-to-br from-slate-900 to-slate-800 rounded-3xl p-10 lg:p-12 shadow-2xl space-y-6">
-      <h2 class="text-3xl font-bold">Design Philosophy</h2>
-      <ul class="list-disc list-inside space-y-3 text-lg">
-        <li>No virtual DOM</li>
-        <li>No JSX</li>
-        <li>No compilation / build step</li>
-        <li>DOM-first and fully deterministic</li>
-        <li>Everything is explicit and inspectable in the browser</li>
-      </ul>
-    </section>
-
-    <!-- Core API -->
-    <section class="space-y-10">
-      <h2 class="text-3xl font-bold text-center lg:text-left">Core Utilities</h2>
-
-      <div class="grid md:grid-cols-2 gap-8">
-        <div class="bg-white p-8 rounded-2xl shadow space-y-4">
-          <h3 class="text-2xl font-semibold">DOM Helpers</h3>
-          <ul class="list-disc list-inside space-y-2 text-slate-700">
-            <li><code class="font-mono">fetchElement(selector)</code> — safe <code>querySelector</code> wrapper</li>
-            <li><code>appendElement(parent, child)</code> — append child node</li>
-            <li><code>replaceElement(oldElement, newElement)</code> — replace DOM node</li>
-            <li><code>createElement(type, classes)</code> — low-level element factory</li>
-            <li><code>imagePreloader(images)</code> — preload images efficiently</li>
-          </ul>
-        </div>
-
-        <div class="bg-white p-8 rounded-2xl shadow space-y-4">
-          <h3 class="text-2xl font-semibold">Gardener – The Declarative Builder</h3>
-          <pre class="bg-slate-900 text-slate-100 text-sm p-5 rounded-xl overflow-x-auto font-mono">
-<code>gardener({
-  t: 'div',
-  cn: ['p-6', 'flex', 'gap-4'],
-  attr: { id: 'hero', role: 'banner' },
-  txt: 'Welcome',
-  events: {
-    click: () => console.log('clicked!')
-  },
-  children: [ /* nested objects */ ]
-})</code>
-          </pre>
-        </div>
-      </div>
-
-      <div class="bg-white p-8 rounded-2xl shadow overflow-x-auto">
-        <table class="w-full text-left border border-slate-200">
-          <thead class="bg-slate-100">
-            <tr>
-              <th class="p-4 font-semibold">Key</th>
-              <th class="p-4 font-semibold">Description</th>
-            </tr>
-          </thead>
-          <tbody class="text-slate-700">
-            <tr><td class="p-4 border-t"><code>t</code></td>     <td class="p-4 border-t">HTML/SVG tag name</td></tr>
-            <tr><td class="p-4 border-t"><code>cn</code></td>    <td class="p-4 border-t">Array of class names</td></tr>
-            <tr><td class="p-4 border-t"><code>attr</code></td>  <td class="p-4 border-t">Attributes / properties object</td></tr>
-            <tr><td class="p-4 border-t"><code>txt</code></td>   <td class="p-4 border-t">Text content (string)</td></tr>
-            <tr><td class="p-4 border-t"><code>events</code></td><td class="p-4 border-t">Event listeners <code>{ event: handler }</code></td></tr>
-            <tr><td class="p-4 border-t"><code>children</code></td><td class="p-4 border-t">Array of nested gardener objects</td></tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-
-    <!-- Runtime Configuration -->
-    <section class="bg-white p-10 rounded-2xl shadow space-y-6">
-      <h2 class="text-3xl font-bold">Runtime Configuration</h2>
-      <pre class="bg-slate-900 text-slate-100 p-6 rounded-xl overflow-x-auto font-mono text-sm">
-<code>const config = {
-  mode: 'dev',           // 'dev' | 'prod'
-  componentdir: 'components',
-  hotreload: true
-}</code>
-      </pre>
-      <ul class="list-disc list-inside space-y-3 text-slate-700">
-        <li><strong>mode</strong>: <code>dev</code> → enables parser, hot reload, dev UI; <code>prod</code> → disables everything</li>
-        <li><strong>componentdir</strong>: folder for auto-generated component files</li>
-        <li><strong>hotreload</strong>: persisted in localStorage</li>
-      </ul>
-    </section>
-
-    <!-- Hot Reload -->
-    <section class="bg-white p-10 rounded-2xl shadow space-y-6">
-      <h2 class="text-3xl font-bold">Hot Reload (Dev Mode)</h2>
-      <ul class="list-disc list-inside space-y-3 text-slate-700">
-        <li>State saved in <code>localStorage</code></li>
-        <li>Auto-reload after ~1 second when enabled</li>
-        <li>Disabling cancels pending timers</li>
-      </ul>
-      <div class="inline-block bg-slate-100 px-5 py-3 rounded-xl mt-4">
-        <p class="font-semibold">Toggle shortcut: <kbd class="bg-white px-2 py-1 rounded border border-slate-300">Ctrl + H</kbd></p>
-      </div>
-    </section>
-
-    <!-- SVG Support -->
-    <section class="bg-white p-10 rounded-2xl shadow space-y-6">
-      <h2 class="text-3xl font-bold">SVG Support</h2>
-      <p class="text-slate-700">
-        Gardener automatically uses the SVG namespace for these tags:
-      </p>
-      <pre class="bg-slate-900 text-emerald-300 font-mono p-5 rounded-xl inline-block">
-<code>svg, path, circle, rect, line, polygon, polyline, g, defs, clipPath, use</code>
-      </pre>
-      <p class="text-slate-700">All attributes are applied via <code>setAttribute</code> safely.</p>
-    </section>
-
-    <!-- Creating & Using Components -->
-    <section class="grid lg:grid-cols-2 gap-10">
-      <div class="bg-white p-10 rounded-2xl shadow space-y-6">
-        <h2 class="text-3xl font-bold">Creating Components</h2>
-        <ol class="list-decimal list-inside space-y-4 text-slate-700">
-          <li>Write normal HTML + classes (give parent an <code>id</code> or unique selector)</li>
-          <li>Run: <code>parser(fetchElement('#your-id'))</code></li>
-          <li>Popup appears → choose component name</li>
-          <li>File saved to <code>/src/frontend/components/YourName.js</code></li>
-        </ol>
-      </div>
-
-      <div class="bg-white p-10 rounded-2xl shadow space-y-6">
-        <h2 class="text-3xl font-bold">Using Components</h2>
-        <pre class="bg-slate-900 text-slate-100 p-6 rounded-xl font-mono text-sm overflow-x-auto">
-<code>import { myHeader } from '/components/myHeader.js'
-
-replaceElement(
-  fetchElement('#header-placeholder'),
-  myHeader()
-)</code>
-        </pre>
-      </div>
-    </section>
-
-    <!-- Image Optimization -->
-    <section class="bg-white p-10 rounded-2xl shadow space-y-6">
-      <h2 class="text-3xl font-bold">Image Optimization & Caching</h2>
-      <ul class="list-disc list-inside space-y-3 text-slate-700">
-        <li>Place originals in <code>/src/frontend/assets/</code></li>
-        <li>Use: <code>&lt;img src="/cache/photo_800x600.webp"&gt;</code></li>
-      </ul>
-      <p class="text-slate-600 mt-4">
-        Server auto-converts to WebP, resizes, and caches on demand.
-      </p>
-    </section>
-
-    <!-- Development Tools -->
-    <section class="space-y-10">
-      <h2 class="text-3xl font-bold text-center">Development Tools</h2>
-
-      <div class="grid md:grid-cols-2 gap-8">
-        <div class="bg-white p-8 rounded-2xl shadow space-y-4">
-          <h3 class="text-2xl font-semibold">Create New Page</h3>
-          <ol class="list-decimal list-inside space-y-2 text-slate-700">
-            <li>Click floating <strong>+</strong> button (dev mode only)</li>
-            <li>Enter route (<code>/about</code>, etc.)</li>
-            <li>New page created & browser navigates</li>
-          </ol>
-          <p class="text-sm text-slate-500 mt-4">
-            Template: <code>/src/backend/frontendtemplate.ejs</code>
-          </p>
-        </div>
-
-        <div class="bg-white p-8 rounded-2xl shadow space-y-4">
-          <h3 class="text-2xl font-semibold">Generate Static Site</h3>
-          <p class="text-slate-700">
-            Visit <code>/createstatic</code> to build a fully static version in
-            <code>/src/frontendStatic</code>
-          </p>
-        </div>
-      </div>
-    </section>
-
-  </div>
-
-  <script src="/global.js" type="module"></script>
-  <script type="module">
-    import { parser, fetchElement } from "/gardener.js";
-    // parser(fetchElement("#some-selector")); // uncomment when needed
-  </script>
-</body>
-</html>