apprun 3.38.0 → 6.0.0-rc.0

package/src/app.ts

@@ -1,173 +0,0 @@
-/**
- * Core AppRun application class and singleton instance
- *
- * This file provides:
- * 1. App class - The core event system implementation with pub/sub capabilities
- *    - 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, 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
- *    - Stored in global scope (window/global) with version tracking
- *    - Prevents duplicate instances across different versions
- *
- * Features:
- * - Event wildcards support (events ending with '*')
- * - Delayed event execution with timeout management
- * - Once-only event subscriptions
- * - Async event handling with Promise.all
- * - Global event bus shared across components
- * - Memory leak prevention with proper cleanup
- *
- * Type Safety Improvements (v3.35.1):
- * - Added validation for event handler functions
- * - Enhanced error handling in event execution
- * - Improved null checks in delayed event handling
- * - Better error reporting for invalid handlers
- *
- * Usage:
- * ```ts
- * // Subscribe to events
- * app.on('event-name', (state, ...args) => {
- *   // Handle event
- * });
- *
- * // Publish events (fire-and-forget)
- * app.run('event-name', ...args);
- * 
- * // Get return values from event handlers
- * app.runAsync('event-name', data).then(results => {
- *   // Handle results array
- * });
- * ```
- */
-
-import { EventOptions } from './types'
-import { APPRUN_VERSION_GLOBAL } from './version'
-
-export class App {
-
-  _events: { [key: string]: Array<{ fn: (...args: any[]) => any, options: EventOptions }> };
-
-  constructor() {
-    this._events = {} as { [key: string]: Array<{ fn: (...args: any[]) => any, options: EventOptions }> };
-  }
-
-  on(name: string, fn: (...args: any[]) => any, options: EventOptions = {}): void {
-    this._events[name] = this._events[name] || [];
-    this._events[name].push({ fn, options });
-  }
-
-  off(name: string, fn: (...args: any[]) => any): void {
-    const subscribers = this._events[name] || [];
-
-    this._events[name] = subscribers.filter((sub) => sub.fn !== fn);
-  }
-
-  find(name: string): any {
-    return this._events[name];
-  }
-
-  run(name: string, ...args: any[]): number {
-    const subscribers = this.getSubscribers(name, this._events);
-    console.assert(subscribers && subscribers.length > 0, 'No subscriber for event: ' + name);
-    subscribers.forEach((sub) => {
-      const { fn, options } = sub;
-      if (!fn || typeof fn !== 'function') {
-        console.error(`AppRun event handler for '${name}' is not a function:`, fn);
-        return false;
-      }
-      if (options.delay) {
-        this.delay(name, fn, args, options);
-      } else {
-        try {
-          Object.keys(options).length > 0 ? fn.apply(this, [...args, options]) : fn.apply(this, args);
-        } catch (error) {
-          console.error(`Error in event handler for '${name}':`, error);
-        }
-      }
-      return !sub.options.once;
-    });
-
-    return subscribers.length;
-  }
-
-  once(name: string, fn: (...args: any[]) => any, options: EventOptions = {}): void {
-    this.on(name, fn, { ...options, once: true });
-  }
-
-  private delay(name: string, fn: (...args: any[]) => any, args: any[], options: EventOptions): void {
-    if (options._t) clearTimeout(options._t);
-    options._t = setTimeout(() => {
-      clearTimeout(options._t);
-      try {
-        Object.keys(options).length > 0 ? fn.apply(this, [...args, options]) : fn.apply(this, args);
-      } catch (error) {
-        console.error(`Error in delayed event handler for '${name}':`, error);
-      }
-    }, options.delay);
-  }
-
-  runAsync(name: string, ...args: any[]): Promise<any[]> {
-    const subscribers = this.getSubscribers(name, this._events);
-    console.assert(subscribers && subscribers.length > 0, 'No subscriber for event: ' + name);
-    const promises = subscribers.map(sub => {
-      const { fn, options } = sub;
-      if (!fn || typeof fn !== 'function') {
-        console.error(`AppRun async event handler for '${name}' is not a function:`, fn);
-        return Promise.resolve(null);
-      }
-      try {
-        return Object.keys(options).length > 0 ? fn.apply(this, [...args, options]) : fn.apply(this, args);
-      } catch (error) {
-        console.error(`Error in async event handler for '${name}':`, error);
-        return Promise.reject(error);
-      }
-    });
-    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);
-  }
-
-  private getSubscribers(name: string, events: { [key: string]: Array<{ fn: (...args: any[]) => any, options: EventOptions }> }): Array<{ fn: (...args: any[]) => any, options: EventOptions }> {
-    const subscribers = events[name] || [];
-
-    // Update the list of subscribers by pulling out those which will run once.
-    // We must do this update prior to running any of the events in case they
-    // cause additional events to be turned off or on.
-    events[name] = subscribers.filter((sub) => {
-      return !sub.options.once;
-    });
-    Object.keys(events).filter(evt => evt.endsWith('*') && name.startsWith(evt.replace('*', '')))
-      .sort((a, b) => b.length - a.length)
-      .forEach(evt => subscribers.push(...events[evt].map(sub => ({
-        ...sub,
-        options: { ...sub.options, event: name }
-      }))));
-    return subscribers;
-  }
-}
-
-const AppRunVersions = APPRUN_VERSION_GLOBAL;
-let _app: App;
-const root = (typeof window !== 'undefined' ? window :
-  typeof global !== 'undefined' ? global :
-    typeof self !== 'undefined' ? self : {}) as any;
-
-if (root.app && root._AppRunVersions) {
-  _app = root.app;
-} else {
-  _app = new App();
-  root.app = _app;
-  root._AppRunVersions = AppRunVersions;
-}
-export default _app;

