create-gardener 1.1.13 → 2.0.1

package/template/src/frontend/gardenerST.js

@@ -1,431 +0,0 @@
-//Standalone gardener version for no backend environment
-
-const config = {
-  mode: 'dev',
-  hotreload: false
-}
-
-let hotReloadtimeout;
-const body = fetchElement('body');
-
-
-function applyHotReloadState() {
-  const hrcheck = fetchElement('#hrcheckbox');
-  const checkbox = fetchElement('.hrcheckbox');
-
-  if (hotReload) {
-    hrcheck.style.background = '#66e666';
-    checkbox.checked = true;
-    hotReloadtimeout = setTimeout(() => window.location.reload(), 1000);
-  } else {
-    hrcheck.style.background = 'red';
-    checkbox.checked = false;
-    clearTimeout(hotReloadtimeout);
-  }
-}
-
-let hotReload = localStorage.getItem('hotreload');
-if (hotReload === null) hotReload = config.hotreload;
-else if (hotReload === 'true') hotReload = true
-else if (hotReload === 'false') hotReload = false
-
-
-
-
-if (config.mode === 'dev') {
-  appendElement(body, gardener({
-    t: 'p',
-    attr: {
-      style: `
-position:fixed;
-bottom:0;
-right:0;
-z-index:100;
-background:#e5e7eb;
-padding:8px;
-border-radius:6px;
-font-family:sans-serif;
-color:black;
-font-size:14px;
-`
-    },
-    children: [
-      { t: 'span', txt: 'Press ' },
-      {
-        t: 'span',
-        attr: { style: 'color:#22c55e;font-weight:bold;' },
-        txt: 'Alt+h'
-      },
-      { t: 'span', txt: ' to toggle Hot Reload' },
-      {
-        t: 'form',
-        attr: {
-          id: 'hrcheckbox',
-          style: 'margin-top:6px;padding:6px;background:red;border-radius:4px;cursor:pointer;'
-        },
-        events: { click: togglehotreload },
-        children: [
-          { t: 'label', txt: 'Hot Reload ' },
-          {
-            t: 'input',
-            cn: ['hrcheckbox'],
-            attr: { type: 'checkbox' }
-          }
-        ]
-      }
-    ]
-  }));
-
-  applyHotReloadState();
-
-  document.addEventListener('keydown', function(e) {
-    if (e.altKey && e.key.toLowerCase() === 'h') {
-      e.preventDefault();   // Stop browser from opening history
-      // Your logic here...
-      togglehotreload();
-    }
-  });
-}
-
-//appendElement(body, gardener())
-
-
-
-
-// togglehotreload();
-
-
-
-
-//if (config.mode === 'dev') {
-
-
-function togglehotreload() {
-  hotReload = !hotReload;
-  localStorage.setItem('hotreload', String(hotReload));
-
-  const hrcheck = fetchElement('#hrcheckbox');
-  const checkbox = fetchElement('.hrcheckbox');
-
-  if (hotReload) {
-    hrcheck.style.background = '#66e666';
-    checkbox.checked = true;
-    hotReloadtimeout = setTimeout(() => window.location.reload(), 1000);
-  } else {
-    hrcheck.style.background = 'red';
-    checkbox.checked = false;
-    clearTimeout(hotReloadtimeout);
-  }
-}
-
-function parserWindow(input) {
-  if (config.mode !== 'dev') return;
-
-  let text;
-  try {
-    text = JSON.stringify(JSON.parse(input), null, 2);
-  } catch {
-    text = input;
-  }
-
-  const result = gardener({
-    t: 'div',
-    attr: {
-      style: `
-position:fixed;
-top:25%;
-left:25%;
-width:50%;
-height:50%;
-background:#6b7280;
-color:white;
-border:2px solid black;
-border-radius:8px;
-z-index:90;
-display:flex;
-flex-direction:column;
-justify-content:space-between;
-`
-    },
-    children: [
-      {
-        t: 'div',
-        attr: {
-          style: `
-background:#e5e7eb;
-color:black;
-padding:10px;
-display:flex;
-justify-content:space-between;
-align-items:center;
-border-top-left-radius:8px;
-border-top-right-radius:8px;
-`
-        },
-        children: [
-          { t: 'h3', txt: 'Parser Window' },
-          {
-            t: 'button',
-            txt: 'Copy JSON',
-            attr: {
-              style: `
-padding:6px 10px;
-background:#f87171;
-border-radius:6px;
-cursor:pointer;
-`
-            },
-            events: {
-              click: () => copyTextToClipboard(text)
-            }
-          }
-        ]
-      },
-      {
-        t: 'pre',
-        txt: text,
-        attr: {
-          style: `
-padding:12px;
-overflow:auto;
-font-size:12px;
-white-space:pre-wrap;
-`
-        }
-      }
-    ]
-  });
-
-  appendElement(body, result);
-}
-
-
-
-async function copyTextToClipboard(txt) {
-  try {
-    await navigator.clipboard.writeText(txt);
-    alert('Component copied to clipboard');
-  } catch (err) {
-    console.error('Clipboard copy failed', err);
-  }
-}
-
-
-
-
-export function fetchElement(param) {
-  return document.querySelector(param);
-}
-
-export function appendElement(parent, child) {
-  if (typeof parent === 'string') parent = fetchElement(parent);
-  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) {
-  if (typeof original === 'string') original = fetchElement(original);
-  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;
-}
-
-function cleanStringAndList(input) {
-  const pattern = /\?"?(\w+)"?\?/g;
-  const vars = new Set();
-  let match;
-
-  while ((match = pattern.exec(input)) !== null) {
-    vars.add(match[1]);
-  }
-
-  // Replace ?var? with "+var+" and clean up resulting empty strings or double quotes
-  const cleanedString = input
-    .replace(pattern, '"+$1+"')
-    .replace(/^""\+/, '')
-    .replace(/\+""$/, '');
-
-  return {
-    cleanedString,
-    extractedList: [...vars].join(', ')
-  };
-}
-
-function generateFile(obj) {
-
-
-  const formatted = JSON.stringify(obj, null, 2);
-  const { cleanedString, extractedList } = cleanStringAndList(formatted);
-
-  if (extractedList.length === 0) return `
-import { gardener, fetchElement, replaceElement } from '../gardener.js'
-
-export default function thisfun() {
-  return gardener(${cleanedString})
-}
-`;
-
-  return `
-import { gardener, fetchElement, replaceElement } from '../gardener.js'
-
-export default function thisfun({${extractedList}}) {
-  return gardener(${cleanedString})
-}
-`;
-}
-
-
-
-
-export function parser(element, isParent = true) {
-  if (typeof element === 'string') {
-    element = fetchElement(element);
-  }
-
-  console.log(element)
-  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(generateFile(obj))
-    }
-
-    return obj;
-  }
-
-
-  // add children recursively
-  const children = [];
-  for (const child of element.childNodes) {
-    if (child.nodeType === Node.COMMENT_NODE) continue;
-
-    if (child.nodeType === Node.TEXT_NODE && child.textContent.trim() === '') continue;
-
-    if (child.nodeType === Node.TEXT_NODE) {
-      children.push({ t: 'span', txt: child.textContent.trim() });
-      continue;
-    }
-    children.push(parser(child, false));
-  }
-  if (children.length) obj.children = children;
-
-
-  if (isParent) {
-
-
-    parserWindow(generateFile(obj))
-  }
-
-  return obj
-
-
-}
-
-
-export function addEL(parent, event, fun) {
-  if (typeof parent === 'string') {
-    parent = fetchElement(parent);
-  }
-  parent.addEventListener(event, fun)
-}
-
-
-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/components/emailsvg.js

