arcane-os 0.2.3 → 0.3.0

package/runtime/arcane/modules/DBLS.js

@@ -2,8 +2,22 @@ import {
     APP_LOCAL_STORAGE_PREFIX,
     resolveBrowserApplicationId
 } from './AppDataScope.js';
+import {
+    createArcaneEventSource,
+    projectArcaneDOMEvent
+} from 'arcane-os/event-manager';
+
+const PUBLISH_DBLS_READY=Symbol('publish-dbls-ready');
+export const DBLS_EVENT_TYPES=Object.freeze({
+    ready:'dbls-ready'
+});
+export const DBLS_REASONS=Object.freeze({
+    ready:'local-storage-adapter-ready'
+});
 
 class DBLS {
+    #events;
+
     constructor({
         applicationId=null,
         documentObject=globalThis.document,
@@ -27,6 +41,10 @@ class DBLS {
         });
         this.storage=storage;
         this.storagePrefix=`${APP_LOCAL_STORAGE_PREFIX}${this.applicationId}:`;
+        this.#events=createArcaneEventSource(this,{
+            source:'dbls',
+            eventTypes:Object.freeze(Object.values(DBLS_EVENT_TYPES))
+        });
     }
 
     ready=false;
@@ -153,19 +171,34 @@ class DBLS {
     count() {
         return this.logicalKeys().length;
     }
+
+    [PUBLISH_DBLS_READY](){
+        const detail=Object.freeze({
+            dbls:this,
+            applicationId:this.applicationId,
+            reason:DBLS_REASONS.ready
+        });
+        const {occurrence}=this.#events.dispatch(
+            DBLS_EVENT_TYPES.ready,
+            detail,
+            {
+                operationId:`dbls-ready-${this.#events.instanceId}`,
+                publicDetail:Object.freeze({
+                    applicationId:this.applicationId,
+                    ready:true,
+                    reason:DBLS_REASONS.ready
+                })
+            }
+        );
+        projectArcaneDOMEvent(window,occurrence);
+    }
 }
 
 if(typeof window.dbls?.get !== "function"){
     window.dbls=new DBLS();
     window.dbls.ready=true;
 
-    const dblsReady=new CustomEvent(
-        'dbls-ready', {
-            detail: { dbls: window.dbls }
-        }
-    );
-
-    window.dispatchEvent(dblsReady);
+    window.dbls[PUBLISH_DBLS_READY]();
 }
 
 export default DBLS;

package/runtime/arcane/modules/DBOPFS.js

@@ -1,7 +1,18 @@
 import Is from "../../node_modules/strong-type/index.js";
 import {openApplicationDataDirectory} from './AppDataScope.js';
+import {
+    createArcaneEventSource,
+    projectArcaneDOMEvent
+} from 'arcane-os/event-manager';
 const is=new Is(false);
 
