npm - create-gardener - Versions diffs - 1.1.6 → 1.1.7 - Mend

create-gardener 1.1.6 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/package.json CHANGED Viewed

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/ritishDas/gardener"
   },
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "A dom gardener converting dom elements into json and vice versa",
   "main": "index.js",
   "bin": {

package/template/src/backend/controllers/gardener.controller.ts CHANGED Viewed

@@ -46,7 +46,7 @@ export async function imageOptimiser(req: Request, res: Response) {
   try {
     const { name } = req.params;
-    if (!name) return;
+    if (typeof name !== 'string') return;
     // name format: test_500x300.webp
     const match = name.match(/^(.+?)_(\d+)x(\d+)\.webp$/);
@@ -60,7 +60,7 @@ export async function imageOptimiser(req: Request, res: Response) {
     const width = parseInt(widthStr, 10);
     const height = parseInt(heightStr, 10);
-    const cacheDir = path.join(__dirname, "../cache");
+    const cacheDir = path.join(__dirname, "../../frontend/static/cache");
     await fsp.mkdir(cacheDir, { recursive: true });
     const outputPath = path.join(cacheDir, name);
@@ -129,22 +129,13 @@ export async function createStatic(req: Request, res: Response) {
     const outDir = path.resolve("src/tempfrontend");
     const finalOut = path.resolve("src/frontendStatic");
-    const otherAssets = path.resolve("src/frontend");
     await fsp.mkdir(outDir, { recursive: true });
+    await fsp.mkdir(finalOut, { recursive: true });
-    const entries2 = await fsp.readdir(otherAssets, { withFileTypes: true });
     const entries = await fsp.readdir(viewsDir, { withFileTypes: true });
     const rendered: string[] = [];
-    for (const entry of entries2) {
-      if (!entry.isFile()) continue;
-      const srcPath = path.join(otherAssets, entry.name);
-      const outputPath = path.join(finalOut, entry.name);
-      await fsp.copyFile(srcPath, outputPath);
-    }
     for (const entry of entries) {
       // skip folders (partials, layouts, etc.)
@@ -190,15 +181,11 @@ export async function createStatic(req: Request, res: Response) {
     }
     await fsp.rm(outDir, { recursive: true, force: true });
     await fsp.cp(
-      path.resolve("src/frontend/components"),
-      path.join(finalOut, 'components'),
-      { recursive: true }
-    );
-    await fsp.cp(
-      path.resolve("src/backend/cache"),
-      path.join(finalOut, 'cache'),
+      path.resolve("src/frontend/static"),
+      path.join(finalOut, 'static'),
       { recursive: true }
     );
     return res.json({
       success: true,
       generated: rendered,

package/template/src/backend/routes/gardener.route.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export default router;
-router.route("/cache/:name").get(imageOptimiser);
+router.route("/static/cache/:name").get(imageOptimiser);
 router.route("/createstatic").get(createStatic);
 router.route('/addcomponent').post(addComponent);
 router.route('/addpage').post(addPage);
@@ -18,3 +18,4 @@ router.route('/addpage').post(addPage);
 router.route('/').get((req, res) => res.render('_'));
 router.route('/login').get((req, res) => res.render('_login'));

package/template/src/backend/server.ts CHANGED Viewed

@@ -13,7 +13,7 @@ app.use(express.static('./src/frontend'));
 app.use(express.json());
 app.use(frontendRoute);
-const PORT = 5000;
+const PORT = process.env.PORT || 3000;
 //
 // initDB().then(
 //   () => {

package/template/src/frontend/frontendtemplate.ejs CHANGED Viewed

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/style.css">
-    <link rel="stylesheet" href="/style2.css">
+  <link href="/static/style.css" rel="stylesheet"/>
+  <link href="/static/style2.css" rel="stylesheet"/>
     <title>Redvent:Login</title>
   </head>
   <body>
@@ -24,10 +24,10 @@
         <img src="/cache/w_500x500.webp" alt="logo" class="w-500">
       </div>
     </div>
-    <script src='/global.js' type="module"></script>
+    <script src='/static/global.js' type="module"></script>
 <script type="module">
-  import { parser, fetchElement, replaceElement, appendElement } from "/gardener.js";
+  import { parser, fetchElement, replaceElement, appendElement } from "/static/gardener.js";
 </script>
   </body>
 </html>

package/template/src/frontend/gardenerST.js ADDED Viewed

@@ -0,0 +1,340 @@
+//Standalone gardener version for no backend environment
+const config = {
+  mode: 'dev',
+  hotreload: false
+}
+let hotReloadtimeout;
+const body = fetchElement('body');
+let hotReload = localStorage.getItem('hotreload');
+if (hotReload === null) hotReload = config.hotreload;
+else if (hotReload === 'true') hotReload = true
+else if (hotReload === 'false') hotReload = false
+appendElement(body, 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: 'Ctrl+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'
+        }
+      }]
+    }
+  ]
+}))
+//appendElement(body, gardener())
+function applyHotReloadState() {
+  const hrcheck = fetchElement('#hrcheckbox');
+  const checkbox = fetchElement('.hrcheckbox');
+  if (hotReload) {
+    hrcheck.style.background = '#66e666';
+    checkbox.checked = true;
+    hotReloadtimeout = setTimeout(() => window.location.reload(), 1000);
+  } else {
+    hrcheck.style.background = 'red';
+    checkbox.checked = false;
+    clearTimeout(hotReloadtimeout);
+  }
+}
+applyHotReloadState();
+// togglehotreload();
+document.addEventListener('keydown', function(e) {
+  // Detect Ctrl + H
+  if (e.ctrlKey && e.key.toLowerCase() === 'h') {
+    e.preventDefault();   // Stop browser from opening history
+    // Your logic here...
+    togglehotreload();
+  }
+});
+//if (config.mode === 'dev') {
+function togglehotreload() {
+  hotReload = !hotReload;
+  localStorage.setItem('hotreload', String(hotReload));
+  const hrcheck = fetchElement('#hrcheckbox');
+  const checkbox = fetchElement('.hrcheckbox');
+  if (hotReload) {
+    hrcheck.style.background = '#66e666';
+    checkbox.checked = true;
+    hotReloadtimeout = setTimeout(() => window.location.reload(), 1000);
+  } else {
+    hrcheck.style.background = 'red';
+    checkbox.checked = false;
+    clearTimeout(hotReloadtimeout);
+  }
+}
+export function parserWindow(input) {
+  const parsed = JSON.parse(input);
+  const text = JSON.stringify(parsed, null, 1);
+  if (config.mode !== 'dev') return;
+  const 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'],
+            txt: 'Parser Window'
+          },
+          {
+            t: 'button',
+            cn: ['p-2', 'bg-red-300', 'rounded-lg', 'cursor-pointer'],
+            txt: 'Add Component',
+            attr: {
+              id: 'copybtn'
+            },
+            events: {
+              click: (e) => { copyTextToClipboard(text) }
+            }
+          }
+        ]
+      },
+      {
+        t: 'pre',
+        cn: ['p-5', 'overflow-scroll', 'text-sm'],
+        txt: text
+      }
+    ]
+  })
+  appendElement(body, result);
+}
+async function copyTextToClipboard(txt) {
+  try {
+    await navigator.clipboard.writeText(txt);
+    console.log('Component copied to clipboard');
+  } catch (err) {
+    console.error('Clipboard copy failed', err);
+  }
+}
+export function fetchElement(param) {
+  return document.querySelector(param);
+}
+export function appendElement(parent, child) {
+  if (typeof parent === 'string') {
+    parent = fetchElement(parent);
+  }
+  parent.appendChild(child);
+}
+export function createElement(type, classname) {
+  let element = document.createElement(type);
+  if (classname)
+    element.classList.add(...classname);
+  return element;
+}
+export function insertText(element, text) {
+  element.innerText = text;
+}
+export function replaceElement(original, New) {
+  if (typeof original === 'string') {
+    original = fetchElement(original);
+  }
+  original.replaceWith(New);
+}
+export function gardener(Dom) {
+  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);
+  // 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);
+  }
+  // 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);
+      }
+    }
+  }
+  if (Dom.events) {
+    Object.entries(Dom.events).forEach(([eventName, handler]) => {
+      element.addEventListener(eventName, handler);
+    });
+  }
+  // recursively handle children
+  if (Dom.children) {
+    Dom.children.forEach(child => appendElement(element, gardener(child)));
+  }
+  return element;
+}
+export function parser(element, isParent = true) {
+  if (typeof element === 'string') {
+    element = fetchElement(element);
+    // If user passes raw HTML string
+  }
+  const obj = {
+    t: element.tagName.toLowerCase(),
+  };
+  // add classes if present
+  if (element.classList.length) {
+    obj.cn = Array.from(element.classList);
+  }
+  // add attributes if present
+  const attrs = {};
+  for (const attr of element.attributes) {
+    if (attr.name !== 'class') attrs[attr.name] = attr.value;
+  }
+  if (Object.keys(attrs).length) obj.attr = attrs;
+  // add text content (only if no children)
+  if (element.childNodes.length === 1 && element.firstChild.nodeType === Node.TEXT_NODE) {
+    obj.txt = element.textContent.trim();
+    if (isParent) {
+      parserWindow(JSON.stringify(obj))
+    }
+    return obj;
+  }
+  // add children recursively
+  const children = [];
+  for (const child of element.children) {
+    children.push(parser(child, false));
+  }
+  if (children.length) obj.children = children;
+  if (isParent) {
+    parserWindow(JSON.stringify(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 => {
+    appendElement(body, gardener({
+      t: 'img',
+      cn: ['preloaderimage'],
+      attr: {
+        src: entry,
+        alt: entry
+      }
+    }));
+    setTimeout(() => {
+      const images = document.querySelectorAll('.preloaderimage');
+      images.forEach(entry => { entry.style.display = 'none' });
+    }, 0)
+  })
+}

package/template/src/frontend/static/components/emailsvg.js ADDED Viewed

@@ -0,0 +1,55 @@
+import { gardener, fetchElement, replaceElement } from '/static/gardener.js'
+export default function thisfun() {
+  return gardener({
+    "t": "span",
+    "cn": [
+      "emailsvg"
+    ],
+    "children": [
+      {
+        "t": "svg",
+        "cn": [
+          "icon",
+          "icon-tabler",
+          "icons-tabler-outline",
+          "icon-tabler-mail"
+        ],
+        "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": "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"
+            }
+          },
+          {
+            "t": "path",
+            "attr": {
+              "d": "M3 7l9 6l9 -6"
+            }
+          }
+        ]
+      }
+    ]
+  })
+}

