@hypen-space/web 0.4.35 → 0.4.37

package/dist/dom/components/hypenapp.js

@@ -1,306 +1,309 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/dom/components/hypenapp.ts
-var exports_hypenapp = {};
-__export(exports_hypenapp, {
-  hypenAppHandler: () => hypenAppHandler,
-  disconnectHypenApp: () => disconnectHypenApp
-});
+/**
+ * HypenApp Component
+ *
+ * Embeds a remote Hypen app via WebSocket
+ *
+ * Usage in Hypen DSL:
+ * ```hypen
+ * HypenApp("ws://localhost:3000")
+ *
+ * // Or with named prop:
+ * HypenApp(url: "ws://localhost:3000")
+ * ```
+ */
 import { RemoteEngine } from "@hypen-space/core/remote/client";
 import { frameworkLoggers } from "@hypen-space/core/logger";
-function applyPatches(container, nodes, patches, engine, onRoot) {
-  for (const patch of patches) {
-    switch (patch.type) {
-      case "create": {
-        const el = createElement(patch.elementType, patch.props || {});
-        el.dataset.hypenId = patch.id;
-        el.__hypenEngine = engine;
-        nodes.set(patch.id, el);
-        break;
-      }
-      case "setProp": {
-        const el = nodes.get(patch.id);
-        if (el) {
-          applyProp(el, patch.name, patch.value);
+const log = frameworkLoggers.remote;
+// Store active HypenApp instances for cleanup
+const activeInstances = new WeakMap();
+export const hypenAppHandler = {
+    create() {
+        const el = document.createElement("div");
+        el.dataset.hypenType = "hypenapp";
+        el.style.display = "contents"; // Don't affect layout
+        return el;
+    },
+    applyProps(element, props) {
+        // Get URL from props (can be positional "0" or named "url")
+        const url = props["0"] || props.url;
+        if (!url || typeof url !== "string") {
+            log.error("HypenApp: URL is required");
+            element.innerHTML = '<div style="color: red;">HypenApp: URL required</div>';
+            return;
         }
-        break;
-      }
-      case "setText": {
-        const el = nodes.get(patch.id);
-        if (el) {
-          el.textContent = patch.text;
+        // Check if already connected
+        const existing = activeInstances.get(element);
+        if (existing) {
+            // Already connected, don't reconnect
+            return;
         }
-        break;
-      }
-      case "insert": {
-        const parentId = patch.parentId;
-        const parent = parentId === "root" ? container : nodes.get(parentId);
-        const child = nodes.get(patch.id);
-        const beforeId = patch.beforeId;
-        if (parent && child) {
-          if (parentId === "root") {
-            onRoot(patch.id);
-          }
-          if (beforeId) {
-            const before = nodes.get(beforeId);
-            if (before && before.parentNode === parent) {
-              parent.insertBefore(child, before);
-            } else if (!parent.contains(child)) {
-              parent.appendChild(child);
+        // Create the remote engine
+        const engine = new RemoteEngine(url, {
+            autoReconnect: props.autoReconnect ?? true,
+            reconnectInterval: props.reconnectInterval ?? 3000,
+            maxReconnectAttempts: props.maxReconnectAttempts ?? 10,
+        });
+        // Map to track created nodes
+        const nodes = new Map();
+        let rootId = null;
+        // Store instance for cleanup
+        activeInstances.set(element, { engine, nodes });
+        // Set up patch handling
+        engine.onPatches((patches) => {
+            applyPatches(element, nodes, patches, engine, (id) => {
+                if (!rootId)
+                    rootId = id;
+            });
+        });
+        // Show loading state
+        element.innerHTML = '<div class="hypen-app-loading">Connecting...</div>';
+        // Connect
+        engine
+            .connect()
+            .then(() => {
+            // Clear loading state - patches will populate content
+            element.innerHTML = "";
+            log.debug(`HypenApp connected to ${url}`);
+        })
+            .catch((error) => {
+            element.innerHTML = `<div style="color: red;">HypenApp: Connection failed - ${error.message}</div>`;
+            log.error("HypenApp connection failed:", error);
+        });
+        // Handle disconnection
+        engine.onDisconnect(() => {
+            log.debug("HypenApp disconnected");
+        });
+        engine.onError((error) => {
+            log.error("HypenApp error:", error);
+        });
+        // Cleanup on element removal
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                for (const removedNode of mutation.removedNodes) {
+                    if (removedNode === element || removedNode.contains?.(element)) {
+                        engine.disconnect();
+                        activeInstances.delete(element);
+                        observer.disconnect();
+                        log.debug("HypenApp cleaned up");
+                        return;
+                    }
+                }
             }
-          } else if (!parent.contains(child)) {
-            parent.appendChild(child);
-          }
+        });
+        // Observe parent for removal
+        if (element.parentNode) {
+            observer.observe(element.parentNode, { childList: true, subtree: true });
         }
-        break;
-      }
-      case "move": {
-        const parentId = patch.parentId;
-        const parent = parentId === "root" ? container : nodes.get(parentId);
-        const child = nodes.get(patch.id);
-        const beforeId = patch.beforeId;
-        if (parent && child) {
-          if (beforeId) {
-            const before = nodes.get(beforeId);
-            if (before && before.parentNode === parent) {
-              parent.insertBefore(child, before);
+    },
+};
+/**
+ * Minimal patch application for HypenApp container
+ */
+function applyPatches(container, nodes, patches, engine, onRoot) {
+    for (const patch of patches) {
+        switch (patch.type) {
+            case "create": {
+                const el = createElement(patch.elementType, patch.props || {});
+                el.dataset.hypenId = patch.id;
+                el.__hypenEngine = engine;
+                nodes.set(patch.id, el);
+                break;
+            }
+            case "setProp": {
+                const el = nodes.get(patch.id);
+                if (el) {
+                    applyProp(el, patch.name, patch.value);
+                }
+                break;
+            }
+            case "setText": {
+                const el = nodes.get(patch.id);
+                if (el) {
+                    el.textContent = patch.text;
+                }
+                break;
+            }
+            case "insert": {
+                const parentId = patch.parentId;
+                const parent = parentId === "root" ? container : nodes.get(parentId);
+                const child = nodes.get(patch.id);
+                const beforeId = patch.beforeId;
+                if (parent && child) {
+                    if (parentId === "root") {
+                        onRoot(patch.id);
+                    }
+                    if (beforeId) {
+                        const before = nodes.get(beforeId);
+                        if (before && before.parentNode === parent) {
+                            parent.insertBefore(child, before);
+                        }
+                        else if (!parent.contains(child)) {
+                            parent.appendChild(child);
+                        }
+                    }
+                    else if (!parent.contains(child)) {
+                        parent.appendChild(child);
+                    }
+                }
+                break;
+            }
+            case "move": {
+                const parentId = patch.parentId;
+                const parent = parentId === "root" ? container : nodes.get(parentId);
+                const child = nodes.get(patch.id);
+                const beforeId = patch.beforeId;
+                if (parent && child) {
+                    if (beforeId) {
+                        const before = nodes.get(beforeId);
+                        if (before && before.parentNode === parent) {
+                            parent.insertBefore(child, before);
+                        }
+                    }
+                    else {
+                        parent.appendChild(child);
+                    }
+                }
+                break;
+            }
+            case "remove": {
+                const el = nodes.get(patch.id);
+                if (el && el.parentNode) {
+                    el.parentNode.removeChild(el);
+                }
+                nodes.delete(patch.id);
+                break;
             }
-          } else {
-            parent.appendChild(child);
-          }
-        }
-        break;
-      }
-      case "remove": {
-        const el = nodes.get(patch.id);
-        if (el && el.parentNode) {
-          el.parentNode.removeChild(el);
         }
-        nodes.delete(patch.id);
-        break;
-      }
     }
-  }
 }
+/**
+ * Create element by type
+ */
 function createElement(type, props) {
-  const normalizedType = type.toLowerCase();
-  const tagMap = {
-    column: "div",
-    row: "div",
-    text: "span",
-    button: "button",
-    input: "input",
-    image: "img",
-    container: "div",
-    box: "div",
-    center: "div",
-    list: "div",
-    spacer: "div",
-    stack: "div",
-    divider: "hr",
-    grid: "div",
-    card: "div",
-    heading: "h2",
-    link: "a",
-    textarea: "textarea",
-    checkbox: "input",
-    select: "select",
-    slider: "input",
-    switch: "input",
-    spinner: "div",
-    badge: "span",
-    avatar: "img",
-    progressbar: "div",
-    video: "video",
-    audio: "audio"
-  };
-  const tag = tagMap[normalizedType] || "div";
-  const el = document.createElement(tag);
-  el.dataset.hypenType = normalizedType;
-  if (normalizedType === "column") {
-    el.style.display = "flex";
-    el.style.flexDirection = "column";
-  } else if (normalizedType === "row") {
-    el.style.display = "flex";
-    el.style.flexDirection = "row";
-  } else if (normalizedType === "center") {
-    el.style.display = "flex";
-    el.style.alignItems = "center";
-    el.style.justifyContent = "center";
-  } else if (normalizedType === "text") {
-    if (props["0"]) {
-      el.textContent = String(props["0"]);
+    const normalizedType = type.toLowerCase();
+    // Map Hypen types to HTML elements
+    const tagMap = {
+        column: "div",
+        row: "div",
+        text: "span",
+        button: "button",
+        input: "input",
+        image: "img",
+        container: "div",
+        box: "div",
+        center: "div",
+        list: "div",
+        spacer: "div",
+        stack: "div",
+        divider: "hr",
+        grid: "div",
+        card: "div",
+        heading: "h2",
+        link: "a",
+        textarea: "textarea",
+        checkbox: "input",
+        select: "select",
+        slider: "input",
+        switch: "input",
+        spinner: "div",
+        badge: "span",
+        avatar: "img",
+        progressbar: "div",
+        video: "video",
+        audio: "audio",
+    };
+    const tag = tagMap[normalizedType] || "div";
+    const el = document.createElement(tag);
+    el.dataset.hypenType = normalizedType;
+    // Apply basic styles
+    if (normalizedType === "column") {
+        el.style.display = "flex";
+        el.style.flexDirection = "column";
+    }
+    else if (normalizedType === "row") {
+        el.style.display = "flex";
+        el.style.flexDirection = "row";
+    }
+    else if (normalizedType === "center") {
+        el.style.display = "flex";
+        el.style.alignItems = "center";
+        el.style.justifyContent = "center";
+    }
+    else if (normalizedType === "text") {
+        // Text content from props
+        if (props["0"]) {
+            el.textContent = String(props["0"]);
+        }
+    }
+    else if (normalizedType === "button") {
+        el.style.cursor = "pointer";
     }
-  } else if (normalizedType === "button") {
-    el.style.cursor = "pointer";
-  } else if (normalizedType === "checkbox" || normalizedType === "switch") {
-    el.type = "checkbox";
-  } else if (normalizedType === "slider") {
-    el.type = "range";
-  }
-  return el;
+    else if (normalizedType === "checkbox" || normalizedType === "switch") {
+        el.type = "checkbox";
+    }
+    else if (normalizedType === "slider") {
+        el.type = "range";
+    }
+    return el;
 }
+/**
+ * Apply a prop to an element
+ */
 function applyProp(el, name, value) {
-  if (name === "0" || name === "text") {
-    el.textContent = String(value);
-    return;
-  }
-  const styleProps = {
-    padding: "padding",
-    margin: "margin",
-    backgroundColor: "backgroundColor",
-    background: "background",
-    color: "color",
-    fontSize: "fontSize",
-    fontWeight: "fontWeight",
-    width: "width",
-    height: "height",
-    minWidth: "minWidth",
-    minHeight: "minHeight",
-    maxWidth: "maxWidth",
-    maxHeight: "maxHeight",
-    borderRadius: "borderRadius",
-    border: "border",
-    gap: "gap",
-    flex: "flex",
-    opacity: "opacity",
-    overflow: "overflow"
-  };
-  if (styleProps[name]) {
-    const cssValue = typeof value === "number" ? `${value}px` : String(value);
-    el.style[styleProps[name]] = cssValue;
-    return;
-  }
-  if (name === "onClick" || name === "onclick") {
-    el.onclick = () => {
-      const engine = el.__hypenEngine;
-      if (engine && typeof value === "string" && value.startsWith("@actions.")) {
-        const action = value.replace("@actions.", "");
-        engine.dispatchAction(action);
-      }
-    };
-    return;
-  }
-  el.setAttribute(name, String(value));
-}
-function disconnectHypenApp(element) {
-  const instance = activeInstances.get(element);
-  if (instance) {
-    instance.engine.disconnect();
-    activeInstances.delete(element);
-  }
-}
-var log, activeInstances, hypenAppHandler;
-var init_hypenapp = __esm(() => {
-  log = frameworkLoggers.remote;
-  activeInstances = new WeakMap;
-  hypenAppHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.dataset.hypenType = "hypenapp";
-      el.style.display = "contents";
-      return el;
-    },
-    applyProps(element, props) {
-      const url = props["0"] || props.url;
-      if (!url || typeof url !== "string") {
-        log.error("HypenApp: URL is required");
-        element.innerHTML = '<div style="color: red;">HypenApp: URL required</div>';
+    // Text content
+    if (name === "0" || name === "text") {
+        el.textContent = String(value);
         return;
-      }
-      const existing = activeInstances.get(element);
-      if (existing) {
+    }
+    // Style props
+    const styleProps = {
+        padding: "padding",
+        margin: "margin",
+        backgroundColor: "backgroundColor",
+        background: "background",
+        color: "color",
+        fontSize: "fontSize",
+        fontWeight: "fontWeight",
+        width: "width",
+        height: "height",
+        minWidth: "minWidth",
+        minHeight: "minHeight",
+        maxWidth: "maxWidth",
+        maxHeight: "maxHeight",
+        borderRadius: "borderRadius",
+        border: "border",
+        gap: "gap",
+        flex: "flex",
+        opacity: "opacity",
+        overflow: "overflow",
+    };
+    if (styleProps[name]) {
+        const cssValue = typeof value === "number" ? `${value}px` : String(value);
+        el.style[styleProps[name]] = cssValue;
         return;
-      }
-      const engine = new RemoteEngine(url, {
-        autoReconnect: props.autoReconnect ?? true,
-        reconnectInterval: props.reconnectInterval ?? 3000,
-        maxReconnectAttempts: props.maxReconnectAttempts ?? 10
-      });
-      const nodes = new Map;
-      let rootId = null;
-      activeInstances.set(element, { engine, nodes });
-      engine.onPatches((patches) => {
-        applyPatches(element, nodes, patches, engine, (id) => {
-          if (!rootId)
-            rootId = id;
-        });
-      });
-      element.innerHTML = '<div class="hypen-app-loading">Connecting...</div>';
-      engine.connect().then(() => {
-        element.innerHTML = "";
-        log.debug(`HypenApp connected to ${url}`);
-      }).catch((error) => {
-        element.innerHTML = `<div style="color: red;">HypenApp: Connection failed - ${error.message}</div>`;
-        log.error("HypenApp connection failed:", error);
-      });
-      engine.onDisconnect(() => {
-        log.debug("HypenApp disconnected");
-      });
-      engine.onError((error) => {
-        log.error("HypenApp error:", error);
-      });
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          for (const removedNode of mutation.removedNodes) {
-            if (removedNode === element || removedNode.contains?.(element)) {
-              engine.disconnect();
-              activeInstances.delete(element);
-              observer.disconnect();
-              log.debug("HypenApp cleaned up");
-              return;
+    }
+    // Event handlers
+    if (name === "onClick" || name === "onclick") {
+        el.onclick = () => {
+            const engine = el.__hypenEngine;
+            if (engine && typeof value === "string" && value.startsWith("@actions.")) {
+                const action = value.replace("@actions.", "");
+                engine.dispatchAction(action);
             }
-          }
-        }
-      });
-      if (element.parentNode) {
-        observer.observe(element.parentNode, { childList: true, subtree: true });
-      }
+        };
+        return;
     }
-  };
-});
-init_hypenapp();
-
-export {
-  hypenAppHandler,
-  disconnectHypenApp
-};
-
-//# debugId=BE61E9DA4D780C4864756E2164756E21
+    // Other attributes
+    el.setAttribute(name, String(value));
+}
+/**
+ * Disconnect a HypenApp instance
+ */
+export function disconnectHypenApp(element) {
+    const instance = activeInstances.get(element);
+    if (instance) {
+        instance.engine.disconnect();
+        activeInstances.delete(element);
+    }
+}
+//# sourceMappingURL=hypenapp.js.map