apprun 3.36.0 → 3.37.0

package/src/add-components.ts

@@ -0,0 +1,103 @@
+import { ComponentRoute, IApp } from './types';
+import app from './app'; // ADD: Global app instance access
+
+// Type guard functions using the enhanced type system
+function isComponentInstance(obj: any): boolean {
+  return obj && typeof obj === 'object' && typeof obj.mount === 'function';
+}
+
+function isComponentConstructor(fn: any): boolean {
+  return typeof fn === 'function' &&
+    fn.prototype &&
+    fn.prototype.constructor === fn &&
+    (fn.prototype.mount !== undefined ||
+      fn.prototype.state !== undefined ||
+      fn.prototype.view !== undefined);
+}
+
+function isFactoryFunction(fn: any): boolean {
+  return typeof fn === 'function' && !isComponentConstructor(fn);
+}
+
+// Recursive function resolution with enhanced type checking
+async function resolveComponent(component: any, maxDepth = 3): Promise<any> {
+  let resolved = component;
+  let depth = 0;
+
+  while (isFactoryFunction(resolved) && depth < maxDepth) {
+    try {
+      const result = await resolved();
+      if (result === resolved) break; // Prevent infinite loops
+      resolved = result;
+      depth++;
+    } catch (error) {
+      console.error(`Error executing component function: ${error}`);
+      break;
+    }
+  }
+
+  return resolved;
+}
+
+export default async (element: HTMLElement | string, components: ComponentRoute) => {
+  for (const [route, component] of Object.entries(components)) {
+    if (!component || !route) {
+      console.error(`Invalid component configuration: component=${component}, route=${route}`);
+      continue;
+    }
+
+    // Check if it's a direct component instance
+    if (isComponentInstance(component)) {
+      const options = { route };
+      (component as any).mount(element, options);
+      continue;
+    }
+
+    // Check if it's a component class constructor
+    if (isComponentConstructor(component)) {
+      const instance = new (component as any)();
+      const options = { route };
+      instance.mount(element, options);
+      continue;
+    }
+
+    // At this point it must be a function - resolve it
+    if (isFactoryFunction(component)) {
+      // Resolve the function to see what it returns
+      let resolved = await resolveComponent(component);
+
+      // Check if resolved result is a component instance
+      if (isComponentInstance(resolved)) {
+        const options = { route };
+        resolved.mount(element, options);
+        continue;
+      }
+
+      // Check if resolved result is a component constructor
+      if (isComponentConstructor(resolved)) {
+        const instance = new resolved();
+        const options = { route };
+        instance.mount(element, options);
+        continue;
+      }
+
+      // If resolved result is still a function or anything else, treat original as event handler with render wrapper
+      app.on(route, (...args: any[]) => {
+        const result = (component as any)(...args);
+        if (typeof element === 'string') {
+          element = document.querySelector(element) as HTMLElement;
+          if (!element) {
+            console.error(`Element not found: ${element}`);
+            return;
+          }
+        }
+        return (app as unknown as IApp).render(element, result);
+      });
+      continue;
+    }
+
+    // If we get here, it's an invalid component type
+    console.error(`Invalid component: component must be a class, instance, or function that returns a class/instance`);
+  }
+}
+

package/src/app.ts

@@ -6,8 +6,8 @@
  *    - on(): Subscribe to events with options (once, delay, global)
  *    - off(): Unsubscribe from events with proper cleanup
  *    - run(): Publish events synchronously with error handling
- *    - runAsync(): Publish events asynchronously with Promise support
- *    - query(): Alias for runAsync for backward compatibility
+ *    - runAsync(): Publish events asynchronously with Promise support, returns handler values
+ *    - query(): Deprecated alias for runAsync() - use runAsync() instead
  *
  * 2. Default app singleton - Global event bus instance
  *    - Created once and reused across the application
@@ -35,12 +35,12 @@
  *   // Handle event
  * });
  *
- * // Publish events
+ * // Publish events (fire-and-forget)
  * app.run('event-name', ...args);
  * 
