neo.mjs 2.3.18 → 3.0.2

package/README.md

@@ -35,6 +35,7 @@ No need to take care of a workers setup, and the cross channel communication on
 11. <a href="#story--vision">Story & Vision</a>
 12. <a href="#contributors">neo.mjs is in need of more contributors!</a>
 13. <a href="#sponsors">neo.mjs is in need of more sponsors!</a>
+14. <a href="#jobs">Jobs</a>
 
 </br></br>
 <h2 id="slack-channel">1. Slack Channel for questions & feedback</h2>
@@ -232,6 +233,14 @@ The benefit of doing so is getting results delivered faster.
 
 More infos: <a href="./BACKERS.md">Sponsors & Backers</a>
 
+</br></br>
+<h2 id="jobs">14. Jobs</h2>
+Accenture is hiring multiple neo.mjs developers for the new Cloud Technology Studio in Kaiserslauern (Germany):</br>
+<a href="https://www.accenture.com/de-de/careers/jobdetails?id=R00057924_de">Senior neo.mjs Frontend Developer /Architect (all genders)</a></br></br>
+
+These full-time roles are based on German contracts, so they require living in (or relocating to) Germany.
+
+</br></br>
 Logo contributed by <a href="https://www.linkedin.com/in/dinkheller/">Torsten Dinkheller</a>.
 
 </br></br>

package/apps/covid/view/GalleryContainer.mjs

@@ -192,8 +192,8 @@ class GalleryContainer extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         const me = this;
 

package/apps/covid/view/HelixContainer.mjs

@@ -238,8 +238,8 @@ class HelixContainer extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/apps/covid/view/TableContainer.mjs

@@ -139,8 +139,8 @@ class TableContainer extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/apps/krausest/view/MainComponent.mjs

@@ -63,8 +63,8 @@ class MainComponent extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         this.createColumns(); // silent vdom update
         this.createTable();

package/apps/krausest/view/TableComponent.mjs

