p-elements-core 1.2.32-rc8 → 1.2.32

package/src/maquette/projector.ts

@@ -1,205 +1,205 @@
-import { applyDefaultProjectionOptions, dom } from "./dom";
-/**
- * A projector is used to create the real DOM from the the virtual DOM and to keep it up-to-date afterwards.
- *
- * You can call [[append]], [[merge]], [[insertBefore]] and [[replace]] to add the virtual DOM to the real DOM.
- * The `renderFunction` callbacks will be called to create the real DOM immediately.
- * Afterwards, the `renderFunction` callbacks will be called again to update the DOM on the next animation-frame after:
- *
- *  - The Projector's [[scheduleRender]] function  was called
- *  - An event handler (like `onclick`) on a rendered [[VNode]] was called.
- *
- * The projector stops when [[stop]] is called or when an error is thrown during rendering.
- * It is possible to use `window.onerror` to handle these errors.
- * Instances of [[Projector]] can be created using [[createProjector]].
- *
- * If you need a customized projector, please check the maquette-advanced-projector project which provides a
- * versatile stand-in replacement.
- */
-import {
-  EventHandler,
-  EventHandlerInterceptor,
-  Projection,
-  ProjectionOptions,
-  Projector,
-  ProjectorOptions,
-  ProjectorPerformanceLogger,
-  VNode,
-  VNodeProperties,
-} from "./interfaces";
-
-let createParentNodePath = (node: Node | null, rootNode: Element) => {
-  let parentNodePath: Node[] = [];
-  while (node && node !== rootNode) {
-    parentNodePath.push(node);
-    node = node.parentNode;
-  }
-  return parentNodePath;
-};
-
-let find: <T>(items: T[], predicate: (item: T) => boolean) => T | undefined;
-if ((Array.prototype as any).find) {
-  find = (items, predicate) => items.find(predicate);
-} else {
-  find = (items, predicate) => items.filter(predicate)[0];
-}
-
-let findVNodeByParentNodePath = (vnode: VNode, parentNodePath: Node[]): VNode | undefined => {
-  let result: VNode | undefined = vnode;
-  parentNodePath.forEach((node) => {
-    result =
-      result && result.children
-        ? find(result.children, (child) => child.domNode === node)
-        : undefined;
-  });
-  return result;
-};
-
-let createEventHandlerInterceptor = (
-  projector: Projector,
-  getProjection: () => Projection | undefined,
-  performanceLogger: ProjectorPerformanceLogger
-): EventHandlerInterceptor => {
-  return (
-    propertyName: string,
-    eventHandler: EventHandler,
-    domNode: Node,
-    properties: VNodeProperties,
-  ) => {
-    // modified event handler
-    return function(this: Node, evt: Event): boolean | undefined | void {
-      performanceLogger("domEvent", evt);
-      let projection = getProjection();
-      // Guard: projection may be undefined when an event handler is invoked synchronously
-      // during initial DOM creation (e.g. by a custom-element setter calling onchange).
-      if (!projection) {
-        return eventHandler.apply(this, arguments);
-      }
-      let parentNodePath = createParentNodePath(evt.currentTarget as Element, projection.domNode);
-      parentNodePath.reverse();
-      let matchingVNode = findVNodeByParentNodePath(projection.getLastRender(), parentNodePath);
-
-      projector.scheduleRender();
-
-      let result: any;
-      if (matchingVNode) {
-        /* eslint-disable prefer-rest-params */
-        let listener =
-          matchingVNode.properties![`on${evt.type}`] ??
-          (matchingVNode.properties!.on![evt.type] as { listener: EventHandler }).listener ??
-          (matchingVNode.properties!.on![evt.type] as EventHandler);
-        result = listener.apply(matchingVNode.properties!.bind || this, arguments);
-        /* eslint-enable prefer-rest-params */
-      }
-      if (result === undefined && (this as HTMLElement).hasAttribute("data-force-event-handler")) {
-        result = eventHandler.apply(this, arguments);
-      }
-      performanceLogger("domEventProcessed", evt);
-      return result;
-    }
-
-  };
-};
-
-/**
- * Creates a [[Projector]] instance using the provided projectionOptions.
- *
- * For more information, see [[Projector]].
- *
- * @param projectorOptions   Options that influence how the DOM is rendered and updated.
- */
-export let createProjector = (projectorOptions?: ProjectorOptions): Projector => {
-  let projector: Projector;
-  let projectionOptions = applyDefaultProjectionOptions(projectorOptions);
-  let performanceLogger = projectionOptions.performanceLogger!;
-  let renderCompleted = true;
-  let scheduled: number | undefined;
-  let stopped = false;
-  let projections = [] as Projection[];
-  let renderFunctions = [] as (() => VNode)[]; // matches the projections array
-
-  let addProjection = (
-    /* one of: dom.append, dom.insertBefore, dom.replace, dom.merge */
-    domFunction: (node: Element, vnode: VNode, projectionOptions: ProjectionOptions) => Projection,
-    /* the parameter of the domFunction */
-    node: Element,
-    renderFunction: () => VNode
-  ): void => {
-    let projection: Projection | undefined;
-    let getProjection = () => projection;
-    projectionOptions.eventHandlerInterceptor = createEventHandlerInterceptor(
-      projector,
-      getProjection,
-      performanceLogger
-    );
-    projection = domFunction(node, renderFunction(), projectionOptions);
-    projections.push(projection);
-    renderFunctions.push(renderFunction);
-  };
-
-  let doRender = () => {
-    scheduled = undefined;
-    if (!renderCompleted) {
-      return; // The last render threw an error, it should have been logged in the browser console.
-    }
-    renderCompleted = false;
-    performanceLogger("renderStart", undefined);
-    for (let i = 0; i < projections.length; i++) {
-      let updatedVnode = renderFunctions[i]();
-      performanceLogger("rendered", undefined);
-      projections[i].update(updatedVnode);
-      performanceLogger("patched", undefined);
-    }
-    performanceLogger("renderDone", undefined);
-    renderCompleted = true;
-  };
-
-  projector = {
-    renderNow: doRender,
-    scheduleRender: () => {
-      if (!scheduled && !stopped) {
-        scheduled = requestAnimationFrame(doRender);
-      }
-    },
-    stop: () => {
-      if (scheduled) {
-        cancelAnimationFrame(scheduled);
-        scheduled = undefined;
-      }
-      stopped = true;
-    },
-
-    resume: () => {
-      stopped = false;
-      renderCompleted = true;
-      projector.scheduleRender();
-    },
-
-    append: (parentNode, renderFunction) => {
-      addProjection(dom.append, parentNode, renderFunction);
-    },
-
-    insertBefore: (beforeNode, renderFunction) => {
-      addProjection(dom.insertBefore, beforeNode, renderFunction);
-    },
-
-    merge: (domNode, renderFunction) => {
-      addProjection(dom.merge, domNode, renderFunction);
-    },
-
-    replace: (domNode, renderFunction) => {
-      addProjection(dom.replace, domNode, renderFunction);
-    },
-
-    detach: (renderFunction) => {
-      for (let i = 0; i < renderFunctions.length; i++) {
-        if (renderFunctions[i] === renderFunction) {
-          renderFunctions.splice(i, 1);
-          return projections.splice(i, 1)[0];
-        }
-      }
-      throw new Error("renderFunction was not found");
-    },
-  };
-  return projector;
-};
+import { applyDefaultProjectionOptions, dom } from "./dom";
+/**
+ * A projector is used to create the real DOM from the the virtual DOM and to keep it up-to-date afterwards.
+ *
+ * You can call [[append]], [[merge]], [[insertBefore]] and [[replace]] to add the virtual DOM to the real DOM.
+ * The `renderFunction` callbacks will be called to create the real DOM immediately.
+ * Afterwards, the `renderFunction` callbacks will be called again to update the DOM on the next animation-frame after:
+ *
+ *  - The Projector's [[scheduleRender]] function  was called
+ *  - An event handler (like `onclick`) on a rendered [[VNode]] was called.
+ *
+ * The projector stops when [[stop]] is called or when an error is thrown during rendering.
+ * It is possible to use `window.onerror` to handle these errors.
+ * Instances of [[Projector]] can be created using [[createProjector]].
+ *
+ * If you need a customized projector, please check the maquette-advanced-projector project which provides a
+ * versatile stand-in replacement.
+ */
+import {
+  EventHandler,
+  EventHandlerInterceptor,
+  Projection,
+  ProjectionOptions,
+  Projector,
+  ProjectorOptions,
+  ProjectorPerformanceLogger,
+  VNode,
+  VNodeProperties,
+} from "./interfaces";
+
+let createParentNodePath = (node: Node | null, rootNode: Element) => {
+  let parentNodePath: Node[] = [];
+  while (node && node !== rootNode) {
+    parentNodePath.push(node);
+    node = node.parentNode;
+  }
+  return parentNodePath;
+};
+
+let find: <T>(items: T[], predicate: (item: T) => boolean) => T | undefined;
+if ((Array.prototype as any).find) {
+  find = (items, predicate) => items.find(predicate);
+} else {
+  find = (items, predicate) => items.filter(predicate)[0];
+}
+
+let findVNodeByParentNodePath = (vnode: VNode, parentNodePath: Node[]): VNode | undefined => {
+  let result: VNode | undefined = vnode;
+  parentNodePath.forEach((node) => {
+    result =
+      result && result.children
+        ? find(result.children, (child) => child.domNode === node)
+        : undefined;
+  });
+  return result;
+};
+
+let createEventHandlerInterceptor = (
+  projector: Projector,
+  getProjection: () => Projection | undefined,
+  performanceLogger: ProjectorPerformanceLogger
+): EventHandlerInterceptor => {
+  return (
+    propertyName: string,
+    eventHandler: EventHandler,
+    domNode: Node,
+    properties: VNodeProperties,
+  ) => {
+    // modified event handler
+    return function(this: Node, evt: Event): boolean | undefined | void {
+      performanceLogger("domEvent", evt);
+      let projection = getProjection();
+      // Guard: projection may be undefined when an event handler is invoked synchronously
+      // during initial DOM creation (e.g. by a custom-element setter calling onchange).
+      if (!projection) {
+        return eventHandler.apply(this, arguments);
+      }
+      let parentNodePath = createParentNodePath(evt.currentTarget as Element, projection.domNode);
+      parentNodePath.reverse();
+      let matchingVNode = findVNodeByParentNodePath(projection.getLastRender(), parentNodePath);
+
+      projector.scheduleRender();
+
+      let result: any;
+      if (matchingVNode) {
+        /* eslint-disable prefer-rest-params */
+        let listener =
+          matchingVNode.properties![`on${evt.type}`] ??
+          (matchingVNode.properties!.on![evt.type] as { listener: EventHandler }).listener ??
+          (matchingVNode.properties!.on![evt.type] as EventHandler);
+        result = listener.apply(matchingVNode.properties!.bind || this, arguments);
+        /* eslint-enable prefer-rest-params */
+      }
+      if (result === undefined && (this as HTMLElement).hasAttribute("data-force-event-handler")) {
+        result = eventHandler.apply(this, arguments);
+      }
+      performanceLogger("domEventProcessed", evt);
+      return result;
+    }
+
+  };
+};
+
+/**
+ * Creates a [[Projector]] instance using the provided projectionOptions.
+ *
+ * For more information, see [[Projector]].
+ *
+ * @param projectorOptions   Options that influence how the DOM is rendered and updated.
+ */
+export let createProjector = (projectorOptions?: ProjectorOptions): Projector => {
+  let projector: Projector;
+  let projectionOptions = applyDefaultProjectionOptions(projectorOptions);
+  let performanceLogger = projectionOptions.performanceLogger!;
+  let renderCompleted = true;
+  let scheduled: number | undefined;
+  let stopped = false;
+  let projections = [] as Projection[];
+  let renderFunctions = [] as (() => VNode)[]; // matches the projections array
+
+  let addProjection = (
+    /* one of: dom.append, dom.insertBefore, dom.replace, dom.merge */
+    domFunction: (node: Element, vnode: VNode, projectionOptions: ProjectionOptions) => Projection,
+    /* the parameter of the domFunction */
+    node: Element,
+    renderFunction: () => VNode
+  ): void => {
+    let projection: Projection | undefined;
+    let getProjection = () => projection;
+    projectionOptions.eventHandlerInterceptor = createEventHandlerInterceptor(
+      projector,
+      getProjection,
+      performanceLogger
+    );
+    projection = domFunction(node, renderFunction(), projectionOptions);
+    projections.push(projection);
+    renderFunctions.push(renderFunction);
+  };
+
+  let doRender = () => {
+    scheduled = undefined;
+    if (!renderCompleted) {
+      return; // The last render threw an error, it should have been logged in the browser console.
+    }
+    renderCompleted = false;
+    performanceLogger("renderStart", undefined);
+    for (let i = 0; i < projections.length; i++) {
+      let updatedVnode = renderFunctions[i]();
+      performanceLogger("rendered", undefined);
+      projections[i].update(updatedVnode);
+      performanceLogger("patched", undefined);
+    }
+    performanceLogger("renderDone", undefined);
+    renderCompleted = true;
+  };
+
+  projector = {
+    renderNow: doRender,
+    scheduleRender: () => {
+      if (!scheduled && !stopped) {
+        scheduled = requestAnimationFrame(doRender);
+      }
+    },
+    stop: () => {
+      if (scheduled) {
+        cancelAnimationFrame(scheduled);
+        scheduled = undefined;
+      }
+      stopped = true;
+    },
+
+    resume: () => {
+      stopped = false;
+      renderCompleted = true;
+      projector.scheduleRender();
+    },
+
+    append: (parentNode, renderFunction) => {
+      addProjection(dom.append, parentNode, renderFunction);
+    },
+
+    insertBefore: (beforeNode, renderFunction) => {
+      addProjection(dom.insertBefore, beforeNode, renderFunction);
+    },
+
+    merge: (domNode, renderFunction) => {
+      addProjection(dom.merge, domNode, renderFunction);
+    },
+
+    replace: (domNode, renderFunction) => {
+      addProjection(dom.replace, domNode, renderFunction);
+    },
+
+    detach: (renderFunction) => {
+      for (let i = 0; i < renderFunctions.length; i++) {
+        if (renderFunctions[i] === renderFunction) {
+          renderFunctions.splice(i, 1);
+          return projections.splice(i, 1)[0];
+        }
+      }
+      throw new Error("renderFunction was not found");
+    },
+  };
+  return projector;
+};