- * // Async events
- * app.runAsync('async-event', data).then(results => {
- *   // Handle results
+ * // Get return values from event handlers
+ * app.runAsync('event-name', data).then(results => {
+ *   // Handle results array
  * });
  * ```
  */
@@ -52,19 +52,6 @@ export class App {
 
   _events: { [key: string]: Array<{ fn: (...args: any[]) => any, options: EventOptions }> };
 
-  public start: any;
-  public h: any;
-  public createElement: any;
-  public render: any;
-  public Fragment: any;
-  public webComponent: any;
-  public safeHTML: any;
-  public use_render: any;
-  public use_react: any;
-  public route: any;
-
-  public version: string;
-
   constructor() {
     this._events = {} as { [key: string]: Array<{ fn: (...args: any[]) => any, options: EventOptions }> };
   }
@@ -143,7 +130,11 @@ export class App {
     return Promise.all(promises);
   }
 
+  /**
+   * @deprecated Use runAsync() instead. app.query() will be removed in a future version.
+   */
   query(name: string, ...args: any[]): Promise<any[]> {
+    console.warn('app.query() is deprecated. Use app.runAsync() instead.');
     return this.runAsync(name, ...args);
   }
 

package/src/apprun-code.tsx

@@ -11,6 +11,7 @@ const styles = `
 .apprun-play {
   height: 100%;
   display: flex;
+  font-size: 1.1rem;
 }
 
 .apprun-play .col {
@@ -23,13 +24,20 @@ const styles = `
 }
 `;
 
+const encodeHTML = code => {
+  return code.replace(/&/g, '&')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+  .replace(/'/g, '&#039;');
+}
+
 const code_html = code => `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
   <title>AppRun Playground</title>
   <style>
     body {
@@ -37,17 +45,47 @@ const code_html = code => `<!DOCTYPE html>
       margin: 2em;
     }
   </style>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-  <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/typescript@latest"></script>
+  <script src="dist/apprun-html.js"></script>
 </head>
 <body>
-<script>
-  Babel.registerPlugin("d", [Babel.availablePlugins["proposal-decorators"], {legacy: true}]);
-  Babel.registerPlugin("c", [Babel.availablePlugins["proposal-class-properties"], {loose: true}]);
-  Babel.registerPlugin("b", [Babel.availablePlugins["proposal-private-methods"], {loose: true}]);
-</script>
-<script type="text/babel" data-plugins="d, c, b">
-  ${code}
+<pre id="code" style="display:none">${encodeHTML(code)}</pre>
+<script type="module">
+const code = document.getElementById('code').innerText;
+const compiled = ts.transpileModule(code, {
+  compilerOptions: {
+    "jsx": "react",
+    "jsxFactory": "app.h",
+    "jsxFragmentFactory": "app.Fragment",
+    "target": "es2020",
+    "module": "esnext",
+  },
+  reportDiagnostics: true,
+});
+
+if (compiled.diagnostics && compiled.diagnostics.length) {
+  const pre = document.createElement('pre');
+  pre.style = 'font-size: 10px;';
+  pre.innerText = compiled.diagnostics.map(d => {
+    const start = d.start;
+    const end = d.start + d.length;
+    const line = code.substring(0, end).split('\\n').length;
+    const column = code.substring(0, end).split('\\n').pop().length;
+    return \`Line: \${line}, Column: \${column}, \${d.messageText}\`;
+  }).join('\\n');
+  document.body.appendChild(pre);
+} else {
+  window.onerror = function () {
+    const pre = document.createElement('pre');
+    pre.style = 'font-size: 10px;';
+    pre.innerText = compiled.outputText;;
+    document.body.appendChild(pre);
+  };
+  const script = document.createElement('script');
+  script.type = 'module';
+  script.text = compiled.outputText;
+  document.body.appendChild(script);
+}
 </script>
 </body>
 </html>`;

package/src/apprun-dev-tools.tsx

@@ -1,12 +1,6 @@
 import app from './app';
 import toHTML from './vdom-to-html';
 import { _createEventTests, _createStateTests } from './apprun-dev-tools-tests';
-import yaml from 'js-yaml';
-
-function replacer(key, value) {
-  if (typeof value === 'function') return value.toString(); // value.toString();
-  return ['', null].includes(value) || (typeof value === 'object' && (value.length === 0 || Object.keys(value).length === 0)) ? undefined : value;
-}
 
 function createProxy(obj) {
   const handler = {
@@ -53,7 +47,17 @@ function getVDOM(component) {
   return view;
 }
 
+const componentCache = new Map();
 app['debug'] = true;
+app.on('debug-create-component', component => {
+  const element = component.element;
+  if (!element) {
+    console.warn('Component created without an element:', component);
+    return;
+  }
+  if (componentCache.get(element)) { componentCache.get(element).push(component) }
+  else { componentCache.set(element, [component]) }
+});
 
 window['_apprun-help'] = ['', () => {
   Object.keys(window).forEach(cmd => {
@@ -81,12 +85,6 @@ function newWin(html) {
   win.document.close();
 }
 
-const get_components = () => {
-  const o = { components: {} };
-  app.run('get-components', o);
-  const { components } = o;
-  return components;
-}
 const viewElement = element => <div>
   {element.tagName.toLowerCase()}{element.id ? '#' + element.id : ''}
   {' '}
@@ -109,7 +107,7 @@ const viewComponents = state => {
 
       return <li>
         <div>{component.constructor.name}</div>
-        <div><pre>{htmlEncode(yaml.dump(component_def, { replacer }))}</pre></div>
+        <div><pre>{htmlEncode(JSON.stringify(component_def, null, 2))}</pre></div>
         <br />
       </li>;
 
@@ -152,7 +150,7 @@ const viewEvents = state => {
 const _events = (print?) => {
   const global_events = app['_events']
   const events = {};
-  const cache = get_components();
+  const cache = componentCache;
 
   const add_component = component => component['_actions'].forEach(event => {
     events[event.name] = events[event.name] || [];
@@ -163,10 +161,6 @@ const _events = (print?) => {
     for (let [key, comps] of cache) {
       comps.forEach(add_component);
     }
-  } else {
-    Object.keys(cache).forEach(el =>
-      cache[el].forEach(add_component)
-    );
   }
   const data = [];
   Object.keys(events).forEach(event => {
@@ -189,7 +183,7 @@ const _events = (print?) => {
 }
 
 const _components = (print?) => {
-  const components = get_components();
+  const components = componentCache;
   const data = [];
 
   if (components instanceof Map) {
@@ -197,11 +191,6 @@ const _components = (print?) => {
       const element = typeof key === 'string' ? document.getElementById(key) || document.querySelector(key) : key;
       data.push({ element, comps });
     }
-  } else {
-    Object.keys(components).forEach(el => {
-      const element = typeof el === 'string' ? document.getElementById(el) || document.querySelector(el) : el;
-      data.push({ element, comps: components[el] });
-    });
   }
   if (print) {
     const vdom = viewComponents(data);
@@ -217,8 +206,15 @@ app.on('debug', p => {
   if (debugging & 2 && p.vdom) console.log(p);
 });
 
-window['_apprun-components'] = ['components [print]', (p) => {
-  _components(p === 'print');
+window['_apprun-components'] = ['components [print|clear]', (p) => {
+  if (p === 'print') {
+    _components(true);
+  } else if (p === 'clear') {
+    componentCache.clear();
+    console.log('Component cache cleared');
+  } else {
+    _components(false);
+  }
 }]
 
 window['_apprun-events'] = ['events [print]', (p) => {
@@ -262,7 +258,7 @@ window['_apprun'] = (strings) => {
   else window['_apprun-help'][1]();
 }
 
-console.info('AppRun DevTools 2.27: type "_apprun `help`" to list all available commands.');
+console.info('AppRun DevTools 3.36: type "_apprun `help`" to list all available commands.');
 
 const reduxExt = window['__REDUX_DEVTOOLS_EXTENSION__'];
 if (reduxExt) {

package/src/apprun-play.tsx

@@ -92,13 +92,20 @@ a.button:hover {
 	</div>
 </div>`;
 
+const encodeHTML = code => {
+  return code.replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+  .replace(/'/g, '&#039;');
+}
+
 const code_html = code => `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
   <title>AppRun Playground</title>
   <style>
     body {
@@ -106,17 +113,47 @@ const code_html = code => `<!DOCTYPE html>
       margin: 2em;
     }
   </style>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/typescript@latest"></script>
   <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
 </head>
 <body>
-<script>
-  Babel.registerPlugin("d", [Babel.availablePlugins["proposal-decorators"], {legacy: true}]);
-  Babel.registerPlugin("c", [Babel.availablePlugins["proposal-class-properties"], {loose: true}]);
-  Babel.registerPlugin("b", [Babel.availablePlugins["proposal-private-methods"], {loose: true}]);
-</script>
-<script type="text/babel" data-plugins="d, c, b">
-  ${code}
+<pre id="code" style="display:none">${encodeHTML(code)}</pre>
+<script type="module">
+const code = document.getElementById('code').innerText;
+const compiled = ts.transpileModule(code, {
+  compilerOptions: {
+    "jsx": "react",
+    "jsxFactory": "app.h",
+    "jsxFragmentFactory": "app.Fragment",
+    "target": "es2020",
+    "module": "esnext",
+  },
+  reportDiagnostics: true,
+});
+
+if (compiled.diagnostics && compiled.diagnostics.length) {
+  const pre = document.createElement('pre');
+  pre.style = 'font-size: 10px;';
+  pre.innerText = compiled.diagnostics.map(d => {
+    const start = d.start;
+    const end = d.start + d.length;
+    const line = code.substring(0, end).split('\\n').length;
+    const column = code.substring(0, end).split('\\n').pop().length;
+    return \`Line: \${line}, Column: \${column}, \${d.messageText}\`;
+  }).join('\\n');
+  document.body.appendChild(pre);
+} else {
+  window.onerror = function () {
+    const pre = document.createElement('pre');
+    pre.style = 'font-size: 10px;';
+    pre.innerText = compiled.outputText;;
+    document.body.appendChild(pre);
+  };
+  const script = document.createElement('script');
+  script.type = 'module';
+  script.text = compiled.outputText;
+  document.body.appendChild(script);
+}
 </script>
 </body>
 </html>`;

package/src/apprun.ts

@@ -10,6 +10,7 @@
  *    - Router with improved null safety
  *    - Web component support
  *    - Type-safe React integration
+ *    - Component batch mounting system
  *
  * Key exports:
  * - app: Global event system instance
@@ -26,6 +27,7 @@
  * - Web Components integration
  * - React compatibility layer
  * - TypeScript support with strong typing
+ * - Batch component mounting with addComponents(element, components)
  *
  * Type Safety Improvements (v3.35.1):
  * - Added null checks for DOM event targets
@@ -34,6 +36,10 @@
  * - Better error handling for invalid event handlers
  * - Safer element access with proper type assertions
  *
+ * Recent Changes:
+ * - 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
+ *
  * Usage:
  * ```ts
  * import { app, Component } from 'apprun';
@@ -46,16 +52,23 @@
  *     'event': (state, ...args) => // Handle events
  *   }
  * }
+ *
+ * // Mount multiple components
+ * app.addComponents(document.body, {
+ *   '/home': MyComponent,
+ *   '/about': AnotherComponent
+ * });
  * ```
  */
 
-import app, { App } from './app';
+import _app, { App } from './app';
 import { createElement, render, Fragment, safeHTML } from './vdom';
 import { Component } from './component';
-import { VNode, View, Action, Update, EventOptions, ActionOptions, MountOptions, AppStartOptions } from './types';
+import { IApp, VNode, View, Action, Update, EventOptions, ActionOptions, MountOptions, AppStartOptions, CustomElementOptions } from './types';
 import { on, update, customElement } from './decorator';
-import webComponent, { CustomElementOptions } from './web-component';
-import { Route, route, ROUTER_EVENT, ROUTER_404_EVENT } from './router';
+import { route, ROUTER_EVENT, ROUTER_404_EVENT } from './router';
+import webComponent from './web-component';
+import addComponents from './add-components';
 import { APPRUN_VERSION } from './version';
 
 export type StatelessComponent<T = {}> = (args: T) => string | VNode | void;
@@ -64,6 +77,9 @@ type OnDecorator = {
   <E = string>(events?: E, options?: any): (target: any, key: string) => void;
 };
 
+const app: IApp = _app as unknown as IApp;
+export default app as IApp;
+
 export {
   App,
   app,
@@ -82,29 +98,6 @@ export {
 export { update as event };
 export { ROUTER_EVENT, ROUTER_404_EVENT };
 export { customElement, CustomElementOptions, AppStartOptions };
-export default app as IApp;
-
-export interface IApp {
-  start<T, E = any>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
-    options?: AppStartOptions<T>): Component<T, E>;
-  on(name: string, fn: (...args: any[]) => void, options?: any): void;
-  once(name: string, fn: (...args: any[]) => void, options?: any): void;
-  off(name: string, fn: (...args: any[]) => void): void;
-  run(name: string, ...args: any[]): number;
-  find(name: string): any | any[];
-  query(name: string, ...args: any[]): Promise<any[]>;
-  runAsync(name: string, ...args: any[]): Promise<any[]>;
-  h(tag: string | Function, props, ...children): VNode | VNode[];
-  createElement(tag: string | Function, props, ...children): VNode | VNode[];
-  render(element: Element | string, node: VNode): void;
-  Fragment(props, ...children): any[];
-  route?: Route;
-  webComponent(name: string, componentClass, options?: CustomElementOptions): void;
-  safeHTML(html: string): any[];
-  use_render(render, mode?: 0 | 1);
-  use_react(React, ReactDOM);
-  version: string;
-}
 
 if (!app.start) {
 
@@ -126,14 +119,11 @@ if (!app.start) {
     return component;
   };
 
-  app.once = app.once || ((name: string, fn: (...args: any[]) => void, options: any = {}) => {
-    app.on(name, fn, { ...options, once: true });
-  });
-
+  // Deprecated: app.query is deprecated in favor of app.runAsync
   app.query = app.query || app.runAsync;
 
   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);
@@ -141,6 +131,11 @@ if (!app.start) {
   app.on('route', url => app['route'] && app['route'](url));
 
   if (typeof document === 'object') {
+    let basePath = location.pathname;
+    if (basePath.endsWith('/')) {
+      basePath = basePath.slice(0, -1);
+    }
+    app.basePath = basePath;
     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;
@@ -152,7 +147,18 @@ if (!app.start) {
       if (use_hash) {
         !no_init_route && route(location.hash);
       } else {
-        !no_init_route && route(location.pathname);
+        !no_init_route && (() => {
+          const basePath = app.basePath || '';
+          let initialPath = location.pathname;
+
+          // Strip base path if present
+          if (basePath && initialPath.startsWith(basePath)) {
+            initialPath = initialPath.substring(basePath.length);
+            if (!initialPath.startsWith('/')) initialPath = '/' + initialPath;
+          }
+
+          route(initialPath);
+        })();
         document.body.addEventListener('click', e => {
           const element = e.target as HTMLElement;
           if (!element) return;
@@ -162,21 +168,22 @@ if (!app.start) {
             menu.origin === location.origin &&
             menu.pathname) {
             e.preventDefault();
-            history.pushState(null, '', menu.pathname);
-            route(menu.pathname);
+
+            // Handle base path for navigation
+            const basePath = app.basePath || '';
+            const fullPath = basePath + menu.pathname;
+
+            history.pushState(null, '', fullPath);
+            route(menu.pathname); // Route with relative path (without base path)
           }
         });
       }
     });
   }
 
-  type ComponentType = typeof Component & {
-    <T = any>(options?: any): (constructor: Function) => void;
-  };
-
   if (typeof window === 'object') {
     const globalWindow = window as any;
-    globalWindow['Component'] = Component as ComponentType;
+    globalWindow['Component'] = Component;
     globalWindow['_React'] = globalWindow['React'];
     globalWindow['React'] = app;
     globalWindow['on'] = on as OnDecorator;
@@ -231,4 +238,6 @@ if (!app.start) {
       app.render = (el, vdom) => ReactDOM.render(vdom, el);
     }
   }
+
+  app.addComponents = addComponents;
 }

package/src/component.ts

@@ -51,16 +51,20 @@
  * ```
  */
 
-import app, { App } from './app';
+import _app, { App } from './app';
+
+
 import { Reflect } from './decorator'
-import { View, Update, ActionDef, ActionOptions, MountOptions, EventOptions } from './types';
+import { View, Update, ActionDef, ActionOptions, MountOptions, EventOptions, IApp } from './types';
 import directive from './directive';
 import { safeQuerySelector, safeGetElementById } from './type-utils';
 
-const componentCache = new Map();
-if (!app.find('get-components')) app.on('get-components', o => o.components = componentCache);
+// const componentCache = new Map();
+// if (!app.find('get-components')) app.on('get-components', o => o.components = componentCache);
+
+export const REFRESH = state => state;
 
-const REFRESH = state => state;
+const app = _app as unknown as IApp;
 
 export class Component<T = any, E = any> {
   static __isAppRunComponent = true;
@@ -244,9 +248,8 @@ export class Component<T = any, E = any> {
 
     this.setState(this.state, { render: !!options.render, history: true });
 
-    if (app['debug']) {
-      if (componentCache.get(element)) { componentCache.get(element).push(this) }
-      else { componentCache.set(element, [this]) }
+    if (app['debug'] && app.find('debug-create-component')?.length) {
+      app.run('debug-create-component', this);
     }
     return this;
   }
@@ -367,7 +370,11 @@ export class Component<T = any, E = any> {
   }
 
   // obsolete
+  /**
+   * @deprecated Use runAsync() instead. query() will be removed in a future version.
+   */
   public query(event: E, ...args) {
+    console.warn('component.query() is deprecated. Use component.runAsync() instead.');
     return this.runAsync(event, ...args);
   }
 

package/src/createState.ts

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