@ribajs/core - npm Package Compare versions

Comparing version 0.16.9 to 0.16.11

lib/components/riba-component-class.d.ts

 import Debug from 'debug';
-import { RibaComponent } from './riba-component';
+import { RibaComponent, IRibaComponentContext } from './riba-component';
 import { View } from '../view';
@@ -7,4 +7,8 @@ import { EventHandler } from '../riba';
     static tagName: string;
+    readonly bound: boolean;
+    context?: IRibaComponentContext;
     protected debug: Debug.IDebugger;
     protected view?: View;
+    protected _bound: boolean;
+    protected templateLoaded: boolean;
     protected el: HTMLElement;
@@ -16,4 +20,5 @@ protected scope: any;
     protected autobind: boolean;
-    constructor(element?: HTMLElement);
-    protected template(): string | null;
+    constructor(element?: HTMLElement, context?: IRibaComponentContext);
+    disconnectedFallbackCallback(): void;
+    protected template(): Promise<string | null> | string | null;
     /**
@@ -20,0 +25,0 @@ * returns a list of attributes wich are required until the riba binding starts

lib/components/riba-component.d.ts

@@ -10,10 +10,21 @@ /**
 import { FakeHTMLElement } from './fake-html-element';
-export declare type TemplateFunction = () => string | null;
+export declare type TemplateFunction = () => Promise<string | null> | string | null;
+export interface IRibaComponentContext {
+    fallback: boolean;
+    view: View;
+}
 export declare abstract class RibaComponent extends FakeHTMLElement {
     static tagName: string;
+    /**
+     * Context of this component, used for debugging
+     */
+    context?: IRibaComponentContext;
     protected debug: Debug.IDebugger;
     protected view?: View;
+    protected _bound: boolean;
+    protected templateLoaded: boolean;
     protected riba?: Riba;
     protected el: HTMLElement;
     protected abstract scope: any;
+    readonly bound: boolean;
     /**
@@ -24,4 +35,5 @@ * If true the component will automatically bind the component to riba if all required attributes are setted
     private attributeObserverFallback?;
-    constructor(element?: HTMLElement);
-    protected abstract template(): string | null;
+    constructor(element?: HTMLElement, context?: IRibaComponentContext);
+    disconnectedFallbackCallback(): void;
+    protected abstract template(): Promise<string | null> | string | null;
     /**
@@ -31,3 +43,3 @@ * returns a list of attributes wich are required until the riba binding starts
     protected requiredAttributes(): string[];
-    protected init(observedAttributes: string[]): void;
+    protected init(observedAttributes: string[]): Promise<View | null | undefined>;
     /**
@@ -97,2 +109,3 @@ * Required attributes before the view is bound
     protected adoptedCallback(oldDocument: Document, newDocument: Document): void;
+    protected loadTemplate(): Promise<any>;
     protected bind(): Promise<View | undefined>;
@@ -99,0 +112,0 @@ protected beforeBind(): Promise<any>;

lib/components/riba-component.js

@@ -17,4 +17,6 @@ "use strict";
 class RibaComponent extends fake_html_element_1.FakeHTMLElement {
-    constructor(element) {
+    constructor(element, context) {
         super(element);
+        this._bound = false;
+        this.templateLoaded = false;
         /**
@@ -24,4 +26,5 @@ * If true the component will automatically bind the component to riba if all required attributes are setted
         this.autobind = true;
+        this.context = context;
         this.debug = debug_1.default('component:RibaComponent');
-        this.debug('constructor called', element, this);
+        this.debug('constructor called', element, context, this);
         if (element) {
@@ -38,2 +41,12 @@ this.el = element;
     }
+    get bound() {
+        return !!this._bound || !!this.view;
+    }
+    disconnectedFallbackCallback() {
+        this.disconnectedCallback();
+        // const parent = this.el.parentNode;
+        // if (parent) {
+        //   parent.removeChild(this.el);
+        // }
+    }
     /**
@@ -45,13 +58,19 @@ * returns a list of attributes wich are required until the riba binding starts
     }
-    init(observedAttributes) {
-        // if innerHTML is null this component uses the innerHTML which he already has!
-        const template = this.template();
-        this.debug('template', template);
-        if (template !== null) {
-            this.el.innerHTML = template;
-        }
+    async init(observedAttributes) {
         this.initAttributeObserver(observedAttributes);
-        if (this.autobind) {
-            this.bind();
+        /**
+         * After all required attributes are set we load the template and bind the component
+         */
+        if (this.checkRequiredAttributes()) {
+            return this.loadTemplate()
+                .then((template) => {
+                if (this.autobind) {
+                    return this.bind();
+                }
+                return Promise.resolve(null);
+            });
         }
+        else {
+            this.debug('not all required attributes are set to load and bind the template');
+        }
     }
@@ -176,4 +195,4 @@ /**
         }
-        // this.el.removeEventListener('binder-changed', this.BinderChangedEventHandler);
-        // this.$el.off('binder-changed', this.BinderChangedEventHandler);
+        this.el.removeEventListener('binder-changed', this.BinderChangedEventHandler);
+        this._bound = false;
     }
@@ -199,5 +218,17 @@ /**
         this.parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace);
-        if (this.autobind) {
-            this.bind();
+        /**
+         * After all required attributes are set we load the template and bind the component
+         */
+        if (this.checkRequiredAttributes()) {
+            this.loadTemplate()
+                .then((template) => {
+                if (this.autobind) {
+                    return this.bind();
+                }
+                return Promise.resolve(null);
+            });
         }
