npm - apprun - Versions diffs - 3.37.3 → 3.38.1 - Mend

apprun 3.37.3 → 3.38.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/.claude/settings.local.json +18 -0
package/.docs/done/2026/07/13/explicit-pretty-links.md +32 -0
package/.docs/done/2026/07/13/first-render-dom-attributes.md +18 -0
package/.docs/plans/2026/07/13/plan-explicit-pretty-links.md +119 -0
package/.docs/plans/2026/07/13/plan-first-render-dom-attributes.md +66 -0
package/.docs/plans/2026/07/13/plan-play-typescript-runtime.md +77 -0
package/.docs/plans/2026/07/13/plan-release-3-38-1-docs.md +74 -0
package/.docs/reqs/2026/07/13/req-explicit-pretty-links.md +46 -0
package/.docs/reqs/2026/07/13/req-first-render-dom-attributes.md +31 -0
package/.docs/reqs/2026/07/13/req-play-typescript-runtime.md +29 -0
package/.docs/reqs/2026/07/13/req-release-3-38-1-docs.md +34 -0
package/.playwright-mcp/console-2026-06-24T18-37-47-881Z.log +17 -0
package/CHANGELOG.md +14 -1
package/README.md +3 -2
package/WHATSNEW.md +32 -6
package/ai/apprun.prompt.md +545 -109
package/apprun.d.ts +21 -6
package/cli/app.js +7 -0
package/dist/apprun-code.js +1 -1
package/dist/apprun-code.js.map +1 -1
package/dist/apprun-dev-tools.js +1 -1
package/dist/apprun-dev-tools.js.map +1 -1
package/dist/apprun-html.esm.js +7 -7
package/dist/apprun-html.esm.js.map +1 -1
package/dist/apprun-html.js +1 -1
package/dist/apprun-html.js.map +1 -1
package/dist/apprun-play-html.esm.js +7 -7
package/dist/apprun-play-html.esm.js.map +1 -1
package/dist/apprun-play.js +1 -1
package/dist/apprun-play.js.map +1 -1
package/dist/apprun.esm.js +1 -1
package/dist/apprun.esm.js.map +1 -1
package/dist/apprun.js +1 -1
package/dist/apprun.js.map +1 -1
package/dist/createState.js.map +1 -1
package/esm/apprun-code.js +15 -3
package/esm/apprun-code.js.map +1 -1
package/esm/apprun-play.js +8 -2
package/esm/apprun-play.js.map +1 -1
package/esm/apprun.js +16 -8
package/esm/apprun.js.map +1 -1
package/esm/directive.js +129 -8
package/esm/directive.js.map +1 -1
package/esm/router.js +3 -2
package/esm/router.js.map +1 -1
package/esm/types.js +1 -0
package/esm/types.js.map +1 -1
package/esm/vdom-my-prop-attr.js +5 -11
package/esm/vdom-my-prop-attr.js.map +1 -1
package/esm/version.js +1 -1
package/jsx-runtime.js +1 -1
package/jsx-runtime.js.map +1 -1
package/package.json +1 -1
package/src/apprun-code.tsx +15 -3
package/src/apprun-play.tsx +9 -3
package/src/apprun.ts +18 -10
package/src/component.ts +1 -1
package/src/createState.ts +1 -1
package/src/directive.ts +132 -7
package/src/global.d.ts +2 -2
package/src/router.ts +3 -2
package/src/types.ts +6 -3
package/src/vdom-my-prop-attr.ts +5 -11
package/src/version.ts +1 -1
package/error.log +0 -0

package/package.json CHANGED Viewed

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

package/src/apprun-code.tsx CHANGED Viewed

@@ -1,3 +1,15 @@
+/**
+ * AppRun playground custom element.
+ *
+ * Generates an isolated preview document, compiles JSX/TypeScript in the
+ * browser, and renders the result with AppRun. The TypeScript CDN dependency
+ * uses an explicit version and browser bundle path so the `ts` global is
+ * available before preview compilation begins.
+ *
+ * Recent Changes:
+ * - Executes compiled script-style examples synchronously before the preview
+ *   document finishes DOMContentLoaded, preserving startup configuration.
+ */
 import { app, Component } from './apprun';
 declare var CodeMirror;
