apprun 3.36.0 → 3.36.1

package/src/router.ts

@@ -1,5 +1,5 @@
 /**
- * AppRun Router Implementation
+ * AppRun Router Implementation with Hierarchical Matching
  * 
  * This file provides URL routing capabilities:
  * 1. Hash-based routing (#/path)
@@ -22,6 +22,7 @@
  * - Route parameter parsing and injection into events
  * - URL pattern matching with parameter support
  * - Global and component-level route handling
+ * - **NEW: Hierarchical route matching** - progressively tries parent routes
  *
  * Type Safety Improvements (v3.35.1):
  * - Enhanced route type definitions
@@ -30,7 +31,7 @@
  * 
  * Usage:
  * ```ts
- * // Handle routes
+ * // Basic routing
  * app.on('#/home', () => // Show home page);
  * app.on('#/users/:id', (id) => // Show user profile);
  * app.on('/api/*', (path) => // Handle API routes);
@@ -38,11 +39,264 @@
  * // Navigate programmatically  
  * app.run('route', '#/home');
  * route('/users/123'); // Direct routing
+ * 
+ * // Hierarchical matching examples
+ * app.on('/api', (operation, id) => // Handle /api/users/123);
+ * app.on('#users', (id, action) => // Handle #users/123/edit);
+ * 
+ * // Hierarchical Route Matching (NEW):
+ * // For URL: /api/v1/users/123
+ * // Router tries: /api/v1/users/123 → /api/v1/users → /api/v1 → /api → 404
+ * // If handler found at /api, it receives: ('v1', 'users', '123')
+ * 
+ * // Base Path Support (NEW):
+ * app.basePath = '/myapp'; // For sub-directory deployments
+ * // Links: <a href="/users/123"> (relative paths)
+ * // Navigation: /myapp/users/123 (full path)
+ * // Routing: /users/123 (base path stripped)
+ * 
+ * // Empty Path Handling (NEW):
+ * // For URL: "" (empty)
+ * // Router tries: # → / → #/ → 404 (in priority order)
+ * 
+ * // 404 Behavior (ENHANCED):
+ * // Fires only at minimal levels: /a, #a, #/a, a
+ * // Never tries root handlers: /, #, #/
  * ```
  */
 
 import app from './app';
 
