p-elements-core 1.2.2 → 1.2.3

package/p-elements-core.d.ts

@@ -166,13 +166,21 @@ declare const CustomElementConfig: (
   config: IElementConfig
 ) => (Element: any) => void;
 
+declare type ElementProjectorMode = "append" | "merge" | "replace";
+
 declare abstract class CustomElement extends HTMLElement {
-  protected templateFromString(html: string, shady?: boolean): any;
-  protected updateStyle(): void;
-  protected createProjector(
-    element: Element,
-    render: () => VNode
-  ): Promise<Projector>;
+  private _projector;
+  private _projectorMode;
+  private _callInitFunction;
+  private _initProjectorMode;
+  private get _supportsAdoptedStyleSheets();
+  private _shadowRootAdoptMapStyle;
+  private _shadowRootReplaceStyleWithLink;
+  protected templateFromString(html: string, useShadow?: boolean): any;
+  private _revokeAndUpdateLinkUrl;
+  private _getHashCode;
+  protected adoptStyle(root: Document | ShadowRoot, css: string): string | void;
+  protected createProjector(element: Element, render: () => VNode): Promise<Projector>;
   protected renderNow(): void;
 }
 
@@ -182,8 +190,6 @@ declare const Bind: (
   descriptor: any
 ) => void;
 
-declare function PropertyRenderOnSet(target: object, propertyKey: string): void;
-
-declare function RenderOnSet(target: object, propertyKey: string): void;
+declare const PropertyRenderOnSet: (target: object, propertyKey: string) => void;
 
