mount-observer 0.0.34 → 0.0.36

package/README.md

@@ -11,7 +11,7 @@ Author:  Bruce B. Anderson (with valuable feedback from @doeixd )
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: 2024-6-11
+Last Update: 2024-9-7
 
 ## Benefits of this API
 
@@ -118,7 +118,7 @@ This proposal would also include support for JSON and HTML module imports.
 Following an approach similar to the [speculation api](https://developer.chrome.com/blog/speculation-rules-improvements), we can add a script element anywhere in the DOM:
 
 ```html
-<script type="mountobserver" id=myMountObserver  onmount="{
+<script type="mountobserver" id=myMountObserver onload="{...}"  onmount="{
    const {matchingElement} = event;
    const {localName} = matchingElement;
    if(!customElements.get(localName)) {
@@ -146,6 +146,11 @@ The "scope" of the observer would be the ShadowRoot containing the script elemen
 
 No arrays of settings would be supported within a single tag (as this causes issues as far as supporting a single onmount, ondismount, etc event attributes), but remember that the "on" criteria can be an array of selectors.
 
+> [!Note]
+> To support the event handlers above, I believe it would require that CSP solutions factor in both the inner content of the script element as well as all the event handlers via the string concatenation operator.  I actually think such support is quite critical due to lack of support of import.meta.[some reference to the script element] not being available, as it was pre-ES Modules.
+
+
+
 ## Shadow Root inheritance
 
 Inside a shadow root, we can plop a script element, also with type "mountobserver", optionally giving it the same id as above:
@@ -163,6 +168,11 @@ If no id is found in the parent ShadowRoot (or in the parent window if the shado
 
 But if a matching id is found, then the values from the parent script element get merged in with the one in the child, with the child settings, including the event handling attributes. 
 
+> [!Note]
+> The onload event is critical for a number of reasons, among them:
+> 1. We need a way to inject non JSON serializable settings (described below) when necessary, and 
+> 2. We need a way to override settings in child Shadow DOM's programmatically in some cases.
+
 We will come back to some important [additional features](#creating-frameworks-that-revolve-around-moses) of using these script elements later, but first we want to cover the highlights of this proposal, in order to give more context as to what kinds of functionality these MOSEs can provide.
 
 ## Binding from a distance
@@ -750,6 +760,7 @@ The sky is the limit, but focusing on the first example, be-hive, they are:
 
 1.  Managing, interpreting and parsing the attributes that add semantic enhancement vocabularies onto exiting elements.
 2.  Establishing the "handshake" that imports the enhancement package, instantiates the enhancement, and passes properties that were previously assigned to the pre-enhanced element to the attached enhancement/behavior.
+3.  Providing an inheritable "registry" of reusable scriptlets that can be leveraged in a declarative way.
 
 If one inspects the DOM, one will see grouped (already "parsed") MOSEs, like so:
 
@@ -765,7 +776,7 @@ Without the help of the synthesize method / Synthesizer base class, the develope
 The developer of each package defines their MOSE "template", and then syndicates it via the synthesize method:
 
 ```JavaScript
-mountObserver.synthesize(root: document | shadowRootNode, ctr:  ({new() => Synthesizer}), mose: MOSE)
+MountObserver.synthesize(root: document | shadowRootNode, ctr:  ({new() => Synthesizer}), mose: MOSE)
 ```
 
 What this method does is it:
@@ -781,7 +792,7 @@ Then in our shadowroot, rather than adding a script type=mountobserver for every
 <be-hive></be-hive>
 ```
 
-And we can give each inheriting ShadowRoot a personality of its own by customizing the settings within that shadow scope, by (manually?) adding a MOSE with matching id that overrides the inheriting settings with custom settings:
+And we can give each inheriting ShadowRoot a personality of its own by customizing the settings within that shadow scope, by manually adding a MOSE with matching id that overrides the inheriting settings with custom settings:
 
 ```html
 <be-hive>
@@ -793,3 +804,5 @@ And we can give each inheriting ShadowRoot a personality of its own by customizi
 </be-hive>
 ```
 
+
+

package/Synthesizer.js

@@ -49,6 +49,7 @@ export class Synthesizer extends HTMLElement {
     activate(mose) {
         if (!this.checkIfAllowed(mose))
             return;
+        mose.dispatchEvent(new LoadEvent());
         const { init, do: d } = mose;
         const mi = {
             do: d,
@@ -116,3 +117,9 @@ export class SynthesizeEvent extends Event {
         this.mountObserverElement = mountObserverElement;
     }
 }
+export class LoadEvent extends Event {
+    static eventName = 'load';
+    constructor() {
+        super(LoadEvent.eventName);
+    }
+}

package/Synthesizer.ts

@@ -30,7 +30,7 @@ export abstract class Synthesizer extends HTMLElement{
             const mose = s as MOSE;
             this.mountObserverElements.push(mose);
             this.activate(mose);
-        })
+        });
         this.#mutationObserver = new MutationObserver(this.mutationCallback.bind(this));
         this.#mutationObserver.observe(this, init);
         this.inherit();