+        else {
+            this.debug('not all required attributes are set to load and bind the template');
+        }
     }
@@ -224,4 +255,32 @@ /**
     }
+    async loadTemplate() {
+        if (this.templateLoaded) {
+            this.debug('template already loaded');
+            return null;
+        }
+        if (!this.checkRequiredAttributes()) {
+            this.debug('not all required attributes are set to load the template');
+            return null;
+        }
+        // if innerHTML is null this component uses the innerHTML which he already has!
+        return Promise.resolve(this.template())
+            .then((template) => {
+            this.debug('template', template);
+            if (template !== null) {
+                this.el.innerHTML = template;
+            }
+            return template;
+        })
+            .then((template) => {
+            this.templateLoaded = true;
+            return template;
+        })
+            .catch((error) => {
+            console.error(error);
+            this.templateLoaded = false;
+            return error;
+        });
+    }
     async bind() {
-        if (this.view) {
+        if (this.bound) {
             this.debug('component already bounded');
@@ -250,2 +309,3 @@ return;
         this.view = new view_1.View(Array.prototype.slice.call(this.el.childNodes), this.scope, viewOptions);
+        this._bound = true;
         this.scope = this.view.models;
@@ -260,6 +320,6 @@ this.view.bind();
     async beforeBind() {
-        this.debug('beforeBind');
+        this.debug('beforeBind', this.bound);
     }
     async afterBind() {
-        this.debug('afterBind');
+        this.debug('afterBind', this.bound);
     }
@@ -266,0 +326,0 @@ BinderChangedEventHandler(event) {

lib/modules/jquery.module.js

@@ -10,3 +10,3 @@ "use strict";
  */
-const jquery_touch_events_1 = __importDefault(require("jquery-touch-events"));
+const jquery_touch_events_1 = __importDefault(require("./jquery-touch-events"));
 // tslint:disable-next-line:variable-name
@@ -13,0 +13,0 @@ const JQuery = jquery_touch_events_1.default(jquery_1.default);

lib/view.d.ts

@@ -6,2 +6,3 @@ import { IViewOptions } from './riba';
 import Debug from 'debug';
+import { RibaComponentClass } from './components/riba-component-class';
 export declare type TBlock = boolean;
@@ -29,3 +30,4 @@ export interface IDataElement extends HTMLElement {
     options: IViewOptions;
-    bindings: IBindable[];
+    bindings: Array<IBindable>;
+    webComponents: Array<RibaComponentClass>;
     /**
@@ -32,0 +34,0 @@ * The DOM elements and the model objects for binding are passed into the

lib/view.js

@@ -27,2 +27,3 @@ "use strict";
         this.bindings = [];
+        this.webComponents = [];
         if (els instanceof Array) {
@@ -166,3 +167,7 @@ this.els = els;
                         View.debug(`Fallback for Webcomponent ${nodeName}`);
-                        const component = new COMPONENT(node);
+                        const component = new COMPONENT(node, {
+                            fallback: true,
+                            view: this,
+                        });
+                        this.webComponents.push(component);
                     }
@@ -177,2 +182,9 @@ else {
                                 customElements.define(nodeName, COMPONENT);
+                                // TODO ?? call unbind (on unbind this view) of this component instance to unbind this view
+                                // (not disconnectedCallback / disconnectedFallbackCallback, this is automatically called from customElements)
+                                const component = customElements.get(nodeName);
+                                component.context = {
+                                    fallback: false,
+                                    view: this,
+                                };
                             }
@@ -182,3 +194,7 @@ catch (error) {
                                 // Fallback
-                                const component = new COMPONENT(node);
+                                const component = new COMPONENT(node, {
+                                    fallback: true,
+                                    view: this,
+                                });
+                                this.webComponents.push(component);
                             }
@@ -209,2 +225,5 @@ }
             });
+            this.webComponents.forEach((webcomponent) => {
+                webcomponent.disconnectedFallbackCallback();
+            });
         }
@@ -211,0 +230,0 @@ // TODO fallback to unbind web components

package.json

 {
   "name": "@ribajs/core",
   "description": "Core module of Riba.js",
-  "version": "0.16.9",
+  "version": "0.16.11",
   "author": "Pascal Garber <[e-mail]>",
@@ -6,0 +6,0 @@ "private": false,

src/components/riba-component.ts

@@ -59,3 +59,3 @@ /**
     this.debug = Debug('component:RibaComponent');
-    this.debug('constructor called', element, this.context, this);
+    this.debug('constructor called', element, context, this);
 
@@ -62,0 +62,0 @@ if (element) {

src/view.ts

@@ -213,4 +213,5 @@ import { IViewOptions, Riba } from './riba';
             View.debug(`Define Webcomponent ${nodeName} with customElements.define`);
-            if (customElements.get(nodeName)) {
-              View.debug(`Web component already defined`);
+            // if node.constructor is not HTMLElement and not HTMLUnknownElement, it was registed
+            if (customElements.get(nodeName) || (node.constructor !== HTMLElement && node.constructor !== HTMLUnknownElement)) {
+              View.debug(`Web component already defined`, node.constructor);
             } else {
@@ -223,3 +224,3 @@ try {
                 component.context = {
-                  fallback: true,
+                  fallback: false,
                   view: this,
@@ -226,0 +227,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2777233

increased by1.67%

Number of package files

321

increased by0.63%

Lines of code

34498

increased by2.57%

No dependency changes