neo.mjs 6.15.4 → 6.15.6

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

@@ -0,0 +1,88 @@
+StartTest(t => {
+    t.it('Checking colliding style updates', async t => {
+        const containerId = await Neo.worker.App.createNeoInstance({
+            ntype : 'container',
+            height: 250,
+            style : {backgroundColor: 'red'},
+            width : 300
+        });
+
+        t.is(containerId, 'neo-container-1');
+
+        await t.waitForSelector('.neo-container');
+        t.diag('Container got rendered.');
+
+        const componentId = await Neo.worker.App.createNeoInstance({
+            ntype   : 'component',
+            height  : 150,
+            parentId: containerId,
+            style   : {backgroundColor: 'blue'},
+            width   : 150
+        });
+
+        t.is(componentId, 'neo-component-1');
+        t.diag('Component got rendered.');
+
+        t.diag('Child update before parent update');
+        Neo.worker.App.setConfigs({id: componentId, style: {backgroundColor: 'green'}});
+        Neo.worker.App.setConfigs({id: containerId, style: {backgroundColor: 'orange'}});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(componentId).style.backgroundColor, 'green');
+        t.is(document.getElementById(containerId).style.backgroundColor, 'orange');
+
+        t.diag('Parent update before child update');
+        Neo.worker.App.setConfigs({id: containerId, style: {backgroundColor: 'pink'}});
+        Neo.worker.App.setConfigs({id: componentId, style: {backgroundColor: 'purple'}});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(containerId).style.backgroundColor, 'pink');
+        t.is(document.getElementById(componentId).style.backgroundColor, 'purple');
+
+        await Neo.worker.App.destroyNeoInstance(containerId)
+    });
+
+    t.it('Checking colliding vdom updates', async t => {
+        const toolbarId = await Neo.worker.App.createNeoInstance({
+            ntype : 'toolbar',
+            height: 200,
+            width : 300
+        });
+
+        t.is(toolbarId, 'neo-toolbar-1');
+
+        await t.waitForSelector('.neo-toolbar');
+        t.diag('Toolbar got rendered.');
+
+        const buttonId = await Neo.worker.App.createNeoInstance({
+            ntype   : 'button',
+            parentId: toolbarId,
+            text    : 'hello'
+        });
+
+        t.is(buttonId, 'neo-button-1');
+
+        await t.waitForSelector('.neo-button');
+        t.diag('Button got rendered.');
+
+        t.diag('Child update before parent update');
+        Neo.worker.App.setConfigs({id: buttonId,  text  : 'world'});
+        Neo.worker.App.setConfigs({id: toolbarId, height: 300});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(toolbarId).style.height, '300px');
+        t.is(document.getElementById(buttonId).firstChild.innerHTML, 'world');
+
+        t.diag('Parent update before child update');
+        Neo.worker.App.setConfigs({id: toolbarId, height: 200});
+        Neo.worker.App.setConfigs({id: buttonId,  text  : 'hello'});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(toolbarId).style.height, '200px');
+        t.is(document.getElementById(buttonId).firstChild.innerHTML, 'hello');
+    });
+});

package/test/components/siesta.js

