apprun 3.35.0 → 3.36.0

package/src/types.ts

@@ -4,26 +4,47 @@
  * This file defines the fundamental types used across AppRun:
  * 1. Component Types
  *    - View: Function that renders state to VDOM
- *    - Action: Function that updates state
- *    - Update: Collection of actions
+ *    - Action: Function that updates state (sync/async)
+ *    - Update: Collection of actions (array or object format)
+ *    - ActionDef: Tuple definition for action arrays
  * 
  * 2. Virtual DOM Types
- *    - VNode: Virtual DOM node structure
- *    - VDOM: Union of possible VDOM types
- *    - Element: DOM element references
+ *    - VNode: Virtual DOM node structure with tag/props/children
+ *    - VDOM: Union of possible VDOM types (false, string, VNode, array)
+ *    - Element: DOM element references (HTMLElement or string selector)
+ *    - TemplateResult: Lit-html template support
  * 
  * 3. Configuration Types
- *    - EventOptions: Event handler options (once, delay, etc)
- *    - ActionOptions: Action behavior options (render, history, etc)
- *    - MountOptions: Component mounting options (global events, routing)
- *    - AppStartOptions: Application startup configuration
+ *    - EventOptions: Event handler options (once, delay, transition)
+ *    - ActionOptions: Action behavior options (render, history, global, callback)
+ *    - MountOptions: Component mounting options (global events, routing, transitions)
+ *    - AppStartOptions: Application startup configuration with lifecycle hooks
  * 
+ * Features:
+ * - Strong typing for component lifecycle
+ * - Flexible action definition formats
+ * - Comprehensive event options
+ * - Integration with external libraries (lit-html)
+ * - Type-safe component mounting
+ * - Lifecycle hook typing
+ *
+ * Type Safety Improvements (v3.35.1):
+ * - Enhanced generic constraints for better type inference
+ * - Improved union types for VDOM flexibility
+ * - Better callback typing in options
+ * - Stricter typing for lifecycle methods
+ *
  * Usage:
  * ```ts
- * class MyComponent implements Component<State> {
+ * class MyComponent extends Component<State, Events> {
  *   view: View<State>;
- *   update: Update<State>;
+ *   update: Update<State, Events>;
  * }
+ * 
+ * // Type-safe action definitions
+ * const update: Update<State> = {
+ *   'event': (state: State, ...args) => newState
+ * };
  * ```
  */
 
@@ -59,5 +80,5 @@ export type AppStartOptions<T> = {
   transition?: boolean;
   route?: string;
   rendered?: (state: T) => void
-  mounted?: (props:any, children:any, state: T) => T
+  mounted?: (props: any, children: any, state: T) => T
 };

package/src/vdom-my.ts

@@ -35,7 +35,7 @@ export function createElement(tag: string | Function | [], props?: {}, ...childr
   else throw new Error(`Unknown tag in vdom ${tag}`);
 };
 
