@rettangoli/fe 1.1.1 → 1.1.3

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.1",
+  "version": "1.1.3",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",

package/src/core/runtime/props.js

@@ -29,6 +29,51 @@ export const readPropFallbackFromAttributes = (source, propName) => {
 };
 
 const REACTIVE_PROP_VALUES = Symbol("rtglReactivePropValues");
+const NATIVE_HOST_STYLE = Symbol("rtglNativeHostStyle");
+
+const findPrototypePropertyDescriptor = (source, propName) => {
+  let current = Object.getPrototypeOf(source);
+
+  while (current) {
+    const descriptor = Object.getOwnPropertyDescriptor(current, propName);
+    if (descriptor) {
+      return descriptor;
+    }
+    current = Object.getPrototypeOf(current);
+  }
+
+  return undefined;
+};
+
+export const getNativeHostStyle = (source) => {
+  if (!source || typeof source !== "object") {
+    return undefined;
+  }
+
+  if (Object.prototype.hasOwnProperty.call(source, NATIVE_HOST_STYLE)) {
+    return source[NATIVE_HOST_STYLE];
+  }
+
+  const styleDescriptor = findPrototypePropertyDescriptor(source, "style");
+  let nativeStyle;
+
+  if (typeof styleDescriptor?.get === "function") {
+    nativeStyle = styleDescriptor.get.call(source);
+  } else if (source.style && typeof source.style === "object") {
+    nativeStyle = source.style;
+  }
+
+  if (nativeStyle && typeof nativeStyle === "object") {
+    Object.defineProperty(source, NATIVE_HOST_STYLE, {
+      value: nativeStyle,
+      enumerable: false,
+      configurable: false,
+      writable: false,
+    });
+  }
+
+  return nativeStyle;
+};
 
 const ensureReactivePropValues = (source) => {
   if (!Object.prototype.hasOwnProperty.call(source, REACTIVE_PROP_VALUES)) {
@@ -50,6 +95,10 @@ export const installReactiveProps = ({
 }) => {
   const reactiveValues = ensureReactivePropValues(source);
 
+  if (allowedKeys.includes("style")) {
+    getNativeHostStyle(source);
+  }
+
   allowedKeys.forEach((propName) => {
     if (typeof propName !== "string" || propName.length === 0) {
       return;

package/src/web/componentDom.js

@@ -1,3 +1,5 @@
+import { getNativeHostStyle } from "../core/runtime/props.js";
+
 const COMMON_LINK_STYLE_TEXT = `
   a, a:link, a:visited, a:hover, a:active {
     display: contents;
@@ -12,13 +14,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,13 +83,27 @@ 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);
+  }
+  const hostStyle = getNativeHostStyle(host);
+  if (hostStyle && typeof hostStyle === "object") {
+    hostStyle.display = "contents";
   }
-  host.style.display = "contents";
 
   return {
     shadow,