neo.mjs 10.2.0 → 10.3.0

package/test/siesta/tests/functional/HtmlTemplateComponent.mjs

@@ -1,9 +1,10 @@
-import Neo                from '../../../../src/Neo.mjs';
-import * as core          from '../../../../src/core/_export.mjs';
-import FunctionalBase     from '../../../../src/functional/component/Base.mjs';
-import DomApiVnodeCreator from '../../../../src/vdom/util/DomApiVnodeCreator.mjs';
-import VdomHelper         from '../../../../src/vdom/Helper.mjs';
-import html               from '../../../../src/functional/util/html.mjs';
+import Neo                   from '../../../../src/Neo.mjs';
+import * as core             from '../../../../src/core/_export.mjs';
+import HtmlTemplateProcessor from '../../../../src/functional/util/HtmlTemplateProcessor.mjs';
+import FunctionalBase        from '../../../../src/functional/component/Base.mjs';
+import DomApiVnodeCreator    from '../../../../src/vdom/util/DomApiVnodeCreator.mjs';
+import VdomHelper            from '../../../../src/vdom/Helper.mjs';
+import {html}                from '../../../../src/functional/util/html.mjs';
 
 // IMPORTANT: This test file uses real components and expects them to render.
 // We need to enable unitTestMode for isolation, but also allow VDOM updates.
