p-elements-core 1.2.3-rc1 → 1.2.3

package/p-elements-core.d.ts

@@ -170,10 +170,16 @@ declare type ElementProjectorMode = "append" | "merge" | "replace";
 
 declare abstract class CustomElement extends HTMLElement {
   private _projector;
-  protected templateFromString(html: string): any;
-  private hashCode;
+  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;
-  projectorMode?: ElementProjectorMode;
   protected createProjector(element: Element, render: () => VNode): Promise<Projector>;
   protected renderNow(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-elements-core",
-  "version": "1.2.3-rc1",
+  "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

@@ -42,50 +42,82 @@ 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;
+  }
+
+  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): any {
+  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
     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]);
       }
     }
 
@@ -99,7 +131,6 @@ export abstract class CustomElement extends HTMLElement {
       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");
@@ -125,59 +156,57 @@ 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(() => {
-      const link = this.shadowRoot.querySelector("link");
-      if (link) {
-        if (link.hasAttribute("data-tmp")) {
-          URL.revokeObjectURL(link.href);
-          link.removeAttribute("data-tmp");
-        }
-        link.href = creatObjectUrlForShadyStyle();
+  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");
       }
-    }, 100);
-
-    return template;
+      link.href = creatObjectUrlForShadyStyle();
+    }
   }
 
-  private hashCode(s: string) {
+  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;
   }
 
-  protected adoptStyle(root: Document | ShadowRoot, css: string) : string | void {
+  protected adoptStyle(
+    root: Document | ShadowRoot,
+    css: string
+  ): string | void {
     let hash = 0;
     if (root instanceof Document) {
-      hash = this.hashCode(css);
+      hash = this._getHashCode(css);
       if (documentAdoptedStyleSheets.indexOf(hash) !== -1) {
         return;
       }
     }
-    const hasAdoptedStyleSheetsSupport =
-      (root as any).adoptedStyleSheets && CSSStyleSheet;
 
-    if (hasAdoptedStyleSheetsSupport) {
+    if (this._supportsAdoptedStyleSheets) {
       const sheet = new CSSStyleSheet();
       (sheet as any).replaceSync(css);
       (root as any).adoptedStyleSheets = [
@@ -192,9 +221,8 @@ export abstract class CustomElement extends HTMLElement {
       link.setAttribute("rel", "stylesheet");
       link.setAttribute("href", url);
       if (root instanceof Document) {
-        root.head.appendChild(link)
-      }
-      else {
+        root.head.appendChild(link);
+      } else {
         root.appendChild(link);
       }
     }
@@ -203,7 +231,6 @@ export abstract class CustomElement extends HTMLElement {
     }
   }
 
-  projectorMode?:  ElementProjectorMode;
 
   protected createProjector(
     element: Element,
@@ -211,7 +238,7 @@ export abstract class CustomElement extends HTMLElement {
   ): Promise<Projector> {
     return new Promise<Projector>((resolve, reject) => {
       let projector: Projector;
-      const mode = this.projectorMode ? this.projectorMode : "append";
+      const mode = this._projectorMode;
       setTimeout(() => {
         projector = (window as any).Maquette.createProjector();
         projector[mode](element, render);

package/src/sample.tsx

@@ -202,16 +202,16 @@ class PFoo extends CustomElement {
   constructor(args) {
     super(args);
     const template = this.templateFromString(
-      `<style>:host{color: red}</style><div></div>`
+      `<style>.foo{color: red}</style><div></div>`, false
     );
-    this.shadowRoot.appendChild(template);
-    this.createProjector(this.shadowRoot.querySelector("div"), this.render);
+    this.appendChild(template);
+    this.createProjector(this.querySelector("div"), this.render);
   }
 
-  projectorMode: ElementProjectorMode  = "replace";
+  static projectorMode: ElementProjectorMode  = "replace";
 
   private render = () => {
-    return <div>Foo</div>;
+    return <div class="foo">Foo</div>;
   };
 
 }