create-gardener 2.0.9 → 2.1.1

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

@@ -0,0 +1,33 @@
+
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+
+export function footer({mystery}) {
+  return gardener({
+  "t": "footer",
+  "cn": [
+    "bg-green-900",
+    "text-green-100",
+    "py-12",
+    "text-center"
+  ],
+  "children": [
+    {
+      "t": "p",
+      "cn": [
+        "text-xl",
+        "italic"
+      ],
+      "txt": "\"Because sometimes you don't need a forest. Just a garden.\""
+    },
+    {
+      "t": "div",
+      "cn": [
+        "mt-6",
+        "text-sm",
+        "opacity-70"
+      ],
+      "txt": "MIT Licensed | Built on Express & EJS "+mystery+""
+    }
+  ]
+})
+}

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

@@ -0,0 +1,47 @@
+import { gardener, fetchElement, appendElement } from '../../gardener.js'
+
+const body = fetchElement('body');
+
+export function gardenerError(error) {
+  appendElement(body, gardener({
+    t: 'div',
+    // Added: centering, shadow, border-left for "alert" feel, and high z-index
+    cn: [
+      'fixed', 'top-1/2', 'left-1/2', '-translate-x-1/2', '-translate-y-1/2',
+      'w-11/12', 'max-w-md', 'bg-white', 'text-gray-800', 'shadow-2xl',
+      'border-l-8', 'border-red-600', 'rounded-r-lg', 'z-[100]', 'p-0', 'overflow-hidden'
+    ],
+    children: [
+      {
+        t: 'div',
+        cn: ['bg-red-50', 'p-4', 'flex', 'items-center', 'gap-3'],
+        children: [
+          {
+            t: 'h2',
+            cn: ['text-red-700', 'font-bold', 'text-lg', 'uppercase', 'tracking-wider'],
+            txt: '⚠️ System Error'
+          }
+        ]
+      },
+      {
+        t: 'div',
+        cn: ['p-6', 'bg-white'],
+        children: [
+          {
+            t: 'p',
+            cn: ['font-mono', 'text-sm', 'bg-gray-100', 'p-3', 'rounded', 'border', 'border-gray-200', 'break-words'],
+            txt: error
+          },
+          {
+            t: 'button',
+            cn: ['mt-4', 'w-full', 'py-2', 'bg-gray-800', 'text-white', 'rounded', 'hover:bg-black', 'transition-colors', 'cursor-pointer'],
+            txt: 'Dismiss',
+            events: {
+              click: (e) => e.target.closest('.fixed').remove()
+            }
+          }
+        ]
+      }
+    ]
+  }))
+}

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

@@ -0,0 +1,82 @@
+import { gardener, fetchElement, appendElement } from '../../gardener.js'
+import { gardenerError } from './errorBox.js';
+
+const config = {
+  hotreload: false
+}
+
+let hotReload;
+let hotReloadtimeout;
+const localStore = localStorage.getItem('hotreload');
+
+if (localStore === null) hotReload = config.hotreload;
+else if (localStore === 'true') hotReload = true
+else if (localStore === 'false') hotReload = false
+
+
+export 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 hotReloadBtn() {
+  return 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: 'Alt+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'
+          }
+        }]
+      }
+    ]
+  })
+}

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