apprun 3.36.1 → 3.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apprun",
-  "version": "3.36.1",
+  "version": "3.37.0",
   "description": "JavaScript library that has Elm inspired architecture, event pub-sub and components",
   "main": "dist/apprun.js",
   "module": "esm/apprun.js",
@@ -14,7 +14,6 @@
     "jest": "jest --watch",
     "jest:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "start": "webpack serve --mode development",
-    "build:docs": "marked -i README.md -o demo/home.html & marked -i WHATSNEW.md -o demo/new.html",
     "rollup": "tsc -p src && rollup -c"
   },
   "keywords": [
@@ -45,16 +44,17 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "json-loader": "^0.5.7",
-    "lit": "^3.3.0",
+    "immer": "^10.1.1",
+    "lit": "^3.3.1",
     "marked": "^16.0.0",
-    "rollup": "^4.29.2",
-    "ts-jest": "^29.2.5",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.7.2",
-    "webpack": "^5.97.1",
+    "property-information": "^7.1.0",
+    "rollup": "^4.45.1",
+    "ts-jest": "^29.4.0",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.100.2",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0",
-    "property-information": "^7.1.0"
+    "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
     "commander": "^14.0.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

@@ -52,20 +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 basePath: string; // Base path for sub-directory deployments
-
-  public version: string;
-
   constructor() {
     this._events = {} as { [key: string]: Array<{ fn: (...args: any[]) => any, options: EventOptions }> };
   }

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

@@ -47,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 => {
@@ -75,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 : ''}
   {' '}
@@ -146,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] || [];
@@ -157,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 => {
@@ -183,7 +183,7 @@ const _events = (print?) => {
 }
 
 const _components = (print?) => {
-  const components = get_components();
+  const components = componentCache;
   const data = [];
 
   if (components instanceof Map) {
@@ -191,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);
@@ -211,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) => {
@@ -256,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,30 +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[];
-  /** @deprecated Use runAsync() instead. query() will be removed in a future version. */
-  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) {
 
@@ -127,10 +119,6 @@ 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;
 
@@ -143,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;
@@ -188,13 +181,9 @@ if (!app.start) {
     });
   }
 
-  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;
@@ -249,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;
   }

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);
+    });
+  };
+}

package/src/decorator.ts

@@ -1,4 +1,5 @@
-import webComponent, { CustomElementOptions } from './web-component';
+import { CustomElementOptions } from './types';
+import webComponent from './web-component';
 
 /**
  * TypeScript Decorators for AppRun Components

package/src/router.ts

@@ -297,11 +297,11 @@ const publishRoute = (name: string, ...args: any[]) => {
   app.run(ROUTER_EVENT, name, ...args);
 }
 
-export type Route = (url: string, ...args: any[]) => any;
+import { Router } from './types';
 
 export const ROUTER_EVENT: string = '//';
 export const ROUTER_404_EVENT: string = '///';
-export const route: Route = (url: string) => {
+export const route: Router = (url: string) => {
   if (app['lastUrl'] === url) return; // Prevent duplicate routing
   app['lastUrl'] = url;
 

package/src/shadow.tsx

@@ -1,4 +1,4 @@
-import app from './app';
+import app from './apprun';
 
 export default (_, children) => {
   const el = document.createElement('section');

package/src/tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
-		"target": "es2017",
-		"module": "es2015",
+		"target": "es2020",
+		"module": "esnext",
 		"moduleResolution": "node",
 		"jsx": "react",
 		"jsxFactory": "app.h",