create-gardener 2.0.6 → 2.0.8

package/template/src/backend/controllers/gardener/addPage.ts

@@ -41,12 +41,12 @@ async function findTemplate(fileName: string) {
 
 export async function addPage(req: Request, res: Response) {
   try {
-    const pagename: string = req.body.page;
-    const name = pagename.replaceAll('/', '_');
+    const name: string = req.body.page;
+    // const name = pagename.replaceAll('/', '_');
 
 
 
-    const templatePath = await findTemplate(name);//path.join(frontendDir, findTemplate(name)); //path.join(frontendDir, 'frontendtemplate.ejs');
+    const templatePath = await findTemplate(name + '.ejs');//path.join(frontendDir, findTemplate(name)); //path.join(frontendDir, 'frontendtemplate.ejs');
 
 
 

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

@@ -21,4 +21,4 @@ if (process.env.NODE_ENV !== 'production') {
 
 
 
-router.route('/').get((req: Request, res: Response) => res.render('_'));
+router.route('/').get((req: Request, res: Response) => res.render('_', { fileName: '_' }));

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

@@ -0,0 +1,364 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { describe, test, expect, beforeEach, jest } from '@jest/globals';
+import {
+  fetchElement,
+  appendElement,
+  createElement,
+  insertText,
+  replaceElement,
+  gardener
+} from './gardener.js';
+
+describe('fetchElement', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should fetch element by query selector', () => {
+    document.body.innerHTML = '<div class="test-class"></div>';
+    const element = fetchElement('.test-class');
+    expect(element).toBeTruthy();
+    expect(element.className).toBe('test-class');
+  });
+
+  test('should return null for non-existent element', () => {
+    const element = fetchElement('.non-existent');
+    expect(element).toBeNull();
+  });
+
+  test('should fetch element by id', () => {
+    document.body.innerHTML = '<div id="test-id"></div>';
+    const element = fetchElement('#test-id');
+    expect(element).toBeTruthy();
+    expect(element.id).toBe('test-id');
+  });
+});
+
+describe('appendElement', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should append child to parent element', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    document.body.appendChild(parent);
+
+    appendElement(parent, child);
+    expect(parent.children.length).toBe(1);
+    expect(parent.firstChild).toBe(child);
+  });
+
+  test('should append child using parent selector string', () => {
+    document.body.innerHTML = '<div class="parent"></div>';
+    const child = document.createElement('span');
+
+    appendElement('.parent', child);
+    const parent = document.querySelector('.parent');
+    expect(parent.children.length).toBe(1);
+    expect(parent.firstChild).toBe(child);
+  });
+
+  test('should append multiple children', () => {
+    const parent = document.createElement('div');
+    const child1 = document.createElement('span');
+    const child2 = document.createElement('p');
+
+    appendElement(parent, child1);
+    appendElement(parent, child2);
+
+    expect(parent.children.length).toBe(2);
+    expect(parent.children[0]).toBe(child1);
+    expect(parent.children[1]).toBe(child2);
+  });
+});
+
+describe('createElement', () => {
+  test('should create element with given type', () => {
+    const element = createElement('div');
+    expect(element.tagName).toBe('DIV');
+  });
+
+  test('should create element with single class', () => {
+    const element = createElement('div', ['test-class']);
+    expect(element.classList.contains('test-class')).toBe(true);
+  });
+
+  test('should create element with multiple classes', () => {
+    const element = createElement('span', ['class1', 'class2', 'class3']);
+    expect(element.classList.contains('class1')).toBe(true);
+    expect(element.classList.contains('class2')).toBe(true);
+    expect(element.classList.contains('class3')).toBe(true);
+  });
+
+  test('should create element without class if not provided', () => {
+    const element = createElement('p');
+    expect(element.className).toBe('');
+  });
+});
+
+describe('insertText', () => {
+  test('should insert text into element', () => {
+    const element = document.createElement('div');
+    insertText(element, 'Hello World');
+    expect(element.innerText).toBe('Hello World');
+  });
+
+  test('should replace existing text', () => {
+    const element = document.createElement('div');
+    element.innerText = 'Old Text';
+    insertText(element, 'New Text');
+    expect(element.innerText).toBe('New Text');
+  });
+
+  test('should handle empty string', () => {
+    const element = document.createElement('div');
+    insertText(element, '');
+    expect(element.innerText).toBe('');
+  });
+});
+
+describe('replaceElement', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should replace element with another element', () => {
+    const original = document.createElement('div');
+    original.id = 'original';
+    const replacement = document.createElement('span');
+    replacement.id = 'replacement';
+    document.body.appendChild(original);
+
+    replaceElement(original, replacement);
+    expect(document.getElementById('original')).toBeNull();
+    expect(document.getElementById('replacement')).toBeTruthy();
+  });
+
+  test('should replace element using selector string', () => {
+    document.body.innerHTML = '<div class="original"></div>';
+    const replacement = document.createElement('span');
+    replacement.className = 'replacement';
+
+    replaceElement('.original', replacement);
+    expect(document.querySelector('.original')).toBeNull();
+    expect(document.querySelector('.replacement')).toBeTruthy();
+  });
+});
+
+describe('gardener', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should return DOM element if nodeType is 1', () => {
+    const element = document.createElement('div');
+    const result = gardener(element);
+    expect(result).toBe(element);
+  });
+
+  test('should create simple element', () => {
+    const dom = { t: 'div' };
+    const element = gardener(dom);
+    expect(element.tagName).toBe('DIV');
+  });
+
+  test('should create element with classes', () => {
+    const dom = { t: 'div', cn: ['class1', 'class2'] };
+    const element = gardener(dom);
+    expect(element.classList.contains('class1')).toBe(true);
+    expect(element.classList.contains('class2')).toBe(true);
+  });
+
+  test('should create element with text content', () => {
+    const dom = { t: 'p', txt: 'Hello World' };
+    const element = gardener(dom);
+    expect(element.innerText).toBe('Hello World');
+  });
+
+  test('should create element with attributes', () => {
+    const dom = {
+      t: 'input',
+      attr: { type: 'text', placeholder: 'Enter text', id: 'test-input' }
+    };
+    const element = gardener(dom);
+    expect(element.getAttribute('type')).toBe('text');
+    expect(element.getAttribute('placeholder')).toBe('Enter text');
+    expect(element.id).toBe('test-input');
+  });
+
+  test('should create element with data attributes', () => {
+    const dom = {
+      t: 'div',
+      attr: { 'data-test': 'value', 'data-id': '123' }
+    };
+    const element = gardener(dom);
+    expect(element.getAttribute('data-test')).toBe('value');
+    expect(element.getAttribute('data-id')).toBe('123');
+  });
+
+  test('should create element with aria attributes', () => {
+    const dom = {
+      t: 'button',
+      attr: { 'aria-label': 'Close', 'aria-expanded': 'false' }
+    };
+    const element = gardener(dom);
+    expect(element.getAttribute('aria-label')).toBe('Close');
+    expect(element.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  test('should create element with event listeners', () => {
+    const mockHandler = jest.fn();
+    const dom = {
+      t: 'button',
+      events: { click: mockHandler }
+    };
+    const element = gardener(dom);
+    element.click();
+    expect(mockHandler).toHaveBeenCalledTimes(1);
+  });
+
+  test('should create element with multiple event listeners', () => {
+    const clickHandler = jest.fn();
+    const mouseoverHandler = jest.fn();
+    const dom = {
+      t: 'div',
+      events: { click: clickHandler, mouseover: mouseoverHandler }
+    };
+    const element = gardener(dom);
+
+    element.click();
+    element.dispatchEvent(new Event('mouseover'));
+
+    expect(clickHandler).toHaveBeenCalledTimes(1);
+    expect(mouseoverHandler).toHaveBeenCalledTimes(1);
+  });
+
+  test('should create nested elements', () => {
+    const dom = {
+      t: 'div',
+      children: [
+        { t: 'span', txt: 'Child 1' },
+        { t: 'p', txt: 'Child 2' }
+      ]
+    };
+    const element = gardener(dom);
+    expect(element.children.length).toBe(2);
+    expect(element.children[0].tagName).toBe('SPAN');
+    expect(element.children[0].innerText).toBe('Child 1');
+    expect(element.children[1].tagName).toBe('P');
+    expect(element.children[1].innerText).toBe('Child 2');
+  });
+
+  test('should create deeply nested elements', () => {
+    const dom = {
+      t: 'div',
+      children: [
+        {
+          t: 'section',
+          children: [
+            { t: 'h1', txt: 'Title' },
+            { t: 'p', txt: 'Content' }
+          ]
+        }
+      ]
+    };
+    const element = gardener(dom);
+    expect(element.children.length).toBe(1);
+    expect(element.children[0].tagName).toBe('SECTION');
+    expect(element.children[0].children.length).toBe(2);
+  });
+
+  test('should create SVG element', () => {
+    const dom = { t: 'svg' };
+    const element = gardener(dom);
+    expect(element.tagName).toBe('svg');
+    expect(element.namespaceURI).toBe('http://www.w3.org/2000/svg');
+  });
+
+  test('should create SVG path element', () => {
+    const dom = {
+      t: 'path',
+      attr: { d: 'M10 10 H 90 V 90 H 10 Z' }
+    };
+    const element = gardener(dom);
+    expect(element.tagName).toBe('path');
+    expect(element.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(element.getAttribute('d')).toBe('M10 10 H 90 V 90 H 10 Z');
+  });
+
+  test('should create SVG with classes', () => {
+    const dom = {
+      t: 'circle',
+      cn: ['svg-class'],
+      attr: { cx: '50', cy: '50', r: '40' }
+    };
+    const element = gardener(dom);
+    expect(element.classList.contains('svg-class')).toBe(true);
+    expect(element.getAttribute('cx')).toBe('50');
+  });
+
+  test('should create complex SVG structure', () => {
+    const dom = {
+      t: 'svg',
+      attr: { width: '100', height: '100' },
+      children: [
+        { t: 'circle', attr: { cx: '50', cy: '50', r: '40' } },
+        { t: 'rect', attr: { x: '10', y: '10', width: '30', height: '30' } }
+      ]
+    };
+    const element = gardener(dom);
+    expect(element.children.length).toBe(2);
+    expect(element.children[0].tagName).toBe('circle');
+    expect(element.children[1].tagName).toBe('rect');
+  });
+
+  test('should handle property attributes like value', () => {
+    const dom = {
+      t: 'input',
+      attr: { value: 'test-value', selectedIndex: '2' }
+    };
+    const element = gardener(dom);
+    expect(element.getAttribute('value')).toBe('test-value');
+  });
+
+  test('should handle empty string attribute as boolean', () => {
+    const dom = {
+      t: 'button',
+      attr: { disabled: '' }
+    };
+    const element = gardener(dom);
+    expect(element.disabled).toBe(true);
+  });
+
+  test('should create element with all features combined', () => {
+    const clickHandler = jest.fn();
+    const dom = {
+      t: 'div',
+      cn: ['container', 'main'],
+      txt: 'Container Text',
+      attr: { id: 'main-container', 'data-test': 'value' },
+      events: { click: clickHandler },
+      children: [
+        { t: 'h1', txt: 'Title', cn: ['title'] },
+        { t: 'p', txt: 'Paragraph' }
+      ]
+    };
+
+    const element = gardener(dom);
+
+    expect(element.tagName).toBe('DIV');
+    expect(element.classList.contains('container')).toBe(true);
+    expect(element.classList.contains('main')).toBe(true);
+    expect(element.innerText).toContain('Container Text');
+    expect(element.id).toBe('main-container');
+    expect(element.getAttribute('data-test')).toBe('value');
+    expect(element.children.length).toBe(2);
+
+    element.click();
+    expect(clickHandler).toHaveBeenCalled();
+  });
+});

package/template/src/frontend/static/gardenerDev.js

@@ -78,7 +78,7 @@ const pagebtns = gardener({
           const result = await fetch('/savetemplate', {
             method: 'POST',
             headers: { "Content-Type": 'application/json' },
-            body: JSON.stringify({ path: window.location.pathname })
+            body: JSON.stringify({ path: fetchElement('#fileName').innerText })
           });
 
           const data = await result.json(); // ✅ fix
@@ -310,7 +310,6 @@ async function addComponent(txt, path) {
     if (!res.ok) console.error('wrong');
 
     const data = await res.json()
-    console.log(data);
 
   }
   catch (err) {
@@ -328,7 +327,6 @@ function opnPagedialog(btn = true) {
             e.preventDefault()
             const data = new FormData(e.target);
             const input = Object.fromEntries(data.entries());
-            console.log(input)
 
             const response = await fetch('/addpage', {
               method: 'POST',
@@ -337,7 +335,6 @@ function opnPagedialog(btn = true) {
               },
               body: JSON.stringify(input)
             }).then(res => res.json())
-            console.log(response)
             opnPagedialog(false)
             window.location.href = `${input.page}`
           }
@@ -353,12 +350,10 @@ function opnPagedialog(btn = true) {
 
     })
 
-    console.log('test')
     appendElement(body, dialog);
     fetchElement('.pathinput').focus();
   }
   else {
-    console.log('removed')
     fetchElement('.addpageform').remove();
   }
 }
@@ -416,7 +411,6 @@ export function parser(element, isParent = true) {
     element = fetchElement(element);
   }
 
-  console.log(element)
   const obj = {
     t: element.tagName.toLowerCase(),
   };
@@ -489,6 +483,9 @@ export class State {
     cb(this.value);
     this.cb.push(cb);
   }
+  unregisterCb(cb) {
+    this.cb = this.cb.filter(c => c !== cb);
+  }
   setTo(val) {
     this.value = val;
     this.cb.forEach(cb => { cb(val) });

package/template/src/frontend/static/style.css

@@ -273,9 +273,6 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
-  .bottom-6 {
-    bottom: calc(var(--spacing) * 6);
-  }
   .bottom-20 {
     bottom: calc(var(--spacing) * 20);
   }
@@ -306,6 +303,24 @@
   .z-100 {
     z-index: 100;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .m-2 {
     margin: calc(var(--spacing) * 2);
   }
@@ -351,6 +366,9 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .inline {
     display: inline;
   }
@@ -369,9 +387,6 @@
   .h-15 {
     height: calc(var(--spacing) * 15);
   }
-  .h-35 {
-    height: calc(var(--spacing) * 35);
-  }
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
@@ -393,12 +408,6 @@
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
-  .w-35 {
-    width: calc(var(--spacing) * 35);
-  }
-  .w-50 {
-    width: calc(var(--spacing) * 50);
-  }
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
@@ -555,9 +564,6 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
-  .bg-gray-400 {
-    background-color: var(--color-gray-400);
-  }
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -570,9 +576,6 @@
   .bg-green-300 {
     background-color: var(--color-green-300);
   }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
   .bg-green-700 {
     background-color: var(--color-green-700);
   }
@@ -793,13 +796,6 @@
       }
     }
   }
-  .hover\:bg-gray-800 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-800);
-      }
-    }
-  }
   .hover\:bg-gray-900 {
     &:hover {
       @media (hover: hover) {
@@ -807,13 +803,6 @@
       }
     }
   }
-  .hover\:bg-green-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-600);
-      }
-    }
-  }
   .hover\:bg-green-800 {
     &:hover {
       @media (hover: hover) {

package/template/src/frontend/template/template._.ejs

@@ -10,6 +10,7 @@
   </head>
   <body class="bg-slate-50 text-slate-900 font-sans">
 
+    <div class='hidden' id='fileName'><%=fileName%></div>
     <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
     <div class='notification'></div>
 

package/template/src/frontend/views/_.ejs

@@ -10,6 +10,7 @@
   </head>
   <body class="bg-slate-50 text-slate-900 font-sans">
 
+    <div class='hidden' id='fileName'><%=fileName%></div>
     <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
     <div class='notification'></div>