@hyperframes/studio-server 0.7.27 → 0.7.29

package/dist/index.js

@@ -447,6 +447,58 @@ import { parseHTML } from "linkedom";
 import postcss from "postcss";
 import selectorParser from "postcss-selector-parser";
 import { isAllowedHtmlAttribute, isSafeAttributeValue } from "@hyperframes/core/html-attr-safety";
+
+// src/helpers/sourceStyleMutation.ts
+function parseStyleDecls(style) {
+  const props = /* @__PURE__ */ new Map();
+  const order = [];
+  let i = 0;
+  while (i < style.length) {
+    let depth = 0;
+    let inSingle = false;
+    let inDouble = false;
+    const start = i;
+    while (i < style.length) {
+      const ch = style[i];
+      if (ch === "'" && !inDouble) inSingle = !inSingle;
+      else if (ch === '"' && !inSingle) inDouble = !inDouble;
+      else if (!inSingle && !inDouble) {
+        if (ch === "(") depth++;
+        else if (ch === ")") depth = Math.max(0, depth - 1);
+        else if (ch === ";" && depth === 0) break;
+      }
+      i++;
+    }
+    const decl = style.slice(start, i).trim();
+    i++;
+    if (!decl) continue;
+    const colon = decl.indexOf(":");
+    if (colon < 0) continue;
+    const key = decl.slice(0, colon).trim();
+    const val = decl.slice(colon + 1).trim();
+    if (!key) continue;
+    if (!props.has(key)) order.push(key);
+    props.set(key, val);
+  }
+  return { props, order };
+}
+function serializeStyleDecls(props, order) {
+  return order.map((k) => `${k}: ${props.get(k) ?? ""}`).filter((d) => d.trim()).join("; ");
+}
+function patchStyleAttrString(style, property, value) {
+  const { props, order } = parseStyleDecls(style);
+  if (value === null) {
+    props.delete(property);
+    const idx = order.indexOf(property);
+    if (idx >= 0) order.splice(idx, 1);
+  } else {
+    if (!props.has(property)) order.push(property);
+    props.set(property, value);
+  }
+  return serializeStyleDecls(props, order);
+}
+
+// src/helpers/sourceMutation.ts
 function parseSourceDocument(source) {
   const hasDocumentShell = /<!doctype|<html[\s>]/i.test(source);
   if (hasDocumentShell) {
@@ -540,78 +592,45 @@ function removeElementFromHtml(source, target) {
   return wrappedFragment ? document2.body.innerHTML || "" : document2.toString();
 }
 function isHTMLElement(el) {
-  const HTMLEl = el.ownerDocument.defaultView?.HTMLElement;
-  return HTMLEl ? el instanceof HTMLEl : "style" in el;
+  const HTMLEl = el.ownerDocument?.defaultView?.HTMLElement;
+  return HTMLEl ? el instanceof HTMLEl : el.nodeType === 1 && "style" in el;
 }
-function parseStyleDecls(style) {
-  const props = /* @__PURE__ */ new Map();
-  const order = [];
-  let i = 0;
-  while (i < style.length) {
-    let depth = 0;
-    let inSingle = false;
-    let inDouble = false;
-    const start = i;
-    while (i < style.length) {
-      const ch = style[i];
-      if (ch === "'" && !inDouble) inSingle = !inSingle;
-      else if (ch === '"' && !inSingle) inDouble = !inDouble;
-      else if (!inSingle && !inDouble) {
-        if (ch === "(") depth++;
-        else if (ch === ")") depth = Math.max(0, depth - 1);
-        else if (ch === ";" && depth === 0) break;
-      }
-      i++;
-    }
-    const decl = style.slice(start, i).trim();
-    i++;
-    if (!decl) continue;
-    const colon = decl.indexOf(":");
-    if (colon < 0) continue;
-    const key = decl.slice(0, colon).trim();
-    const val = decl.slice(colon + 1).trim();
-    if (!key) continue;
-    if (!props.has(key)) order.push(key);
-    props.set(key, val);
-  }
-  return { props, order };
-}
-function serializeStyleDecls(props, order) {
-  return order.map((k) => `${k}: ${props.get(k) ?? ""}`).filter((d) => d.trim()).join("; ");
-}
-function patchStyleAttrString(style, property, value) {
-  const { props, order } = parseStyleDecls(style);
-  if (value === null) {
-    props.delete(property);
-    const idx = order.indexOf(property);
-    if (idx >= 0) order.splice(idx, 1);
-  } else {
-    if (!props.has(property)) order.push(property);
-    props.set(property, value);
+function resolveOperationTarget(parent, op) {
+  if (op.childSelector === void 0) return parent;
+  try {
+    const child = parent.querySelectorAll(op.childSelector)[op.childIndex ?? 0] ?? null;
+    return child && isHTMLElement(child) ? child : null;
+  } catch {
+    return null;
   }
-  return serializeStyleDecls(props, order);
 }
 function patchElementInHtml(source, target, operations) {
   const { document: document2, wrappedFragment } = parseSourceDocument(source);
   const el = findTargetElement(document2, target);
   if (!el || !isHTMLElement(el)) return { html: source, matched: false };
   const htmlEl = el;
+  const resolved = [];
   for (const op of operations) {
+    const opTarget = resolveOperationTarget(htmlEl, op);
+    if (!opTarget) return { html: source, matched: false };
+    resolved.push({ op, target: opTarget });
+  }
+  for (const { op, target: opTarget } of resolved) {
     switch (op.type) {
       case "inline-style":
         {
-          const raw = htmlEl.getAttribute("style") ?? "";
+          const raw = opTarget.getAttribute("style") ?? "";
           const patched = patchStyleAttrString(raw, op.property, op.value);
-          htmlEl.setAttribute("style", patched);
+          opTarget.setAttribute("style", patched);
         }
         break;
       case "attribute":
         {
           const fullAttr = op.property.startsWith("data-") ? op.property : `data-${op.property}`;
           if (op.value != null) {
-            htmlEl.setAttribute(fullAttr, op.value);
+            opTarget.setAttribute(fullAttr, op.value);
           } else {
-            htmlEl.removeAttribute(fullAttr);
+            opTarget.removeAttribute(fullAttr);
           }
         }
         break;
@@ -619,15 +638,15 @@ function patchElementInHtml(source, target, operations) {
         if (!isAllowedHtmlAttribute(op.property)) break;
         if (op.value != null) {
           if (!isSafeAttributeValue(op.property, op.value)) break;
-          htmlEl.setAttribute(op.property, op.value);
+          opTarget.setAttribute(op.property, op.value);
         } else {
-          htmlEl.removeAttribute(op.property);
+          opTarget.removeAttribute(op.property);
         }
         break;
       case "text-content":
         if (op.value != null) {
-          const inner = htmlEl.children.length === 1 ? htmlEl.firstElementChild : null;
-          const textTarget = inner && isHTMLElement(inner) ? inner : htmlEl;
+          const inner = opTarget.children.length === 1 ? opTarget.firstElementChild : null;
+          const textTarget = inner && isHTMLElement(inner) ? inner : opTarget;
           textTarget.textContent = op.value;
         }
         break;
@@ -684,6 +703,7 @@ function splitElementInHtml(source, target, splitTime, newId, fallbackTiming) {
   const firstDuration = splitTime - start;
   const secondDuration = duration - firstDuration;
   const clone = el.cloneNode(true);
+  if (!isHTMLElement(clone)) return { html: source, matched: false, newId: null };
   clone.setAttribute("id", newId);
   clone.removeAttribute("data-hf-id");
   for (const node of clone.querySelectorAll("[data-hf-id]")) node.removeAttribute("data-hf-id");