@@ -45,7 +57,7 @@ const code_html = code => `<!DOCTYPE html>
       margin: 2em;
     }
   </style>
-  <script src="https://cdn.jsdelivr.net/npm/typescript@latest"></script>
+  <script src="https://cdn.jsdelivr.net/npm/typescript@5.8.3/lib/typescript.js"></script>
   <script src="dist/apprun-html.js"></script>
 </head>
 <body>
@@ -58,7 +70,7 @@ const compiled = ts.transpileModule(code, {
     "jsxFactory": "app.h",
     "jsxFragmentFactory": "app.Fragment",
     "target": "es2020",
-    "module": "esnext",
+    "module": "none",
   },
   reportDiagnostics: true,
 });
@@ -82,7 +94,7 @@ if (compiled.diagnostics && compiled.diagnostics.length) {
     document.body.appendChild(pre);
   };
   const script = document.createElement('script');
-  script.type = 'module';
+  script.type = 'text/javascript';
   script.text = compiled.outputText;
   document.body.appendChild(script);
 }

package/src/apprun-play.tsx CHANGED Viewed

@@ -1,3 +1,9 @@
+/**
+ * AppRun documentation playground custom element.
+ *
+ * Compiles browser-global TypeScript/JSX examples into synchronous scripts so
+ * startup configuration runs before the preview document's DOMContentLoaded.
+ */
 import { app, Component } from './apprun';
 const popup_div = `<div id="play-popup" class="overlay">
@@ -126,7 +132,7 @@ const compiled = ts.transpileModule(code, {
     "jsxFactory": "app.h",
     "jsxFragmentFactory": "app.Fragment",
     "target": "es2020",
-    "module": "esnext",
+    "module": "none",
   },
   reportDiagnostics: true,
 });
@@ -150,7 +156,7 @@ if (compiled.diagnostics && compiled.diagnostics.length) {
     document.body.appendChild(pre);
   };
   const script = document.createElement('script');
-  script.type = 'module';
+  script.type = 'text/javascript';
   script.text = compiled.outputText;
   document.body.appendChild(script);
 }
@@ -194,7 +200,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 CHANGED Viewed

@@ -24,6 +24,7 @@
  * - Virtual DOM rendering with multiple renderer support
  * - Component lifecycle management
  * - Client-side routing with hash/path support
+ * - Explicit pretty-link path routing through app.use_prettyLink()
  * - Web Components integration
  * - React compatibility layer
  * - TypeScript support with strong typing
@@ -37,6 +38,7 @@
  * - Safer element access with proper type assertions
  *
  * Recent Changes:
+ * - Restored hash routing and normal browser navigation as the default; pretty-link interception is opt-in
  * - Modified addComponents to accept (element, components) where components is a key-value object with routes as keys and components as values
  * - Simplified component mounting API for better usability
  *
@@ -54,6 +56,8 @@
  * }
  *
  * // Mount multiple components
