p-elements-core 1.2.2 → 1.2.3-rc1

package/p-elements-core.d.ts

@@ -166,13 +166,15 @@ 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;
+  protected templateFromString(html: string): any;
+  private hashCode;
+  protected adoptStyle(root: Document | ShadowRoot, css: string): string | void;
+  projectorMode?: ElementProjectorMode;
+  protected createProjector(element: Element, render: () => VNode): Promise<Projector>;
   protected renderNow(): void;
 }
 
@@ -182,8 +184,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-rc1",
   "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,6 +36,9 @@ 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);
@@ -150,22 +56,30 @@ export abstract class CustomElement extends HTMLElement {
       this.attachShadow({ mode: "open" });
     }
     this.shadowRoot.innerHTML = "";
-    const supportReplaceCssSync = (this.shadowRoot as any).adoptedStyleSheets && CSSStyleSheet;
+    const supportReplaceCssSync =
+      (this.shadowRoot as any).adoptedStyleSheets && CSSStyleSheet;
 
-    // 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) {
         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]);
+        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" });
+        const blob = new Blob(
+          [cssMap.get(this.tagName) ? cssMap.get(this.tagName) : styleMatch[1]],
+          { type: "text/css" }
+        );
         html = html.replace(
           styleMatch[0],
           `<link rel="stylesheet" href="${URL.createObjectURL(
@@ -180,7 +94,7 @@ 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);
@@ -195,7 +109,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);
@@ -219,8 +133,7 @@ export abstract class CustomElement extends HTMLElement {
           const css = textContentForShadyStyle();
           (styleSheet as any).replaceSync(css);
           (this.shadowRoot as any).adoptedStyleSheets = [styleSheet];
-        }
-        else {
+        } else {
           const link = this.shadowRoot.querySelector("link");
           if (link) {
             if (link.hasAttribute("data-tmp")) {
@@ -230,37 +143,78 @@ export abstract class CustomElement extends HTMLElement {
             link.href = creatObjectUrlForShadyStyle();
           }
         }
-
       }, 300);
     });
 
     setTimeout(() => {
-
       const link = this.shadowRoot.querySelector("link");
       if (link) {
-
         if (link.hasAttribute("data-tmp")) {
           URL.revokeObjectURL(link.href);
           link.removeAttribute("data-tmp");
         }
         link.href = creatObjectUrlForShadyStyle();
       }
-
     }, 100);
 
     return template;
   }
 
+  private hashCode(s: string) {
+    for (var i = 0, h = 0; i < s.length; i++)
+      h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+    return h;
+  }
+
+  protected adoptStyle(root: Document | ShadowRoot, css: string) : string | void {
+    let hash = 0;
+    if (root instanceof Document) {
+      hash = this.hashCode(css);
+      if (documentAdoptedStyleSheets.indexOf(hash) !== -1) {
+        return;
+      }
+    }
+    const hasAdoptedStyleSheetsSupport =
+      (root as any).adoptedStyleSheets && CSSStyleSheet;
+
+    if (hasAdoptedStyleSheetsSupport) {
+      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);
+
+      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);
+    }
+  }
+
+  projectorMode?:  ElementProjectorMode;
+
   protected createProjector(
     element: Element,
     render: () => VNode
   ): Promise<Projector> {
     return new Promise<Projector>((resolve, reject) => {
       let projector: Projector;
-
+      const mode = this.projectorMode ? this.projectorMode : "append";
       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 +227,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>:host{color: red}</style><div></div>`
     );
     this.shadowRoot.appendChild(template);
-
-    this.shadowRoot.querySelector(".root").innerHTML = `
-      <div>P-FOO</div>
-    `;
+    this.createProjector(this.shadowRoot.querySelector("div"), this.render);
   }
+
+  projectorMode: ElementProjectorMode  = "replace";
+
+  private render = () => {
+    return <div>Foo</div>;
+  };
+
 }
 
 class SuperAnchorElement extends HTMLAnchorElement {