-declare function ReflectToAttribute(target: object, propertyKey: string): void;
+declare const RenderOnSet: (target: object, propertyKey: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-elements-core",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "P Elements Core V1",
   "main": "dist/p-elements-core.js",
   "types": "p-elements-core.d.ts",

package/src/custom-element.ts

@@ -1,3 +1,9 @@
+import { bind } from "./decorators/bind";
+import { customElementConfig } from "./decorators/custom-element-config";
+import { propertyRenderOnSet } from "./decorators/render-property-on-set";
+
+export type ElementProjectorMode = "append" | "merge" | "replace";
+
 declare var HTMLElement: {
   prototype: HTMLElement;
   new (param?): HTMLElement;
@@ -10,112 +16,9 @@ export interface IElementConfig {
   };
 }
 
-export const Bind = (target, key, descriptor) => {
-  let fn = descriptor.value;
-  console.warn("@Bind decorator is deprecated, use arrow function expression");
-  if (typeof fn !== "function") {
-    throw new Error(
-      `@Bind decorator can only be applied to methods not: ${typeof fn}`
-    );
-  }
-
-  // In IE11 calling Object.defineProperty has a side-effect of evaluating the
-  // getter for the property which is being replaced. This causes infinite
-  // recursion and an "Out of stack space" error.
-  let definingProperty = false;
-
-  return {
-    configurable: true,
-    get() {
-      if (
-        definingProperty ||
-        this === target.prototype ||
-        this.hasOwnProperty(key) ||
-        typeof fn !== "function"
-      ) {
-        return fn;
-      }
-
-      let boundFn = fn.bind(this);
-      definingProperty = true;
-      Object.defineProperty(this, key, {
-        configurable: true,
-        get() {
-          return boundFn;
-        },
-        set(value) {
-          fn = value;
-          delete this[key];
-        },
-      });
-      definingProperty = false;
-      return boundFn;
-    },
-    set(value) {
-      fn = value;
-    },
-  };
-};
-
-export const CustomElementConfig = (config: IElementConfig) => {
-  return (Element) => {
-    setTimeout(() => {
-      customElements.define(config.tagName, Element, config.options);
-    }, 10);
-    const camelCased = config.tagName.replace(/-([a-z])/g, function (g) {
-      return g[1].toUpperCase();
-    });
-    (<any>window)[camelCased.charAt(0).toUpperCase() + camelCased.slice(1)] =
-      Element;
-  };
-};
-
-export function PropertyRenderOnSet(target, key) {
-  if (!Reflect.get(target, "_dp_" + key)) {
-    Reflect.defineProperty(target, "_dp_" + key, {
-      configurable: true,
-      enumerable: true,
-      get: function () {
-        return this["_" + key + "_value"];
-      },
-      set: function (value) {
-        this["_" + key + "_value"] = value;
-      },
-    });
-  }
-
-  if (!target["_dp_setters_" + key]) {
-    target["_dp_setters_" + key] = [];
-  }
-
-  const propertyRenderOnSetFunction = (o, v) => {
-    if (o && o.renderNow) {
-      o.renderNow();
-    }
-  };
-
-  target["_dp_setters_" + key].push(propertyRenderOnSetFunction);
-
-  const getter = function () {
-    return this["_" + key + "_value"];
-  };
-
-  const setter = function (newVal) {
-    this["_dp_" + key] = newVal;
-    if (target["_dp_setters_" + key]) {
-      target["_dp_setters_" + key].forEach((fn) => {
-        fn(this, newVal);
-      });
-    }
-  };
-
-  Object.defineProperty(target, key, {
-    configurable: true,
-    enumerable: true,
-    get: getter,
-    set: setter,
-  });
-}
+export const Bind = bind;
+export const CustomElementConfig = customElementConfig;
+export const PropertyRenderOnSet = propertyRenderOnSet;
 
 declare var HTMLElement: {
   prototype: HTMLElement;
@@ -133,45 +36,88 @@ if (!isNative((document as any).registerElement)) {
 // cssMap contain css string processed by ShadyCSS
 const cssMap = new Map();
 
+// documentAdoptedStyleSheets contain hash of css string
+const documentAdoptedStyleSheets: number[] = [];
+
 export abstract class CustomElement extends HTMLElement {
   constructor(self) {
     self = super(self);
+    this._callInitFunction();
+    this._initProjectorMode();
+    return self;
+  }
+
+  private _projector: Projector;
+
+  private _projectorMode: ElementProjectorMode;
+
+  private _callInitFunction() {
     if (typeof (this as any).init === "function") {
       (this as any).init();
     }
-    return self;
   }
 
-  private _projector: Projector;
+  private _initProjectorMode() {
+    const staticProjectorMode = (this.constructor as any).projectorMode;
+    this._projectorMode = staticProjectorMode ? staticProjectorMode : "append";
+  }
+
+  private get _supportsAdoptedStyleSheets(): boolean {
+    return (document as any).adoptedStyleSheets && CSSStyleSheet ? true : false;
+  }
 
-  protected templateFromString(html: string): any {
+  private _shadowRootAdoptMapStyle(style: string) {
+    const styleSheet = new CSSStyleSheet();
+    // adopt stylesheet with css processed by ShadyCSS or the css match from template
+    (styleSheet as any).replaceSync(
+      cssMap.has(this.tagName) === true ? cssMap.get(this.tagName) : style
+    );
+    (this.shadowRoot as any).adoptedStyleSheets = [styleSheet];
+  }
+
+  private _shadowRootReplaceStyleWithLink(
+    html: string,
+    search: string,
+    style: string
+  ): string {
+    // add link to stylesheet with object uri from css processed by ShadyCSS or the css match from template
+    const blob = new Blob(
+      [cssMap.get(this.tagName) ? cssMap.get(this.tagName) : style],
+      { type: "text/css" }
+    );
+    html = html.replace(
+      search,
+      `<link rel="stylesheet" href="${URL.createObjectURL(
+        blob
+      )}" data-tmp="true">`
+    );
+    return html;
+  }
+
+  protected templateFromString(html: string, useShadow = true): any {
     // attach shadow dom if not already attached
-    if (!this.shadowRoot) {
+    if (useShadow && !this.shadowRoot) {
       this.attachShadow({ mode: "open" });
     }
-    this.shadowRoot.innerHTML = "";
-    const supportReplaceCssSync = (this.shadowRoot as any).adoptedStyleSheets && CSSStyleSheet;
+    useShadow ? (this.shadowRoot.innerHTML = "") : (this.innerHTML = "");
 
-    // find css style in template 
+    // find css style in template
     let style = "<style></style>";
     const styleMatch = html.match(/<style[^>]*>([\s\S]*?)<\/style>/);
     if (styleMatch) {
       style = styleMatch[0];
-      if (supportReplaceCssSync) {
+      if (useShadow && this._supportsAdoptedStyleSheets) {
         html = html.replace(styleMatch[0], "");
-        const styleSheet =  new CSSStyleSheet();
-        // adopt stylesheet with css processed by ShadyCSS or the css match from template 
-        (styleSheet as any).replaceSync(cssMap.has(this.tagName) === true ? cssMap.get(this.tagName) : styleMatch[1]);
-        (this.shadowRoot as any).adoptedStyleSheets = [styleSheet];
-      } else {
-        // add link to stylesheet with object uri from css processed by ShadyCSS or the css match from template
-        const blob = new Blob([ cssMap.get(this.tagName) ? cssMap.get(this.tagName) : styleMatch[1]], { type: "text/css" });
-        html = html.replace(
+        this._shadowRootAdoptMapStyle(styleMatch[1]);
+      } else if (useShadow) {
+        html = this._shadowRootReplaceStyleWithLink(
+          html,
           styleMatch[0],
-          `<link rel="stylesheet" href="${URL.createObjectURL(
-            blob
-          )}" data-tmp="true">`
+          styleMatch[1]
         );
+      } else {
+        html = html.replace(styleMatch[0], "");
+        this.adoptStyle(document, styleMatch[1]);
       }
     }
 
@@ -180,12 +126,11 @@ export abstract class CustomElement extends HTMLElement {
     myElementTemplate.innerHTML = html;
     let template = document.importNode(myElementTemplate.content, true);
 
-    // process css with ShadyCSS function 
+    // process css with ShadyCSS function
     const textContentForShadyStyle = () => {
       if (cssMap.has(this.tagName)) {
         return cssMap.get(this.tagName);
       }
-
       const t = document.createElement("template");
       t.innerHTML = style;
       const p = (window as any).ShadyCSS.prepareTemplate(t, "x-tmp");
@@ -195,7 +140,7 @@ export abstract class CustomElement extends HTMLElement {
       return s;
     };
 
-    //  create object uri from css processed by ShadyCSS function 
+    //  create object uri from css processed by ShadyCSS function
     const creatObjectUrlForShadyStyle = () => {
       if (cssMap.has(this.tagName)) {
         return cssMap.get(this.tagName);
@@ -211,56 +156,92 @@ export abstract class CustomElement extends HTMLElement {
       return url;
     };
 
-    window.addEventListener("customStyleConnected", () => {
-      setTimeout(() => {
-        if (styleMatch && supportReplaceCssSync) {
-          html = html.replace(styleMatch[0], "");
-          const styleSheet = new CSSStyleSheet();
-          const css = textContentForShadyStyle();
-          (styleSheet as any).replaceSync(css);
-          (this.shadowRoot as any).adoptedStyleSheets = [styleSheet];
-        }
-        else {
-          const link = this.shadowRoot.querySelector("link");
-          if (link) {
-            if (link.hasAttribute("data-tmp")) {
-              URL.revokeObjectURL(link.href);
-              link.removeAttribute("data-tmp");
-            }
-            link.href = creatObjectUrlForShadyStyle();
+    if (useShadow) {
+      window.addEventListener("customStyleConnected", () => {
+        setTimeout(() => {
+          if (styleMatch && this._supportsAdoptedStyleSheets) {
+            html = html.replace(styleMatch[0], "");
+            const styleSheet = new CSSStyleSheet();
+            const css = textContentForShadyStyle();
+            (styleSheet as any).replaceSync(css);
+            (this.shadowRoot as any).adoptedStyleSheets = [styleSheet];
+          } else {
+            this._revokeAndUpdateLinkUrl(creatObjectUrlForShadyStyle);
           }
-        }
-
-      }, 300);
-    });
+        }, 300);
+      });
+      setTimeout(() => {
+        this._revokeAndUpdateLinkUrl(creatObjectUrlForShadyStyle);
+      }, 100);
+    }
+    return template;
+  }
 
-    setTimeout(() => {
+  private _revokeAndUpdateLinkUrl(creatObjectUrlForShadyStyle: () => string) {
+    const link = this.shadowRoot.querySelector("link");
+    if (link) {
+      if (link.hasAttribute("data-tmp")) {
+        URL.revokeObjectURL(link.href);
+        link.removeAttribute("data-tmp");
+      }
+      link.href = creatObjectUrlForShadyStyle();
+    }
+  }
 
-      const link = this.shadowRoot.querySelector("link");
-      if (link) {
+  private _getHashCode(s: string) {
+    for (var i = 0, h = 0; i < s.length; i++)
+      h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+    return h;
+  }
 
-        if (link.hasAttribute("data-tmp")) {
-          URL.revokeObjectURL(link.href);
-          link.removeAttribute("data-tmp");
-        }
-        link.href = creatObjectUrlForShadyStyle();
+  protected adoptStyle(
+    root: Document | ShadowRoot,
+    css: string
+  ): string | void {
+    let hash = 0;
+    if (root instanceof Document) {
+      hash = this._getHashCode(css);
+      if (documentAdoptedStyleSheets.indexOf(hash) !== -1) {
+        return;
       }
+    }
 
-    }, 100);
+    if (this._supportsAdoptedStyleSheets) {
+      const sheet = new CSSStyleSheet();
+      (sheet as any).replaceSync(css);
+      (root as any).adoptedStyleSheets = [
+        ...(root as any).adoptedStyleSheets,
+        sheet,
+      ];
+    } else {
+      const blob = new Blob([css], { type: "text/css" });
+      const url = URL.createObjectURL(blob);
 
-    return template;
+      const link = document.createElement("link");
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("href", url);
+      if (root instanceof Document) {
+        root.head.appendChild(link);
+      } else {
+        root.appendChild(link);
+      }
+    }
+    if (hash !== 0) {
+      documentAdoptedStyleSheets.push(hash);
+    }
   }
 
+
   protected createProjector(
     element: Element,
     render: () => VNode
   ): Promise<Projector> {
     return new Promise<Projector>((resolve, reject) => {
       let projector: Projector;
-
+      const mode = this._projectorMode;
       setTimeout(() => {
         projector = (window as any).Maquette.createProjector();
-        projector.append(element, render);
+        projector[mode](element, render);
         this._projector = projector;
         resolve(projector);
         this.dispatchEvent(new CustomEvent("firstRender", {}));
@@ -273,5 +254,4 @@ export abstract class CustomElement extends HTMLElement {
       this._projector.renderNow();
     }
   }
-
 }

package/src/decorators/bind.ts

@@ -0,0 +1,46 @@
+export const bind = (target, key, descriptor) => {
+  let fn = descriptor.value;
+  console.warn("@Bind decorator is deprecated, use arrow function expression");
+  if (typeof fn !== "function") {
+    throw new Error(
+      `@Bind decorator can only be applied to methods not: ${typeof fn}`
+    );
+  }
+
+  // In IE11 calling Object.defineProperty has a side-effect of evaluating the
+  // getter for the property which is being replaced. This causes infinite
+  // recursion and an "Out of stack space" error.
+  let definingProperty = false;
+
+  return {
+    configurable: true,
+    get() {
+      if (
+        definingProperty ||
+        this === target.prototype ||
+        this.hasOwnProperty(key) ||
+        typeof fn !== "function"
+      ) {
+        return fn;
+      }
+
+      let boundFn = fn.bind(this);
+      definingProperty = true;
+      Object.defineProperty(this, key, {
+        configurable: true,
+        get() {
+          return boundFn;
+        },
+        set(value) {
+          fn = value;
+          delete this[key];
+        },
+      });
+      definingProperty = false;
+      return boundFn;
+    },
+    set(value) {
+      fn = value;
+    },
+  };
+};

package/src/decorators/custom-element-config.ts

@@ -0,0 +1,10 @@
+export const customElementConfig = (config: IElementConfig) => {
+  return (Element) => {
+    customElements.define(config.tagName, Element, config.options);
+    const camelCased = config.tagName.replace(/-([a-z])/g, function (g) {
+      return g[1].toUpperCase();
+    });
+    (<any>window)[camelCased.charAt(0).toUpperCase() + camelCased.slice(1)] =
+      Element;
+  };
+};

package/src/decorators/render-property-on-set.ts

@@ -0,0 +1,46 @@
+export const propertyRenderOnSet = (target, key) => {
+  if (!Reflect.get(target, "_dp_" + key)) {
+    Reflect.defineProperty(target, "_dp_" + key, {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        return this["_" + key + "_value"];
+      },
+      set: function (value) {
+        this["_" + key + "_value"] = value;
+      },
+    });
+  }
+
+  if (!target["_dp_setters_" + key]) {
+    target["_dp_setters_" + key] = [];
+  }
+
+  const propertyRenderOnSetFunction = (o, v) => {
+    if (o && o.renderNow) {
+      o.renderNow();
+    }
+  };
+
+  target["_dp_setters_" + key].push(propertyRenderOnSetFunction);
+
+  const getter = function () {
+    return this["_" + key + "_value"];
+  };
+
+  const setter = function (newVal) {
+    this["_dp_" + key] = newVal;
+    if (target["_dp_setters_" + key]) {
+      target["_dp_setters_" + key].forEach((fn) => {
+        fn(this, newVal);
+      });
+    }
+  };
+
+  Object.defineProperty(target, key, {
+    configurable: true,
+    enumerable: true,
+    get: getter,
+    set: setter,
+  });
+}

package/src/sample.tsx

@@ -2,7 +2,7 @@ import {
   PropertyRenderOnSet,
   CustomElement,
   CustomElementConfig,
-  Bind,
+  ElementProjectorMode,
 } from "./custom-element";
 import * as anime from "animejs";
 
@@ -199,16 +199,21 @@ class MyGreetings extends CustomElement {
   tagName: "p-foo",
 })
 class PFoo extends CustomElement {
-  private connectedCallback() {
+  constructor(args) {
+    super(args);
     const template = this.templateFromString(
-      `<style>:host{color: red}</style><div class="root"></div>`
+      `<style>.foo{color: red}</style><div></div>`, false
     );
-    this.shadowRoot.appendChild(template);
-
-    this.shadowRoot.querySelector(".root").innerHTML = `
-      <div>P-FOO</div>
-    `;
+    this.appendChild(template);
+    this.createProjector(this.querySelector("div"), this.render);
   }
+
+  static projectorMode: ElementProjectorMode  = "replace";
+
+  private render = () => {
+    return <div class="foo">Foo</div>;
+  };
+
 }
 
 class SuperAnchorElement extends HTMLAnchorElement {