+ * // Required only when browser /path links should use SPA navigation.
+ * app.use_prettyLink();
  * app.addComponents(document.body, {
  *   '/home': MyComponent,
  *   '/about': AnotherComponent
@@ -73,7 +77,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 +113,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);
@@ -124,24 +128,25 @@ if (!app.start) {
   const NOOP = _ => {/* Intentionally empty */ }
   app.on('/', NOOP);
+  app.on('#', NOOP);
   app.on('debug', _ => NOOP);
   app.on(ROUTER_EVENT, NOOP);
   app.on(ROUTER_404_EVENT, NOOP);
   app.route = route;
   app.on('route', url => app['route'] && app['route'](url));
+  let prettyLinks = false;
+  /** Select SPA path-link routing before DOMContentLoaded; hash routing is the default. */
+  app.use_prettyLink = (enabled = true) => {
+    prettyLinks = enabled;
+  };
   if (typeof document === 'object') {
     document.addEventListener("DOMContentLoaded", () => {
       const no_init_route = document.body.hasAttribute('apprun-no-init') || app['no-init-route'] || false;
-      const use_hash = app.find('#') || app.find('#/') || false;
-      // console.log(`AppRun ${app.version} started with ${use_hash ? 'hash' : 'path'} routing. Initial load: ${init_load ? 'disabled' : 'enabled'}.`);
-      window.addEventListener('hashchange', () => route(location.hash));
-      window.addEventListener('popstate', () => route(location.pathname));
-      if (use_hash) {
-        !no_init_route && route(location.hash);
-      } else {
+      if (prettyLinks) {
+        window.addEventListener('popstate', () => route(location.pathname));
         !no_init_route && (() => {
           const basePath = app.basePath || '';
           let initialPath = location.pathname;
@@ -172,6 +177,9 @@ if (!app.start) {
             route(menu.pathname); // Route with relative path (without base path)
           }
         });
+      } else {
+        window.addEventListener('hashchange', () => route(location.hash));
+        !no_init_route && route(location.hash);
       }
     });
   }

package/src/component.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/router.ts CHANGED Viewed

@@ -9,7 +9,7 @@
  * 2. Path-based routing (/path)
  *    - Works with browser history API
  *    - Requires server configuration for SPA routing
- *    - Handles popstate events automatically
+ *    - Handles browser links and popstate after app.use_prettyLink() opts in before initialization
  * 3. Event-based navigation
  *    - Routes trigger corresponding component events
  *    - Automatic route parameter extraction
@@ -38,7 +38,7 @@
  *
  * // Navigate programmatically
  * app.run('route', '#/home');
- * route('/users/123'); // Direct routing
+ * route('/users/123'); // Direct routing does not require pretty-link mode
  *
  * // Hierarchical matching examples
  * app.on('/api', (operation, id) => // Handle /api/users/123);
@@ -50,6 +50,7 @@
  * // If handler found at /api, it receives: ('v1', 'users', '123')
  *
  * // Base Path Support (NEW):
+ * app.use_prettyLink(); // Enable automatic browser path navigation before initialization
  * app.basePath = '/myapp'; // For sub-directory deployments
  * // Links: <a href="/users/123"> (relative paths)
  * // Navigation: /myapp/users/123 (full path)

package/src/types.ts CHANGED Viewed

@@ -19,6 +19,7 @@
  *    - ActionOptions: Action behavior options (render, history, global, callback)
  *    - MountOptions: Component mounting options (global events, routing, transitions)
  *    - AppStartOptions: Application startup configuration with lifecycle hooks
+ *    - IApp.use_prettyLink: Explicit startup selection for path-link routing
  *
  * Features:
  * - Strong typing for component lifecycle
@@ -66,7 +67,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 +112,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[];
@@ -123,6 +124,8 @@ export interface IApp {
   safeHTML(html: string): any[];
   use_render(render: any, mode?: 0 | 1): void;
   use_react(React: any, ReactDOM: any): void;
+  /** Select SPA path-link routing before DOMContentLoaded; hash routing is the default. */
+  use_prettyLink(enabled?: boolean): void;
   version: string;
   basePath?: string;
   addComponents: (element: Element | string, components: ComponentRoute) => void;
@@ -134,7 +137,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 CHANGED Viewed

@@ -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 - Skip logic for focus-sensitive (selection), scroll, and media properties
+ * Updated: 2026-07-13 - Restore stale class cleanup when first-render VDOM props are null
  */
 import { find, html, svg } from 'property-information';
@@ -13,17 +13,11 @@ const propertyInfoCache = new Map<string, any>();
 // Merge old and new props, handling className -> class conversion and null cleanup
 function mergeProps(oldProps: { [key: string]: any }, newProps: { [key: string]: any }): { [key: string]: any } {
-  if (newProps) {
-    newProps['class'] = newProps['class'] || newProps['className'];
-    delete newProps['className'];
-  }
+  newProps = newProps || {};
+  newProps['class'] = newProps['class'] || newProps['className'];
+  delete newProps['className'];
-  if (!oldProps || Object.keys(oldProps).length === 0) return newProps || {};
-  if (!newProps || Object.keys(newProps).length === 0) {
-    const props: { [key: string]: any } = {};
-    Object.keys(oldProps).forEach(p => props[p] = null);
-    return props;
-  }
+  if (!oldProps || Object.keys(oldProps).length === 0) return newProps;
   const props: { [key: string]: any } = {};
   Object.keys(oldProps).forEach(p => {

package/src/version.ts CHANGED Viewed

@@ -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}`;

package/error.log DELETED Viewed

File without changes