@@ -1,55 +0,0 @@
-
-import { gardener, fetchElement, replaceElement } from '/static/gardener.js'
-
-export default function thisfun() {
-  return gardener({
-    "t": "span",
-    "cn": [
-      "emailsvg"
-    ],
-    "children": [
-      {
-        "t": "svg",
-        "cn": [
-          "icon",
-          "icon-tabler",
-          "icons-tabler-outline",
-          "icon-tabler-mail"
-        ],
-        "attr": {
-          "xmlns": "http://www.w3.org/2000/svg",
-          "width": "24",
-          "height": "24",
-          "viewBox": "0 0 24 24",
-          "fill": "none",
-          "stroke": "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
-        },
-        "children": [
-          {
-            "t": "path",
-            "attr": {
-              "stroke": "none",
-              "d": "M0 0h24v24H0z",
-              "fill": "none"
-            }
-          },
-          {
-            "t": "path",
-            "attr": {
-              "d": "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"
-            }
-          },
-          {
-            "t": "path",
-            "attr": {
-              "d": "M3 7l9 6l9 -6"
-            }
-          }
-        ]
-      }
-    ]
-  })
-}

package/template/src/frontend/static/components/eyeoff.js

@@ -1,50 +0,0 @@
-
-import { gardener } from '/static/gardener.js'
-
-export default function () {
-  return gardener({
-  "t": "svg",
-  "cn": [
-    "eye"
-  ],
-  "attr": {
-    "xmlns": "http://www.w3.org/2000/svg",
-    "width": "24",
-    "height": "24",
-    "viewBox": "0 0 24 24",
-    "fill": "none",
-    "stroke": "currentColor",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  },
-  "children": [
-    {
-      "t": "path",
-      "attr": {
-        "stroke": "none",
-        "d": "M0 0h24v24H0z",
-        "fill": "none"
-      }
-    },
-    {
-      "t": "path",
-      "attr": {
-        "d": "M10.585 10.587a2 2 0 0 0 2.829 2.828"
-      }
-    },
-    {
-      "t": "path",
-      "attr": {
-        "d": "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
-      }
-    },
-    {
-      "t": "path",
-      "attr": {
-        "d": "M3 3l18 18"
-      }
-    }
-  ]
-})
-}

