create-gardener 1.1.6 → 1.1.8

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

@@ -0,0 +1,54 @@
+
+import { gardener, fetchElement, replaceElement } from '/static/gardener.js'
+
+export default function thisfun() {
+  return gardener({
+    "t": "div",
+    "attr": {
+      "id": "body"
+    },
+    "children": [
+      {
+        "t": "div",
+        "cn": [
+          "h-screen",
+          "w-screen",
+          "bg-white",
+          "loader",
+          "absolute"
+        ],
+        "attr": {
+          "style": "transition: 0.4s; opacity: 0;"
+        },
+        "txt": ""
+      },
+      {
+        "t": "div",
+        "cn": [
+          "hero",
+          "flex",
+          "justify-around",
+          "items-center",
+          "p-5",
+          "h-[90vh]"
+        ],
+        "children": [
+          {
+            "t": "p",
+            "cn": [
+              "p-5"
+            ],
+            "txt": "Gardener is a front-end library for creating and manipulating DOM elements using a declarative JavaScript object syntax. It includes a development server with features like timely reload and on-the-fly component creation from existing HTML. The server also provides dynamic image resizing and caching."
+          },
+          {
+            "t": "img",
+            "attr": {
+              "src": "/cache/gardener_500x500.webp",
+              "alt": "logo"
+            }
+          }
+        ]
+      }
+    ]
+  })
+}

package/template/src/frontend/{gardener.js → static/gardener.js}

@@ -1,6 +1,6 @@
 const config = {
   mode: 'dev',
-  componentdir: 'components',
+  componentdir: 'static/components',
   hotreload: false
 }
 
@@ -255,6 +255,9 @@ export function fetchElement(param) {
 }
 
 export function appendElement(parent, child) {
+  if (typeof parent === 'string') {
+    parent = fetchElement(parent);
+  }
   parent.appendChild(child);
 }
 
@@ -270,6 +273,9 @@ export function insertText(element, text) {
 }
 
 export function replaceElement(original, New) {
+  if (typeof original === 'string') {
+    original = fetchElement(original);
+  }
   original.replaceWith(New);
 }
 
@@ -331,11 +337,56 @@ export function gardener(Dom) {
   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);
+
+  return `
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+
+export default function thisfun({${extractedList}}) {
+  return gardener(${cleanedString})
+}
+`;
+}
+
+
+// Example:
+// const result = cleanStringAndList('hi "{ritish}" how are you');
+// console.log(result.cleanedString); // "hi ritish how are you"
+// console.log(result.extractedList);  // ["ritish"]
+
+
 export function parser(element, isParent = true) {
   if (typeof element === 'string') {
     element = fetchElement(element);
   }
 
+  console.log(element)
   const obj = {
     t: element.tagName.toLowerCase(),
   };
@@ -356,28 +407,49 @@ export function parser(element, isParent = true) {
     obj.txt = element.textContent.trim();
 
     if (isParent) {
-      parserWindow(JSON.stringify(obj))
+
+      parserWindow(generateFile(obj))
     }
 
     return obj;
   }
 
+
   // add children recursively
   const children = [];
-  for (const child of element.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(JSON.stringify(obj))
+
+
+    parserWindow(generateFile(obj))
   }
 
   return obj
+
+
   //Let Browser do the migration from html to json and then use copy paste
 }
 
+export function addEL(parent, event, fun) {
+  if (typeof parent === 'string') {
+    parent = fetchElement(parent);
+  }
+  parent.addEventListener(event, fun)
+}
+
 export function imagePreloader(images) {
   const body = fetchElement('body')
   images.forEach(entry => {