@beyond-js/kernel - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

core/ts/ts.d.ts

@@ -118,3 +118,3 @@ /************
         get transversals(): {
-            "__#5324@#transversals": Map<string, ns_transversals_transversal.Transversal>;
+            "__#23@#transversals": Map<string, ns_transversals_transversal.Transversal>;
             has(name: string, language: string): boolean;
@@ -422,2 +422,3 @@ obtain(name: string, language: string, deps?: ns_bundles_instances_dependencies.IDependencies): ns_transversals_transversal.Transversal;
          * Used only in local environment to support HMR
+         * Note: in AMD mode, the querystring is not allowed (it is used require.undef by the beyond.reload method)
          *
@@ -614,5 +615,5 @@ * @param {string} module
         new (message: string, stack: Stack): {
-            "__#5306@#message": string;
+            "__#5@#message": string;
             readonly message: string;
-            readonly "__#5306@#stack": Stack;
+            readonly "__#5@#stack": Stack;
             readonly stack: Stack;
@@ -788,3 +789,3 @@ };
     const transversals: {
-        "__#5324@#transversals": Map<string, Transversal>;
+        "__#23@#transversals": Map<string, Transversal>;
         has(name: string, language: string): boolean;
@@ -1015,7 +1016,7 @@ obtain(name: string, language: string, deps?: IDependencies): Transversal;
         /**
-         * Returns the node of the parent widget of an HTML element
+         * Returns the widget from its shadow root
          *
-         * @param {HTMLElement} element
+         * @param {ShadowRoot} root
          */
-        parent(element: HTMLElement): NodeWidget;
+        getWidgetByShadowRoot(root: ShadowRoot): BeyondWidget;
         register(widget: BeyondWidget): NodeWidget;
