create-gardener 2.0.8 → 2.1.0

package/template/src/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/src/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/src/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;
+  }
 }
 
-