create-gardener 2.1.0 → 2.1.2

package/template/build/frontend/static/components/gardener/pageOverlayBtn.js

@@ -0,0 +1,138 @@
+import { gardener, fetchElement, appendElement } from '../../gardener.js'
+
+const body = fetchElement('body');
+
+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());
+
+            const response = await fetch('/addpage', {
+              method: 'POST',
+              headers: {
+                "Content-Type": 'application/json'
+              },
+              body: JSON.stringify(input)
+            }).then(res => res.json())
+            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'] }]
+
+    })
+
+    appendElement(body, dialog);
+    fetchElement('.pathinput').focus();
+  }
+  else {
+    fetchElement('.addpageform').remove();
+  }
+}
+
+
+
+const pagebtns = gardener({
+  t: 'div',
+  cn: [
+    'fixed',
+    'bottom-20',
+    'right-4',
+    'flex',
+    'flex-col',
+    'gap-2',
+    'bg-white',
+    'shadow-lg',
+    'rounded-xl',
+    'p-3',
+    'z-50'
+  ],
+  children: [
+    {
+      t: 'button',
+      cn: [
+        'px-4',
+        'py-2',
+        'bg-blue-500',
+        'text-white',
+        'rounded-lg',
+        'hover:bg-blue-600',
+        'transition'
+      ],
+      children: [{ t: 'span', txt: 'New Page' }],
+      events: {
+        click: opnPagedialog
+      }
+    },
+    {
+      t: 'button',
+      cn: [
+        'px-4',
+        'py-2',
+        'bg-gray-800',
+        'text-white',
+        'rounded-lg',
+        'hover:bg-gray-900',
+        'transition'
+      ],
+      children: [{ t: 'span', txt: 'Save Template' }],
+      events: {
+        click: async () => {
+          const result = await fetch('/savetemplate', {
+            method: 'POST',
+            headers: { "Content-Type": 'application/json' },
+            body: JSON.stringify({ path: fetchElement('#fileName').innerText })
+          });
+
+          const data = await result.json(); // ✅ fix
+          alert(data.message);
+        }
+      }
+    }
+  ]
+});
+
+
+export const addPagebtn = gardener({
+  t: 'div',
+  cn: ['fixed', 'bottom-4', 'right-4', 'z-50'],
+  events: {
+    mouseenter: () => appendElement(addPagebtn, pagebtns),
+    mouseleave: () => pagebtns.remove()
+  },
+  children: [
+    {
+      t: 'span',
+      // cn: ['pb-1.5', 'flex', 'items-center', 'justify-center', 'h-15', 'w-15', 'bg-black', 'text-white', 'fixed', 'bottom-22', 'right-2'],
+
+      cn: [
+        'flex',
+        'items-center',
+        'justify-center',
+        'h-14',
+        'w-14',
+        'bg-black',
+        'text-white',
+        'fixed',
+        'bottom-22',
+        'right-2',
+        'rounded-full',
+        'shadow-lg',
+        'cursor-pointer',
+      ],
+      txt: 'GR'
+    }
+  ]
+});

package/template/build/frontend/static/components/gardener/parserWindow.js

@@ -0,0 +1,159 @@
+import { gardener, fetchElement, appendElement } from '../../gardener.js'
+import { gardenerError } from './errorBox.js';
+
+const body = fetchElement('body');
+
+const config = {
+  componentdir: 'static/components',
+}
+
+let result;
+export function parserWindow(text) {
+  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', 'p-5'],
+            txt: 'Parser Window'
+          },
+          {
+            t: 'div',
+            cn: ['flex', 'gap-3'],
+            children: [
+              {
+                t: 'button',
+                cn: ['p-2', 'bg-green-300', 'rounded-lg', 'cursor-pointer'],
+                txt: 'Copy Component',
+                attr: { id: 'copybtn' },
+                events: {
+                  click: () => { navigator.clipboard.writeText(text); fetchElement('#copybtn').innerText = 'copied'; }
+                }
+              },
+              {
+                t: 'button',
+                cn: ['p-2', 'bg-red-300', 'rounded-lg', 'cursor-pointer'],
+                txt: 'Add Component',
+                events: {
+                  click: () => addComponentForm(text)
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        t: 'p',
+        cn: ['p-5', 'overflow-scroll'],
+        txt: text
+      },
+    ]
+  })
+
+
+  return result;
+}
+
+function addComponentForm(text) {
+  result.remove()
+
+  const compform = gardener({
+    t: 'form',
+    events: {
+      submit: (event) => {
+        event.preventDefault()
+        addComponent(text, `${fetchElement('.componentInp').value}`)
+        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);
+}
+
+async function addComponent(txt, path) {
+  try {
+    const res = await fetch('/addcomponent', {
+      method: 'POST',
+      headers: {
+        "Content-Type": 'application/json'
+      },
+      body: JSON.stringify({ component: generateFile(txt, path), path: `${config.componentdir}/${path}.js` })
+    })
+
+    if (!res.ok) {
+      throw new Error(`Failed to add component: ${res.status} ${res.statusText}`);
+    }
+
+    const data = await res.json()
+
+  }
+  catch (err) {
+    console.error('Add Component Error:', err);
+    gardenerError(err.message || 'Failed to add component');
+  }
+
+}
+
+
+function generateFile(obj, name) {
+
+
+  const { cleanedString, extractedList } = cleanStringAndList(obj);
+
+  if (extractedList.length === 0) return `
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+
+export function ${name}() {
+  return gardener(${cleanedString})
+}
+`;
+
+  return `
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+
+export function ${name}({${extractedList}}) {
+  return gardener(${cleanedString})
+}
+`;
+}
+
+
+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(', ')
+  };
+}

package/template/build/frontend/static/components/nonui/api.js

@@ -29,11 +29,24 @@ export async function Fetch(
         body: JSON.stringify(body),
       });
 