package/template/src/frontend/static/components/eyeon.js

@@ -1,43 +0,0 @@
-
-import { gardener } from '/static/gardener.js'
-export default function() {
-  return gardener({
-    "t": "svg",
-    "cn": [
-      "eye"
-    ],
-    "attr": {
-      "xmlns": "http://www.w3.org/2000/svg",
-      "width": "24",
-      "height": "24",
-      "viewBox": "0 0 24 24",
-      "fill": "none",
-      "stroke": "currentColor",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    },
-    "children": [
-      {
-        "t": "path",
-        "attr": {
-          "stroke": "none",
-          "d": "M0 0h24v24H0z",
-          "fill": "none"
-        }
-      },
-      {
-        "t": "path",
-        "attr": {
-          "d": "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"
-        }
-      },
-      {
-        "t": "path",
-        "attr": {
-          "d": "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
-        }
-      }
-    ]
-  })
-}

package/template/src/frontend/static/components/passwordBox.js

@@ -1,105 +0,0 @@
-import { gardener, replaceElement, fetchElement } from '/static/gardener.js'
-import eyeoff from '/static/components/eyeoff.js'
-import eyeon from '/static/components/eyeon.js'
-export default function thisfun(visible) {
-
-  const svg = visible ? eyeoff() : eyeon();
-
-  return gardener({
-    "t": "div",
-    "cn": [
-      "w-full",
-      "passwordbox"
-    ],
-    "children": [
-      {
-        "t": "label",
-        "cn": [
-          "my-1",
-          "block"
-        ],
-        "txt": "Password"
-      },
-      {
-        "t": "span",
-        "cn": [
-          "border",
-          "border-gray-900",
-          "flex",
-          "space-x-1",
-          "items-center",
-          "h-8",
-          "p-1",
-          "rounded-md"
-        ],
-        "children": [
-          {
-            "t": "svg",
-            "cn": [
-              "icon",
-              "icon-tabler",
-              "icons-tabler-outline",
-              "icon-tabler-key"
-            ],
-            "attr": {
-              "xmlns": "http://www.w3.org/2000/svg",
-              "width": "24",
-              "height": "24",
-              "viewBox": "0 0 24 24",
-              "fill": "none",
-              "stroke": "currentColor",
-              "stroke-width": "2",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
-            },
-            "children": [
-              {
-                "t": "path",
-                "attr": {
-                  "stroke": "none",
-                  "d": "M0 0h24v24H0z",
-                  "fill": "none"
-                }
-              },
-              {
-                "t": "path",
-                "attr": {
-                  "d": "M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0"
-                }
-              },
-              {
-                "t": "path",
-                "attr": {
-                  "d": "M15 9h.01"
-                }
-              }
-            ]
-          },
-          {
-            "t": "input",
-            "cn": [
-              "outline-none",
-              "inputbox",
-              "w-full"
-            ],
-            "attr": {
-              "type": visible ? 'text' : 'password',
-              "name": "password",
-              value: fetchElement('.inputbox').value,
-              "required": "",
-            }
-          },
-          {
-            t: 'span',
-            events: {
-              click: () => replaceElement(fetchElement(".passwordbox"), thisfun(!visible)),
-            },
-            children: [
-              svg
-            ]
-          }
-        ]
-      },
-    ]
-  })
-}