feat: client updates for livepage features

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to @livetemplate/client will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v0.7.1] - 2025-12-14
+
+### Changes
+
+- fix: apply differential ops to existing range structures (#9) (50a3ebc)
+- fix: handle objects with only numeric keys in renderValue (#8) (b1c7827)
+- feat: add lvt-focus-trap and lvt-autofocus attributes (#7) (7b14402)
+- feat: add reactive attributes for action lifecycle events (#6) (46e2065)
+
+
+
 ## [v0.7.0] - 2025-12-10
 
 ### Changes

VERSION

@@ -1 +1 @@
-0.7.0
+0.7.1

dom/event-delegation.ts

@@ -1,4 +1,5 @@
 import { debounce, throttle } from "../utils/rate-limit";
+import { checkLvtConfirm } from "../utils/confirm";
 import type { Logger } from "../utils/logger";
 
 export interface EventDelegationContext {
@@ -142,17 +143,10 @@ export class EventDelegator {
                 targetElement,
               });
 
-              if (
-                action === "delete" &&
-                targetElement.hasAttribute("lvt-confirm")
-              ) {
-                const confirmMessage =
-                  targetElement.getAttribute("lvt-confirm") ||
-                  "Are you sure you want to delete this item?";
-                if (!confirm(confirmMessage)) {
-                  this.logger.debug("Delete action cancelled by user");
-                  return;
-                }
+              // Handle lvt-confirm for any action
+              if (!checkLvtConfirm(targetElement as HTMLElement)) {
+                this.logger.debug("Action cancelled by user:", action);
+                return;
               }
 
               const message: any = { action, data: {} };

livetemplate-client.ts

@@ -35,6 +35,8 @@ import type {
 } from "./types";
 import { createLogger, Logger } from "./utils/logger";
 export { loadAndApplyUpdate, compareHTML } from "./utils/testing";
+export { setupReactiveAttributeListeners } from "./dom/reactive-attributes";
+export { checkLvtConfirm, extractLvtData } from "./utils/confirm";
 
 export class LiveTemplateClient {
   private readonly treeRenderer: TreeRenderer;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livetemplate/client",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "TypeScript client for LiveTemplate tree-based updates",
   "main": "dist/livetemplate-client.js",
   "browser": "dist/livetemplate-client.browser.js",

utils/confirm.ts

@@ -0,0 +1,33 @@
+/**
+ * Check if an element has lvt-confirm attribute and prompt user if needed.
+ * Returns true if action should proceed, false if cancelled.
+ */
+export function checkLvtConfirm(element: HTMLElement): boolean {
+  if (element.hasAttribute("lvt-confirm")) {
+    const confirmMessage = element.getAttribute("lvt-confirm");
+    if (confirmMessage && !confirm(confirmMessage)) {
+      return false; // User cancelled
+    }
+  }
+  return true; // Proceed
+}
+
+/**
+ * Extract lvt-data-* attributes from an element.
+ * lvt-data-id="123" becomes { id: "123" }
+ * lvt-data-user-name="john" becomes { "user-name": "john" }
+ */
+export function extractLvtData(element: HTMLElement): Record<string, string> {
+  const data: Record<string, string> = {};
+  const attributes = element.attributes;
+
+  for (let i = 0; i < attributes.length; i++) {
+    const attr = attributes[i];
+    if (attr.name.startsWith("lvt-data-")) {
+      const key = attr.name.substring(9); // Remove "lvt-data-" prefix
+      data[key] = attr.value;
+    }
+  }
+
+  return data;
+}