create-gardener 2.1.1 → 2.1.2

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

@@ -0,0 +1,99 @@
+
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+import addNotification from './notification.js';
+
+export function copybtn() {
+  return gardener({
+    "t": "button",
+    events: {
+      click: () => {
+        try {
+          navigator.clipboard.writeText(fetchElement('.initCommand').innerText)
+          replaceElement('.copybtn', copybtn());
+          addNotification({ status: 'success', message: 'Copied' })
+        }
+        catch (err) {
+          addNotification({
+            status: 'failure', message: "Couldn't Copy"
+          });
+        }
+
+      }
+    },
+    "cn": [
+      "copybtn",
+      "flex",
+      "items-center",
+      "justify-center",
+      "p-2",
+      "text-gray-400",
+      "hover:text-white",
+      "hover:bg-white/10",
+      "rounded",
+      "transition-all",
+      "duration-200",
+      "active:scale-95"
+    ],
+    "children": [
+      {
+        "t": "span",
+        "cn": [
+          "w-5",
+          "h-5"
+        ],
+        "children": [
+          {
+            "t": "svg",
+            "cn": [
+              "icon",
+              "icon-tabler",
+              "icons-tabler-outline",
+              "icon-tabler-clipboard-check"
+            ],
+            "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": "M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
+                }
+              },
+              {
+                "t": "path",
+                "attr": {
+                  "d": "M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2"
+                }
+              },
+              {
+                "t": "path",
+                "attr": {
+                  "d": "M9 14l2 2l4 -4"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  })
+}
+
+

package/template/build/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/build/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/build/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/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

@@ -0,0 +1,52 @@
+const baseName = '';
+
+export async function Fetch(
+  path,
+  body,
+  method = 'POST'
+) {
+
+  try {
+
+    const headers = {
+      "Content-Type": "application/json",
+      "ngrok-skip-browser-warning": 'true'
+      // "Authorization": 'Bearer ' + auth
+    }
+    let res;
+    if (method === 'GET' || method === 'DELETE')
+      res = await fetch(baseName + path, {
+        credentials: "include",
+        headers: headers,
+        method,
+      });
+
+    else
+      res = await fetch(baseName + path, {
+        credentials: "include",
+        headers: headers,
+        method,
+        body: JSON.stringify(body),
+      });
+
+    if (!res.ok) {
+      throw new Error(`HTTP error! status: ${res.status}`);
+    }
+
+    return res
+  }
+  catch (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

@@ -0,0 +1,59 @@
+import { gardener, fetchElement, appendElement } from "../../gardener.js";
+import { mode } from "../../gardenerConfig.js";
+
+const body = fetchElement('#main');
+
+export function nextPagehandler() {
+  const anchor = document.querySelectorAll('a')
+  anchor.forEach(link => {
+
+    link.addEventListener('click', (e) => {
+
+
+      e.preventDefault();
+      nextPage(link.href)
+
+    })
+  })
+
+
+
+  window.addEventListener('pagehide', () => {
+    setTimeout(() => {
+      body.style.transform = 'translateX(0px)';
+      setTimeout(() => {
+        try {
+          fetchElement('.tempnpdiv').remove()
+        }
+        catch (err) { }
+
+      }, 200)
+    }, 200);
+  });
+
+}
+
+export function nextPage(link) {
+
+  appendElement(body, gardener({
+    t: 'div',
+    cn: ['tempnpdiv', 'top-0', 'left-[100vw]', 'fixed', 'h-screen', 'w-screen'],
+  }))
+  const width = window.innerWidth
+  console.log(width)
+  body.style.transition = '.2s';
+  body.style.transform = `translateX(-${width}px)`
+  setTimeout(() => {
+    window.location.href = link
+  }, 200)
+}
+
+export function pageloader() {
+  const loader = fetchElement('.loader');
+  loader.style.transition = '.4s';
+  loader.style.opacity = '0';
+  if (mode !== 'dev')
+    setTimeout(() => loader.remove(), 400)
+  else
+    loader.remove();
+}