@@ -1117,3 +1118,3 @@ clear(): void;
         readonly instances: {
-            parent(element: HTMLElement): ns_widgets_instances_node.NodeWidget;
+            getWidgetByShadowRoot(root: ShadowRoot): BeyondWidget;
             register(widget: BeyondWidget): ns_widgets_instances_node.NodeWidget;
@@ -1120,0 +1121,0 @@ clear(): void;

package.json

 {
   "name": "@beyond-js/kernel",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "keywords": [],
@@ -5,0 +5,0 @@ "uimport": true,

react-widget/ts/ts.amd.js

@@ -26,3 +26,3 @@ define(["exports", "react", "react-dom", "@beyond-js/kernel/core/ts", "@beyond-js/kernel/routing/ts"], function (_exports2, dependency_0, dependency_1, dependency_2, dependency_3) {
   modules.set('./controller', {
-    hash: 1662714630,
+    hash: 3785716811,
     creator: function (require, exports) {
@@ -50,3 +50,8 @@ "use strict";
 
-          ReactDOM[method](React.createElement(this.Widget, props), this.body);
+          try {
+            ReactDOM[method](React.createElement(this.Widget, props), this.body);
+          } catch (exc) {
+            console.log(`Error rendering widget "${this.bundle.id}":`);
+            console.log(exc.stack);
+          }
         }
@@ -53,0 +58,0 @@

routing/ts/ts.amd.js

@@ -23,3 +23,3 @@ define(["exports", "@beyond-js/kernel/core/ts"], function (_exports2, dependency_0) {
   modules.set('./beyond-layout-children/beyond-layout-children', {
-    hash: 2522377829,
+    hash: 2002849390,
     creator: function (require, exports) {
@@ -33,5 +33,5 @@ "use strict";
 
-        constructor() {
-          super();
-          this.#renderer = new _renderer.BeyondLayoutChildrenRenderer(this);
+        connectedCallback() {
+          // Wait for routing to be created, otherwise a cyclical import occurs
+          setTimeout(() => this.#renderer = new _renderer.BeyondLayoutChildrenRenderer(this), 0);
         }
@@ -47,3 +47,3 @@
   modules.set('./beyond-layout-children/renderer', {
-    hash: 2588483788,
+    hash: 4045584597,
     creator: function (require, exports) {
@@ -62,3 +62,3 @@ "use strict";
       class BeyondLayoutChildrenRenderer {
-        #component;
+        #element;
         #layout;
@@ -73,7 +73,7 @@
 
-        constructor(component) {
-          this.#component = component;
+        constructor(element) {
+          this.#element = element;
           this.#identify();
           if (!this.#layout) return;
-          component.attachShadow({
+          element.attachShadow({
             mode: 'open'
@@ -86,52 +86,47 @@ });
 
-        #identify = () => {
-          // Construct the ascending layouts of the current widget
-          let iterate = _ts.widgets.instances.parent(this.#component);
+        #identify = () => this.#layout = (() => {
+          const {
+            routing
+          } = require('../routing');
 
-          const layouts = [];
+          const root = this.#element.getRootNode();
+          if (root === document) return routing.manager.main;
 
-          while (iterate?.parent) {
-            const {
-              parent
-            } = iterate;
-            parent.is === 'layout' && layouts.unshift(parent);
-            iterate = parent;
-          }
+          const widget = _ts.widgets.instances.getWidgetByShadowRoot(root);
 
-          if (!layouts.length || layouts[0].widget.localName === _ts.beyond.application.layout) {
-            const {
-              routing
-            } = require('../routing');
+          if (widget.getAttribute('data-main') === '1') return routing.manager.main;
+          return routing.manager.layouts.get(widget.getAttribute('data-child-id'));
+        })(); // Render the layouts and pages of this container
 
-            this.#layout = routing.manager.main;
-          }
-        }; // Render the layouts and pages of this container
+        render = () => {
+          this.#layout.children.forEach(child => {
+            // Create the HTMLElement of the child if it was not already created
+            if (!this.#mounted.has(child.id)) {
+              const element = document.createElement(child.element);
+              element.setAttribute('data-child-id', child.id);
+              this.#element.shadowRoot.append(element);
+              this.#mounted.set(child.id, element);
+            }
 
-        render = () => this.#layout.children.forEach(child => {
-          // Create the HTMLElement of the child if it was not already created
-          if (!this.#mounted.has(child.id)) {
-            const element = document.createElement(child.element);
-            element.setAttribute('data-child-id', child.id);
-            this.#component.shadowRoot.append(element);
-            this.#mounted.set(child.id, element);
-          }
+            const element = this.#mounted.get(child.id);
+            const page = element; // The show and hide methods are defined in the page controller
 
-          const element = this.#mounted.get(child.id);
-          const page = element; // The show and hide methods are defined in the page controller
+            const active = this.#layout.active === child;
 
-          if (child.active && element !== this.#active) {
-            this.#active = element;
+            if (active && element !== this.#active) {
+              this.#active = element;
 
-            const show = () => {
-              page.removeEventListener('controller.loaded', show);
-              this.#active === element && page.controller.show?.();
-            };
+              const show = () => {
+                page.removeEventListener('controller.loaded', show);
+                this.#active === element && page.controller.show?.();
+              };
 
-            page.controller ? page.controller.show?.() : page.addEventListener('controller.loaded', show);
-          } else if (!element.hidden && !child.active) {
-            page.controller?.hide?.();
-          }
+              page.controller ? page.controller.show?.() : page.addEventListener('controller.loaded', show);
+            } else if (!element.hidden && !active) {
+              page.controller?.hide?.();
+            }
 
-          element.hidden = !child.active;
-        });
+            element.hidden = !active;
+          });
+        };
       }
@@ -257,3 +252,3 @@
   modules.set('./config/pages/page', {
-    hash: 3912964666,
+    hash: 1424233750,
     creator: function (require, exports) {
@@ -303,10 +298,10 @@ "use strict";
         get parents() {
-          const config = require('../config'); // Ascending list of containers layouts of the page being navigated
+          const config = require('../config').config; // Ascending list of containers layouts of the current page
 
 
-          const parents = [];
+          const value = [];
           let layoutName = this.layout;
 
-          while (layoutName && layoutName !== 'main') {
-            if (!config.layouts.has(layoutName) && layoutName !== 'main') {
+          while (layoutName) {
+            if (!config.layouts.has(layoutName)) {
               const error = `Layout "${layoutName}" not found`;
@@ -319,3 +314,3 @@ return {
             const layout = config.layouts.get(layoutName);
-            parents.unshift(layout);
+            value.unshift(layout);
             layoutName = layout.layout;
@@ -325,3 +320,3 @@ }
           return {
-            parents
+            value
           };
@@ -698,8 +693,8 @@ }
   });
-  /*******************************
-  INTERNAL MODULE: ./layouts/child
-  *******************************/
+  /********************************
+  INTERNAL MODULE: ./layouts/layout
+  ********************************/
 
-  modules.set('./layouts/child', {
-    hash: 101984651,
+  modules.set('./layouts/layout', {
+    hash: 3907903496,
     creator: function (require, exports) {
@@ -711,83 +706,37 @@ "use strict";
       });
-      exports.Child = void 0;
+      exports.Layout = void 0;
 
-      class Child {
-        #config;
+      var _ts = require("@beyond-js/kernel/core/ts");
 
-        get element() {
-          return this.#config.element;
-        }
+      let id = 0;
+      /*bundle*/
 
+      class Layout extends _ts.Events {
         get is() {
-          return this.#config.is;
+          return 'layout';
         }
 
-        get id() {
-          return this.#config.id;
+        #layouts;
+        #element;
+
+        get element() {
+          return this.#element;
         }
 
-        #layout; // Only if the instance is a layout
+        #id;
 
-        get layout() {
-          return this.#layout;
-        }
+        get id() {
+          return `${this.#element}:${this.#id}`;
+        } // The active child in the layout
 
-        get children() {
-          return this.#layout?.children;
-        }
 
-        #active = false;
+        #active;
 
         get active() {
           return this.#active;
-        }
+        } // Property #parent is undefined only if it is the main layout
 
-        constructor(config) {
-          this.#config = config;
 
-          const {
-            Layout
-          } = require('./layout');
+        #parent; // The layouts and pages that are contained in the current layout
 
-          config.is === 'layout' && (this.#layout = new Layout(this.#layout));
-        }
-
-        show() {
-          this.#active = true;
-        }
-
-        hide() {
-          this.#active = false;
-        }
-
-      }
-
-      exports.Child = Child;
-    }
-  });
-  /********************************
-  INTERNAL MODULE: ./layouts/layout
-  ********************************/
-
-  modules.set('./layouts/layout', {
-    hash: 3968956989,
-    creator: function (require, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.Layout = void 0;
-
-      var _child = require("./child");
-
-      var _ts = require("@beyond-js/kernel/core/ts");
-      /*bundle*/
-
-
-      class Layout extends _ts.Events {
-        // The active child in the layout
-        #active; // Property #parent is undefined only if it is the main layout
-
-        #parent;
         #children = new Map();
@@ -798,5 +747,17 @@
         }
+        /**
+         * Layout constructor
+         *
+         * @param {Layouts} layouts The layouts registry
+         * @param {string} element The element name of the widget. Undefined if the project does not set a layout
+         * and the index.html has a <beyond-layout-children/> as its main layout container
+         * @param {Layout} parent The parent layout. Undefined if it is the main layout
+         */
 
-        constructor(parent) {
+
+        constructor(layouts, element, parent) {
           super();
+          this.#layouts = layouts;
+          this.#element = element ? element : 'main';
+          this.#id = ++id;
           this.#parent = parent;
@@ -808,39 +769,32 @@ }
          * @param {PageInstanceData} page The page being selected (navigated)
+         * @param {LayoutConfig[]} descending The descending layouts
          */
 
 
-        select(page) {
-          const {
-            error,
-            parents
-          } = page.parents;
-          if (error) throw new Error(error);
-          let changed = false;
+        select(page, descending) {
+          if (descending.length && descending[0].element === this.#element) {
+            console.log(`Invalid layout configuration. Layout element "${this.#element}" is already created`);
+            return;
+          }
 
-          const getChild = parent => {
-            if (this.#children.has(parent.id)) return this.#children.get(parent.id);
-            const child = new _child.Child(parent);
-            this.#children.set(parent.id, child);
-            changed = true;
-            return child;
-          };
+          const child = (() => {
+            if (!descending.length) return page;
+            const {
+              element
+            } = descending[0];
+            let layout = [...this.#children.values()].find(child => child.element === element);
 
-          let child;
+            if (!layout) {
+              layout = new Layout(this.#layouts, element, this);
+              this.#layouts.register(layout);
+            }
 
-          if (parents.length) {
-            const parent = parents.shift();
-            child = getChild(parent);
-            child.layout.select(page);
-          } else {
-            child = getChild(page);
-            this.children.set(page.id, child);
-          }
+            return layout;
+          })();
 
-          if (this.#active !== child) {
-            this.#active?.hide();
-            child.show();
-            this.#active = child;
-            changed = true;
-          }
-
+          this.#children.set(child.id, child);
+          const changed = this.#active !== child;
+          this.#active = child;
+          descending.shift();
+          child.is === 'layout' && child.select(page, descending);
           changed && this.trigger('change');
@@ -854,2 +808,29 @@ }
   });
+  /*********************************
+  INTERNAL MODULE: ./layouts/layouts
+  *********************************/
+
+  modules.set('./layouts/layouts', {
+    hash: 2337437683,
+    creator: function (require, exports) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.Layouts = void 0;
+      /**
+       * The registry of all layouts instances registered in the session, except the main layout
+       */
+
+      class Layouts extends Map {
+        register(layout) {
+          this.set(layout.id, layout);
+        }
+
+      }
+
+      exports.Layouts = Layouts;
+    }
+  });
   /*************************
@@ -860,3 +841,3 @@ INTERNAL MODULE: ./manager
   modules.set('./manager', {
-    hash: 2783750688,
+    hash: 1353394538,
     creator: function (require, exports) {
@@ -874,11 +855,23 @@ "use strict";
 
+      var _layouts = require("./layouts/layouts");
+
       class Manager {
-        #main = new _layout.Layout(); // A collection of layouts and pages
+        // The registry of all layouts instances registered in the session, except the main layout
+        #layouts = new _layouts.Layouts();
 
+        get layouts() {
+          return this.#layouts;
+        } // The main layout can be the layout set in the project.json, or the beyond-layout-children
+        // set when the project does not have set a layout
+
+
+        #main = new _layout.Layout(this.#layouts);
+
         get main() {
           return this.#main;
-        }
+        } // The registry of all the pages that were navigated in the application
 
-        #pages = new _pages.Pages(); // The registry of all the pages that were navigated in the application
 
+        #pages = new _pages.Pages();
+
         get pages() {
@@ -898,3 +891,15 @@ return this.#pages;
 
-          this.#main.select(this.#pages.register(uri, element));
+          const page = this.#pages.register(uri, element); // Property page.parents is an array that contains the descending list of layouts where the page is contained
+
+          const {
+            error,
+            value: descending
+          } = page.parents;
+
+          if (error) {
+            console.error(`Page on "${uri.uri}" cannot be shown: ${error}`);
+            return;
+          }
+
+          this.#main.select(page, descending);
         }
@@ -901,0 +906,0 @@

routing/ts/ts.d.ts

@@ -16,3 +16,3 @@ /************
         get layout(): Layout;
-        constructor(component: HTMLElement);
+        constructor(element: HTMLElement);
         render: () => void;
@@ -27,5 +27,5 @@ }
     const config: {
-        readonly "__#56307@#layouts": LayoutsConfig;
+        readonly "__#43434@#layouts": LayoutsConfig;
         readonly layouts: LayoutsConfig;
-        readonly "__#56307@#pages": PagesConfig;
+        readonly "__#43434@#pages": PagesConfig;
         readonly pages: PagesConfig;
@@ -70,3 +70,3 @@ };
         error?: string;
-        parents?: LayoutConfig[];
+        value?: LayoutConfig[];
     }
@@ -191,39 +191,46 @@ class PageConfig {
 
-// FILE: layouts\child.d.ts
-declare namespace ns_layouts_child {
-    import Layout = ns_layouts_layout.Layout;
-    import LayoutConfig = ns_config_layouts_layout.LayoutConfig;
-    import PageInstanceData = ns_pages_data.PageInstanceData;
-    class Child {
-        #private;
-        get element(): string;
-        get is(): string;
-        get id(): string;
-        get layout(): Layout;
-        get children(): Map<string, Child>;
-        get active(): boolean;
-        constructor(config: LayoutConfig | PageInstanceData);
-        show(): void;
-        hide(): void;
-    }
-}
-
 // FILE: layouts\layout.d.ts
 declare namespace ns_layouts_layout {
+    import Layouts = ns_layouts_layouts.Layouts;
     import PageInstanceData = ns_pages_data.PageInstanceData;
-    import Child = ns_layouts_child.Child;
+    import LayoutConfig = ns_config_layouts_layout.LayoutConfig;
     import Events = dependency_0.Events;
+    type LayoutChild = Layout | PageInstanceData;
     class Layout extends Events {
         #private;
-        get children(): Map<string, Child>;
-        constructor(parent?: Layout);
+        get is(): string;
+        get element(): string;
+        get id(): string;
+        get active(): LayoutChild;
+        get children(): Map<string, LayoutChild>;
         /**
+         * Layout constructor
+         *
+         * @param {Layouts} layouts The layouts registry
+         * @param {string} element The element name of the widget. Undefined if the project does not set a layout
+         * and the index.html has a <beyond-layout-children/> as its main layout container
+         * @param {Layout} parent The parent layout. Undefined if it is the main layout
+         */
+        constructor(layouts: Layouts, element?: string, parent?: Layout);
+        /**
          * Selects a page
          *
          * @param {PageInstanceData} page The page being selected (navigated)
+         * @param {LayoutConfig[]} descending The descending layouts
          */
-        select(page: PageInstanceData): void;
+        select(page: PageInstanceData, descending: LayoutConfig[]): void;
     }
 }
 
+// FILE: layouts\layouts.d.ts
+declare namespace ns_layouts_layouts {
+    import Layout = ns_layouts_layout.Layout;
+    /**
+     * The registry of all layouts instances registered in the session, except the main layout
+     */
+    class Layouts extends Map<string, Layout> {
+        register(layout: Layout): void;
+    }
+}
+
 // FILE: manager.d.ts
@@ -234,4 +241,6 @@ declare namespace ns_manager {
     import URI = ns_uri_uri.URI;
+    import Layouts = ns_layouts_layouts.Layouts;
     class Manager {
         #private;
+        get layouts(): Layouts;
         get main(): Layout;
@@ -238,0 +247,0 @@ get pages(): Pages;

No alert changes

Worsened metrics

Total package byte prevSize

462248

decreased by-12.07%

Number of package files

25

decreased by-7.41%

Lines of code

13010

decreased by-13.76%

No dependency changes