@vortexm/vjt 0.1.17 → 0.1.19

package/dist/index.js

@@ -5130,7 +5130,7 @@ var ActionRuntime = class {
     this.getInlineActions = options.getInlineActions;
     this.isWidgetEnabled = options.isWidgetEnabled;
   }
-  async dispatchWidgetEvent(node, eventName, key, inputValue = null, pointer = null) {
+  async dispatchWidgetEvent(node, eventName, key, inputValue = null, pointer = null, options = {}) {
     try {
       if ((eventName === "onClick" || eventName === "onUserValueChange" || eventName === "onEnter" || eventName === "onShiftEnter" || eventName === "onControlEnter") && !this.isWidgetEnabled(node, key)) {
         return;
@@ -5140,7 +5140,9 @@ var ActionRuntime = class {
         return;
       }
       await this.runActions(actions, inputValue, { currentValue: inputValue, pointer });
-      await this.rerenderRoot();
+      if (options.rerender !== false) {
+        await this.rerenderRoot();
+      }
     } catch (error) {
       logRuntimeError("dispatchWidgetEvent", error, {
         eventName,
@@ -8088,6 +8090,7 @@ var RuntimeRenderer = class {
   activeScrollAnimationFrameId = null;
   pendingCursorReference = null;
   pendingCursorFrameId = null;
+  scrollEventFrameIds = /* @__PURE__ */ new Map();
   constructor(description, options = {}) {
     this.description = deepClone(description);
     this.resourceManager = options.resourceManager ?? null;
@@ -8327,6 +8330,10 @@ var RuntimeRenderer = class {
         window.clearTimeout(timeoutId);
       }
       this.toastTimeoutIds.clear();
+      for (const frameId of this.scrollEventFrameIds.values()) {
+        window.cancelAnimationFrame(frameId);
+      }
+      this.scrollEventFrameIds.clear();
       this.voiceRuntime.dispose();
     };
   }
@@ -9516,6 +9523,7 @@ var RuntimeRenderer = class {
       }
       element.addEventListener("scroll", () => {
         this.syncScrollStateForElement(element, key);
+        this.dispatchScrollEvent(element, node, key);
       }, { passive: true });
     }
   }
@@ -9965,6 +9973,92 @@ var RuntimeRenderer = class {
     state.isScrolledToTop = element.scrollTop <= 1;
     state.isScrolledToBottom = element.scrollTop >= maxScrollTop - 1;
   }
+  dispatchScrollEvent(element, node, key) {
+    if (!node.events?.onScroll?.length || typeof window === "undefined") {
+      return;
+    }
+    const existingFrameId = this.scrollEventFrameIds.get(key);
+    if (existingFrameId !== void 0) {
+      return;
+    }
+    const frameId = window.requestAnimationFrame(() => {
+      this.scrollEventFrameIds.delete(key);
+      void this.actionRuntime.dispatchWidgetEvent(
+        node,
+        "onScroll",
+        key,
+        getActionInputValueForElement(element, node, this.stateByKey),
+        null,
+        { rerender: false }
+      ).then(() => {
+        this.syncSimpleDomState();
+      });
+    });
+    this.scrollEventFrameIds.set(key, frameId);
+  }
+  syncSimpleDomState() {
+    if (!(this.root instanceof HTMLElement)) {
+      return;
+    }
+    for (const [key, node] of this.nodeByKey.entries()) {
+      const state = this.stateByKey.get(key);
+      if (!state) {
+        continue;
+      }
+      const element = this.root.querySelector(`[data-widget-key="${CSS.escape(key)}"]`);
+      if (!element) {
+        continue;
+      }
+      switch (node.widget) {
+        case "static-text": {
+          const nextText = this.resolveTextValue(state.text ?? node.text, null);
+          if (element.textContent !== nextText) {
+            element.textContent = nextText;
+          }
+          break;
+        }
+        case "button": {
+          if (element instanceof HTMLButtonElement) {
+            const nextText = this.resolveTextValue(state.text ?? node.text, null);
+            if (element.textContent !== nextText) {
+              element.textContent = nextText;
+            }
+            element.disabled = !(state.enabled ?? normalizeBoolean(node.enabled, true));
+          }
+          break;
+        }
+        case "link": {
+          if (element instanceof HTMLAnchorElement) {
+            const nextText = this.resolveTextValue(state.text ?? node.text, null);
+            if (element.textContent !== nextText) {
+              element.textContent = nextText;
+            }
+          }
+          break;
+        }
+        case "edit": {
+          if (element instanceof HTMLInputElement) {
+            const nextValue = this.resolveTextValue(state.text ?? node.text, null);
+            if (element.value !== nextValue) {
+              element.value = nextValue;
+            }
+          }
+          break;
+        }
+        case "textarea": {
+          if (element instanceof HTMLTextAreaElement) {
+            const nextValue = this.resolveTextValue(state.text ?? node.text, null);
+            if (element.value !== nextValue) {
+              element.value = nextValue;
+            }
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    }
+  }
   toScrollableIndex(value) {
     if (typeof value === "number" && Number.isFinite(value)) {
       return Math.max(0, Math.trunc(value));

package/dist/lib/action-runtime.d.ts

@@ -121,7 +121,9 @@ export declare class ActionRuntime {
     dispatchWidgetEvent(node: DescriptionNode, eventName: WidgetEventName, key: string, inputValue?: unknown, pointer?: {
         x: number;
         y: number;
-    } | null): Promise<void>;
+    } | null, options?: {
+        rerender?: boolean;
+    }): Promise<void>;
     runActions(actions: ActionDefinition[], inputValue: unknown, context: ActionExecutionContext): Promise<unknown>;
     getInlineActionsForNode(node: DescriptionNode): ActionDefinition[] | undefined;
     private runSingleAction;

package/dist/lib/types.d.ts

@@ -3,7 +3,7 @@ export type LayoutType = 'vertical' | 'horizontal' | 'grid';
 export type TextAlign = 'left' | 'center' | 'right';
 export type VerticalAlign = 'top' | 'center' | 'bottom';
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste';
+export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste' | 'onScroll';
 export type SystemEventName = 'onBeforeRender' | 'onAfterRender' | 'onBeforeNavigate' | 'onAfterNavigate' | 'onLayoutSwitchToMobile' | 'onLayoutSwitchToDesktop' | 'onSpeechDetected' | 'onRecordingStarted' | 'onRecordingStopped' | 'onRecordingError' | 'onListeningError' | 'onListeringError' | 'onPlayFinished' | 'onPlayingStopped';
 export type PrimitiveRequestType = 'int' | 'float' | 'boolean' | 'string';
 export type ClosableRuntimeResource = {

package/dist/lib/widgets/bindings.d.ts

@@ -12,7 +12,7 @@ type BindingEnvironment = {
     }) => void;
     updatePointerFromEvent: (event: MouseEvent) => void;
     updateOwningListElementDescriptor: (element: HTMLElement, mutate: (descriptor: DescriptionNode) => void) => void;
-    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste', key: string, inputValue?: unknown, pointer?: {
+    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste' | 'onScroll', key: string, inputValue?: unknown, pointer?: {
         x: number;
         y: number;
     } | null) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vortexm/vjt",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",