@@ -52,6 +52,7 @@ export abstract class Synthesizer extends HTMLElement{
 
     activate(mose: MOSE){
         if(!this.checkIfAllowed(mose)) return;
+        mose.dispatchEvent(new LoadEvent());
         const {init, do: d} = mose;
         const mi: MountInit = {
             do: d,
@@ -118,4 +119,12 @@ export class SynthesizeEvent extends Event{
     constructor(public mountObserverElement: MOSE) {
       super(SynthesizeEvent.eventName);
     }
+}
+
+export class LoadEvent extends Event {
+    static eventName = 'load';
+
+    constructor(){
+        super(LoadEvent.eventName);
+    }
 }

package/getWhereAttrSelector.js

@@ -1,6 +1,6 @@
 export async function getWhereAttrSelector(whereAttr, withoutAttrs) {
     const { hasBase, hasBranchIn, hasRootIn } = whereAttr;
-    const fullListOfAttrs = [];
+    let fullListOfAttrs = [];
     const partitionedAttrs = [];
     if (hasBase !== undefined) {
         const hasRootInGuaranteed = hasRootIn || [{
@@ -72,6 +72,7 @@ export async function getWhereAttrSelector(whereAttr, withoutAttrs) {
             }
         }
     }
+    fullListOfAttrs = Array.from(new Set(fullListOfAttrs));
     const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
     const calculatedSelector = listOfSelectors.join(',');
     return {

package/getWhereAttrSelector.ts

@@ -2,13 +2,13 @@ import {AttrParts, RootCnfg, WhereAttr} from './ts-refs/mount-observer/types';
 export async function getWhereAttrSelector(whereAttr: WhereAttr, withoutAttrs: string){
     const {hasBase, hasBranchIn, hasRootIn} = whereAttr;
 
-    const fullListOfAttrs: Array<string> = [];
+    let fullListOfAttrs: Array<string> = [];
     const partitionedAttrs: Array<AttrParts> = [];
     if(hasBase !== undefined){
         const hasRootInGuaranteed: Array<RootCnfg> = hasRootIn || [{
             start: '',
             context: 'Both'
-        } as RootCnfg]
+        } as RootCnfg];
         
         let prefixLessMatches: Array<{
             rootToBaseDelimiter: string,
@@ -80,7 +80,7 @@ export async function getWhereAttrSelector(whereAttr: WhereAttr, withoutAttrs: s
         }
     }
 
-
+    fullListOfAttrs = Array.from(new Set(fullListOfAttrs));
     const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
     const calculatedSelector = listOfSelectors.join(',');
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

package/ts-refs/be-bound/types.d.ts

@@ -0,0 +1,68 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import { Specifier } from "../trans-render/dss/types";
+import {AbsorbingObject, SharingObject} from '../trans-render/asmr/types';
+
+export interface EndUserProps extends IEnhancement{
+    With?: Array<WithStatement>,
+    Between?: Array<BetweenStatement>,
+    with?: Array<WithStatement>,
+    between?: Array<BetweenStatement>,
+}
+
+export interface AllProps extends EndUserProps{
+    bindingRules: Array<BindingRule>,
+    bindings: Array<Binding>,
+    //partialBindingRules?: Array<BindingRule>,
+    isParsed?: boolean,
+    //parsedWith?: boolean,
+    //parsedBetween?: boolean,
+    rawStatements?: Array<string>
+}
+
+export type SignalEnhancement = 'be-value-added' | 'be-propagating' | undefined;
+
+export interface BindingRule {
+    
+    localProp?: string,
+    localEvent?: string,
+    remoteSpecifierString?: string,
+    remoteSpecifier?: Specifier,
+
+
+}
+
+export interface Binding {
+    //new and improved
+    localAbsObj: AbsorbingObject;
+    localShareObj: SharingObject;
+    remoteAbsObj: AbsorbingObject;
+    remoteShareObj: SharingObject;
+    //remoteRef: WeakRef<Element>;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+
+export interface Actions{
+    noAttrs(self: BAP): ProPAP;
+    getBindings(self: BAP): ProPAP;
+    hydrate(self: BAP): ProPAP;
+    onRawStatements(self: BAP): void;
+}
+
+export type WithStatement = string;
+
+export type BetweenStatement = string;
+
+export type TriggerSource = 'local' | 'remote' | 'tie';
+
+export interface SpecificityResult {
+    val?: any,
+    winner?: TriggerSource;
+}

package/ts-refs/be-calculating/types.d.ts

@@ -0,0 +1,66 @@
+import {BEAllProps, EventListenerOrFn, IEnhancement} from '../trans-render/be/types';
+import {StringWithAutocompleteOptions} from '../trans-render/types';
+import { Specifier } from '../trans-render/dss/types';
+import {AbsorbingObject} from '../trans-render/asmr/types';
+
+export interface EndUserProps extends IEnhancement<HTMLElement>{
+    forAttr?: string,
+    handler: string
+    eventArg: string,
+}
+
+export interface AllProps extends EndUserProps{
+    //calculator: {new: () => EventListenerObject},
+    // value: any;
+    // isParsed: boolean;
+    // attrExpr?: string | null;
+    //publishEventType: 'input' | 'change' | 'load',
+    handlerObj?: EventListenerOrFn,
+    defaultEventType: StringWithAutocompleteOptions<
+        | 'input'
+        | 'change'
+    >,
+    forArgs: string[],
+    remoteSpecifiers: Array<Specifier>,
+    isAttached?: boolean,
+    isOutputEl?: boolean,
+    enhElLocalName: string,
+    categorized?: boolean,
+    remSpecifierLen?: number,
+    propToAO: {[key: string] : AbsorbingObject},
+    checkedRegistry: boolean,
+} 
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>
+
+// export interface Actions{
+//     parseForAttr(self: this): PAP;
+//     regOnInput(self: this): PAP;
+//     regOnChange(self: this): PAP;
+//     regOnLoad(self: this): PAP;
+//     genRemoteSpecifiers(self: this): PAP;
+//     hydrate(self: this): ProPAP;
+//     findScriptEl(self: this): PAP;
+//     //getArgs(self: this): PAP;
+//     //observe(self: this): ProPAP;
+//     importSymbols(self: this): ProPAP;
+//     //onValue(self: this): void;
+// }
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    categorizeEl(self: BAP): PAP;
+    getEvtHandler(self: BAP): PAP;
+    parseForAttr(self: BAP): PAP;
+    getDefltEvtType(self: BAP): PAP;
+    // findScriptEl(self: BAP): PAP;
+    // importSymbols(self: BAP): ProPAP;
+    genRemoteSpecifiers(self: BAP): PAP;
+    seek(self: BAP): ProPAP;
+    hydrate(self: BAP): ProPAP;
+}

package/ts-refs/be-exportable/types.d.ts

@@ -0,0 +1,26 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+export interface EndUserProps<Exports=any> extends IEnhancement<HTMLScriptElement>{
+    // //guid?: string;
+    // //shareByID?: boolean;
+    // enabled?: boolean;
+    // beOosoom?: string;
+    preferAttrForBareImports?: boolean;
+    attached: boolean;
+}
+
+export interface AllProps<Exports=any> extends EndUserProps<Exports>{
+    exports?: Exports;
+    
+}
+
+export type PAP = Partial<AllProps>;
+
+export type ProPAP = Promise<PAP>
+
+
+export interface Actions{
+    hydrate(ap: AllProps): Promise<PAP>;
+}
+
+

package/ts-refs/be-gingerly/types.d.ts

@@ -0,0 +1,19 @@
+import { BEAllProps, IEnhancement } from '../be-enhanced/types';
+
+export interface EndUserProps extends IEnhancement {
+}
+
+export interface AP extends EndUserProps{
+    queue?: Array<any>,
+    itemCE?: string,
+    cnt?: number,
+    ref?: WeakRef<Element>,
+}
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export interface Actions{
+}
+

package/ts-refs/be-intl/types.d.ts

@@ -0,0 +1,28 @@
+import {BVAEndUserProps, BVAAllProps, BVAActions} from '../be-value-added/types';
+import {BEAllProps} from '../be-enhanced/types';
+
+export interface EndUserProps extends BVAEndUserProps{
+    format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions,
+    locale?: string;
+    observeAttr?: string;
+    currency?: string;
+}
+
+export interface AllProps extends EndUserProps, BVAAllProps{
+    attached?: boolean;
+    intlDateFormat?: Intl.DateTimeFormat,
+    intlNumberFormat: Intl.NumberFormat,
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+
+export interface Actions extends BVAActions {
+    formatNumber(self: AP & BEAllProps): void;
+    formatDate(self: this): void;
+    onFormattingChange(self: this): PAP;
+}

package/ts-refs/be-literate/types.d.ts

@@ -0,0 +1,21 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement<HTMLInputElement>{
+    readVerb: 'readAsText' | 'readAsDataURL' | 'readAsArrayBuffer' | 'readAsBinaryString';
+}
+
+export interface AllProps extends EndUserProps{
+    fileContents: any[];
+}
+
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+
+export interface Actions {
+    hydrate(self: AP & BEAllProps): ProPAP
+}

package/ts-refs/be-propagating/types.d.ts

@@ -0,0 +1,26 @@
+import {IEnhancement} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement{
+    propagate?: string[],
+}
+
+export interface AllProps extends EndUserProps{
+    propagators: Map<string, EventTarget>;
+    
+}
+
+export type AP = AllProps;
+export type PAP = Partial<AP>;
+export type ProPAP = Promise<PAP>;
+
+export interface ISignal extends EventTarget{
+    value: any;
+}
+
+
+export interface Actions{
+    hydrate(self: this): ProPAP;
+    setKeyVal(key: string, val: any, tsKey?: string): Promise<EventTarget>;
+    getPropagator(key: string): Promise<EventTarget>;
+    getGate(prop: string, key?: string): Promise<ISignal>
+}

package/ts-refs/be-sharing/types.d.ts

@@ -0,0 +1,17 @@
+import { BEAllProps, IEnhancement } from './ts-refs/be-enhanced/types';
+
+export interface EndUserProps extends IEnhancement {
+
+}
+
+export interface AllProps extends EndUserProps {}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+
+export interface Actions{
+}

package/ts-refs/trans-render/types.d.ts

@@ -500,4 +500,11 @@ export interface IObject$tring{
     parse(): Promise<void>;
 }
 
-export type ZeroOrMore<T> = T | Array<T> | undefined;
+export type ZeroOrMore<T> = T | Array<T> | undefined;
+
+/**
+ * https://x.com/mattpocockuk/status/1821926395380986219
+ */
+export type StringWithAutocompleteOptions<TOptions> = 
+    | (string & {})
+    | TOptions;