package/src/apprun-code.tsx

@@ -1,177 +0,0 @@
-import { app, Component } from './apprun';
-
-declare var CodeMirror;
-
-const styles = `
-.CodeMirror, .apprun-play iframe {
-  height: 100%;
-  border: dotted gray 1px;
-}
-
-.apprun-play {
-  height: 100%;
-  display: flex;
-  font-size: 1.1rem;
-}
-
-.apprun-play .col {
-  margin: 2px;
-}
-
-.apprun-play .editor, .apprun-play .preview {
-  width: 100%;
-  height: 100%;
-}
-`;
-
-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">
-  <title>AppRun Playground</title>
-  <style>
-    body {
-      font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
-      margin: 2em;
-    }
-  </style>
-  <script src="https://cdn.jsdelivr.net/npm/typescript@latest"></script>
-  <script src="dist/apprun-html.js"></script>
-</head>
-<body>
-<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>`;
-
-
-class Play extends Component {
-  view = ({ code, hide_code }) => {
-    return <>
-      <style>{styles}</style>
-      {hide_code ?
-        <div class="apprun-play">
-          <iframe class="preview" />
-        </div>
-        :
-        <div class="apprun-play">
-          <div class="col" style="width:75%" >
-            <textarea class="editor">{code}</textarea>
-          </div>
-          <div class="col" style="flex:1" >
-            <iframe class="preview" />
-          </div>
-        </div>}
-    </>;
-  }
-
-  mounted = props => {
-    const element = this['element'];
-    const code_id = props['code-id'];
-    const hide_code = props['hide-code'];
-    const code_width = props['code-width'];
-
-    let code_area;
-    if (code_id) {
-      code_area = document.getElementById(code_id);
-    } else {
-      code_area = element.previousElementSibling ||
-        element.parentElement.previousElementSibling;
-    }
-
-    const code = code_area?.innerText // from div
-      || code_area?.value // from textarea
-      || element.textContent // from child node
-
-    if (code_area) code_area.style.display = 'none';
-
-    return { code, hide_code, code_width };
-  }
-
-
-  rendered = ({ code, hide_code, code_width }) => {
-    const element = this['element'];
-
-    const textarea = element.querySelector(".apprun-play .editor") as any;
-    let iframe = element.querySelector('.apprun-play .preview');
-    if (!iframe || !textarea) return;
-
-    const run_code = code => {
-      const iframe_clone = iframe.cloneNode();
-      iframe.parentNode?.replaceChild(iframe_clone, iframe);
-      iframe = iframe_clone;
-      const doc = iframe.contentWindow?.document;
-      if (!doc) return;
-      doc.open();
-      if (code.indexOf('<html') >= 0)
-        doc.write(code);
-      else
-        doc.write(code_html(code));
-      doc.close();
-    }
-
-    if (code) run_code(code);
-    if (hide_code || !textarea) return;
-
-    if (code_width) textarea.parentElement.style.width = code_width;
-
-    if (typeof CodeMirror === 'undefined') {
-      textarea.onkeyup = () => run_code(textarea.value);
-    } else {
-      const editor = CodeMirror.fromTextArea(textarea, {
-        lineNumbers: true,
-        mode: 'jsx'
-      });
-      editor.setValue(code);
-      editor.on('change', (cm) => run_code(cm.getValue()));
-    }
-  }
-}
-
-app.webComponent('apprun-code', Play);

package/src/apprun-dev-tools-tests.tsx

@@ -1,101 +0,0 @@
-declare var app;
-let win;
-app['debug'] = true;
-
-function openWin(name) {
-  win = window.open('', name);
-  win.document.write(`<html>
-  <title>AppRun Analyzer | ${document.location.href}</title>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" }
-  </style>
-  <body><pre>`);
-}
-
-function write(text) {
-  win.document.write(text + '\n');
-}
-
-function closeWin() {
-  win.document.write(`</pre>
-  </body>
-  </html>`);
-  win.document.close();
-}
-
-const print_component_test = component => {
-  write(`import ${component.constructor.name} from '../src/${component.constructor.name}'`);
-  write(`describe('${component.constructor.name}', ()=>{`);
-  component._actions.forEach(action => {
-    if (action.name !== '.') {
-      write(`  it ('should handle event: ${action.name}', (done)=>{`);
-      write(`    const component = new ${component.constructor.name}().mount();`);
-      write(`    component.run('${action.name}');`);
-      write(`    setTimeout(() => {`);
-      write(`      \/\/expect(?).toHaveBeenCalled();`);
-      write(`      \/\/expect(component.state).toBe(?);`);
-      write(`    done();`);
-      write(`  })`);
-    }
-  });
-  write(`});`);
-};
-export const _createEventTests = () => {
-  const o = { components: {} };
-  app.run('get-components', o);
-  const { components } = o;
-  openWin('');
-  if (components instanceof Map) {
-    for (let [key, comps] of components) {
-      comps.forEach(print_component_test);
-    }
-  } else {
-    Object.keys(components).forEach(el => {
-      components[el].forEach(print_component_test);
-    });
-  }
-  closeWin();
-}
-
-let recording = false;
-let events = [];
-
-app.on('debug', p => {
-  if (recording && p.vdom) {
-    events.push(p);
-    console.log(`* ${events.length} state(s) recorded.`);
-  }
-});
-
-export const _createStateTests = (s) => {
-
-  const printTests = () => {
-    if (events.length === 0) {
-      console.log('* No state recorded.');
-      return;
-    }
-    openWin('');
-    events.forEach((event, idx) => {
-      write(`  it ('view snapshot: #${idx + 1}', ()=>{`);
-      write(`    const component = new ${event.component.constructor.name}()`);
-      write(`    const state = ${JSON.stringify(event.state, undefined, 2)};`);
-      write(`    const vdom = component['view'](state);`);
-      write(`    expect(JSON.stringify(vdom)).toMatchSnapshot();`);
-      write(`  })`);
-    });
-    closeWin();
-  }
-
-  if (s === 'start') {
-    events = [];
-    recording = true;
-    console.log('* State logging started.');
-  } else if (s === 'stop') {
-    printTests();
-    recording = false;
-    events = [];
-    console.log('* State logging stopped.');
-  } else {
-    console.log('create-state-tests <start|stop>');
-  }
-}