+// Helper functions for hierarchical routing
+
+/**
+ * Extract clean path segments from URL
+ * @param url - The URL to parse
+ * @returns Array of path segments
+ */
+function parsePathSegments(url: string): string[] {
+  if (!url) return [];
+
+  // Handle different URL types
+  if (url.startsWith('#/')) {
+    return url.substring(2).split('/');
+  } else if (url.startsWith('#')) {
+    return url.substring(1).split('/');
+  } else if (url.startsWith('/')) {
+    return url.substring(1).split('/');
+  } else {
+    return url.split('/');
+  }
+}
+
+/**
+ * Normalize trailing slash - convert /a/ to /a
+ * @param url - The URL to normalize
+ * @returns Normalized URL
+ */
+function normalizeTrailingSlash(url: string): string {
+  if (!url || url === '/' || url === '#' || url === '#/') return url;
+  if (url.endsWith('/')) return url.slice(0, -1);
+  return url;
+}
+
+/**
+ * Validate hierarchy depth and warn if too deep
+ * @param segments - Path segments to validate
+ */
+function validateHierarchyDepth(segments: string[]): void {
+  // Count non-empty segments for depth validation
+  const nonEmptySegments = segments.filter(Boolean);
+  if (nonEmptySegments.length > 11) {
+    console.warn(`Deep route hierarchy detected: ${nonEmptySegments.join('/')} (${nonEmptySegments.length} levels)`);
+  }
+}
+
+/**
+ * Strip base path from URL
+ * @param url - The URL to process
+ * @param basePath - The base path to remove
+ * @returns URL with base path removed
+ */
+function stripBasePath(url: string, basePath: string): string {
+  if (!basePath || basePath === '/' || basePath === '') return url;
+
+  // Normalize base path
+  const normalizedBasePath = basePath.startsWith('/') ? basePath : '/' + basePath;
+
+  if (url.startsWith(normalizedBasePath)) {
+    const stripped = url.substring(normalizedBasePath.length);
+    return stripped.startsWith('/') ? stripped : '/' + stripped;
+  }
+
+  return url;
+}
+
+/**
+ * Generate hierarchy of routes to try (stops at minimal level)
+ * @param segments - Array of path segments
+ * @param routeType - Type of route (path, hash, hash-slash, non-prefixed)
+ * @returns Array of route names to try in order
+ */
+function generateRouteHierarchy(segments: string[], routeType: 'path' | 'hash' | 'hash-slash' | 'non-prefixed'): string[] {
+  const hierarchy: string[] = [];
+
+  // Build hierarchy from most specific to least specific
+  for (let i = segments.length; i > 0; i--) {
+    const currentSegments = segments.slice(0, i);
+    let routeName = '';
+
+    switch (routeType) {
+      case 'path':
+        routeName = '/' + currentSegments.join('/');
+        break;
+      case 'hash':
+        routeName = '#' + currentSegments.join('/');
+        break;
+      case 'hash-slash':
+        routeName = '#/' + currentSegments.join('/');
+        break;
+      case 'non-prefixed':
+        routeName = currentSegments.join('/');
+        break;
+    }
+
+    hierarchy.push(routeName);
+  }
+
+  return hierarchy;
+}
+
+/**
+ * Find handler in hierarchy and return handler info
+ * @param hierarchy - Array of route names to try
+ * @param originalSegments - Original path segments
+ * @returns Handler info if found, null otherwise
+ */
+function findHandlerInHierarchy(hierarchy: string[], originalSegments: string[]): { eventName: string; parameters: string[] } | null {
+  for (let i = 0; i < hierarchy.length; i++) {
+    const routeName = hierarchy[i];
+    const subscribers = app.find(routeName);
+
+    if (subscribers && subscribers.length > 0) {
+      // Found handler - calculate remaining parameters
+      const handlerDepth = hierarchy.length - i;
+      const parameters = originalSegments.slice(handlerDepth);
+
+      return {
+        eventName: routeName,
+        parameters: parameters
+      };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Handle empty path with priority order: # → / → #/ → 404
+ */
+function handleEmptyPath(): void {
+  // Try # first
+  const hashSubscribers = app.find('#');
+  if (hashSubscribers && hashSubscribers.length > 0) {
+    app.run('#');
+    app.run(ROUTER_EVENT, '#');
+    return;
+  }
+
+  // Try / second
+  const pathSubscribers = app.find('/');
+  if (pathSubscribers && pathSubscribers.length > 0) {
+    app.run('/');
+    app.run(ROUTER_EVENT, '/');
+    return;
+  }
+
+  // Try #/ third
+  const hashSlashSubscribers = app.find('#/');
+  if (hashSlashSubscribers && hashSlashSubscribers.length > 0) {
+    app.run('#/');
+    app.run(ROUTER_EVENT, '#/');
+    return;
+  }
+
+  // Fire 404 if no handlers found
+  console.warn('No subscribers for event: ');
+  app.run(ROUTER_404_EVENT, '');
+  app.run(ROUTER_EVENT, '');
+}
+
+/**
+ * Main hierarchical routing logic
+ * @param url - The URL to route
+ */
+function routeWithHierarchy(url: string): void {
+  // Handle empty path
+  if (!url) {
+    handleEmptyPath();
+    return;
+  }
+
+  // Normalize trailing slash
+  url = normalizeTrailingSlash(url);
+
+  // Strip base path if configured
+  const basePath = app['basePath'];
+  if (basePath) {
+    url = stripBasePath(url, basePath);
+  }
+
+  // Parse segments and validate depth
+  const segments = parsePathSegments(url);
+  validateHierarchyDepth(segments);
+
+  // Determine route type
+  let routeType: 'path' | 'hash' | 'hash-slash' | 'non-prefixed';
+  if (url.startsWith('#/')) {
+    routeType = 'hash-slash';
+  } else if (url.startsWith('#')) {
+    routeType = 'hash';
+  } else if (url.startsWith('/')) {
+    routeType = 'path';
+  } else {
+    routeType = 'non-prefixed';
+  }
+
+  // Generate hierarchy
+  const hierarchy = generateRouteHierarchy(segments, routeType);
+
+  // Find handler in hierarchy
+  const handlerInfo = findHandlerInHierarchy(hierarchy, segments);
+
+  if (handlerInfo) {
+    // Found handler - publish route with parameters
+    publishRoute(handlerInfo.eventName, ...handlerInfo.parameters);
+  } else {
+    // No handler found - fire 404 with original URL
+    if (hierarchy.length > 0) {
+      const minimalRoute = hierarchy[hierarchy.length - 1];
+      console.warn(`No subscribers for event: ${minimalRoute}`);
+      app.run(ROUTER_404_EVENT, url);
+      app.run(ROUTER_EVENT, url);
+    } else {
+      handleEmptyPath();
+    }
+  }
+}
+
+const publishRoute = (name: string, ...args: any[]) => {
+  if (!name || name === ROUTER_EVENT || name === ROUTER_404_EVENT) return;
+  const subscribers = app.find(name);
+  if (!subscribers || subscribers.length === 0) {
+    console.warn(`No subscribers for event: ${name}`);
+    app.run(ROUTER_404_EVENT, name, ...args);
+  } else {
+    app.run(name, ...args);
+  }
+  app.run(ROUTER_EVENT, name, ...args);
+}
+
 export type Route = (url: string, ...args: any[]) => any;
 
 export const ROUTER_EVENT: string = '//';
@@ -50,18 +304,8 @@ export const ROUTER_404_EVENT: string = '///';
 export const route: Route = (url: string) => {
   if (app['lastUrl'] === url) return; // Prevent duplicate routing
   app['lastUrl'] = url;
-  if (!url) url = '#';
-  if (url.startsWith('#')) {
-    const [name, ...rest] = url.split('/');
-    app.run(name, ...rest) || app.run(ROUTER_404_EVENT, name, ...rest);
-    app.run(ROUTER_EVENT, name, ...rest);
-  } else if (url.startsWith('/')) {
-    const [_, name, ...rest] = url.split('/');
-    app.run('/' + name, ...rest) || app.run(ROUTER_404_EVENT, '/' + name, ...rest);
-    app.run(ROUTER_EVENT, '/' + name, ...rest);
-  } else {
-    app.run(url) || app.run(ROUTER_404_EVENT, url);
-    app.run(ROUTER_EVENT, url);
-  }
+
+  // Use hierarchical routing logic
+  routeWithHierarchy(url);
 }
 export default route;

package/src/vdom-my-new.ts

@@ -0,0 +1,311 @@
+import { VDOM, VNode } from './types';
+import directive from './directive';
+export type Element = any; //HTMLElement | SVGSVGElement | SVGElement;
+
+export function Fragment(props, ...children): any[] {
+  return collect(children);
+}
+
+const ATTR_PROPS = '_props';
+
+function collect(children) {
+  const ch = [];
+  const push = (c) => {
+    if (c !== null && c !== undefined && c !== '' && c !== false) {
+      ch.push((typeof c === 'function' || typeof c === 'object') ? c : `${c}`);
+    }
+  }
+  children && children.forEach(c => {
+    if (Array.isArray(c)) {
+      c.forEach(i => push(i));
+    } else {
+      push(c);
+    }
+  });
+  return ch;
+}
+
+export function createElement(tag: string | Function | [], props?: {}, ...children) {
+  const ch = collect(children);
+  if (typeof tag === 'string') return { tag, props, children: ch };
+  else if (Array.isArray(tag)) return tag; // JSX fragments - babel
+  else if (tag === undefined && children) return ch; // JSX fragments - typescript
+  else if (Object.getPrototypeOf(tag).__isAppRunComponent) return { tag, props, children: ch } // createComponent(tag, { ...props, children });
+  else if (typeof tag === 'function') return tag(props, ch);
+  else throw new Error(`Unknown tag in vdom ${tag}`);
+};
+
+const keyCache = {};
+
+export const updateElement = (element: Element | string, nodes: VDOM, component = {}) => {
+  // tslint:disable-next-line
+  if (nodes == null || nodes === false) return;
+  const el = (typeof element === 'string' && element) ?
+    document.getElementById(element) || document.querySelector(element) : element;
+  nodes = directive(nodes, component);
+  render(el, nodes, component);
+}
+
+function render(element: Element, nodes: VDOM, parent = {}) {
+  // tslint:disable-next-line
+  if (nodes == null || nodes === false) return;
+  nodes = createComponent(nodes, parent);
+  if (!element) return;
+  const isSvg = element.nodeName === "SVG";
+  if (Array.isArray(nodes)) {
+    updateChildren(element, nodes, isSvg);
+  } else {
+    updateChildren(element, [nodes], isSvg);
+  }
+}
+
+function same(el: Element, node: VNode) {
+  // if (!el || !node) return false;
+  const key1 = el.nodeName;
+  const key2 = `${node.tag || ''}`;
+  return key1.toUpperCase() === key2.toUpperCase();
+}
+
+function update(element: Element, node: VNode, isSvg: boolean) {
+  // console.assert(!!element);
+  isSvg = isSvg || node.tag === "svg";
+  if (!same(element, node)) {
+    element.parentNode.replaceChild(create(node, isSvg), element);
+    return;
+  }
+  updateChildren(element, node.children, isSvg);
+  updateProps(element, node.props, isSvg);
+}
+
+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 == null) continue;
+    const el = element.childNodes[i];
+    if (!el) continue; // Safety check for undefined childNodes
+    if (typeof child === 'string') {
+      if (el.nodeType === 3) {
+        if (el.nodeValue !== child) {
+          el.nodeValue = child;
+        }
+      } else {
+        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);
+    }
+  }
+
+  // Remove extra old nodes
+  while (element.childNodes.length > len) {
+    element.removeChild(element.lastChild);
+  }
+
+  if (new_len > len) {
+    const d = document.createDocumentFragment();
+    for (let i = len; i < children.length; i++) {
+      const child = children[i];
+      if (child != null) {
+        d.appendChild(create(child, isSvg));
+      }
+    }
+    element.appendChild(d);
+  }
+}
+
+export const safeHTML = (html: string) => {
+  const div = document.createElement('section');
+  div.insertAdjacentHTML('afterbegin', html)
+  return Array.from(div.children);
+}
+
+function createText(node) {
+  if (node?.indexOf('_html:') === 0) { // ?
+    const div = document.createElement('div');
+    div.insertAdjacentHTML('afterbegin', node.substring(6))
+    return div;
+  } else {
+    return document.createTextNode(node ?? '');
+  }
+}
+
+function create(node: VNode | string | HTMLElement | SVGElement, isSvg: boolean): Element {
+  // console.assert(node !== null && node !== undefined);
+  if ((node instanceof HTMLElement) || (node instanceof SVGElement)) return node;
+  if (typeof node === "string") return createText(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)
+    : document.createElement(node.tag);
+
+  updateProps(element, node.props, isSvg);
+  if (node.children) node.children.forEach(child => element.appendChild(create(child, isSvg)));
+  return element
+}
+
+function mergeProps(oldProps: {}, newProps: {}): {} {
+  newProps['class'] = newProps['class'] || newProps['className'];
+  delete newProps['className'];
+  const props = {};
+  if (oldProps) Object.keys(oldProps).forEach(p => props[p] = null);
+  if (newProps) Object.keys(newProps).forEach(p => props[p] = newProps[p]);
+  return props;
+}
+
+export function updateProps(element: Element, props: {}, isSvg) {
+  // console.assert(!!element);
+  const cached = element[ATTR_PROPS] || {};
+  props = mergeProps(cached, props || {});
+  element[ATTR_PROPS] = props;
+
+  for (const name in props) {
+    const value = props[name];
+    // if (cached[name] === value) continue;
+    // console.log('updateProps', name, value);
+    if (name.startsWith('data-')) {
+      const dname = name.substring(5);
+      const cname = dname.replace(/-(\w)/g, (match) => match[1].toUpperCase());
+      if (element.dataset[cname] !== value) {
+        if (value || value === "") element.dataset[cname] = value;
+        else delete element.dataset[cname];
+      }
+    } else if (name === 'style') {
+      if (element.style.cssText) element.style.cssText = '';
+      if (typeof value === 'string') element.style.cssText = value;
+      else {
+        for (const s in value) {
+          if (element.style[s] !== value[s]) element.style[s] = value[s];
+        }
+      }
+    } else if (name.startsWith('xlink')) {
+      const xname = name.replace('xlink', '').toLowerCase();
+      if (value == null || value === false) {
+        element.removeAttributeNS('http://www.w3.org/1999/xlink', xname);
+      } else {
+        element.setAttributeNS('http://www.w3.org/1999/xlink', xname, value);
+      }
+    } else if (name.startsWith('on')) {
+      if (!value || typeof value === 'function') {
+        element[name] = value;
+      } else if (typeof value === 'string') {
+        if (value) element.setAttribute(name, value);
+        else element.removeAttribute(name);
+      }
+    } else if (/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-|^for$/g.test(name) || isSvg) {
+      if (element.getAttribute(name) !== value) {
+        if (value) element.setAttribute(name, value);
+        else element.removeAttribute(name);
+      }
+    } else if (element[name] !== value) {
+      element[name] = value;
+    }
+    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));
+  }
+}
+
+function render_component(node, parent, idx) {
+  const { tag, props, children } = node;
+  let key = `_${idx}`;
+  let id = props && props['id'];
+  if (!id) id = `_${idx}${Date.now()}`;
+  else key = id;
+  let asTag = 'section';
+  if (props && props['as']) {
+    asTag = props['as'];
+    delete props['as'];
+  }
+  if (!parent.__componentCache) parent.__componentCache = {};
+  let component = parent.__componentCache[key];
+  if (!component || !(component instanceof tag) || !component.element) {
+    const element = document.createElement(asTag);
+    component = parent.__componentCache[key] = new tag({ ...props, children }).mount(element, { render: true });
+  } else {
+    component.renderState(component.state);
+  }
+  if (component.mounted) {
+    const new_state = component.mounted(props, children, component.state);
+    (typeof new_state !== 'undefined') && component.setState(new_state);
+  }
+  updateProps(component.element, props, false);
+  return component.element;
+}
+
+function createComponent(node, parent, idx = 0) {
+  if (typeof node === 'string') return node;
+  if (Array.isArray(node)) return node.map(child => createComponent(child, parent, idx++));
+  let vdom = node;
+  if (node && typeof node.tag === 'function' && Object.getPrototypeOf(node.tag).__isAppRunComponent) {
+    vdom = render_component(node, parent, idx);
+  }
+  if (vdom && Array.isArray(vdom.children)) {
+    const new_parent = vdom.props?._component;
+    if (new_parent) {
+      let i = 0;
+      vdom.children = vdom.children.map(child => createComponent(child, new_parent, i++));
+    } else {
+      vdom.children = vdom.children.map(child => createComponent(child, parent, idx++));
+    }
+  }
+  return vdom;
+}