neo.mjs 10.2.0 → 10.3.0

package/src/menu/List.mjs

@@ -394,7 +394,7 @@ class List extends BaseList {
 
         if (me.activeSubMenu !== subMenu) {
             me.activeSubMenu = subMenu;
-            subMenu.render(true)
+            subMenu.initVnode(true)
         }
     }
 

package/src/mixin/VdomLifecycle.mjs

@@ -21,20 +21,17 @@ class VdomLifecycle extends Base {
          */
         className: 'Neo.mixin.VdomLifecycle',
         /**
-         * True automatically mounts a component after being rendered.
+         * True automatically initializes the vnode of a component after being created inside the init call.
          * Use this for the top level component of your app.
-         * @member {Boolean} autoMount=false
-         * @tutorial 02_ClassSystem
+         * @member {Boolean} autoInitVnode=false
          */
-        autoMount: false,
+        autoInitVnode: false,
         /**
-         * True automatically renders a component after being created inside the init call.
+         * True automatically mounts a component after being rendered.
          * Use this for the top level component of your app.
-         * @member {Boolean} autoRender=false
-         * @see {@link Neo.component.Base#init init}
-         * @tutorial 02_ClassSystem
+         * @member {Boolean} autoMount=false
          */
-        autoRender: false,
+        autoMount: false,
         /**
          * Internal flag for vdom changes after a component got unmounted
          * (delta updates can no longer get applied & a new render call is required before re-mounting)
@@ -50,6 +47,13 @@ class VdomLifecycle extends Base {
          * @reactive
          */
         isVdomUpdating_: false,
+        /**
+         * True in case the component is initializing the vnode
+         * @member {Boolean} isVnodeInitializing_=false
+         * @protected
+         * @reactive
+         */
+        isVnodeInitializing_: false,
         /**
          * True in case the component is mounted to the DOM
          * @member {Boolean} mounted_=false
@@ -64,13 +68,6 @@ class VdomLifecycle extends Base {
          * @reactive
          */
         needsVdomUpdate_: false,
-        /**
-         * True in case the component is rendering the vnode
-         * @member {Boolean} rendering_=false
-         * @protected
-         * @reactive
-         */
-        rendering_: false,
         /**
          * Set this to true for bulk updates. Ensure to set it back to false afterwards.
          * Internally the value will get saved as a number to ensure that child methods won't stop the silent mode too early.
@@ -89,7 +86,7 @@ class VdomLifecycle extends Base {
          */
         updateDepth_: 1,
         /**
-         * The component vnode tree. Available after the component got rendered.
+         * The component vnode tree. Available after the component got vnodeInitialized.
          * @member {Object} vnode_=={[isDescriptor]: true, value: null, isEqual: (a, b) => a === b,}
          * @protected
          * @reactive
@@ -312,6 +309,64 @@ class VdomLifecycle extends Base {
         return updateDepth === -1 ? true : distance < updateDepth
     }
 
+    /**
+     * Creates the vnode tree for this component and mounts the component in case
+     * - you pass true for the mount param
+     * - or the autoMount config is set to true
+     * @param {Boolean} [mount] Mount the DOM after the vnode got created
+     * @returns {Promise<any>} If getting there, we return the data from vdom.Helper: create(), containing the vnode.
+     */
+    async initVnode(mount) {
+        let me                            = this,
+            autoMount                     = mount || me.autoMount,
+            {app}                         = me,
+            {allowVdomUpdatesInTests, unitTestMode, useVdomWorker} = Neo.config;
+
+        if (unitTestMode && !allowVdomUpdatesInTests) return;
+
+        // Verify that the critical rendering path => CSS files for the new tree is in place
+        if (!unitTestMode && autoMount && currentWorker.countLoadingThemeFiles !== 0) {
+            currentWorker.on('themeFilesLoaded', function() {
+                !me.mounted && me.initVnode(mount)
+            }, me, {once: true});
+
+            return
+        }
+
+        me.isVnodeInitializing = true;
+
+        if (!app.vnodeInitialized) {
+            app.isVnodeInitializing = true
+        }
+
+        if (me.vdom) {
+            me.isVdomUpdating = true;
+
+            delete me.vdom.removeDom;
+
+            me._needsVdomUpdate = false;
+            me.afterSetNeedsVdomUpdate?.(false, true);
+
+            const data = await Promise.resolve(Neo.vdom.Helper.create({
+                appName    : me.appName,
+                autoMount,
+                parentId   : autoMount ? me.getMountedParentId()    : undefined,
+                parentIndex: autoMount ? me.getMountedParentIndex() : undefined,
+                vdom       : TreeBuilder.getVdomTree(me.vdom, -1),
+                windowId   : me.windowId
+            }));
+
+            me.onInitVnode(data.vnode, useVdomWorker ? autoMount : false);
+            me.isVdomUpdating = false;
+
+            autoMount && !useVdomWorker && me.mount();
+
+            me.resolveVdomUpdate();
+
+            return data
+        }
+    }
+
     /**
      * Checks for vdom updates inside the parent chain and if found.
      * Registers the component for a vdom update once done.
@@ -377,23 +432,23 @@ class VdomLifecycle extends Base {
     }
 
     /**
-     * Gets called from the render() promise success handler
+     * Gets called from the initVnode() promise success handler
      * @param {Object} vnode
      * @param {Boolean} autoMount Mount the DOM after the vnode got created
      * @protected
      */
-    onRender(vnode, autoMount) {
+    onInitVnode(vnode, autoMount) {
         let me    = this,
             {app} = me;
 
-        me.rendering = false;
+        me.isVnodeInitializing = false;
 
-        // if app is a check to see if the Component got destroyed while rendering => before onRender got triggered
+        // if app is a check to see if the Component got destroyed while vnodeInitialising => before onInitVnode got triggered
         if (app) {
-            if (!app.rendered) {
-                app.rendering = false;
-                app.rendered = true;
-                app.fire('render')
+            if (!app.vnodeInitialized) {
+                app.isVnodeInitializing = false;
+                app.vnodeInitialized = true;
+                app.fire('vnodeInitialized')
             }
 
             me.vnode = vnode;
@@ -407,12 +462,12 @@ class VdomLifecycle extends Base {
                 child = Neo.getComponent(childIds[i]);
 
                 if (child) {
-                    child.rendered = true
+                    child.vnodeInitialized = true
                 }
             }
 
-            me._rendered = true; // silent update
-            me.fire('rendered', me.id);
+            me._vnodeInitialized = true; // silent update
+            me.fire('vnodeInitialized', me.id);
 
             if (autoMount) {
                 me.mounted = true;
@@ -435,64 +490,6 @@ class VdomLifecycle extends Base {
         })
     }
 
-    /**
-     * Creates the vnode tree for this component and mounts the component in case
-     * - you pass true for the mount param
-     * - or the autoMount config is set to true
-     * @param {Boolean} [mount] Mount the DOM after the vnode got created
-     * @returns {Promise<any>} If getting there, we return the data from vdom.Helper: create(), containing the vnode.
-     */
-    async render(mount) {
-        let me                            = this,
-            autoMount                     = mount || me.autoMount,
-            {app}                         = me,
-            {allowVdomUpdatesInTests, unitTestMode, useVdomWorker} = Neo.config;
-
-        if (unitTestMode && !allowVdomUpdatesInTests) return;
-
-        // Verify that the critical rendering path => CSS files for the new tree is in place
-        if (!unitTestMode && autoMount && currentWorker.countLoadingThemeFiles !== 0) {
-            currentWorker.on('themeFilesLoaded', function() {
-                !me.mounted && me.render(mount)
-            }, me, {once: true});
-
-            return
-        }
-
-        me.rendering = true;
-
-        if (!app.rendered) {
-            app.rendering = true
-        }
-
-        if (me.vdom) {
-            me.isVdomUpdating = true;
-
-            delete me.vdom.removeDom;
-
-            me._needsVdomUpdate = false;
-            me.afterSetNeedsVdomUpdate?.(false, true);
-
-            const data = await Promise.resolve(Neo.vdom.Helper.create({
-                appName    : me.appName,
-                autoMount,
-                parentId   : autoMount ? me.getMountedParentId()    : undefined,
-                parentIndex: autoMount ? me.getMountedParentIndex() : undefined,
-                vdom       : TreeBuilder.getVdomTree(me.vdom, -1),
-                windowId   : me.windowId
-            }));
-
-            me.onRender(data.vnode, useVdomWorker ? autoMount : false);
-            me.isVdomUpdating = false;
-
-            autoMount && !useVdomWorker && me.mount();
-
-            me.resolveVdomUpdate();
-
-            return data
-        }
-    }
-
     /**
      * Internal helper fn to resolve the Promise for updateVdom()
      * @param {Object}   [data] The return value of vdom.Helper.update()
@@ -529,7 +526,7 @@ class VdomLifecycle extends Base {
     /**
      * In case a component receives a new vnode, we want to do:
      * - sync the vdom ids
-     * - setting rendered to true for child components
+     * - setting vnodeInitialized to true for child components
      * - updating the parent component to ensure that the vnode tree stays persistent
      * @param {Neo.vdom.VNode} [vnode=this.vnode]
      */
@@ -571,9 +568,9 @@ class VdomLifecycle extends Base {
                 // silent update
                 component._vnode = ComponentManager.addVnodeComponentReferences(childVnode, component.id);
 
-                if (!component.rendered) {
-                    component._rendered = true;
-                    component.fire('rendered', component.id)
+                if (!component.vnodeInitialized) {
+                    component._vnodeInitialized = true;
+                    component.fire('vnodeInitialized', component.id)
                 }
 
                 component.mounted = true

package/src/tab/Container.mjs

@@ -30,7 +30,7 @@ class Container extends BaseContainer {
          */
         ntype: 'tab-container',
         /**
-         * You can use null to not render any items initially
+         * You can use null to not mount any items initially
          * @member {Number|null} activeIndex_=0
          * @reactive
          */
@@ -197,7 +197,7 @@ class Container extends BaseContainer {
         NeoArray.add(cls, 'neo-' + value);
         me.setSilent({cls});
 
-        if (me.rendered) {
+        if (me.vnodeInitialized) {
             me.layout.setSilent(me.getLayoutConfig());
             me.getTabBar().setSilent({dock: value});
             me.getTabStrip().setSilent({cls: ['neo-tab-strip',  'neo-dock-' + value]});

package/src/tooltip/Base.mjs

@@ -347,7 +347,7 @@ class Tooltip extends Container {
             me.addTimeout('dismiss', me.hide.bind(me), me.dismissDelay, data)
         }
 
-        !me.mounted && me.render(true)
+        !me.mounted && me.initVnode(true)
     }
 
     /**

package/src/tree/Accordion.mjs

@@ -130,7 +130,7 @@ class AccordionTree extends TreeList {
 
         me[!value ? 'addCls' : 'removeCls']('root-not-collapsible');
 
-        if (me.rendered && value === false) {
+        if (me.vnodeInitialized && value === false) {
             let {store} = me;
 
             store.items.forEach(record => {
@@ -391,7 +391,7 @@ class AccordionTree extends TreeList {
 
         me.clear(false);
 
-        if (!me.mounted && me.rendering) {
+        if (!me.mounted && me.isVnodeInitializing) {
             me.on('mounted', () => {
                 me.createItems(null, me.getListItemsRoot(), 0);
                 me.update()

package/src/worker/App.mjs

@@ -97,13 +97,13 @@ class App extends Base {
      * Remote method to use inside main threads for creating neo based class instances.
      * Be aware that you can only pass configs which can get converted into pure JSON.
      *
-     * Rendering a component into the document.body
+     * Mounting a component into the document.body
      * @example:
      *     Neo.worker.App.createNeoInstance({
-     *         ntype     : 'button',
-     *         autoMount : true,
-     *         autoRender: true
-     *         text      : 'Hi Nige!'
+     *         ntype        : 'button',
+     *         autoInitVnode: true,
+     *         autoMount    : true,
+     *         text         : 'Hi Nige!'
      *     }).then(id => console.log(id))
      *
      * Inserting a component into a container
@@ -150,8 +150,8 @@ class App extends Base {
             }
         } else {
             // default parentId='document.body' => we want it to get shown
-            config.autoMount  = true;
-            config.autoRender = true;
+            config.autoInitVnode = true;
+            config.autoMount     = true;
 
             instance = Neo[config.ntype ? 'ntype' : 'create'](config)
         }

package/test/components/files/component/Base.mjs

@@ -65,7 +65,7 @@ StartTest(t => {
         t.is(buttonId, 'neo-button-1');
 
         await t.waitForSelector('.neo-button');
-        t.diag('Button got rendered.');
+        t.diag('Button got vnodeInitialized.');
 
         t.diag('Child update before parent update');
         Neo.worker.App.setConfigs({id: buttonId,  text  : 'world'});

package/test/siesta/siesta.js

@@ -84,6 +84,8 @@ project.plan(
     {
         group: 'functional',
         items: [
+            'tests/functional/HtmlTemplateComponent.mjs',
+            'tests/functional/Parse5Processor.mjs',
             'tests/functional/Button.mjs'
         ]
     },

package/test/siesta/tests/classic/Button.mjs

@@ -15,10 +15,10 @@ Neo.config.useDomApiRenderer = true;
 const appName = 'ClassicButtonTest';
 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
 };
 
 StartTest(t => {
@@ -35,7 +35,7 @@ StartTest(t => {
             text   : 'Click me'
         });
 
-        ({vnode} = await button.render());
+        ({vnode} = await button.initVnode());
         button.mounted = true; // Manually mount to enable updates in the test env
     });
 

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

@@ -15,10 +15,10 @@ Neo.config.useDomApiRenderer = true;
 const appName = 'FunctionalButtonTest';
 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
 };
 
 StartTest(t => {
@@ -35,7 +35,7 @@ StartTest(t => {
             text   : 'Click me'
         });
 
-        ({vnode} = await button.render());
+        ({vnode} = await button.initVnode());
         button.mounted = true; // Manually mount to enable updates in the test env
     });
 
@@ -110,4 +110,4 @@ StartTest(t => {
         t.isDeeply(delta.cls.remove, ['pressed'], 'Delta should remove "pressed" class');
         t.notOk(updateData.vnode.className.includes('pressed'), 'Vnode should not have "pressed" class');
     });
-});
+});