package/src/sample/mixin/highlight.tsx

@@ -1,33 +1,33 @@
-// @ts-nocheck
-export interface HighlightableInterface {
-  highlight: boolean;
-}
-import type { CustomElement } from "../../custom-element";
-
-type Constructor<T> = new (...args: any[]) => T;
-
-export const Highlightable =
-  <T extends Constructor<CustomElement>>(superClass: T) => {
-    class HighlightableElement extends superClass {
-      get highlight() {
-        return this.#highlight;
-      }
-
-      set highlight(value) {
-        this.#highlight = value;
-        let color = "unset";
-        if  (value) {
-          color = "yellow";
-        }
-        const div = this?.shadowRoot.querySelector("div");
-        if (div) {
-          div.style.backgroundColor = color;
-        }
-      }
-
-      #highlight = false;
-    }
-    // ...and a helper render method:
-
-    return HighlightableElement as Constructor<HighlightableInterface> & T;
-  };
+// @ts-nocheck
+export interface HighlightableInterface {
+  highlight: boolean;
+}
+import type { CustomElement } from "../../custom-element";
+
+type Constructor<T> = new (...args: any[]) => T;
+
+export const Highlightable =
+  <T extends Constructor<CustomElement>>(superClass: T) => {
+    class HighlightableElement extends superClass {
+      get highlight() {
+        return this.#highlight;
+      }
+
+      set highlight(value) {
+        this.#highlight = value;
+        let color = "unset";
+        if  (value) {
+          color = "yellow";
+        }
+        const div = this?.shadowRoot.querySelector("div");
+        if (div) {
+          div.style.backgroundColor = color;
+        }
+      }
+
+      #highlight = false;
+    }
+    // ...and a helper render method:
+
+    return HighlightableElement as Constructor<HighlightableInterface> & T;
+  };

