@rettangoli/fe 1.1.0 → 1.1.2

package/README.md

@@ -195,7 +195,7 @@ Use this workflow:
 Docker image:
 
 ```bash
-IMAGE="han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.12"
+IMAGE="han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0"
 ```
 
 Dashboard suite:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",

package/src/core/runtime/componentOrchestrator.js

@@ -7,7 +7,7 @@ import {
   cleanupEventRateLimitState,
   syncRefIds,
 } from "./componentRuntime.js";
-import { buildOnUpdateChanges } from "./lifecycle.js";
+import { buildOnPropUpdateChanges, buildOnUpdateChanges } from "./lifecycle.js";
 import { normalizeAttributeValue, toCamelCase } from "./props.js";
 
 export const createRuntimeDepsForInstance = ({ instance }) => {
@@ -112,6 +112,39 @@ export const runAttributeChangedComponentLifecycle = ({
   });
 };
 
+export const runPropChangedComponentLifecycle = ({
+  instance,
+  propName,
+  oldValue,
+  newValue,
+  scheduleFrameFn,
+}) => {
+  if (oldValue === newValue || !instance.render) {
+    return;
+  }
+
+  if (instance.isConnected === false || !instance.renderTarget) {
+    return;
+  }
+
+  if (instance.handlers?.handleOnUpdate) {
+    const runtimeDeps = createRuntimeDepsForInstance({ instance });
+    const changes = buildOnPropUpdateChanges({
+      propName,
+      oldValue,
+      newValue,
+      deps: runtimeDeps,
+      propsSchemaKeys: instance._propsSchemaKeys,
+    });
+    instance.handlers.handleOnUpdate(runtimeDeps, changes);
+    return;
+  }
+
+  scheduleFrameFn(() => {
+    instance.render();
+  });
+};
+
 export const runRenderComponentLifecycle = ({
   instance,
   createComponentUpdateHookFn,

package/src/core/runtime/lifecycle.js

@@ -122,3 +122,42 @@ export const buildOnUpdateChanges = ({
     newProps,
   };
 };
+
+export const buildOnPropUpdateChanges = ({
+  propName,
+  oldValue,
+  newValue,
+  deps,
+  propsSchemaKeys,
+}) => {
+  const newProps = {};
+
+  propsSchemaKeys.forEach((propKey) => {
+    const propValue = deps.props[propKey];
+    if (propValue !== undefined) {
+      newProps[propKey] = propValue;
+    }
+  });
+
+  const oldProps = {
+    ...newProps,
+  };
+
+  if (oldValue === undefined) {
+    delete oldProps[propName];
+  } else {
+    oldProps[propName] = oldValue;
+  }
+
+  if (newValue === undefined) {
+    delete newProps[propName];
+  } else {
+    newProps[propName] = newValue;
+  }
+
+  return {
+    changedProp: propName,
+    oldProps,
+    newProps,
+  };
+};

package/src/core/runtime/props.js

@@ -28,6 +28,81 @@ export const readPropFallbackFromAttributes = (source, propName) => {
   return undefined;
 };
 
+const REACTIVE_PROP_VALUES = Symbol("rtglReactivePropValues");
+
+const ensureReactivePropValues = (source) => {
+  if (!Object.prototype.hasOwnProperty.call(source, REACTIVE_PROP_VALUES)) {
+    Object.defineProperty(source, REACTIVE_PROP_VALUES, {
+      value: Object.create(null),
+      enumerable: false,
+      configurable: false,
+      writable: false,
+    });
+  }
+
+  return source[REACTIVE_PROP_VALUES];
+};
+
+export const installReactiveProps = ({
+  source,
+  allowedKeys = [],
+  onPropChange,
+}) => {
+  const reactiveValues = ensureReactivePropValues(source);
+
+  allowedKeys.forEach((propName) => {
+    if (typeof propName !== "string" || propName.length === 0) {
+      return;
+    }
+
+    const presetValue = Object.prototype.hasOwnProperty.call(source, propName)
+      ? source[propName]
+      : undefined;
+    const hadPresetValue = Object.prototype.hasOwnProperty.call(source, propName);
+
+    if (hadPresetValue) {
+      delete source[propName];
+    }
+
+    Object.defineProperty(source, propName, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        if (Object.prototype.hasOwnProperty.call(reactiveValues, propName)) {
+          return reactiveValues[propName];
+        }
+
+        return readPropFallbackFromAttributes(source, propName);
+      },
+      set(value) {
+        const oldValue = Object.prototype.hasOwnProperty.call(reactiveValues, propName)
+          ? reactiveValues[propName]
+          : readPropFallbackFromAttributes(source, propName);
+
+        if (value === undefined) {
+          delete reactiveValues[propName];
+        } else {
+          reactiveValues[propName] = value;
+        }
+
+        if (oldValue === value) {
+          return;
+        }
+
+        onPropChange?.({
+          propName,
+          oldValue,
+          newValue: value,
+        });
+      },
+    });
+
+    if (hadPresetValue) {
+      reactiveValues[propName] = presetValue;
+    }
+  });
+};
+
 export const createPropsProxy = (source, allowedKeys) => {
   const allowed = new Set(allowedKeys);
   return new Proxy(

package/src/web/componentDom.js

@@ -12,13 +12,61 @@ const COMMON_LINK_STYLE_TEXT = `
   }
 `;
 
+const RENDER_TARGET_ATTR = "data-rtgl-render-target";
+const RENDER_TARGET_FLAG = "__rtglRenderTarget";
+
+const hasRenderTargetAttr = (node) => {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+
+  if (typeof node.getAttribute === "function") {
+    return node.getAttribute(RENDER_TARGET_ATTR) !== null;
+  }
+
+  return node[RENDER_TARGET_FLAG] === true;
+};
+
+const markRenderTarget = (node) => {
+  if (!node || typeof node !== "object") {
+    return;
+  }
+
+  if (typeof node.setAttribute === "function") {
+    node.setAttribute(RENDER_TARGET_ATTR, "");
+  } else {
+    node[RENDER_TARGET_FLAG] = true;
+  }
+};
+
+const findExistingRenderTarget = (shadow) => {
+  if (!shadow || typeof shadow !== "object") {
+    return undefined;
+  }
+
+  if (typeof shadow.querySelector === "function") {
+    return shadow.querySelector(`[${RENDER_TARGET_ATTR}]`) ?? shadow.firstElementChild;
+  }
+
+  if (Array.isArray(shadow.childNodes)) {
+    return shadow.childNodes.find(hasRenderTargetAttr) ?? shadow.childNodes[0];
+  }
+
+  if (Array.isArray(shadow.children)) {
+    return shadow.children.find(hasRenderTargetAttr) ?? shadow.children[0];
+  }
+
+  return shadow.firstElementChild;
+};
+
 export const initializeComponentDom = ({
   host,
   cssText,
   createStyleSheet = () => new CSSStyleSheet(),
   createElement = (tagName) => document.createElement(tagName),
 }) => {
-  const shadow = host.attachShadow({ mode: "open" });
+  const existingShadow = host.shadowRoot;
+  const shadow = existingShadow ?? host.attachShadow({ mode: "open" });
 
   const commonStyleSheet = createStyleSheet();
   commonStyleSheet.replaceSync(COMMON_LINK_STYLE_TEXT);
@@ -33,11 +81,22 @@ export const initializeComponentDom = ({
 
   shadow.adoptedStyleSheets = adoptedStyleSheets;
 
-  const renderTarget = createElement("div");
-  renderTarget.style.cssText = "display: contents;";
-  shadow.appendChild(renderTarget);
-  if (!renderTarget.parentNode) {
-    host.appendChild(renderTarget);
+  let renderTarget = findExistingRenderTarget(shadow);
+
+  if (!renderTarget) {
+    renderTarget = createElement("div");
+    renderTarget.style.cssText = "display: contents;";
+    markRenderTarget(renderTarget);
+    shadow.appendChild(renderTarget);
+  } else {
+    renderTarget.style.cssText = "display: contents;";
+    if (!hasRenderTargetAttr(renderTarget)) {
+      markRenderTarget(renderTarget);
+    }
+  }
+
+  if (renderTarget.parentNode !== shadow) {
+    shadow.appendChild(renderTarget);
   }
   host.style.display = "contents";
 

package/src/web/createWebComponentClass.js

@@ -7,9 +7,10 @@ import {
   runAttributeChangedComponentLifecycle,
   runConnectedComponentLifecycle,
   runDisconnectedComponentLifecycle,
+  runPropChangedComponentLifecycle,
   runRenderComponentLifecycle,
 } from "../core/runtime/componentOrchestrator.js";
-import { createPropsProxy, toKebabCase } from "../core/runtime/props.js";
+import { createPropsProxy, installReactiveProps, toKebabCase } from "../core/runtime/props.js";
 import {
   buildObservedAttributes,
 } from "../core/runtime/componentRuntime.js";
@@ -120,6 +121,19 @@ export const createWebComponentClass = ({
         fileConstants: constants,
       });
       this.propsSchema = propsSchema;
+      installReactiveProps({
+        source: this,
+        allowedKeys: propsSchemaKeys,
+        onPropChange: ({ propName, oldValue, newValue }) => {
+          runPropChangedComponentLifecycle({
+            instance: this,
+            propName,
+            oldValue,
+            newValue,
+            scheduleFrameFn: scheduleFrame,
+          });
+        },
+      });
       this.props = propsSchema
         ? createPropsProxy(this, propsSchemaKeys)
         : {};