@@ -75,6 +75,7 @@ project.plan({
 }, {
     group: 'component',
     items: [
+        'files/component/Base.mjs',
         'files/component/DateSelector.mjs'
     ]
 }, {

package/docs/app/model/Tutorial.mjs

@@ -1,41 +0,0 @@
-import Model  from '../../../src/data/Model.mjs';
-
-/**
- * @class Docs.app.model.Tutorial
- * @extends Neo.data.Model
- */
-class Tutorial extends Model {
-    static config = {
-        /**
-         * @member {String} className='Docs.app.model.Tutorial'
-         * @protected
-         */
-        className: 'Docs.app.model.Tutorial',
-        /**
-         * @member {Object[]} fields
-         */
-        fields: [{
-            name: 'fileName',
-            type: 'String'
-        }, {
-            name: 'id',
-            type: 'Integer'
-        }, {
-            name: 'isLeaf',
-            type: 'Boolean'
-        }, {
-            name: 'name',
-            type: 'String'
-        }, {
-            name: 'parentId',
-            type: 'Integer'
-        }, {
-            name: 'type',
-            type: 'String'
-        }]
-    }
-}
-
-Neo.setupClass(Tutorial);
-
-export default Tutorial;

package/docs/app/store/Tutorials.mjs

@@ -1,28 +0,0 @@
-import Store    from '../../../src/data/Store.mjs';
-import Tutorial from '../model/Tutorial.mjs';
-
-/**
- * @class Docs.app.store.Tutorials
- * @extends Neo.data.Store
- */
-class Tutorials extends Store {
-    static config = {
-        /**
-         * @member {String} className='Docs.app.store.Tutorials'
-         * @protected
-         */
-        className: 'Docs.app.store.Tutorials',
-        /**
-         * @member {String} keyProperty='id'
-         */
-        keyProperty: 'id',
-        /**
-         * @member {Neo.data.Model} model=Tutorial
-         */
-        model: Tutorial
-    }
-}
-
-Neo.setupClass(Tutorials);
-
-export default Tutorials;

package/docs/app/view/TutorialsTreeList.mjs

@@ -1,51 +0,0 @@
-import TreeList       from '../../../src/tree/List.mjs';
-import TutorialsStore from '../store/Tutorials.mjs';
-
-/**
- * @class Docs.view.TutorialsTreeList
- * @extends Neo.tree.List
- */
-class TutorialsTreeList extends TreeList {
-    static config = {
-        /**
-         * @member {String} className='Docs.view.TutorialsTreeList'
-         * @protected
-         */
-        className: 'Docs.view.TutorialsTreeList',
-        /**
-         * @member {String} ntype='tutorials-treelist'
-         * @protected
-         */
-        ntype: 'tutorials-treelist',
-        /**
-         * @member {String[]} cls=['docs-tutorials-treelist']
-         */
-        cls: ['docs-tutorials-treelist'],
-        /**
-         * @member {Neo.data.Store|null} store=TutorialsStore
-         * @protected
-         */
-        store: TutorialsStore
-    }
-
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        Neo.Xhr.promiseJson({
-            url: '../../docs/tutorials/tutorials.json'
-        }).then(data => {
-            me.store.data = data.json;
-            me.createItems(null, me.getListItemsRoot(), 0);
-            me.update();
-        });
-    }
-}
-
-Neo.setupClass(TutorialsTreeList);
-
-export default TutorialsTreeList;

package/docs/tutorials/01_Concept.html

@@ -1,45 +0,0 @@
-<div class="neo-header-text-container">
-    <span class="neo-header-text">Tutorial: Concept</span>
-</div>
-<article>
-    <h4>Why yet another Javascript framework?</h4>
-    <ol>
-        <li>neo.mjs is web workers driven</li>
-        <li>neo.mjs does not need any cryptic XML markups</li>
-        <li>neo.mjs uses a custom blazing fast virtual dom engine</li>
-        <li>neo.mjs is based on EcmaScript 8 (ES8)</li>
-        <li>neo.mjs uses HTML5 and CSS3 to the fullest</li>
-        <li>Simplicity</li>
-        <li>No transpiled code</li>
-    </ol>
-    <hr>
-    <p>(1) neo.mjs uses 3 web workers:</p>
-    <ul>
-        <li>App</li>
-        <li>Data</li>
-        <li>Vdom</li>
-    </ul>
-    <p>The main reason is that browsers by default only use 1 CPU core, while most computers and mobile devices have
-        more. Multi-Threading solves this performance bottleneck and it will ensure that there are no hidden
-        background-tasks in the main thread, which mess with your beautiful animations.</p>
-    <p>In short: Most parts of neo.mjs as well as all apps you will create are inside the App worker.</p>
-    <p>The main thread is only responsible to manipulate the DOM and delegate DOM events to the App worker.</p>
-    <p>The Data worker will perform all Ajax requests to your backend and host the Store instances.</p>
-    <p>The Vdom worker parses your JSON based markup (Vdom) into a virtual node (Vnode) and creates deltas
-        when you dynamically change your Vdom.</p>
-    <p>(2) Did you ever enjoy writing pseudo-html including curly braces like {tpl if}, {tpl for} or even better
-        {[this.doSomething()]}? Those XML templates evolved to a point, where they try to do everything what
-        Javascript itself is capable of and you will most likely have encountered scoping issues (where does &quot;this&quot;
-        point to now?). The solution is as simple as it should have been obvious for quite a while: JSON. You can easily manipulate Javascript objects with Javascript.</p>
-    <p>(3) Since neo.mjs does not need to parse XML templates back into JSON and then create virtual DOM nodes,
-        the custom Vdom engine is blazing fast. The algorithms to create deltas are highly efficient and
-        recognise moved DOM subtrees immediately.</p>
-    <p>(4) neo.mjs is most likely the first UI framework out there which does not only allow devs to create
-        ES6 classes on top of ES5 prototypes, but is itself fully written in ES6.</p>
-    <p>(5) neo.mjs uses the latest web APIs and CSS features to the fullest and give you an easy and intuitive
-        access to them.</p>
-    <p>(6) The first and most important design goal of neo.mjs is simplicity. This does not only mean to keep the
-        code base as clean and simple as possible, but also to keep the created DOM as lightweight and minimal as
-        possible.</p>
-    <p>(7) neo.mjs does not use Babel or any other tool to transpile code (which does not mean you can't use it for your own apps).</p>
-</article>

package/docs/tutorials/01_Concept.json

@@ -1,123 +0,0 @@
-[
-    {
-        "tag": "div",
-        "cls": ["neo-header-text-container"],
-        "cn" : [
-            {
-                "tag"      : "span",
-                "cls"      : ["neo-header-text"],
-                "innerHTML": "Tutorial: Concept"
-            }
-        ]
-    },
-    {
-        "tag": "article",
-        "cn" : [
-            {
-                "tag"      : "h4",
-                "innerHTML": "Why yet another Javascript framework?"
-            },
-            {
-                "tag": "ol",
-                "cn" : [
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "neo.mjs is web workers driven"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "neo.mjs does not need any cryptic XML markups"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "neo.mjs uses a custom blazing fast virtual dom engine"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "neo.mjs is based on EcmaScript 8 (ES8)"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "neo.mjs uses HTML5 and CSS3 to the fullest"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "Simplicity"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "No transpiled code"
-                    }
-                ]
-            },
-            {
-                "tag": "hr"
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "(1) neo.mjs uses 3 web workers:"
-            },
-            {
-                "tag": "ul",
-                "cn": [
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "App"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "Data"
-                    },
-                    {
-                        "tag"      : "li",
-                        "innerHTML": "Vdom"
-                    }
-                ]
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "The main reason is that browsers by default only use 1 CPU core, while most computers and mobile devices have more. Multi-Threading solves this performance bottleneck and it will ensure that there are no hidden background-tasks in the main thread, which mess with your beautiful animations."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "In short: Most parts of neo.mjs as well as all apps you will create are inside the App worker."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "The main thread is only responsible to manipulate the DOM and delegate DOM events to the App worker."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "The Data worker will perform all Ajax requests to your backend and host the Store instances."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "The Vdom worker parses your JSON based markup (Vdom) into a virtual node (Vnode) and creates deltas when you dynamically change your Vdom."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "(2) Did you ever enjoy writing pseudo-html including curly braces like {tpl if}, {tpl for} or even better {[this.doSomething()]}? Those XML templates evolved to a point, where they try to do everything what Javascript itself is capable of and you will most likely have encountered scoping issues (where does "this" point to now?). The solution is as simple as it should have been obvious for quite a while: JSON. You can easily manipulate Javascript objects with Javascript."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "(3) Since neo.mjs does not need to parse XML templates back into JSON and then create virtual DOM nodes, the custom Vdom engine is blazing fast. The algorithms to create deltas are highly efficient and recognise moved DOM subtrees immediately."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "(4) neo.mjs is most likely the first UI framework out there which does not only allow devs to create ES8 classes on top of ES5 prototypes, but is itself fully written in ES8."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "(5) neo.mjs uses the latest web APIs and CSS features to the fullest and give you an easy and intuitive access to them."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "(6) The first and most important design goal of neo.mjs is simplicity. This does not only mean to keep the code base as clean and simple as possible, but also to keep the created DOM as lightweight and minimal as possible."
-            },
-            {
-                "tag"      : "p",
-                "innerHTML": "(7) neo.mjs does not use Babel or any other tool to transpile code (which does not mean you can't use it for your own apps)."
-            }
-        ]
-    }
-]

