@servlyadmin/runtime-core 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -1471,15 +1471,62 @@ function applyAttributes(domElement, element, context) {
     }
   }
 }
-function attachEventHandlers(domElement, elementId, eventHandlers, elementState) {
-  if (!eventHandlers || !eventHandlers[elementId]) {
-    return;
+function resolveFunctionBinding(binding, context) {
+  if (binding.source === "props" || binding.source === "parent") {
+    const path = binding.path;
+    if (!path) return void 0;
+    const parts = path.split(".");
+    let value = context.props;
+    for (const part of parts) {
+      if (value === null || value === void 0) return void 0;
+      value = value[part];
+    }
+    if (typeof value === "function") {
+      return value;
+    }
+    return void 0;
+  }
+  if (binding.source === "static" && typeof binding.value === "function") {
+    return binding.value;
+  }
+  return void 0;
+}
+function attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement = false) {
+  const elementId = element.i;
+  if (eventHandlers && eventHandlers[elementId]) {
+    const handlers = eventHandlers[elementId];
+    for (const [eventName, handler] of Object.entries(handlers)) {
+      const domEventName = eventName.replace(/^on/, "").toLowerCase();
+      elementState.eventListeners.set(domEventName, handler);
+      domElement.addEventListener(domEventName, handler);
+    }
+  }
+  const bindings = element.configuration?.bindings?.inputs;
+  if (bindings) {
+    for (const [propName, binding] of Object.entries(bindings)) {
+      if (propName.startsWith("on") && propName.length > 2) {
+        const handler = resolveFunctionBinding(binding, context);
+        if (handler) {
+          const domEventName = propName.slice(2).toLowerCase();
+          if (!elementState.eventListeners.has(domEventName)) {
+            elementState.eventListeners.set(domEventName, handler);
+            domElement.addEventListener(domEventName, handler);
+          }
+        }
+      }
+    }
   }
-  const handlers = eventHandlers[elementId];
-  for (const [eventName, handler] of Object.entries(handlers)) {
-    const domEventName = eventName.replace(/^on/, "").toLowerCase();
-    elementState.eventListeners.set(domEventName, handler);
-    domElement.addEventListener(domEventName, handler);
+  if (isRootElement && context.props) {
+    for (const [propName, value] of Object.entries(context.props)) {
+      if (propName.startsWith("on") && propName.length > 2 && typeof value === "function") {
+        const domEventName = propName.slice(2).toLowerCase();
+        if (!elementState.eventListeners.has(domEventName)) {
+          const handler = value;
+          elementState.eventListeners.set(domEventName, handler);
+          domElement.addEventListener(domEventName, handler);
+        }
+      }
+    }
   }
 }
 function detachEventHandlers(elementState) {
@@ -1488,7 +1535,7 @@ function detachEventHandlers(elementState) {
   }
   elementState.eventListeners.clear();
 }
-function createElement(element, context, eventHandlers) {
+function createElement(element, context, eventHandlers, isRootElement = false) {
   const tag = getElementTag(element);
   const domElement = document.createElement(tag);
   domElement.setAttribute("data-servly-id", element.i);
@@ -1514,7 +1561,7 @@ function createElement(element, context, eventHandlers) {
     textContent,
     eventListeners: /* @__PURE__ */ new Map()
   };
-  attachEventHandlers(domElement, element.i, eventHandlers, elementState);
+  attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement);
   return elementState;
 }
 var globalRenderingStack = /* @__PURE__ */ new Set();
@@ -1575,8 +1622,8 @@ function renderComponentRef(element, container, context, state) {
     globalRenderingStack.delete(refId);
   }
 }
-function renderElement(element, tree, context, eventHandlers, elementStates, state) {
-  const elementState = createElement(element, context, eventHandlers);
+function renderElement(element, tree, context, eventHandlers, elementStates, state, isRootElement = false) {
+  const elementState = createElement(element, context, eventHandlers, isRootElement);
   elementStates.set(element.i, elementState);
   const config = element.configuration;
   if (config?.componentViewRef) {
@@ -1588,7 +1635,7 @@ function renderElement(element, tree, context, eventHandlers, elementStates, sta
   }
   const children = tree.get(element.i) || [];
   for (const child of children) {
-    const childElement = renderElement(child, tree, context, eventHandlers, elementStates, state);
+    const childElement = renderElement(child, tree, context, eventHandlers, elementStates, state, false);
     elementState.domElement.appendChild(childElement);
   }
   return elementState.domElement;
@@ -1637,14 +1684,16 @@ function render(options) {
         context,
         eventHandlers,
         state.elementStates,
-        state
+        state,
+        true
+        // isRootElement
       );
       container.appendChild(state.rootElement);
     } else {
       const wrapper = document.createElement("div");
       wrapper.setAttribute("data-servly-wrapper", "true");
       for (const root of rootElements) {
-        const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state);
+        const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state, true);
         wrapper.appendChild(rootElement);
       }
       state.rootElement = wrapper;

package/dist/index.d.cts

@@ -52,6 +52,15 @@ interface ElementConfig {
     readOnly?: boolean;
     /** Inline styles */
     style?: Record<string, any>;
+    /** Input bindings for props */
+    bindings?: {
+        inputs?: Record<string, {
+            source: 'static' | 'props' | 'state' | 'parent' | 'function';
+            value?: any;
+            path?: string;
+            binding?: any;
+        }>;
+    };
     /** Reference to another component (for componentView elements) */
     componentViewRef?: string;
     /** Version specifier for the referenced component */

package/dist/index.d.ts

@@ -52,6 +52,15 @@ interface ElementConfig {
     readOnly?: boolean;
     /** Inline styles */
     style?: Record<string, any>;
+    /** Input bindings for props */
+    bindings?: {
+        inputs?: Record<string, {
+            source: 'static' | 'props' | 'state' | 'parent' | 'function';
+            value?: any;
+            path?: string;
+            binding?: any;
+        }>;
+    };
     /** Reference to another component (for componentView elements) */
     componentViewRef?: string;
     /** Version specifier for the referenced component */

package/dist/index.js

@@ -1198,15 +1198,62 @@ function applyAttributes(domElement, element, context) {
     }
   }
 }
-function attachEventHandlers(domElement, elementId, eventHandlers, elementState) {
-  if (!eventHandlers || !eventHandlers[elementId]) {
-    return;
+function resolveFunctionBinding(binding, context) {
+  if (binding.source === "props" || binding.source === "parent") {
+    const path = binding.path;
+    if (!path) return void 0;
+    const parts = path.split(".");
+    let value = context.props;
+    for (const part of parts) {
+      if (value === null || value === void 0) return void 0;
+      value = value[part];
+    }
+    if (typeof value === "function") {
+      return value;
+    }
+    return void 0;
+  }
+  if (binding.source === "static" && typeof binding.value === "function") {
+    return binding.value;
+  }
+  return void 0;
+}
+function attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement = false) {
+  const elementId = element.i;
+  if (eventHandlers && eventHandlers[elementId]) {
+    const handlers = eventHandlers[elementId];
+    for (const [eventName, handler] of Object.entries(handlers)) {
+      const domEventName = eventName.replace(/^on/, "").toLowerCase();
+      elementState.eventListeners.set(domEventName, handler);
+      domElement.addEventListener(domEventName, handler);
+    }
+  }
+  const bindings = element.configuration?.bindings?.inputs;
+  if (bindings) {
+    for (const [propName, binding] of Object.entries(bindings)) {
+      if (propName.startsWith("on") && propName.length > 2) {
+        const handler = resolveFunctionBinding(binding, context);
+        if (handler) {
+          const domEventName = propName.slice(2).toLowerCase();
+          if (!elementState.eventListeners.has(domEventName)) {
+            elementState.eventListeners.set(domEventName, handler);
+            domElement.addEventListener(domEventName, handler);
+          }
+        }
+      }
+    }
   }
-  const handlers = eventHandlers[elementId];
-  for (const [eventName, handler] of Object.entries(handlers)) {
-    const domEventName = eventName.replace(/^on/, "").toLowerCase();
-    elementState.eventListeners.set(domEventName, handler);
-    domElement.addEventListener(domEventName, handler);
+  if (isRootElement && context.props) {
+    for (const [propName, value] of Object.entries(context.props)) {
+      if (propName.startsWith("on") && propName.length > 2 && typeof value === "function") {
+        const domEventName = propName.slice(2).toLowerCase();
+        if (!elementState.eventListeners.has(domEventName)) {
+          const handler = value;
+          elementState.eventListeners.set(domEventName, handler);
+          domElement.addEventListener(domEventName, handler);
+        }
+      }
+    }
   }
 }
 function detachEventHandlers(elementState) {
@@ -1215,7 +1262,7 @@ function detachEventHandlers(elementState) {
   }
   elementState.eventListeners.clear();
 }
-function createElement(element, context, eventHandlers) {
+function createElement(element, context, eventHandlers, isRootElement = false) {
   const tag = getElementTag(element);
   const domElement = document.createElement(tag);
   domElement.setAttribute("data-servly-id", element.i);
@@ -1241,7 +1288,7 @@ function createElement(element, context, eventHandlers) {
     textContent,
     eventListeners: /* @__PURE__ */ new Map()
   };
-  attachEventHandlers(domElement, element.i, eventHandlers, elementState);
+  attachEventHandlers(domElement, element, eventHandlers, context, elementState, isRootElement);
   return elementState;
 }
 var globalRenderingStack = /* @__PURE__ */ new Set();
@@ -1302,8 +1349,8 @@ function renderComponentRef(element, container, context, state) {
     globalRenderingStack.delete(refId);
   }
 }
-function renderElement(element, tree, context, eventHandlers, elementStates, state) {
-  const elementState = createElement(element, context, eventHandlers);
+function renderElement(element, tree, context, eventHandlers, elementStates, state, isRootElement = false) {
+  const elementState = createElement(element, context, eventHandlers, isRootElement);
   elementStates.set(element.i, elementState);
   const config = element.configuration;
   if (config?.componentViewRef) {
@@ -1315,7 +1362,7 @@ function renderElement(element, tree, context, eventHandlers, elementStates, sta
   }
   const children = tree.get(element.i) || [];
   for (const child of children) {
-    const childElement = renderElement(child, tree, context, eventHandlers, elementStates, state);
+    const childElement = renderElement(child, tree, context, eventHandlers, elementStates, state, false);
     elementState.domElement.appendChild(childElement);
   }
   return elementState.domElement;
@@ -1364,14 +1411,16 @@ function render(options) {
         context,
         eventHandlers,
         state.elementStates,
-        state
+        state,
+        true
+        // isRootElement
       );
       container.appendChild(state.rootElement);
     } else {
       const wrapper = document.createElement("div");
       wrapper.setAttribute("data-servly-wrapper", "true");
       for (const root of rootElements) {
-        const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state);
+        const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state, true);
         wrapper.appendChild(rootElement);
       }
       state.rootElement = wrapper;

package/package.json

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