-
+    if (!res.ok) {
+      throw new Error(`HTTP error! status: ${res.status}`);
+    }
 
     return res
   }
   catch (err) {
-    console.log(err)
+    console.error('Fetch Error:', err);
+    
+    // Import and display error using gardenerError
+    import('../gardener/errorBox.js')
+      .then(({ gardenerError }) => {
+        gardenerError(err.message || 'Network request failed');
+      })
+      .catch(() => {
+        console.error('Error component not available:', err.message);
+      });
+    
+    throw err;
   }
 }

package/template/build/frontend/static/components/nonui/navigation.js

@@ -1,5 +1,5 @@
-import { gardener, fetchElement, appendElement } from "/static/gardener.js";
-import { mode } from "/static/gardenerConfig.js";
+import { gardener, fetchElement, appendElement } from "../../gardener.js";
+import { mode } from "../../gardenerConfig.js";
 
 const body = fetchElement('#main');
 

package/template/build/frontend/static/components/notification.js

@@ -1,4 +1,4 @@
-import { gardener, replaceElement, fetchElement } from '/static/gardener.js';
+import { gardener, replaceElement, fetchElement } from '../gardener.js';
 
 export default function addNotification(noti) {
   console.log('clicked');

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

@@ -1,89 +1,160 @@
+import { gardenerError } from "./components/gardener/errorBox.js";
+
 
 export function fetchElement(param) {
-  return document.querySelector(param);
+  const element = document.querySelector(param);
+  if (!element) {
+    console.warn(`Element not found: ${param}`);
+  }
+  return element;
 }
 
 export function appendElement(parent, child) {
-  if (typeof parent === 'string') {
-    parent = fetchElement(parent);
+  try {
+    if (typeof parent === 'string') {
+      parent = fetchElement(parent);
+    }
+    if (!parent) {
+      throw new Error('Parent element is null or undefined');
+    }
+    if (!child) {
+      throw new Error('Child element is null or undefined');
+    }
+    parent.appendChild(child);
+  } catch (error) {
+    gardenerError(error);
   }
-  parent.appendChild(child);
 }
 
 export function createElement(type, classname) {
-  let element = document.createElement(type);
-  if (classname)
-    element.classList.add(...classname);
-  return element;
+  try {
+    if (!type) {
+      throw new Error('Element type is required');
+    }
+    let element = document.createElement(type);
+    if (classname)
+      element.classList.add(...classname);
+    return element;
+  } catch (error) {
+    gardenerError(error);
+    return null;
+  }
 }
 
 export function insertText(element, text) {
-  element.innerText = text;
+  if (!element) {
+    console.warn('insertText: Element is null or undefined');
+    return;
+  }
+  element.textContent = text;
 }
 
 export function replaceElement(original, New) {
-  if (typeof original === 'string') {
-    original = fetchElement(original);
+  try {
+    if (typeof original === 'string') {
+      original = fetchElement(original);
+    }
+    if (!original) {
+      throw new Error('Original element is null or undefined');
+    }
+    if (!New) {
+      throw new Error('New element is null or undefined');
+    }
+    original.replaceWith(New);
+  } catch (error) {
+    gardenerError(error);
   }
-  original.replaceWith(New);
 }
 
 export function gardener(Dom) {
+  try {
+    if (!Dom) {
+      throw new Error('DOM configuration is null or undefined');
+    }
 
-  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);
+    if (Dom.nodeType === 1) return Dom;
 
-  // create element accordingly
-  let element;
+    if (!Dom.t) {
+      throw new Error('Element type (t) is required in DOM configuration');
+    }
 
-  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);
-  }
+    // detect if this is an SVG element
+    const isSVG = [
+      'svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline', 'g', 'defs', 'clipPath', 'use'
+    ].includes(Dom.t);
 
-  // text content (skip for SVG like <path>)
-  if (Dom.txt) {
-    insertText(element, Dom.txt);
-  }
+    // 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);
+    }
+
+    if (!element) {
+      throw new Error(`Failed to create element: ${Dom.t}`);
+    }
+
+    // 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);
+    // 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)) {
+        try {
+          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);
+          }
+        } catch (attrError) {
+          console.warn(`Failed to set attribute ${key}:`, attrError);
+        }
       }
     }
-  }
 
-  if (Dom.events) {
-    Object.entries(Dom.events).forEach(([eventName, handler]) => {
-      element.addEventListener(eventName, handler);
-    });
-  }
+    if (Dom.events) {
+      Object.entries(Dom.events).forEach(([eventName, handler]) => {
+        try {
+          if (typeof handler !== 'function') {
+            throw new Error(`Event handler for '${eventName}' must be a function`);
+          }
+          element.addEventListener(eventName, handler);
+        } catch (eventError) {
+          console.warn(`Failed to add event listener ${eventName}:`, eventError);
+        }
+      });
+    }
 
-  // recursively handle children
-  if (Dom.children) {
-    Dom.children.forEach(child => appendElement(element, gardener(child)));
-  }
+    // recursively handle children
+    if (Dom.children) {
+      Dom.children.forEach(child => {
+        try {
+          appendElement(element, gardener(child));
+        } catch (childError) {
+          console.warn('Failed to append child:', childError);
+        }
+      });
+    }
 
-  return element;
+    return element;
+  } catch (error) {
+    gardenerError(error);
+    return null;
+  }
 }
 
-

package/template/build/frontend/static/gardenerConfig.js

@@ -1 +1 @@
-export const mode = 'prod'; 
+export const mode = 'prod';