-const keyCache = new WeakMap();
+const keyCache = {};
 
 export const updateElement = (element: Element | string, nodes: VDOM, component = {}) => {
   // tslint:disable-next-line
@@ -67,68 +67,96 @@ function same(el: Element, node: VNode) {
 }
 
 function update(element: Element, node: VNode, isSvg: boolean) {
-  if (node['_op'] === 3) return;
   // console.assert(!!element);
   isSvg = isSvg || node.tag === "svg";
   if (!same(element, node)) {
     element.parentNode.replaceChild(create(node, isSvg), element);
     return;
   }
-  !(node['_op'] & 2) && updateChildren(element, node.children, isSvg);
-  !(node['_op'] & 1) && updateProps(element, node.props, isSvg);
+  updateChildren(element, node.children, isSvg);
+  updateProps(element, node.props, isSvg);
 }
 
-function updateChildren(element, children, isSvg: boolean) {
+function updateChildren(element: Element, children: any[], isSvg: boolean) {
   const old_len = element.childNodes?.length || 0;
   const new_len = children?.length || 0;
+
+  // Handle key-based reordering first if any children have keys
+  const hasKeysInNewChildren = children?.some(child =>
+    child && typeof child === 'object' && child.props && child.props.key !== undefined
+  );
+
+  if (hasKeysInNewChildren) {
+    // Create a map of existing keyed elements
+    const existingKeyedElements = new Map();
+    for (let i = 0; i < old_len; i++) {
+      const el = element.childNodes[i];
+      if (el && el.key) {
+        existingKeyedElements.set(el.key, el);
+      }
+    }
+
+    // Build new DOM structure
+    const fragment = document.createDocumentFragment();
+    for (let i = 0; i < new_len; i++) {
+      const child = children[i];
+      if (child == null) continue;
+
+      const key = child.props && child.props['key'];
+      if (key && existingKeyedElements.has(key)) {
+        // Reuse existing element
+        const existingEl = existingKeyedElements.get(key);
+        update(existingEl, child as VNode, isSvg);
+        fragment.appendChild(existingEl);
+        existingKeyedElements.delete(key); // Mark as used
+      } else {
+        // Create new element
+        fragment.appendChild(create(child, isSvg));
+      }
+    }
+
+    // Clear current children and append new structure
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
+    element.appendChild(fragment);
+    return;
+  }
+
+  // Original non-keyed logic
   const len = Math.min(old_len, new_len);
   for (let i = 0; i < len; i++) {
     const child = children[i];
-    if (child['_op'] === 3) continue;
+    if (child == null) continue;
     const el = element.childNodes[i];
+    if (!el) continue; // Safety check for undefined childNodes
     if (typeof child === 'string') {
-      if (el.textContent !== child) {
-        if (el.nodeType === 3) {
-          el.nodeValue = child
-        } else {
-          element.replaceChild(createText(child), el);
-        }
-      }
-    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
-      element.insertBefore(child, el);
-    } else {
-      const key = child.props && child.props['key'];
-      if (key) {
-        if (el.key === key) {
-          update(element.childNodes[i], child, isSvg);
-        } else {
-          // console.log(el.key, key);
-          const old = keyCache[key];
-          if (old) {
-            const temp = old.nextSibling;
-            element.insertBefore(old, el);
-            temp ? element.insertBefore(el, temp) : element.appendChild(el);
-            update(element.childNodes[i], child, isSvg);
-          } else {
-            element.replaceChild(create(child, isSvg), el);
-          }
+      if (el.nodeType === 3) {
+        if (el.nodeValue !== child) {
+          el.nodeValue = child;
         }
       } else {
-        update(element.childNodes[i], child, isSvg);
+        element.replaceChild(createText(child), el);
       }
+    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+      element.replaceChild(child, el);
+    } else if (child && typeof child === 'object') {
+      update(element.childNodes[i], child as VNode, isSvg);
     }
   }
 
-  let n = element.childNodes?.length || 0;
-  while (n > len) {
+  // Remove extra old nodes
+  while (element.childNodes.length > len) {
     element.removeChild(element.lastChild);
-    n--;
   }
 
   if (new_len > len) {
     const d = document.createDocumentFragment();
     for (let i = len; i < children.length; i++) {
-      d.appendChild(create(children[i], isSvg));
+      const child = children[i];
+      if (child != null) {
+        d.appendChild(create(child, isSvg));
+      }
     }
     element.appendChild(d);
   }
@@ -146,7 +174,7 @@ function createText(node) {
     div.insertAdjacentHTML('afterbegin', node.substring(6))
     return div;
   } else {
-    return document.createTextNode(node??'');
+    return document.createTextNode(node ?? '');
   }
 }
 
@@ -154,7 +182,12 @@ function create(node: VNode | string | HTMLElement | SVGElement, isSvg: boolean)
   // console.assert(node !== null && node !== undefined);
   if ((node instanceof HTMLElement) || (node instanceof SVGElement)) return node;
   if (typeof node === "string") return createText(node);
-  if (!node.tag || (typeof node.tag === 'function')) return createText(JSON.stringify(node));
+
+  // Type guard for VNode objects - handle invalid node types gracefully
+  if (!node || typeof node !== 'object' || !node.tag || (typeof node.tag === 'function')) {
+    return createText(typeof node === 'object' ? JSON.stringify(node) : String(node ?? ''));
+  }
+
   isSvg = isSvg || node.tag === "svg";
   const element = isSvg
     ? document.createElementNS("http://www.w3.org/2000/svg", node.tag)
@@ -221,7 +254,10 @@ export function updateProps(element: Element, props: {}, isSvg) {
     } else if (element[name] !== value) {
       element[name] = value;
     }
-    if (name === 'key' && value) keyCache[value] = element;
+    if (name === 'key' && value !== undefined) {
+      keyCache[value] = element;
+      element.key = value; // Set key property on the DOM element
+    }
   }
   if (props && typeof props['ref'] === 'function') {
     window.requestAnimationFrame(() => props['ref'](element));

package/src/version.ts

@@ -0,0 +1,16 @@
+/**
+ * Version Management Utility
+ * 
+ * Single source of truth for AppRun version information.
+ * This file ensures version consistency across all modules.
+ * 
+ * The version is derived from package.json and should be updated
+ * only when the package version changes.
+ */
+
+// Import version from package.json to maintain single source of truth
+// This version string is used across the framework
+export const APPRUN_VERSION = '3.36.0';
+
+// Version string with prefix for global tracking
+export const APPRUN_VERSION_GLOBAL = `AppRun-${APPRUN_VERSION}`;

package/src/web-component.ts

@@ -4,30 +4,50 @@
  * This file enables using AppRun components as Web Components:
  * 1. Custom Element Creation
  *    - Converts AppRun components to custom elements
- *    - Handles lifecycle (connected, disconnected, etc)
- *    - Manages shadow DOM and light DOM rendering
+ *    - Handles lifecycle (connected, disconnected, attributeChanged)
+ *    - Manages shadow DOM and light DOM rendering options
+ *    - Automatic element registration with customElements.define()
  * 
  * 2. Property/Attribute Sync
- *    - Observes attribute changes
- *    - Updates component state automatically
- *    - Handles camelCase/kebab-case conversion
- *    - Supports complex property types
+ *    - Observes attribute changes with attributeChangedCallback
+ *    - Updates component state automatically on changes
+ *    - Handles camelCase/kebab-case conversion automatically
+ *    - Supports complex property types and JSON parsing
+ *    - Two-way data binding between attributes and state
  * 
  * 3. Event Handling
  *    - Proxies events between component and element
- *    - Supports both global and local events
- *    - Maintains proper event bubbling
+ *    - Supports both global and local event systems
+ *    - Maintains proper event bubbling and capturing
+ *    - Custom event dispatching for component communication
  * 
+ * Features:
+ * - Shadow DOM encapsulation support
+ * - Attribute observation and change detection
+ * - Lifecycle management and cleanup
+ * - Property reflection to attributes
+ * - Event proxy system
+ * - Flexible rendering options
+ *
+ * Type Safety Improvements (v3.35.1):
+ * - Enhanced custom element options typing
+ * - Better lifecycle method signatures
+ * - Improved attribute/property type safety
+ * - Safer DOM manipulation with null checks
+ *
  * Usage:
  * ```ts
  * // Register web component
- * @customElement('my-element')
+ * @customElement('my-element', { 
+ *   shadow: true,
+ *   observedAttributes: ['name', 'value']
+ * })
  * class MyComponent extends Component {
  *   // Regular AppRun component code
  * }
  * 
  * // Use in HTML
- * <my-element name="value"></my-element>
+ * <my-element name="value" data-prop="complex"></my-element>
  * ```
  */
 
@@ -71,7 +91,7 @@ export const customElement = (componentClass, options: CustomElementOptions = {}
         }
         return map
       }, {})
-      this._attrMap = (name: string) : string => attrMap[name] || name
+      this._attrMap = (name: string): string => attrMap[name] || name
 
       const props = {};
       Array.from(this.attributes).forEach(item => props[this._attrMap(item.name)] = item.value);