@servlyadmin/runtime-core 0.1.26 → 0.1.28

package/dist/index.cjs

@@ -19524,14 +19524,8 @@ function resolveFunctionBinding(binding, context) {
 }
 function attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement = false, state) {
   const elementId = element.i;
-  const isDebug = true;
-  if (isDebug) {
-    console.log(`[Servly:attachEventHandlers] Element: ${elementId}, isRoot: ${isRootElement}, renderStackSize: ${state?.renderingStack?.size}`);
-  }
-  if (eventHandlers && eventHandlers[elementId]) {
-    const handlers = eventHandlers[elementId];
-    if (isDebug) console.log(`[Servly:attachEventHandlers] Explicit handlers for ${elementId}:`, Object.keys(handlers));
-    for (const [eventName, handler] of Object.entries(handlers)) {
+  if (eventHandlers?.[elementId]) {
+    for (const [eventName, handler] of Object.entries(eventHandlers[elementId])) {
       const domEventName = eventName.replace(/^on/, "").toLowerCase();
       elementState.eventListeners.set(domEventName, handler);
       domElement.addEventListener(domEventName, handler);
@@ -19540,9 +19534,8 @@ function attachEventHandlers(domElement, element, eventHandlers, context, elemen
   const config = element.configuration || {};
   for (const eventPropName of Object.keys(EVENT_HANDLERS)) {
     const handlerConfig = config[eventPropName];
-    if (handlerConfig && handlerConfig.plugins && handlerConfig.plugins.length > 0) {
+    if (handlerConfig?.plugins?.length) {
       const domEventName = toDomEventName(eventPropName);
-      if (isDebug) console.log(`[Servly:attachEventHandlers] Servly plugin handler ${eventPropName} on ${elementId}`);
       if (!elementState.eventListeners.has(domEventName)) {
         if (state?.eventSystem) {
           const handler = state.eventSystem.createHandler(elementId, handlerConfig, context);
@@ -19552,7 +19545,6 @@ function attachEventHandlers(domElement, element, eventHandlers, context, elemen
           const handler = (e) => {
             if (handlerConfig.preventDefault) e.preventDefault();
             if (handlerConfig.stopPropagation) e.stopPropagation();
-            console.log(`[Servly] Event ${eventPropName} triggered on ${elementId}`, handlerConfig.plugins);
           };
           elementState.eventListeners.set(domEventName, handler);
           domElement.addEventListener(domEventName, handler);
@@ -19565,33 +19557,35 @@ function attachEventHandlers(domElement, element, eventHandlers, context, elemen
     for (const [propName, binding] of Object.entries(bindings)) {
       if (propName.startsWith("on") && propName.length > 2) {
         const handler = resolveFunctionBinding(binding, context);
-        if (handler) {
+        if (handler && !elementState.eventListeners.has(propName.slice(2).toLowerCase())) {
           const domEventName = propName.slice(2).toLowerCase();
-          if (isDebug) console.log(`[Servly:attachEventHandlers] Binding handler ${propName} on ${elementId}`);
-          if (!elementState.eventListeners.has(domEventName)) {
-            elementState.eventListeners.set(domEventName, handler);
-            domElement.addEventListener(domEventName, handler);
-          }
+          elementState.eventListeners.set(domEventName, handler);
+          domElement.addEventListener(domEventName, handler);
         }
       }
     }
   }
   if (isRootElement && context.props && state?.renderingStack?.size === 0) {
-    const contextFunctionProps = Object.entries(context.props).filter(([k, v]) => k.startsWith("on") && typeof v === "function");
-    if (isDebug && contextFunctionProps.length > 0) {
-      console.log(`[Servly:attachEventHandlers] ROOT element ${elementId} attaching context props:`, contextFunctionProps.map(([k]) => k));
-    }
-    for (const [propName, value] of contextFunctionProps) {
-      const domEventName = propName.slice(2).toLowerCase();
-      if (!elementState.eventListeners.has(domEventName)) {
-        const handler = value;
-        elementState.eventListeners.set(domEventName, handler);
-        domElement.addEventListener(domEventName, handler);
-        if (isDebug) console.log(`[Servly:attachEventHandlers] Attached ${propName} to root element ${elementId}`);
+    for (const [propName, value] of Object.entries(context.props)) {
+      if (propName.startsWith("on") && typeof value === "function") {
+        const domEventName = propName.slice(2).toLowerCase();
+        if (!elementState.eventListeners.has(domEventName)) {
+          elementState.eventListeners.set(domEventName, value);
+          domElement.addEventListener(domEventName, value);
+        }
       }
     }
-  } else if (isDebug && isRootElement) {
-    console.log(`[Servly:attachEventHandlers] ROOT element ${elementId} NOT attaching context props (renderStackSize=${state?.renderingStack?.size})`);
+  }
+  if (!isRootElement && elementState.eventListeners.size > 0) {
+    for (const [eventName, originalHandler] of elementState.eventListeners) {
+      const wrappedHandler = (e) => {
+        e.stopPropagation();
+        return originalHandler(e);
+      };
+      domElement.removeEventListener(eventName, originalHandler);
+      domElement.addEventListener(eventName, wrappedHandler);
+      elementState.eventListeners.set(eventName, wrappedHandler);
+    }
   }
 }
 function detachEventHandlers(elementState) {
@@ -19770,9 +19764,6 @@ function getValueByPath2(obj, path) {
   return current;
 }
 function renderElement(element, tree, context, eventHandlers, elementStates, state, isRootElement = false) {
-  if (element.isComponentView) {
-    console.log("[Servly] Element has isComponentView=true:", element.i, "componentId:", element.componentId);
-  }
   if (element.isComponentView) {
     return renderComponentViewElement(element, tree, context, eventHandlers, elementStates, state, isRootElement);
   }
@@ -19784,8 +19775,11 @@ function renderElement(element, tree, context, eventHandlers, elementStates, sta
   }
   const elementBindings = element.configuration?.bindings?.inputs;
   const resolvedInputs = elementBindings ? resolveComponentViewInputs(elementBindings, context, context.props) : {};
+  const nonFunctionInputs = Object.fromEntries(
+    Object.entries(resolvedInputs).filter(([, v]) => typeof v !== "function")
+  );
   const elementContext = {
-    props: { ...context.props, ...resolvedInputs },
+    props: { ...context.props, ...nonFunctionInputs },
     state: context.state,
     context: context.context
   };
@@ -19841,45 +19835,24 @@ function renderIconElement(element, context, eventHandlers, elementStates, state
   return wrapper;
 }
 function renderComponentViewElement(element, tree, context, eventHandlers, elementStates, state, isRootElement) {
-  console.log("[Servly] renderComponentViewElement called:", {
-    elementId: element.i,
-    componentId: element.componentId,
-    isComponentView: element.isComponentView,
-    hasViews: !!state.views,
-    viewsKeys: state.views ? Array.from(state.views.keys()).slice(0, 5) : []
-  });
   const componentViewId = `${element.componentId}-${element.i}`;
   if (globalRenderingStack.has(componentViewId)) {
     const placeholder = document.createElement("div");
     placeholder.className = "border-2 border-red-500 border-dashed p-4 bg-red-50";
-    placeholder.innerHTML = `<p class="text-red-600 text-sm">Recursive component: ${element.componentId}</p>`;
+    placeholder.innerHTML = `<p class="text-red-600 text-sm">\u{1F504} Recursive: ${element.componentId}</p>`;
     return placeholder;
   }
   let viewLayout;
   if (state.views?.has(element.componentId)) {
-    const view = state.views.get(element.componentId);
-    viewLayout = view?.layout;
-    console.log("[Servly] Found view in views map:", element.componentId, "layout length:", viewLayout?.length);
-  }
-  if (!viewLayout && state.componentRegistry) {
+    viewLayout = state.views.get(element.componentId)?.layout;
+  } else if (state.componentRegistry) {
     const component = state.componentRegistry.get(element.componentId);
-    if (component) {
-      viewLayout = component.layout;
-      console.log("[Servly] Found view in registry:", element.componentId);
-    }
-  }
-  if (!viewLayout && state.views === void 0 && state.viewsArray) {
-    const viewsArray = state.viewsArray;
-    const found = viewsArray.find((v) => v.id === element.componentId);
-    if (found) {
-      viewLayout = found.layout;
-    }
+    if (component) viewLayout = component.layout;
   }
   if (!viewLayout) {
-    console.warn(`[Servly] Component not found: ${element.componentId}. Element ID: ${element.i}. Available in views: ${state.views ? Array.from(state.views.keys()).join(", ") : "none"}. Registry has: ${state.componentRegistry?.has(element.componentId) ? "yes" : "no"}`);
     const placeholder = document.createElement("div");
     placeholder.className = "border-2 border-yellow-500 border-dashed p-4 bg-yellow-50";
-    placeholder.innerHTML = `<p class="text-yellow-600 text-sm">Component not found: ${element.componentId}</p>`;
+    placeholder.innerHTML = `<p class="text-yellow-600 text-sm">\u26A0\uFE0F Not found: ${element.componentId}</p>`;
     return placeholder;
   }
   const bindings = element.configuration?.bindings?.inputs || {};
@@ -19896,11 +19869,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
     wrapper.className = "contents";
     const viewTree = buildTree(viewLayout);
     const viewRoots = viewLayout.filter((el) => !el.parent || el.parent === null);
-    console.log("[Servly] viewRoots found:", {
-      count: viewRoots.length,
-      rootIds: viewRoots.map((r) => r.i),
-      allElementIds: viewLayout.map((el) => ({ id: el.i, parent: el.parent }))
-    });
     const nestedState = {
       ...state,
       elements: viewLayout,
@@ -19911,7 +19879,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
     };
     nestedState.renderingStack.add(componentViewId);
     for (const root of viewRoots) {
-      console.log("[Servly] Rendering root element:", root.i, "componentId:", root.componentId, "type:", root.type);
       const rootElement = renderElement(
         root,
         viewTree,
@@ -19921,7 +19888,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
         nestedState,
         true
       );
-      console.log("[Servly] Root element rendered:", rootElement?.tagName, "innerHTML length:", rootElement?.innerHTML?.length);
       wrapper.appendChild(rootElement);
     }
     const elementState = {
@@ -19933,12 +19899,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
       eventListeners: /* @__PURE__ */ new Map()
     };
     elementStates.set(element.i, elementState);
-    console.log("[Servly] Returning wrapper:", {
-      id: wrapper.id,
-      className: wrapper.className,
-      childCount: wrapper.children.length,
-      innerHTML: wrapper.innerHTML.substring(0, 200)
-    });
     return wrapper;
   } finally {
     globalRenderingStack.delete(componentViewId);

package/dist/index.js

@@ -2728,14 +2728,8 @@ function resolveFunctionBinding(binding, context) {
 }
 function attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement = false, state) {
   const elementId = element.i;
-  const isDebug = true;
-  if (isDebug) {
-    console.log(`[Servly:attachEventHandlers] Element: ${elementId}, isRoot: ${isRootElement}, renderStackSize: ${state?.renderingStack?.size}`);
-  }
-  if (eventHandlers && eventHandlers[elementId]) {
-    const handlers = eventHandlers[elementId];
-    if (isDebug) console.log(`[Servly:attachEventHandlers] Explicit handlers for ${elementId}:`, Object.keys(handlers));
-    for (const [eventName, handler] of Object.entries(handlers)) {
+  if (eventHandlers?.[elementId]) {
+    for (const [eventName, handler] of Object.entries(eventHandlers[elementId])) {
       const domEventName = eventName.replace(/^on/, "").toLowerCase();
       elementState.eventListeners.set(domEventName, handler);
       domElement.addEventListener(domEventName, handler);
@@ -2744,9 +2738,8 @@ function attachEventHandlers(domElement, element, eventHandlers, context, elemen
   const config = element.configuration || {};
   for (const eventPropName of Object.keys(EVENT_HANDLERS)) {
     const handlerConfig = config[eventPropName];
-    if (handlerConfig && handlerConfig.plugins && handlerConfig.plugins.length > 0) {
+    if (handlerConfig?.plugins?.length) {
       const domEventName = toDomEventName(eventPropName);
-      if (isDebug) console.log(`[Servly:attachEventHandlers] Servly plugin handler ${eventPropName} on ${elementId}`);
       if (!elementState.eventListeners.has(domEventName)) {
         if (state?.eventSystem) {
           const handler = state.eventSystem.createHandler(elementId, handlerConfig, context);
@@ -2756,7 +2749,6 @@ function attachEventHandlers(domElement, element, eventHandlers, context, elemen
           const handler = (e) => {
             if (handlerConfig.preventDefault) e.preventDefault();
             if (handlerConfig.stopPropagation) e.stopPropagation();
-            console.log(`[Servly] Event ${eventPropName} triggered on ${elementId}`, handlerConfig.plugins);
           };
           elementState.eventListeners.set(domEventName, handler);
           domElement.addEventListener(domEventName, handler);
@@ -2769,33 +2761,35 @@ function attachEventHandlers(domElement, element, eventHandlers, context, elemen
     for (const [propName, binding] of Object.entries(bindings)) {
       if (propName.startsWith("on") && propName.length > 2) {
         const handler = resolveFunctionBinding(binding, context);
-        if (handler) {
+        if (handler && !elementState.eventListeners.has(propName.slice(2).toLowerCase())) {
           const domEventName = propName.slice(2).toLowerCase();
-          if (isDebug) console.log(`[Servly:attachEventHandlers] Binding handler ${propName} on ${elementId}`);
-          if (!elementState.eventListeners.has(domEventName)) {
-            elementState.eventListeners.set(domEventName, handler);
-            domElement.addEventListener(domEventName, handler);
-          }
+          elementState.eventListeners.set(domEventName, handler);
+          domElement.addEventListener(domEventName, handler);
         }
       }
     }
   }
   if (isRootElement && context.props && state?.renderingStack?.size === 0) {
-    const contextFunctionProps = Object.entries(context.props).filter(([k, v]) => k.startsWith("on") && typeof v === "function");
-    if (isDebug && contextFunctionProps.length > 0) {
-      console.log(`[Servly:attachEventHandlers] ROOT element ${elementId} attaching context props:`, contextFunctionProps.map(([k]) => k));
-    }
-    for (const [propName, value] of contextFunctionProps) {
-      const domEventName = propName.slice(2).toLowerCase();
-      if (!elementState.eventListeners.has(domEventName)) {
-        const handler = value;
-        elementState.eventListeners.set(domEventName, handler);
-        domElement.addEventListener(domEventName, handler);
-        if (isDebug) console.log(`[Servly:attachEventHandlers] Attached ${propName} to root element ${elementId}`);
+    for (const [propName, value] of Object.entries(context.props)) {
+      if (propName.startsWith("on") && typeof value === "function") {
+        const domEventName = propName.slice(2).toLowerCase();
+        if (!elementState.eventListeners.has(domEventName)) {
+          elementState.eventListeners.set(domEventName, value);
+          domElement.addEventListener(domEventName, value);
+        }
       }
     }
-  } else if (isDebug && isRootElement) {
-    console.log(`[Servly:attachEventHandlers] ROOT element ${elementId} NOT attaching context props (renderStackSize=${state?.renderingStack?.size})`);
+  }
+  if (!isRootElement && elementState.eventListeners.size > 0) {
+    for (const [eventName, originalHandler] of elementState.eventListeners) {
+      const wrappedHandler = (e) => {
+        e.stopPropagation();
+        return originalHandler(e);
+      };
+      domElement.removeEventListener(eventName, originalHandler);
+      domElement.addEventListener(eventName, wrappedHandler);
+      elementState.eventListeners.set(eventName, wrappedHandler);
+    }
   }
 }
 function detachEventHandlers(elementState) {
@@ -2974,9 +2968,6 @@ function getValueByPath2(obj, path) {
   return current;
 }
 function renderElement(element, tree, context, eventHandlers, elementStates, state, isRootElement = false) {
-  if (element.isComponentView) {
-    console.log("[Servly] Element has isComponentView=true:", element.i, "componentId:", element.componentId);
-  }
   if (element.isComponentView) {
     return renderComponentViewElement(element, tree, context, eventHandlers, elementStates, state, isRootElement);
   }
@@ -2988,8 +2979,11 @@ function renderElement(element, tree, context, eventHandlers, elementStates, sta
   }
   const elementBindings = element.configuration?.bindings?.inputs;
   const resolvedInputs = elementBindings ? resolveComponentViewInputs(elementBindings, context, context.props) : {};
+  const nonFunctionInputs = Object.fromEntries(
+    Object.entries(resolvedInputs).filter(([, v]) => typeof v !== "function")
+  );
   const elementContext = {
-    props: { ...context.props, ...resolvedInputs },
+    props: { ...context.props, ...nonFunctionInputs },
     state: context.state,
     context: context.context
   };
@@ -3045,45 +3039,24 @@ function renderIconElement(element, context, eventHandlers, elementStates, state
   return wrapper;
 }
 function renderComponentViewElement(element, tree, context, eventHandlers, elementStates, state, isRootElement) {
-  console.log("[Servly] renderComponentViewElement called:", {
-    elementId: element.i,
-    componentId: element.componentId,
-    isComponentView: element.isComponentView,
-    hasViews: !!state.views,
-    viewsKeys: state.views ? Array.from(state.views.keys()).slice(0, 5) : []
-  });
   const componentViewId = `${element.componentId}-${element.i}`;
   if (globalRenderingStack.has(componentViewId)) {
     const placeholder = document.createElement("div");
     placeholder.className = "border-2 border-red-500 border-dashed p-4 bg-red-50";
-    placeholder.innerHTML = `<p class="text-red-600 text-sm">Recursive component: ${element.componentId}</p>`;
+    placeholder.innerHTML = `<p class="text-red-600 text-sm">\u{1F504} Recursive: ${element.componentId}</p>`;
     return placeholder;
   }
   let viewLayout;
   if (state.views?.has(element.componentId)) {
-    const view = state.views.get(element.componentId);
-    viewLayout = view?.layout;
-    console.log("[Servly] Found view in views map:", element.componentId, "layout length:", viewLayout?.length);
-  }
-  if (!viewLayout && state.componentRegistry) {
+    viewLayout = state.views.get(element.componentId)?.layout;
+  } else if (state.componentRegistry) {
     const component = state.componentRegistry.get(element.componentId);
-    if (component) {
-      viewLayout = component.layout;
-      console.log("[Servly] Found view in registry:", element.componentId);
-    }
-  }
-  if (!viewLayout && state.views === void 0 && state.viewsArray) {
-    const viewsArray = state.viewsArray;
-    const found = viewsArray.find((v) => v.id === element.componentId);
-    if (found) {
-      viewLayout = found.layout;
-    }
+    if (component) viewLayout = component.layout;
   }
   if (!viewLayout) {
-    console.warn(`[Servly] Component not found: ${element.componentId}. Element ID: ${element.i}. Available in views: ${state.views ? Array.from(state.views.keys()).join(", ") : "none"}. Registry has: ${state.componentRegistry?.has(element.componentId) ? "yes" : "no"}`);
     const placeholder = document.createElement("div");
     placeholder.className = "border-2 border-yellow-500 border-dashed p-4 bg-yellow-50";
-    placeholder.innerHTML = `<p class="text-yellow-600 text-sm">Component not found: ${element.componentId}</p>`;
+    placeholder.innerHTML = `<p class="text-yellow-600 text-sm">\u26A0\uFE0F Not found: ${element.componentId}</p>`;
     return placeholder;
   }
   const bindings = element.configuration?.bindings?.inputs || {};
@@ -3100,11 +3073,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
     wrapper.className = "contents";
     const viewTree = buildTree(viewLayout);
     const viewRoots = viewLayout.filter((el) => !el.parent || el.parent === null);
-    console.log("[Servly] viewRoots found:", {
-      count: viewRoots.length,
-      rootIds: viewRoots.map((r) => r.i),
-      allElementIds: viewLayout.map((el) => ({ id: el.i, parent: el.parent }))
-    });
     const nestedState = {
       ...state,
       elements: viewLayout,
@@ -3115,7 +3083,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
     };
     nestedState.renderingStack.add(componentViewId);
     for (const root of viewRoots) {
-      console.log("[Servly] Rendering root element:", root.i, "componentId:", root.componentId, "type:", root.type);
       const rootElement = renderElement(
         root,
         viewTree,
@@ -3125,7 +3092,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
         nestedState,
         true
       );
-      console.log("[Servly] Root element rendered:", rootElement?.tagName, "innerHTML length:", rootElement?.innerHTML?.length);
       wrapper.appendChild(rootElement);
     }
     const elementState = {
@@ -3137,12 +3103,6 @@ function renderComponentViewElement(element, tree, context, eventHandlers, eleme
       eventListeners: /* @__PURE__ */ new Map()
     };
     elementStates.set(element.i, elementState);
-    console.log("[Servly] Returning wrapper:", {
-      id: wrapper.id,
-      className: wrapper.className,
-      childCount: wrapper.children.length,
-      innerHTML: wrapper.innerHTML.substring(0, 200)
-    });
     return wrapper;
   } finally {
     globalRenderingStack.delete(componentViewId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servlyadmin/runtime-core",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Framework-agnostic core renderer for Servly components",
   "type": "module",
   "main": "./dist/index.cjs",