apprun 3.37.2 → 3.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apprun",
-  "version": "3.37.2",
+  "version": "3.38.0",
   "description": "JavaScript library that has Elm inspired architecture, event pub-sub and components",
   "main": "dist/apprun.js",
   "module": "esm/apprun.js",

package/src/apprun-play.tsx

@@ -194,7 +194,7 @@ const setup_editor = (textarea, iframe, code, hide_src) => {
   }
 }
 
-class Play extends Component {
+class Play extends Component<any> {
   view = (state) => {
     const code_id = state['code-element-id'];
     const element = this.element;

package/src/apprun.ts

@@ -73,7 +73,7 @@ import { APPRUN_VERSION } from './version';
 
 export type StatelessComponent<T = {}> = (args: T) => string | VNode | void;
 type OnDecorator = {
-  <T = any>(options?: any): (constructor: Function) => void;
+  <T = unknown>(options?: any): (constructor: Function) => void;
   <E = string>(events?: E, options?: any): (target: any, key: string) => void;
 };
 
@@ -109,7 +109,7 @@ if (!app.start) {
   app.webComponent = webComponent;
   app.safeHTML = safeHTML;
 
-  app.start = <T, E = any>(element?: Element | string, state?: State<T>, view?: View<T>, update?: Update<T, E>,
+  app.start = <T, E = unknown>(element?: Element | string, state?: State<T>, view?: View<T>, update?: Update<T, E>,
     options?: AppStartOptions<T>): Component<T, E> => {
     const opts = { render: true, global_event: true, ...options };
     const component = new Component<T, E>(state, view, update);

package/src/component.ts

@@ -66,7 +66,7 @@ export const REFRESH = state => state;
 
 const app = _app as unknown as IApp;
 
-export class Component<T = any, E = any> {
+export class Component<T = unknown, E = unknown> {
   static __isAppRunComponent = true;
   private _app = new App();
   private _actions = [];

package/src/createState.ts

@@ -1,6 +1,6 @@
 import { produce, Draft } from 'immer';
 
-export function createState<T = any>(
+export function createState<T = unknown>(
   fn: (draft: Draft<T>, ...args: any[]) => void
 ): (state: T, ...args: any[]) => T {
   return (state: T, ...args: any[]): T => {

package/src/directive.ts

@@ -34,16 +34,36 @@
  * - Enhanced error handling for invalid event targets
  * - Safer DOM element property access
  *
+ * Nested State Binding Support (v3.37.4):
+ * - Enhanced $bind directive to support nested object and array paths
+ * - Supports dot notation: 'user.name', 'user.profile.settings.theme'
+ * - Supports bracket notation: 'items[0]', 'users[1].name'
+ * - Supports mixed notation: 'users[0].settings.theme', 'data["key"].value'
+ * - Safe traversal with automatic intermediate object/array creation
+ * - Maintains backward compatibility with simple property binding
+ *
  * Usage:
  * ```tsx
  * // Event binding
  * <button $onclick="event-name">Click</button>
  * <input $oninput={e => setState(e.target.value)} />
  * 
- * // Two-way binding
+ * // Simple two-way binding
  * <input $bind="state.property" />
  * <select $bind="selected">...</select>
  * 
+ * // Nested object binding
+ * <input $bind="user.profile.name" />
+ * <input $bind="user.settings.theme" />
+ * 
+ * // Array element binding
+ * <input $bind="items[0]" />
+ * <input $bind="todos[1].title" />
+ * 
+ * // Mixed nested binding
+ * <input $bind="users[0].profile.settings.notifications.email" />
+ * <select $bind="config.display.mode">...</select>
+ * 
  * // Array handlers
  * <button $onclick={['handler', param1, param2]}>Click</button>
  * ```
@@ -52,18 +72,123 @@
 import app from './app';
 import { safeEventTarget } from './type-utils';
 
+/**
+ * Parse a path string into an array of keys and indices
+ * Supports paths like: 'a.b', 'a[0]', 'a[0].b', 'a["key"]'
+ */
+const parsePath = (path: string): Array<string | number> => {
+  if (!path) return [];
+  
+  const keys: Array<string | number> = [];
+  let current = '';
+  let inBracket = false;
+  let quoteChar = '';
+  
+  for (let i = 0; i < path.length; i++) {
+    const char = path[i];
+    
+    if (char === '[' && !inBracket) {
+      if (current) {
+        keys.push(current);
+        current = '';
+      }
+      inBracket = true;
+    } else if (char === ']' && inBracket) {
+      if (quoteChar) {
+        // Remove quotes from string keys
+        current = current.slice(1, -1);
+      } else if (/^\d+$/.test(current)) {
+        // Convert numeric strings to numbers
+        current = parseInt(current, 10) as any;
+      }
+      keys.push(current);
+      current = '';
+      inBracket = false;
+      quoteChar = '';
+    } else if ((char === '"' || char === "'") && inBracket) {
+      if (!quoteChar) {
+        quoteChar = char;
+      } else if (char === quoteChar) {
+        quoteChar = '';
+      }
+      current += char;
+    } else if (char === '.' && !inBracket) {
+      if (current) {
+        keys.push(current);
+        current = '';
+      }
+    } else {
+      current += char;
+    }
+  }
+  
+  if (current) {
+    keys.push(current);
+  }
+  
+  return keys;
+};
+
+/**
+ * Safely get a nested value from an object using a path
+ */
+const getNestedValue = (obj: any, path: Array<string | number>): any => {
+  let current = obj;
+  for (const key of path) {
+    if (current == null) return undefined;
+    current = current[key];
+  }
+  return current;
+};
+
+/**
+ * Safely set a nested value in an object using a path
+ * Creates intermediate objects/arrays as needed
+ */
+const setNestedValue = (obj: any, path: Array<string | number>, value: any): any => {
+  if (path.length === 0) return value;
+  
+  const result = { ...obj };
+  let current = result;
+  
+  for (let i = 0; i < path.length - 1; i++) {
+    const key = path[i];
+    const nextKey = path[i + 1];
+    
+    if (current[key] == null) {
+      // Create array if next key is numeric, object otherwise
+      current[key] = typeof nextKey === 'number' ? [] : {};
+    } else if (Array.isArray(current[key])) {
+      current[key] = [...current[key]];
+    } else if (typeof current[key] === 'object') {
+      current[key] = { ...current[key] };
+    }
+    
+    current = current[key];
+  }
+  
+  current[path[path.length - 1]] = value;
+  return result;
+};
+
 const getStateValue = (component, name) => {
-  return (name ? component['state'][name] : component['state']) || '';
+  if (!name) return component['state'] || '';
+  
+  const path = parsePath(name);
+  const value = getNestedValue(component['state'], path);
+  return value !== undefined ? value : '';
 }
 
 const setStateValue = (component, name, value) => {
-  if (name) {
-    const state = component['state'] || {};
-    state[name] = value;
-    component.setState(state);
-  } else {
+  if (!name) {
     component.setState(value);
+    return;
   }
+  
+  const path = parsePath(name);
+  const currentState = component['state'] || {};
+  const newState = setNestedValue(currentState, path, value);
+  component.setState(newState);
 }
 
 const apply_directive = (key: string, props: {}, tag, component) => {

package/src/global.d.ts

@@ -8,12 +8,12 @@ declare global {
     app: App;
     _AppRunVersions: string;
     Component: typeof Component & {
-      <T = any>(options?: any): (constructor: Function) => void;
+      <T = unknown>(options?: any): (constructor: Function) => void;
     };
     _React: any;
     React: App;
     on: {
-      <T = any>(options?: any): (constructor: Function) => void;
+      <T = unknown>(options?: any): (constructor: Function) => void;
       <E = string>(events?: E, options?: any): (target: any, key: string) => void;
     };
     customElement: (name: string) => (constructor: Function) => void;

package/src/types.ts

@@ -66,7 +66,7 @@ export type VDOM = false | string | VNode | Array<VNode | string> | TemplateResu
 export type View<T> = (state: T) => VDOM | void;
 export type Action<T> = (state: T, ...p: any[]) => T | Promise<T> | void | AsyncGenerator<T> | Generator<T>;
 export type ActionDef<T, E> = (readonly [E, Action<T>, {}?]);
-export type Update<T, E = any> = ActionDef<T, E>[] | { [name: string]: Action<T> | {}[] } | (E | Action<T> | {})[];
+export type Update<T, E = unknown> = ActionDef<T, E>[] | { [name: string]: Action<T> | {}[] } | (E | Action<T> | {})[];
 export type ActionOptions = {
   render?: boolean, history?, global?: boolean;
   callback?: (state: any) => void;
@@ -111,7 +111,7 @@ export interface IApp {
   /** @deprecated Use runAsync() instead */
   query(name: string, ...args: any[]): Promise<any[]>;
 
-  start<T, E = any>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
+  start<T, E = unknown>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
     options?: AppStartOptions<T>): any;
 
   h(tag: string | Function, props?: any, ...children: any[]): VNode | VNode[];
@@ -134,7 +134,7 @@ interface ComponentLike {
 }
 
 // Define component constructor type
-type ComponentConstructor<T = any> = new (
+type ComponentConstructor<T = unknown> = new (
   state?: T,
   view?: any,
   update?: any,

package/src/vdom-my-prop-attr.ts

@@ -3,7 +3,7 @@
  * Standards-compliant property/attribute handling with caching and special element support
  * Features: Skip logic for preserving user interactions during VDOM reconciliation
  * Exports: updateProps - Main function for DOM element property updates
- * Updated: 2025-01-14 - Added skip logic for focus-sensitive, scroll, and media properties
+ * Updated: 2025-01-14 - Skip logic for focus-sensitive (selection), scroll, and media properties
  */
 
 import { find, html, svg } from 'property-information';
@@ -192,7 +192,7 @@ function setAttributeOrProperty(element: Element, name: string, value: any, isSv
 // Skip logic for preventing user interaction disruption during VDOM reconciliation
 function shouldSkipPatch(dom: HTMLElement, prop: string): boolean {
   if (document.activeElement === dom) {
-    return ['value', 'selectionStart', 'selectionEnd', 'selectionDirection']
+    return ['selectionStart', 'selectionEnd', 'selectionDirection']
       .includes(prop);
   }
   if (prop === 'scrollTop' || prop === 'scrollLeft') {

package/src/version.ts

@@ -10,7 +10,7 @@
 
 // Import version from package.json to maintain single source of truth
 // This version string is used across the framework
-export const APPRUN_VERSION = '3.37.2';
+export const APPRUN_VERSION = '3.38.0';
 
 // Version string with prefix for global tracking
 export const APPRUN_VERSION_GLOBAL = `AppRun-${APPRUN_VERSION}`;