+export const DBOPFS_EVENT_TYPES=Object.freeze({
+    ready:'dbopfs-ready'
+});
+export const DBOPFS_REASONS=Object.freeze({
+    ready:'opfs-database-ready'
+});
+
 const DEFAULT_TABLE_DIRECTORIES=Object.freeze({
     users:'users',
     scores:'scores',
@@ -94,6 +105,8 @@ if(navigator.storage?.persist){
  */
 class DBOPFS {
 
+    #events;
+
     /** @type {FileSystemDirectoryHandle|Object} */
     #db={}
 
@@ -270,6 +283,10 @@ class DBOPFS {
             return window.dbopfs;
         }
 
+        this.#events=createArcaneEventSource(this,{
+            source:'dbopfs',
+            eventTypes:Object.freeze(Object.values(DBOPFS_EVENT_TYPES))
+        });
         this.readyPromise=this.#init(options);
     }
 
@@ -294,18 +311,25 @@ class DBOPFS {
 
         this.ready=true;
 
-        window.dispatchEvent(
-            new CustomEvent(
-                'dbopfs-ready',
-                {
-                    detail:{
-                        dbopfs:this,
-                        applicationId:this.#applicationId,
-                        storagePath:this.#storagePath
-                    }
-                }
-            )
+        const {occurrence}=this.#events.dispatch(
+            DBOPFS_EVENT_TYPES.ready,
+            Object.freeze({
+                dbopfs:this,
+                applicationId:this.#applicationId,
+                storagePath:this.#storagePath,
+                reason:DBOPFS_REASONS.ready
+            }),
+            {
+                operationId:`dbopfs-ready-${this.#events.instanceId}`,
+                publicDetail:Object.freeze({
+                    applicationId:this.#applicationId,
+                    ready:true,
+                    reason:DBOPFS_REASONS.ready,
+                    storagePath:this.#storagePath
+                })
+            }
         );
+        projectArcaneDOMEvent(window,occurrence);
     }
 
     async #createDefaultTables(){

package/runtime/arcane/modules/DataMaintenance.js

@@ -1,6 +1,7 @@
 import './DBOPFS.js';
 import {hasUserEntry} from './ChatRecords.js';
 import {hasMemoryContent} from './MemoryRecords.js';
+import {arcaneEvents} from 'arcane-os/event-manager';
 
 async function clearEmptyChatsAndMemories(){
     await waitForDBOPFS();
@@ -70,12 +71,21 @@ function waitForDBOPFS(){
 
     return new Promise(
         function waitForDBOPFSPromise(resolve){
+            let settled=false;
+            let unsubscribe;
             function ready(){
-                window.removeEventListener('dbopfs-ready',ready);
+                if(settled||window.dbopfs?.ready!==true){
+                    return;
+                }
+                settled=true;
+                unsubscribe?.();
                 resolve(window.dbopfs);
             }
 
-            window.addEventListener('dbopfs-ready',ready);
+            unsubscribe=arcaneEvents.subscribe(
+                'dbopfs-ready',
+                ready
+            );
 
             if(window.dbopfs?.ready){
                 ready();

package/runtime/arcane/modules/Errors.js

@@ -1,4 +1,8 @@
 import waitForComponent from './WaitForComponent.js';
+import {
+    arcaneEvents,
+    createArcaneEventSource
+} from 'arcane-os/event-manager';
 
 const DEFAULT_DELAY_MS=2_000;
 const DEFAULT_MAX_REPORTS_PER_SESSION=10;
@@ -10,6 +14,19 @@ const MAX_DETAIL_LENGTH=8_000;
 const HANDLER_MARKER=Symbol.for('arcane.global-errors.handler');
 const DEVELOPER_MODAL_HREF=new URL('../components/modal.html?v=13',import.meta.url).href;
 
+export const GLOBAL_ERROR_EVENT_TYPES=Object.freeze({
+    browserErrorCaptured:'arcane-error-captured',
+    unhandledRejectionCaptured:'arcane-unhandled-rejection-captured'
+});
+export const GLOBAL_ERROR_EVENT_CODES=Object.freeze({
+    browserErrorCaptured:'ARCANE_BROWSER_ERROR_CAPTURED',
+    unhandledRejectionCaptured:'ARCANE_UNHANDLED_REJECTION_CAPTURED'
+});
+export const GLOBAL_ERROR_REASONS=Object.freeze({
+    browserErrorCaptured:'browser-error-captured',
+    unhandledRejectionCaptured:'unhandled-promise-rejection-captured'
+});
+
 const MESSAGE_STYLE=[
     'Write a simple plain-text email showing the error and, when the available details support it, a possible solution.',
     'If loop_detected or error_storm_detected is true, put that warning first and clearly state that further notifications have been suppressed.',
@@ -374,6 +391,12 @@ async function presentDeveloperIncidentModal(target,incident,fingerprint){
 }
 
 class Errors {
+    #events;
+
+    #operationSequence=0;
+
+    #stopUserLoaded=null;
+
     constructor(options={}) {
         const target=options.target||globalThis.window;
         if(!target||typeof target.addEventListener!=='function'){
@@ -384,6 +407,13 @@ class Errors {
             return target.errors;
         }
 
+        this.#events=createArcaneEventSource(this,{
+            source:'global-error-handler',
+            eventTypes:Object.freeze([
+                GLOBAL_ERROR_EVENT_TYPES.browserErrorCaptured,
+                GLOBAL_ERROR_EVENT_TYPES.unhandledRejectionCaptured
+            ])
+        });
         this[HANDLER_MARKER]=true;
         this.target=target;
         this.delayMs=options.delayMs??DEFAULT_DELAY_MS;
@@ -674,17 +704,15 @@ class Errors {
         }
 
         this.waitingForUser=true;
-        this.target.addEventListener(
+        this.#stopUserLoaded=arcaneEvents.subscribe(
             'user-entity-loaded',
-            this.onUserLoaded
+            this.onUserLoaded,
+            {once:true}
         );
     }
 
     onUserLoaded(){
-        this.target.removeEventListener(
-            'user-entity-loaded',
-            this.onUserLoaded
-        );
+        this.#stopUserLoaded=null;
         this.waitingForUser=false;
 
         const deferred=this.deferredDeveloperIncident;
@@ -754,6 +782,33 @@ class Errors {
             return false;
         }
 
+        const incidentKind=incident?.type==='unhandledrejection'
+            ?'unhandled-promise-rejection'
+            :'browser-error';
+        const eventType=incidentKind==='unhandled-promise-rejection'
+            ?GLOBAL_ERROR_EVENT_TYPES.unhandledRejectionCaptured
+            :GLOBAL_ERROR_EVENT_TYPES.browserErrorCaptured;
+        const code=incidentKind==='unhandled-promise-rejection'
+            ?GLOBAL_ERROR_EVENT_CODES.unhandledRejectionCaptured
+            :GLOBAL_ERROR_EVENT_CODES.browserErrorCaptured;
+        const reason=incidentKind==='unhandled-promise-rejection'
+            ?GLOBAL_ERROR_REASONS.unhandledRejectionCaptured
+            :GLOBAL_ERROR_REASONS.browserErrorCaptured;
+        this.#operationSequence+=1;
+        this.#events.dispatch(
+            eventType,
+            Object.freeze({...incident,code,fingerprint,reason}),
+            {
+                operationId:`global-error-handler-${this.#events.instanceId}-${this.#operationSequence.toString(36)}`,
+                publicDetail:Object.freeze({
+                    id:fingerprint,
+                    code,
+                    kind:incidentKind,
+                    reason
+                })
+            }
+        );
+
         this.offerDeveloperIncident(incident,fingerprint);
 
         if(this.circuitOpen){
@@ -976,7 +1031,8 @@ class Errors {
         this.destroyed=true;
         this.target.removeEventListener('error',this.onError,true);
         this.target.removeEventListener('unhandledrejection',this.onRejection,true);
-        this.target.removeEventListener('user-entity-loaded',this.onUserLoaded);
+        this.#stopUserLoaded?.();
+        this.#stopUserLoaded=null;
         this.waitingForUser=false;
         this.deferredDeveloperIncident=null;
 
@@ -1015,6 +1071,8 @@ class Errors {
                 this.target.errors=undefined;
             }
         }
+
+        this.#events.dispose();
     }
 }
 

package/runtime/arcane/modules/HTMLImport.js

@@ -1,3 +1,8 @@
+import {
+  createArcaneEventSource,
+  projectArcaneDOMEvent
+} from 'arcane-os/event-manager';
+
 const htmlImportHostRegistryKey=Symbol.for('arcane.html-import.hosts');
 const htmlImportHostRegistry=globalThis[htmlImportHostRegistryKey] instanceof Map
   ?globalThis[htmlImportHostRegistryKey]
@@ -7,7 +12,24 @@ globalThis[htmlImportHostRegistryKey]=htmlImportHostRegistry;
 
 let htmlImportScriptId=0;
 
+function samePropertyDescriptor(left,right){
+  if(!left||!right)return left===right;
+  return left.configurable===right.configurable
+    &&left.enumerable===right.enumerable
+    &&left.writable===right.writable
+    &&left.value===right.value
+    &&left.get===right.get
+    &&left.set===right.set;
+}
+
 class HTMLImport extends HTMLElement {
+  #connectionGeneration=0;
+  #eventOwner=Object.freeze({kind:'html-import-lifecycle-owner'});
+  #events;
+  #importedDestroy=null;
+  #loadController=null;
+  #loadTask=Promise.resolve();
+
   ready=false;
 
   constructor() {
@@ -15,12 +37,40 @@ class HTMLImport extends HTMLElement {
       this.attachShadow({ mode: 'open' });
   }
 
-  async connectedCallback() {
+  #createEvents(){
+      this.#events=createArcaneEventSource(this.#eventOwner,{
+        source:'html-import',
+        eventTypes:Object.freeze([
+          'html-import-error',
+          'html-import-ready'
+        ])
+      });
+      return this.#events;
+  }
+
+  connectedCallback() {
+    const generation=++this.#connectionGeneration;
+    const controller=new AbortController();
     this.ready=false;
+    this.#loadController?.abort('html-import-load-superseded');
+    this.#loadController=controller;
+    const previous=this.#loadTask;
+    const task=Promise.resolve(previous)
+      .catch(()=>{})
+      .then(()=>this.#connect(generation,controller));
+    this.#loadTask=task;
+    return task;
+  }
+
+  async #connect(generation,controller){
+    if(!this.#isCurrentConnection(generation,controller))return;
+    if(!this.#events||this.#events.disposed)this.#createEvents();
     const href=this.getAttribute('href');
     let resolvedHref='';
+    const operationId=`html-import-load-${this.#events.instanceId}-${generation}`;
     if(!href){
       console.log('no href provided for html-import tag',this);
+      this.#loadController=null;
       return;
     }
 
@@ -35,46 +85,167 @@ class HTMLImport extends HTMLElement {
         cache:'default',
         credentials:'same-origin',
         method:'GET',
-        redirect:'error'
+        redirect:'error',
+        signal:controller.signal
       });
-      await this.#loadHTML(href,resolvedHref,response);
+      if(!this.#isCurrentConnection(generation,controller))return;
+      await this.#loadHTML(href,resolvedHref,response,generation,controller,operationId);
     }catch(err){
+      if(!this.#isCurrentConnection(generation,controller)){
+        await this.#destroyImportedHost();
+        return;
+      }
       console.error('Error loading HTML component:',err);
-      this.dispatchEvent(new CustomEvent('html-import-error',{
-        bubbles:true,
-        composed:true,
-        detail:{
+      const detail=Object.freeze({
           code:'HTML_IMPORT_FAILED',
           href,
           message:'The component could not be loaded.',
+          reason:'component-import-rejected',
           resolvedHref
+      });
+      const {occurrence}=this.#events.dispatch(
+        'html-import-error',
+        detail,
+        {
+          operationId,
+          publicDetail:Object.freeze({code:detail.code,reason:detail.reason})
         }
-      }));
+      );
+      projectArcaneDOMEvent(this,occurrence,{
+        bubbles:true,
+        composed:true
+      });
+      await this.#destroyImportedHost();
+    }finally{
+      if(this.#loadController===controller)this.#loadController=null;
+    }
+  }
+
+  disconnectedCallback(){
+    this.ready=false;
+    ++this.#connectionGeneration;
+    this.#loadController?.abort('html-import-disconnected');
+    this.#loadController=null;
+    const events=this.#events;
+    const previous=this.#loadTask;
+    const immediateTeardown=this.#destroyImportedHost();
+    const task=Promise.allSettled([previous,immediateTeardown]).then(()=>{
+      events?.dispose();
+      if(this.#events===events)this.#events=null;
+    });
+    this.#loadTask=task;
+    return task;
+  }
+
+  #isCurrentConnection(generation,controller){
+    return this.isConnected
+      &&generation===this.#connectionGeneration
+      &&this.#loadController===controller
+      &&!controller.signal.aborted;
+  }
+
+  #reportImportedDestroyError(error,{events,href,operationId}){
+    console.error('Error destroying imported HTML component:',error);
+    if(!events||events.disposed)return;
+    const detail=Object.freeze({
+      code:'HTML_IMPORT_IMPORTED_COMPONENT_DESTROY_REJECTED',
+      href,
+      message:'The imported component could not be destroyed.',
+      reason:'imported-component-destroy-rejected'
+    });
+    const {occurrence}=events.dispatch(
+      'html-import-error',
+      detail,
+      {
+        operationId,
+        publicDetail:Object.freeze({code:detail.code,reason:detail.reason})
+      }
+    );
+    projectArcaneDOMEvent(this,occurrence,{
+      bubbles:true,
+      composed:true
+    });
+  }
+
+  #restoreImportedDestroy(record){
+    const current=Object.getOwnPropertyDescriptor(this,'destroy')??null;
+    if(!samePropertyDescriptor(current,record.installedDescriptor))return false;
+    if(record.previousDescriptor){
+      Object.defineProperty(this,'destroy',record.previousDescriptor);
+    }else{
+      delete this.destroy;
+    }
+    return true;
+  }
+
+  #destroyImportedHost(){
+    const record=this.#importedDestroy;
+    if(!record)return Promise.resolve(false);
+    this.#importedDestroy=null;
+    const events=this.#events;
+    const generation=this.#connectionGeneration;
+    const reportContext={
+      events,
+      href:this.getAttribute('href')||'',
+      operationId:events
+        ?`html-import-destroy-${events.instanceId}-${generation}`
+        :null
+    };
+    let result;
+    try{
+      result=record.destroy.call(this);
+    }catch(error){
+      this.#reportImportedDestroyError(error,reportContext);
+      this.#restoreImportedDestroy(record);
+      return Promise.resolve(false);
     }
+    return Promise.resolve(result)
+      .then(
+        ()=>true,
+        error=>{
+          this.#reportImportedDestroyError(error,reportContext);
+          return false;
+        }
+      )
+      .finally(()=>this.#restoreImportedDestroy(record));
   }
 
-  async #loadHTML(href,resolvedHref,response){
+  async #loadHTML(href,resolvedHref,response,generation,controller,operationId){
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
 
     const html = await response.text();
+    if(!this.#isCurrentConnection(generation,controller))return false;
+    await this.#destroyImportedHost();
+    if(!this.#isCurrentConnection(generation,controller))return false;
     this.shadowRoot.innerHTML = html;
 
     await this.#executeScripts();
+    if(!this.#isCurrentConnection(generation,controller)){
+      await this.#destroyImportedHost();
+      return false;
+    }
 
     this.ready=true;
-    this.dispatchEvent(new CustomEvent('html-import-ready',{
+    const {occurrence}=this.#events.dispatch(
+      'html-import-ready',
+      Object.freeze({href,resolvedHref}),
+      {operationId,publicDetail:Object.freeze({ready:true})}
+    );
+    projectArcaneDOMEvent(this,occurrence,{
       bubbles:true,
-      composed:true,
-      detail:{href,resolvedHref}
-    }));
+      composed:true
+    });
     return true;
   }
 
   async #executeScripts() {
     const scripts = Array.from(this.shadowRoot.querySelectorAll('script'));
-    for(const script of scripts){
+    const previousDescriptor=Object.getOwnPropertyDescriptor(this,'destroy')??null;
+    const previousDestroy=this.destroy;
+    try{
+      for(const script of scripts){
         if (script.src) {
           console.error('ONLY INLINE SCRIPTS SUPPORTED AT THIS TIME FOR SECURITY REASONS');
           console.warn('script src path will need to be limited to ./{text}.js, ../{text}.js), or acceptable sub folders. This can be complex.');
@@ -105,6 +276,19 @@ class HTMLImport extends HTMLElement {
           htmlImportHostRegistry.delete(hostToken);
           delete executable.dataset.arcaneHostToken;
         }
+      }
+    }finally{
+      const installedDescriptor=Object.getOwnPropertyDescriptor(this,'destroy')??null;
+      const installedDestroy=this.destroy;
+      if(typeof installedDestroy==='function'
+        &&installedDestroy!==previousDestroy
+        &&!samePropertyDescriptor(installedDescriptor,previousDescriptor)){
+        this.#importedDestroy={
+          destroy:installedDestroy,
+          installedDescriptor,
+          previousDescriptor
+        };
+      }
     }
   }
 }