@@ -16,10 +17,10 @@ Neo.config.useDomApiRenderer = true;
 const appName = 'HtmlTemplateTest';
 Neo.apps = Neo.apps || {};
 Neo.apps[appName] = {
-    name     : appName,
-    fire     : Neo.emptyFn,
-    isMounted: () => true,
-    rendering: false
+    name             : appName,
+    fire             : Neo.emptyFn,
+    isMounted        : () => true,
+    vnodeInitialising: false
 };
 
 /**
@@ -33,7 +34,7 @@ class TestComponent extends FunctionalBase {
         testText_          : 'Hello from Template!'
     }
 
-    createTemplateVdom(config) {
+    render(config) {
         return html`
             <div id="my-template-div">
                 <p>${config.testText}</p>
@@ -45,48 +46,207 @@ class TestComponent extends FunctionalBase {
 
 TestComponent = Neo.setupClass(TestComponent);
 
+/**
+ * @class TestComponentWithChildren
+ * @extends Neo.functional.component.Base
+ */
+class TestComponentWithChildren extends FunctionalBase {
+    static config = {
+        className          : 'TestComponentWithChildren',
+        enableHtmlTemplates: true,
+        childText_         : 'Inner Content'
+    }
+
+    render(config) {
+        return html`
+            <div id="parent-div">
+                <${TestComponent} id="child-comp" testText="${config.childText}" />
+            </div>
+        `;
+    }
+}
+
+TestComponentWithChildren = Neo.setupClass(TestComponentWithChildren);
+
+/**
+ * @class TestConditionalComponent
+ * @extends Neo.functional.component.Base
+ */
+class TestConditionalComponent extends FunctionalBase {
+    static config = {
+        className          : 'TestConditionalComponent',
+        enableHtmlTemplates: true,
+        showDetails_       : false,
+        detailsText_       : 'Here are the details!'
+    }
+
+    render(config) {
+        return html`
+            <div id="conditional-div">
+                <h1>Title</h1>
+                ${config.showDetails && html`<p id="details-p">${config.detailsText}</p>`}
+            </div>
+        `;
+    }
+}
+
+TestConditionalComponent = Neo.setupClass(TestConditionalComponent);
+
 
 StartTest(t => {
-    let component, vnode;
+    let component;
 
     t.beforeEach(async t => {
         component = Neo.create(TestComponent, {
             appName,
             id: 'my-test-component'
         });
-
-        ({vnode} = await component.render());
+        // The initial initVnode() call is synchronous and returns the HtmlTemplate object.
+        // The actual VDOM is built asynchronously after this.
+        component.initVnode();
         component.mounted = true; // Manually mount to enable updates in the test env
     });
 
     t.afterEach(t => {
         component?.destroy();
         component = null;
-        vnode     = null;
     });
 
-    t.it('should create initial vnode correctly using html template', async t => {
-        t.expect(vnode.nodeName).toBe('div');
-        t.expect(vnode.id).toBe('my-test-component'); // The component's own ID
-        t.expect(vnode.childNodes.length).toBe(2);
+    t.it('should create initial vdom correctly using html template', async t => {
+        // Wait for the async VDOM update to complete
+        await t.waitFor(() => Object.keys(component.vdom).length > 0);
+
+        const vdom = component.vdom;
+
+        t.expect(vdom.id).toBe('my-test-component'); // The component's own ID
+        t.expect(vdom.tag).toBe('div');
+        t.expect(vdom.cn.length).toBe(2);
+
+        const pNode = vdom.cn[0];
+        t.expect(pNode.tag).toBe('p');
+        t.expect(pNode.text).toBe('Hello from Template!');
+
+        const spanNode = vdom.cn[1];
+        t.expect(spanNode.tag).toBe('span');
+        t.expect(spanNode.text).toBe('Another element');
+    });
+
+    t.it('should update vdom when reactive config changes', async t => {
+        // Wait for the initial render to finish
+        await t.waitFor(() => Object.keys(component.vdom).length > 0);
+
+        const initialVdom = {...component.vdom};
+
+        // Update the component
+        component.testText = 'Updated Text!';
+
+        // Wait for the async VDOM update to complete after the change
+        await t.waitFor(() => component.vdom.cn[0].text === 'Updated Text!');
+
+        const updatedVdom = component.vdom;
+
+        t.expect(updatedVdom.cn[0].text).toBe('Updated Text!');
+        // Ensure the rest of the VDOM structure remains the same
+        t.expect(updatedVdom.tag).toBe(initialVdom.tag);
+        t.expect(updatedVdom.cn.length).toBe(initialVdom.cn.length);
+    });
+
+    t.it('should handle nested components defined in a template', t => {
+        const parentComponent = Neo.create(TestComponentWithChildren, {
+            appName,
+            id: 'my-parent-component'
+        });
+
+        parentComponent.initVnode();
+        parentComponent.mounted = true;
+
+        const parentVdom = parentComponent.vdom;
+        t.expect(parentVdom.id).toBe('my-parent-component');
+        t.expect(parentVdom.tag).toBe('div');
+
+        // 1. Check that the parent's VDOM contains the correct reference
+        const childVdomRef = parentVdom.cn[0];
+        t.expect(childVdomRef.componentId).toBe('child-comp');
+
+        // 2. Get the child instance and check its properties
+        const childInstance = parentComponent.childComponents.get('child-comp').instance;
+
+        t.is(childInstance.constructor, TestComponent, 'Child instance should be an instance of TestComponent');
+
+        t.expect(childInstance.testText).toBe('Inner Content');
+
+        // 3. Check the child's own VDOM directly
+        const childVdom = childInstance.vdom;
+
+        t.expect(childVdom.tag).toBe('div');
+        t.expect(childVdom.cn[0].tag).toBe('p');
+        t.expect(childVdom.cn[0].text).toBe('Inner Content');
+
+        parentComponent.destroy();
+    });
+
+    t.it('should handle camelCase attributes correctly', async t => {
+        const parentComponent = Neo.create(TestComponentWithChildren, {
+            appName,
+            id: 'my-parent-component',
+            childText: 'Custom Text for camelCase'
+        });
+
+        parentComponent.initVnode();
+        parentComponent.mounted = true;
+
+        await t.waitFor(() => parentComponent.childComponents.get('child-comp'));
 
-        const pNode = vnode.childNodes[0];
-        t.expect(pNode.nodeName).toBe('p');
-        t.expect(pNode.id).toContain('neo-vnode-'); // Expecting a generated ID
-        t.expect(pNode.textContent).toBe('Hello from Template!');
+        const childInstance = parentComponent.childComponents.get('child-comp').instance;
 
-        const spanNode = vnode.childNodes[1];
-        t.expect(spanNode.nodeName).toBe('span');
-        t.expect(spanNode.id).toContain('neo-vnode-'); // Expecting a generated ID
-        t.expect(spanNode.textContent).toBe('Another element');
+        await t.waitFor(() => childInstance.vdom.cn?.[0]?.text === 'Custom Text for camelCase');
+
+        t.expect(childInstance.testText).toBe('Custom Text for camelCase');
+        t.expect(childInstance.vdom.cn[0].text).toBe('Custom Text for camelCase');
+
+        parentComponent.destroy();
     });
 
-    t.it('should update vnode when reactive config changes', async t => {
-        // Update the component to get the updated vnode
-        const opts = await component.set({testText: 'Updated Text!'});
-        vnode = opts.vnode;
+    t.it('should handle conditional rendering correctly', async t => {
+        const conditionalComponent = Neo.create(TestConditionalComponent, {
+            appName,
+            id: 'my-conditional-component'
+        });
+
+        conditionalComponent.initVnode();
+        conditionalComponent.mounted = true;
+
+        // 1. Initial state: details should NOT be rendered
+        await t.waitFor(() => conditionalComponent.vdom?.cn);
+
+        let vdom = conditionalComponent.vdom;
+        t.expect(vdom.cn.length).toBe(1); // Only the h1
+        t.expect(vdom.cn[0].tag).toBe('h1');
+        t.expect(vdom.cn.find(n => n && n.id === 'details-p')).toBeFalsy('Details <p> should not exist initially');
+
+        // 2. Update state: show the details
+        conditionalComponent.showDetails = true;
+
+        // 3. Wait for update and assert new state
+        await t.waitFor(() => conditionalComponent.vdom.cn.length > 1);
+
+        vdom = conditionalComponent.vdom;
+        t.expect(vdom.cn.length).toBe(2); // h1 and the new p
+        const detailsNode = vdom.cn.find(n => n.id === 'details-p');
+        t.ok(detailsNode, 'Details <p> should now exist');
+        t.expect(detailsNode.tag).toBe('p');
+        t.expect(detailsNode.text).toBe('Here are the details!');
+
+        // 4. Update state again: hide the details
+        conditionalComponent.showDetails = false;
+
+        // 5. Wait for update and assert final state
+        await t.waitFor(() => conditionalComponent.vdom.cn.length === 1);
+
+        vdom = conditionalComponent.vdom;
+        t.expect(vdom.cn.length).toBe(1); // Back to just the h1
+        t.expect(vdom.cn.find(n => n && n.id === 'details-p')).toBeFalsy('Details <p> should be removed');
 
-        const pNode = vnode.childNodes[0];
-        t.expect(pNode.textContent).toBe('Updated Text!');
+        conditionalComponent.destroy();
     });
 });

package/test/siesta/tests/functional/Parse5Processor.mjs

@@ -0,0 +1,82 @@
+import Neo                   from '../../../../src/Neo.mjs';
+import * as core             from '../../../../src/core/_export.mjs';
+import Button                from '../../../../src/button/Base.mjs';
+import HtmlTemplateProcessor from '../../../../src/functional/util/HtmlTemplateProcessor.mjs';
+import {html}                from '../../../../src/functional/util/html.mjs';
+
+const processor = HtmlTemplateProcessor;
+
+StartTest(async t => {
+    let parsedVdomResult;
+    const mockComponent = {
+        continueUpdateWithVdom: vdom => {
+            parsedVdomResult = vdom;
+        }
+    };
+
+    t.it('should parse a simple template with a single root node', async t => {
+        const template = html`<div><p>Hello</p></div>`;
+        await processor.process(template, mockComponent);
+
+        t.expect(parsedVdomResult).toEqual({
+            tag: 'div',
+            cn: [{
+                tag: 'p',
+                text: 'Hello'
+            }]
+        });
+    });
+
+    t.it('should handle interpolated values in text nodes', async t => {
+        const name = 'Neo';
+        const template = html`<p>Hello ${name}</p>`;
+        await processor.process(template, mockComponent);
+
+        t.expect(parsedVdomResult).toEqual({
+            tag: 'p',
+            text: 'Hello Neo'
+        });
+    });
+
+    t.it('should handle interpolated values in attributes', async t => {
+        const id = 'my-div';
+        const template = html`<div id="${id}"></div>`;
+        await processor.process(template, mockComponent);
+
+        t.expect(parsedVdomResult).toEqual({
+            tag: 'div',
+            id: 'my-div'
+        });
+    });
+
+    t.it('should handle non-string (object) values in attributes', async t => {
+        const styleObj = {color: 'blue', fontWeight: 'bold'};
+        const template = html`<div style="${styleObj}"></div>`;
+        await processor.process(template, mockComponent);
+
+        t.expect(parsedVdomResult).toEqual({
+            tag: 'div',
+            style: styleObj
+        });
+    });
+
+    t.it('should handle component tags via interpolation (lexical scope)', async t => {
+        const template = html`<${Button} text="Click Me"/>`;
+        await processor.process(template, mockComponent);
+
+        t.expect(parsedVdomResult).toEqual({
+            module: Button,
+            text: 'Click Me'
+        });
+    });
+
+    t.it('should handle component tags via global namespace string', async t => {
+        const template = html`<Neo.button.Base text="Global Click"/>`;
+        await processor.process(template, mockComponent);
+
+        t.expect(parsedVdomResult).toEqual({
+            module: Button,
+            text: 'Global Click'
+        });
+    });
+});

package/test/siesta/tests/vdom/VdomRealWorldUpdates.mjs

@@ -16,10 +16,10 @@ Neo.config.useDomApiRenderer = true;
 const appName = 'VdomRealWorldTestApp';
 Neo.apps = Neo.apps || {};
 Neo.apps[appName] = {
-    name     : appName,
-    fire     : Neo.emptyFn,
-    isMounted: () => true,
-    rendering: false
+    name             : appName,
+    fire             : Neo.emptyFn,
+    isMounted        : () => true,
+    vnodeInitialising: false
 };
 
 class TestGrandchild extends Component {
@@ -107,7 +107,7 @@ StartTest(t => {
             ]
         });
 
-        await parent.render();
+        await parent.initVnode();
         child      = parent.items[1]; // TestParent inserts a component at index 0
         grandchild = child.items[0];
         parent.mounted = true;