package/docs/tutorials/01_Concept.md

@@ -1,55 +0,0 @@
-#### Why yet another Javascript framework?
-
-1. neo.mjs is web workers driven
-2. neo.mjs does not need any cryptic XML markups
-3. neo.mjs uses a custom blazing fast virtual dom engine
-4. neo.mjs is based on EcmaScript 8 (ES8)
-5. neo.mjs uses HTML5 and CSS3 to the fullest
-6. Simplicity
-7. No transpiled code
-
-____
-
-(1) neo.mjs uses 3 web workers:
-* App
-* Data
-* Vdom
-
-The main reason is that browsers by default only use 1 CPU core, while most computers and mobile devices have
-more. Multi-Threading solves this performance bottleneck and it will ensure that there are no hidden
-background-tasks in the main thread, which mess with your beautiful animations.
-
-In short: Most parts of neo.mjs as well as all apps you will create are inside the App worker.
-
-The main thread is only responsible to manipulate the DOM and delegate DOM events to the App worker.
-
-The Data worker will perform all Ajax requests to your backend and host the Store instances.
-
-The Vdom worker parses your JSON based markup (Vdom) into a virtual node (Vnode) and creates deltas
-when you dynamically change your Vdom.
-
-
-(2) Did you ever enjoy writing pseudo-html including curly braces like {tpl if}, {tpl for} or even better
-{[this.doSomething()]}? Those XML templates evolved to a point, where they try to do everything what
-Javascript itself is capable of and you will most likely have encountered scoping issues (where does "this"
-point to now?). The solution is as simple as it should have been obvious for quite a while: JSON. You can easily manipulate Javascript objects with Javascript.
-
-
-(3) Since neo.mjs does not need to parse XML templates back into JSON and then create virtual DOM nodes,
-the custom Vdom engine is blazing fast. The algorithms to create deltas are highly efficient and
-recognise moved DOM subtrees immediately.
-
-
-(4) neo.mjs is most likely the first UI framework out there which does not only allow devs to create
-ES6 classes on top of ES5 prototypes, but is itself fully written in ES6.
-
-
-(5) neo.mjs uses the latest web APIs and CSS features to the fullest and give you an easy and intuitive
-access to them.
-
-
-(6) The first and most important design goal of neo.mjs is simplicity. This does not only mean to keep the
-code base as clean and simple as possible, but also to keep the created DOM as lightweight and minimal as
-possible.
-
-(7) neo.mjs does not use Babel or any other tool to transpile code (which does not mean you can't use it for your own apps).

package/docs/tutorials/02_ClassSystem.html

@@ -1,171 +0,0 @@
-<div class="neo-header-text-container">
-    <span class="neo-header-text">Tutorial: Class System</span>
-</div>
-<article>
-    <ol>
-        <li>Flaws of the ES6+ class system
-            <ol>
-                <li>No &quot;this&quot; inside constructors before the parent call</li>
-                <li>It is not possible to define properties inside the class body without using get &amp; set</li>
-                <li>No private methods or properties</li>
-                <li>No support for mixins</li>
-            </ol>
-        </li>
-        <li>Neo Modules &amp; Classes
-            <ol>
-                <li>One Class per File</li>
-                <li>Each Class is &quot;wrapped&quot; inside a JS Module</li>
-                <li>Private Class methods</li>
-                <li>*.mjs</li>
-            </ol>
-        </li>
-        <li>Neo ES6+ Class Enhancements
-            <ol>
-                <li>Neo.applyClassConfig</li>
-                <li>Reducing boiler plate code</li>
-            </ol>
-        </li>
-    </ol>
-    <h4>(1) Flaws of the ES6+ class system</h4>
-    <p>(1.1.) This might not sound like a big deal at first, but it does prevent any pre-processing inside the
-        constructor chain.</p>
-    <pre><code>class TabContainer extends Container {
-    construct(config) {
-        //let me = this; // breaks!
-        super.construct(config);
-        let me = this;  //ok
-    }
-}</code></pre>
-    <p>(1.2.) The most likely biggest flaw is that you can not define any properties directly inside the class body,
-        as well as a missing config system.</p>
-    <pre><code>class TabContainer extends Container {
-    activeIndex: 1 // nope
-    static foo: 'bar' // impossible as well
-}</code></pre>
-    <p>There is hope: <a target="_blank" href="https://tc39.github.io/proposal-class-fields/#sec-private-bound-names">https://tc39.github.io/proposal-class-fields/#sec-private-bound-names</a>
-    </p>
-    <p>(1.3.) Although there are some proposals out there for many years, still not implemented.</p>
-    <p>(1.4.) Independant whether you like the mixin pattern or not, it is just not possible.</p>
-    <hr>
-    <h4>(2) Neo Modules &amp; Classes</h4>
-    <p>(2.1.) One Class per File. Might sound trivial from classic OOP concepts, but we do stick to it and recommend you
-        to
-        do the same for your application files.</p>
-    <p>(2.2) As soon as you want to extend an ES6+ class, you need to ensure that the base class is available.
-        One good way to achieve this is to use import:</p>
-    <p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import</a>
-    </p>
-    <p>This automatially makes the file a JS module and you will notice that we will at least export the Class
-        at the end of of each module.</p>
-    <p>(2.3) Having the JS Module around each Class definition allows us to place methods outside of the class
-        deinition,
-        but still between the import and export statements. A nice place for &quot;private&quot; methods or attributes
-        which can get
-        accessed from Class methods easily, but not as easy from the outside world.</p>
-    <p>(2.4.) In case you missed it, *.mjs is not something we came up with, but the new standard file extension name
-        for
-        Javascript Modules. You can find more details e.g. in Axels Blog:</p>
-    <p>
-        <a target="_blank" href="http://2ality.com/2017/05/es-module-specifiers.html">http://2ality.com/2017/05/es-module-specifiers.html</a>
-    </p>
-    <hr>
-    <h4>(3) Neo ES6+ Class Enhancements</h4>
-    <p>(3.1.) To reduce the issue of 1.2. we created Neo.applyClassConfig (Neo.mjs),
-        which does get called in every Class File at the very bottom (before the export statement).
-        If you look at Neo Class / Module files, like component/Button.mjs, you will notice 2 methods at the top of the
-        class body:</p>
-    <h5>getStaticConfig</h5><h5>getConfig</h5>
-    <p>Both methods simply return an object. Put all static keys into getStaticConfig and all other ones into getConfig.
-        Neo.applyClassConfig <strong>(strongly recommended to look at the source code)</strong> will apply all static
-        configs to the class
-        constructor (as well as adding the staticConfig object itself there) and all non static configs will get added
-        using
-        Object.defineProperty() on the Class prototype.</p>
-    <p>So, why is a &quot;config system&quot; useful, you might ask yourself at this point.
-        This can easily get showcased using a simple example:</p>
-    <pre><code>class TabContainer extends Container {
-    get activeIndex() {
-        return this._activeIndex || 0;
-    }
-    set activeIndex(value) {
-        this._activeIndex = value;
-    }
-}</code></pre>
-    <p>So far so good, we now have an activeIndex property which will use _activeIndex to read &amp; save its value.
-        Now you might want to extend this class:</p>
-    <pre><code>class MyTabContainer extends TabContainer {
-    static getConfig() {return {
-        _activeIndex: 1
-    }}
-}</code></pre>
-    <p>Ok, this one was easy. _activeIndex will get applied as a class property.
-        Neither the first version with 0 nor the second one using the underscore and the value of 1 will trigger the
-        setter.
-        When you call:</p>
-    <pre><code>Neo.create(MyTabContainer);</code></pre>
-    <p>the constructor of our Base Class (Neo.core.Base) will call initConfig(),
-        which will apply _activeIndex to the instance, silently setting the value</p>
-    <pre><code>class MyTabContainer2 extends TabContainer {
-    static getConfig() {return {
-        activeIndex: 1
-    }}
-}</code></pre>
-    <p>Now it does get more interesting. You want to trigger the setter when creating an instance,
-        but you definitely do <strong>not</strong> want to override the activeIndex property defined via get &amp; set
-        with the new one.
-        No worries, Neo.applyClassConfig will check the base class prototype chain and in case it does find a property
-        with the
-        same name, it will not override the version having the setter. Instead it will only apply activeIndex inside the
-        config
-        object itself.
-        Now, when you call:</p>
-    <pre><code>Neo.create(MyTabContainer2);</code></pre>
-    <p>the constructor of our Base Class (Neo.core.Base) will call initConfig(),
-        which will apply activeIndex to your instance and this will call the setter.</p>
-    <pre><code>Neo.create(MyTabContainer2, {
-    activeIndex: 2
-});</code></pre>
-    <p>This will also call the setter <strong>once</strong>, this time using the value of 2
-        (initConfig does merge the prototype config object with the one you pass into Neo.create -&gt; the constructor)
-    </p>
-    <p>(3.2.) Reducing boiler plate code. When looking back at the first TabContainer example you will probably think:
-        Damn, in case I want to define many properties via get&amp;set which all just save&amp;get their value inside an
-        undercored
-        version of its name key, this will create quite some overhead.</p>
-    <p>To avoid this and make your code more beautiful, we added a trailing underscore for class configs:</p>
-    <pre><code>class TabContainer extends Container {
-    static getConfig() {return {
-        activeIndex_: 0
-    }}
-}</code></pre>
-    <p>Look close: activeIndex<span style="color:red;font-size:200%;">_</span> .This gets you the exact same result as
-        the previous example:</p>
-    <pre><code>class TabContainer extends Container {
-    get activeIndex() {
-        return this._activeIndex || 0;
-    }
-    set activeIndex(value) {
-        this._activeIndex = value;
-    }
-}</code></pre>
-    <p>Even better, this also <strong>optionally</strong> gives you support for 3 more methods you can use:</p>
-    <pre><code>class TabContainer extends Container {
-    static getConfig() {return {
-        activeIndex_: 0
-    }}
-
-    beforeSetActiveIndex(value, oldValue) {
-        return 42; // the answer to Life, the Universe, and Everything
-    }
-
-    beforeGetActiveIndex(value) {
-        return 5; // but hey, why tell anyone?
-    }
-
-    // this one would only get called in case value !== oldValue
-    afterSetActiveIndex(value, oldValue) {
-        // update the UI
-    }
-}</code></pre>
-    <p><a href="module-Neo.html#~autoGenerateGetSet">Details here</a></p>
-</article>