package/src/sample/sample.tsx

@@ -427,3 +427,101 @@ class SuperAnchorElement extends HTMLAnchorElement {
 }
 
 window.customElements.define("super-a", SuperAnchorElement, { extends: "a" });
+
+
+// Bring your own projector in non shadow root element
+@CustomElementConfig({
+  tagName: "bring-your-own-projector",
+})
+export class BringYourOwnProjector extends CustomElement {
+
+  constructor() {
+    super();
+    this.initProjector();
+  }
+
+  init() {
+    console.log("This is a lifecycle for BringYourOwnProjector");
+  }
+
+  initProjector() {
+    this.rootElement = document.createElement("div");
+    this.rootElement.classList.add("root");
+    this.createProjector(this.rootElement, this.render);
+    console.log("init");
+  }
+
+  @PropertyRenderOnSet
+  name: string = "foo";
+
+  #_doneSOmething = false;
+
+  get doneSomething() {
+    return this.#_doneSOmething;
+  }
+
+  doItNow(value) {
+    this.#_doneSOmething = value;
+    this.renderNow();
+  }
+
+  rootElement: HTMLDivElement;
+
+  render() {
+    return <div>Hello {this.name} {this.doneSomething && <p>We did it!!</p>}</div>;
+  }
+
+   connectedCallback() {
+    this.appendChild(this.rootElement);
+  }
+
+}
+
+// Bring your own projector in non shadow root element
+@CustomElementConfig({
+  tagName: "bring-your-own-projector-in-shadow-root",
+})
+export class BringYourOwnProjectorInShadowRoot extends CustomElement {
+
+  constructor() {
+    super();
+    this.initProjector();
+  }
+
+  init() {
+    console.log("This is a lifecycle for BringYourOwnProjector");
+  }
+
+  initProjector() {
+    this.attachShadow({ mode: "open" });
+    this.rootElement = document.createElement("div");
+    this.rootElement.classList.add("root");
+    this.createProjector(this.rootElement, this.render);
+    console.log("init");
+  }
+
+  @PropertyRenderOnSet
+  name: string = "foo";
+
+  #_doneSOmething = false;
+
+  get doneSomething() {
+    return this.#_doneSOmething;
+  }
+
+  doItNow(value) {
+    this.#_doneSOmething = value;
+    this.renderNow();
+  }
+
+  rootElement: HTMLDivElement;
+
+  render() {
+    return <div>Hello {this.name} {this.doneSomething && <p>We did it!!</p>}</div>;
+  }
+
+   connectedCallback() {
+    this.shadowRoot.appendChild(this.rootElement);
+  }
+
+}