@@ -37,8 +37,8 @@ class TableComponent extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         Neo.main.addon.CloneNode.createNode({
             id  : this.id,

package/apps/realworld/view/HomeComponent.mjs

@@ -87,8 +87,8 @@ class HomeComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         Neo.main.DomEvents.registerPreventDefaultTargets({
             name: 'click',

package/apps/realworld/view/article/CommentComponent.mjs

@@ -63,8 +63,8 @@ class CommentComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;

package/apps/realworld/view/article/Component.mjs

@@ -141,8 +141,8 @@ class Component extends BaseComponent {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;

package/apps/realworld/view/article/CreateCommentComponent.mjs

@@ -43,8 +43,8 @@ class CreateCommentComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners,

package/apps/realworld/view/article/CreateComponent.mjs

@@ -79,8 +79,8 @@ class CreateComponent extends Component {
      * constructor
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;
@@ -274,4 +274,4 @@ class CreateComponent extends Component {
 
 Neo.applyClassConfig(CreateComponent);
 
-export {CreateComponent as default};
+export {CreateComponent as default};

package/apps/realworld/view/article/PreviewComponent.mjs

@@ -81,8 +81,8 @@ class PreviewComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;

package/apps/realworld/view/article/TagListComponent.mjs

@@ -47,8 +47,8 @@ class TagListComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         Neo.main.DomEvents.registerPreventDefaultTargets({
             name: 'click',

package/apps/realworld/view/user/ProfileComponent.mjs

@@ -97,8 +97,8 @@ class ProfileComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         Neo.main.DomEvents.registerPreventDefaultTargets({
             name: 'click',

package/apps/realworld/view/user/SettingsComponent.mjs

@@ -77,8 +77,8 @@ class SettingsComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;

package/apps/realworld/view/user/SignUpComponent.mjs

@@ -64,8 +64,8 @@ class SignUpComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;

package/apps/realworld2/view/article/HelixContainer.mjs

@@ -28,8 +28,8 @@ class HelixContainer extends HelixMainContainer {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/apps/realworld2/view/article/PreviewComponent.mjs

@@ -94,8 +94,8 @@ class PreviewComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;

package/apps/realworld2/view/article/TagListComponent.mjs

@@ -51,8 +51,8 @@ class TagListComponent extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         Neo.main.DomEvents.registerPreventDefaultTargets({
             name: 'click',

package/apps/realworld2/view/user/LoginFormContainer.mjs

@@ -35,8 +35,8 @@ class LoginFormContainer extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/apps/sharedcovid/view/GalleryContainer.mjs

@@ -200,8 +200,8 @@ class GalleryContainer extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         const me = this;
 

package/apps/sharedcovid/view/HelixContainer.mjs

@@ -246,8 +246,8 @@ class HelixContainer extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -166,9 +166,7 @@ class MainContainerController extends ComponentController {
         let me = this;
 
         Neo.Main.getWindowData().then(winData => {
-            Neo.main.DomAccess.getBoundingClientRect({
-                id: [me.getReference(containerReference).id]
-            }).then(data => {
+            me.component.getDomRect(me.getReference(containerReference).id).then(data => {
                 let {height, left, top, width} = data[0];
 
                 height -= 50; // popup header in Chrome
@@ -178,7 +176,7 @@ class MainContainerController extends ComponentController {
                 Neo.Main.windowOpen({
                     url           : `../${url}/index.html`,
                     windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
-                    windowName    : windowName
+                    windowName
                 });
             });
         });
@@ -371,13 +369,11 @@ class MainContainerController extends ComponentController {
     onComponentConstructed() {
         super.onComponentConstructed();
 
-        if (!Neo.config.hash) {
-            this.onHashChange({
-                country   : 'all',
-                hash      : {mainview: 'table'},
-                hashString: 'mainview=table'
-            }, null);
-        }
+        !Neo.config.hash && this.onHashChange({
+            country   : 'all',
+            hash      : {mainview: 'table'},
+            hashString: 'mainview=table'
+        }, null);
     }
 
     /**
@@ -611,16 +607,16 @@ class MainContainerController extends ComponentController {
         } else {
             [component.appName, ...me.connectedApps].forEach(appName => {
                 Neo.main.addon.Stylesheet.swapStyleSheet({
-                    appName: appName,
-                    href   : href,
-                    id     : 'neo-theme'
+                    appName,
+                    href,
+                    id: 'neo-theme'
                 });
             });
         }
 
         button.set({
-            iconCls: iconCls,
-            text   : buttonText
+            iconCls,
+            text: buttonText
         });
 
         if (mapView) {

package/apps/sharedcovid/view/TableContainer.mjs

@@ -148,8 +148,8 @@ class TableContainer extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         const me = this;
 

package/apps/sharedcovid/view/mapboxGl/Container.mjs

@@ -106,8 +106,8 @@ class Container extends BaseContainer {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this,
 

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Dec 15, 2021",
+        "id"          : 47,
+        "image"       : "resolving-pitfalls-of-the-ecmascript-class-system.png",
+        "name"        : "Resolving pitfalls of the ECMAScript class system",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/resolving-pitfalls-of-the-ecmascript-class-system-856024218399?source=friends_link&sk=9733342654c50d8d618671b754089e1d"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/docs/app/view/ContentTabContainer.mjs

@@ -64,8 +64,8 @@ class ContentTabContainer extends Container {
      *
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me  = this,
             cls = me.cls;

package/docs/app/view/MainContainer.mjs

@@ -101,8 +101,8 @@ class MainContainer extends Viewport {
      *
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/docs/app/view/classdetails/SourceViewComponent.mjs

@@ -57,8 +57,8 @@ class SourceViewComponent extends Component {
      *
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me   = this,
             url  = '../../' + me.structureData.srcPath;

package/docs/app/view/classdetails/TutorialComponent.mjs

@@ -40,8 +40,8 @@ class TutorialComponent extends Component {
      *
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me     = this,
             isJson = me.fileType === 'json',

package/docs/tutorials/02_ClassSystem.html

@@ -30,9 +30,9 @@
     <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 {
-    constructor(config) {
+    construct(config) {
         //let me = this; // breaks!
-        super(config);
+        super.construct(config);
         let me = this;  //ok
     }
 }</code></pre>
@@ -168,4 +168,4 @@
     }
 }</code></pre>
     <p><a href="module-Neo.html#~autoGenerateGetSet">Details here</a></p>
-</article>
+</article>

package/docs/tutorials/02_ClassSystem.md

@@ -17,9 +17,9 @@
 (1.1.) This might not sound like a big deal at first, but it does prevent any pre-processing inside the constructor chain.
 ```
 class TabContainer extends Container {
-    constructor(config) {
+    construct(config) {
         //let me = this; // breaks!
-        super(config);
+        super.construct(config);
         let me = this;  //ok
     }
 }

package/docs/tutorials/09_TodoList_version1.html

@@ -149,8 +149,8 @@ class MainComponent extends Component {
         }
     }}
 
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
         this.createItems(this.data || []);
     }
 
@@ -226,7 +226,7 @@ export {MainComponent as default};</code></pre>
             <button style="margin-left:10px;" class="todo-add-button" id="neo-vnode-9">Add Item</button>
         </div>
     </div>
-    
+
     <p>The generated DOM will be:</p>
     <pre><code>&lt;div style="border:1px solid #000;margin:20px;overflow:scroll;height:200px;width:300px;max-width:300px;" id="neo-todolistapp1-maincomponent-1"&gt;
     &lt;ol id="neo-vnode-7"&gt;
@@ -244,8 +244,8 @@ export {MainComponent as default};</code></pre>
         Engine to detect moved nodes.</br>
         Since a todoList without any logic is no fun, let's change this!
     </p>
-    <pre><code>constructor(config) {
-    super(config);
+    <pre><code>construct(config) {
+    super.construct(config);
 
     let me           = this,
         domListeners = me.domListeners || [];
@@ -409,8 +409,8 @@ class MainComponent extends Component {
         }
     }}
 
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners || [];
@@ -500,4 +500,4 @@ export {MainComponent as default};</code></pre>
     <p>
         We hope this tutorial helped you to get a basic understanding on how to create a first custom component and on how to work with dom listeners!
     </p>
-</article>
+</article>

package/examples/calendar/weekview/MainContainer.mjs

@@ -69,8 +69,8 @@ class MainContainer extends Viewport {
      * We want to fetch the CSS without requiring to load the related JS module.
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
         Neo.worker.App.insertThemeFiles(this.appName, null, 'Neo.calendar.view.MainContainer');
     }
 }

package/examples/component/coronaGallery/MainContainer.mjs

@@ -333,8 +333,8 @@ class MainContainer extends Viewport {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         const me  = this,
               url = 'https://corona.lmao.ninja/v3/covid-19/countries';

package/examples/component/coronaHelix/MainContainer.mjs

@@ -408,8 +408,8 @@ class MainContainer extends Viewport {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         const me  = this,
               url = 'https://corona.lmao.ninja/v3/covid-19/countries';

package/examples/component/gallery/MainContainer.mjs

@@ -220,8 +220,8 @@ class MainContainer extends Viewport {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/examples/component/helix/MainContainer.mjs

@@ -304,8 +304,8 @@ class MainContainer extends Viewport {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/examples/core/config/MainContainer.mjs

@@ -35,8 +35,8 @@ class MainContainer extends Viewport {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/examples/dialog/MainContainer.mjs

@@ -31,8 +31,8 @@ class MainContainer extends Viewport {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/examples/list/animate/List.mjs

@@ -32,13 +32,15 @@ class List extends BaseList {
      * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
      */
     createItemContent(record, index) {
+        let id = this.getItemId(record.id);
+
         return [
-            {cls: ['neo-list-item-content'], cn: [
-                {tag: 'img', src: `../../../resources/examples/${record.image}`},
-                {cls: ['neo-list-item-text'], cn: [
-                    {html: record.firstname},
-                    {cls: ['neo-lastname'], html: record.lastname},
-                    {cls: ['neo-is-online'], removeDom: !record.isOnline}
+            {cls: ['neo-list-item-content'], id: `${id}__content`, cn: [
+                {tag: 'img', id: `${id}__image`, src: `../../../resources/examples/${record.image}`},
+                {cls: ['neo-list-item-text'], id: `${id}__content_wrapper`, cn: [
+                    {html: record.firstname, id: `${id}__firstname`},
+                    {cls: ['neo-lastname'],  id: `${id}__lastname`, html: record.lastname},
+                    {cls: ['neo-is-online'], id: `${id}__isonline`, removeDom: !record.isOnline}
                 ]}
             ]}
         ];