package/template/src/frontend/{components → static/components}/eyeoff.js RENAMED Viewed

@@ -1,5 +1,5 @@
-import { gardener } from '../gardener.js'
+import { gardener } from '/static/gardener.js'
 export default function () {
   return gardener({

package/template/src/frontend/static/components/eyeon.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { gardener } from '/static/gardener.js'
+export default function() {
+  return gardener({
+    "t": "svg",
+    "cn": [
+      "eye"
+    ],
+    "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": "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"
+        }
+      },
+      {
+        "t": "path",
+        "attr": {
+          "d": "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
+        }
+      }
+    ]
+  })
+}

package/template/src/frontend/{components → static/components}/notification.js RENAMED Viewed

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

package/template/src/frontend/{components → static/components}/passwordBox.js RENAMED Viewed

@@ -1,6 +1,6 @@
-import { gardener, replaceElement, fetchElement } from '/gardener.js'
-import eyeoff from '/components/eyeoff.js'
-import eyeon from '/components/eyeon.js'
+import { gardener, replaceElement, fetchElement } from '/static/gardener.js'
+import eyeoff from '/static/components/eyeoff.js'
+import eyeon from '/static/components/eyeon.js'
 export default function thisfun(visible) {
   const svg = visible ? eyeoff() : eyeon();

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

@@ -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} RENAMED Viewed

@@ -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);
 }
@@ -378,6 +384,13 @@ export function parser(element, isParent = true) {
   //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 => {