mount-observer 0.0.35 → 0.0.37

package/MountObserver.js

@@ -32,6 +32,10 @@ export class MountObserver extends EventTarget {
     #calculatedSelector;
     #attrParts;
     #fullListOfEnhancementAttrs;
+    async observedAttrs() {
+        await this.#selector();
+        return this.#fullListOfEnhancementAttrs;
+    }
     //get #attrVals
     async #selector() {
         if (this.#calculatedSelector !== undefined)

package/MountObserver.ts

@@ -43,6 +43,10 @@ export class MountObserver extends EventTarget implements IMountObserver{
     #attrParts: Array<AttrParts> | undefined;
     
     #fullListOfEnhancementAttrs: Array<string> | undefined;
+    async observedAttrs(){
+        await this.#selector();
+        return this.#fullListOfEnhancementAttrs;
+    }
     //get #attrVals
     async #selector() : Promise<string>{
         if(this.#calculatedSelector !== undefined) return this.#calculatedSelector;

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-9-7
+Last Update: Oct 6, 2024
 
 ## Benefits of this API
 
@@ -19,7 +19,21 @@ What follows is a far more ambitious alternative to the [lazy custom element pro
 
 ["Binding from a distance"](https://github.com/WICG/webcomponents/issues/1035#issuecomment-1806393525) refers to empowering the developer to essentially manage their own "stylesheets" -- but rather than for purposes of styling, using these rules to attach behaviors, set property values, etc, to the HTML as it streams in.  Libraries that take this approach include [Corset](https://corset.dev/) and [trans-render](https://github.com/bahrus/trans-render).  The concept has been promoted by a [number](https://bkardell.com/blog/CSSLike.html) [of](https://www.w3.org/TR/NOTE-AS)  [prominent](https://www.xanthir.com/blog/b4K_0) voices in the community. 
 
-The underlying theme is this api is meant to make it easy for the developer to do the right thing, by encouraging lazy loading and smaller footprints. It rolls up most all the other observer api's into one, including, potentially, [this one](https://github.com/whatwg/dom/issues/1285), which may be a similar duplicate to [that one](https://github.com/whatwg/dom/issues/1225).
+The underlying theme is this api is meant to make it easy for the developer to do the right thing, by encouraging lazy loading and smaller footprints. It rolls up most all the other observer api's into one, including, potentially, [a selector observor](https://github.com/whatwg/dom/issues/1285), which may be a similar duplicate to [the match-media counterpart proposal](https://github.com/whatwg/dom/issues/1225).
+
+Most every web application can be recursively broken down into logical regions, building blocks which are assembled together to form the whole site.
+
+At the most micro level, utilizing highly reusable, generic custom elements -- elements that can extend the HTML vocabulary, elements that could be incorporated into the browser, even -- form a great foundation to build on.
+
+But as one zooms out from the micro to the macro, the nature of the components changes in significant ways.
+
+At the micro level, components will have few, if any, dependencies, and those dependencies will tend to be quite stable, and likely all be used. The dependencies will skew more towards tightly coupled utility libraries.
+
+"Macro" level components will tend to be heavy on business-domain specific data, heavy on gluing / orchestrating smaller components, light on difficult, esoteric JavaScript. They aren't confined to static JS files, and likely will include dynamic content as well. They will also be heavy on conditional sections of the application only loading if requested by the user.
+
+ES module based web components may or may not be the best fit for these application macro "modules". A better fit might be a server-centric solution, like Rails, just to take an example.
+
+A significant pain point has to do with loading all the third-party web components and/or (progressive) enhancements that these macro components / compositions require, and loading them into memory only when needed.
 
 
 ### Does this api make the impossible possible?
@@ -61,16 +75,15 @@ const observer = new MountObserver({
         if(!customElements.get(localName)) {
             customElements.define(localName, modules[0].MyElement);
         }
-        observer.disconnect();
-      }
-   }
+        observer.disconnectedSignal.abort();
+      },
+   },
+   disconnectedSignal: new AbortController().signal
 });
 observer.observe(document);
 ```
 
-Invoking "disconnect" as shown above causes the observer to emit event "disconnectedCallback".
-
-The argument can also be an array of objects that fit the pattern shown above.
+The constructor argument can also be an array of objects that fit the pattern shown above.
 
 In fact, as we will see, where it makes sense, where we see examples that are strings, we will also allow for arrays of such strings.  For example, the "on" key can point to an array of CSS selectors (and in this case the mount/dismount callbacks would need to provide an index of which one matched).  I only recommend adding this complexity if what I suspect is true -- providing this support can reduce "context switching" between threads / memory spaces (c++ vs JavaScript), and thus improve performance.  If multiple "on" selectors are provided, and multiple ones match, I think it makes sense to indicate the one with the highest specifier that matches.  It would probably be helpful in this case to provide a special event that allows for knowing when the matching selector with the highest specificity changes for mounted elements.
 
@@ -98,14 +111,14 @@ const observer = new MountObserver({
         if(!customElements.get(localName)) {
             customElements.define(localName, modules[1].MyElement);
         }
-        observer.disconnect();
+        observer.disconnectedSignal.abort();
       }
    }
 });
 observer.observe(document);
 ```
 
-Once again, the key can accept either a single import and it can also support multiple imports (via an array).
+Once again, the key can accept either a single import, but alternatively it can also support multiple imports (via an array).
 
 The do event won't be invoked until all the imports have been successfully completed and inserted into the modules array.
 
@@ -113,6 +126,37 @@ Previously, this proposal called for allowing arrow functions as well, thinking
 
 This proposal would also include support for JSON and HTML module imports. 
 
+## Preemptive downloading
+
+There are two significant steps to imports, each of which imposes a cost:  
+
+1.  Downloading the resource.
+2.  Loading the resource into memory.
+
+What if we want to download the resource ahead of time, but only load into memory when needed?
+
+The link rel=modulepreload option provides an already existing platform support for this, but the browser complains when no use of the resource is used within a short time span of page load.  That doesn't really fit the bill for lazy loading custom elements and other resources.
+
+So for this we add option:
+
+```JavaScript
+const observer = new MountObserver({
+   on: 'my-element',
+   loadingEagerness: 'eager',
+   import: './my-element.js',
+   do:{
+      mount: (matchingElement, {modules}) => customElements.define(modules[0].MyElement)
+   }
+})
+```
+
+So what this does is only check for the presence of an element with tag name "my-element", and it starts downloading the resource, even before the element has "mounted" based on other criteria.
+
+> [!NOTE]
+> As a result of the google IO 2024 talks, I became aware that there is some similarity between this proposal and the [speculation rules api](https://developer.chrome.com/blog/speculation-rules-improvements).  This motivated the change to the property from "loading" to loadingEagerness above.
+
+
+
 ## Mount Observer Script Elements (MOSEs)
 
 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:
@@ -124,7 +168,7 @@ Following an approach similar to the [speculation api](https://developer.chrome.
    if(!customElements.get(localName)) {
       customElements.define(localName, modules[1].MyElement);
    }
-   observer.disconnect();
+   observer.disconnectedSignal.abort();
 }">
 {
    "on":"my-element",
@@ -150,7 +194,6 @@ No arrays of settings would be supported within a single tag (as this causes iss
 > 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:
@@ -175,6 +218,7 @@ But if a matching id is found, then the values from the parent script element ge
 
 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
 
 It is important to note that "on" is a css query with no restrictions.  So something like:
@@ -299,6 +343,8 @@ If an element that is in "mounted" state according to a MountObserver instance i
 5)  If the new place it was added remains within the original rootNode and remains mounted, the MountObserver instance dispatches event "reconfirmed".
 6)  If the element no longer satisfies the criteria of the MountObserver instance, the MountObserver instance will dispatch event "dismount". 
 
+Some of the events above are subject to change depending on the outcome of the [atomic moving](https://github.com/whatwg/dom/issues/1255) proposal.
+
 ## Dismounting
 
 In many cases, it will be critical to inform the developer **why** the element no longer satisfies all the criteria.  For example, we may be using an intersection observer, and when we've scrolled away from view, we can "shut down" until the element is (nearly) scrolled back into view.  We may also be displaying things differently depending on the network speed.  How we should respond when one of the original conditions, but not the other, no longer applies, is of paramount importance.
@@ -308,7 +354,7 @@ So the dismount event should provide a "checklist" of all the conditions, and th
 ```JavaScript
 mediaMatches: true,
 containerMatches: true,
-satisifiesCustomCondition: true,
+satisfiesCustomCondition: true,
 whereLangIn: ['en-GB'],
 whereConnection:{
    effectiveTypeMatches: true
@@ -358,9 +404,9 @@ I think in the vast majority of cases, setting the property values corresponding
 Usually, there are no events we can subscribe to in order to know when the property changes. Hijacking the property setter in order to observe changes may not always work or feel very resilient. So monitoring the attribute value associated with the property is often the most effective way of observing when the property/attribute state for these elements change.  And some attributes (like the microdata attributes such as itemprop) don't even have properties that they pair with! 
   
 
-2.  In contrast, there are scenarios where we want to support somewhat fluid, renamable attributes within different Shadow DOM scopes, which add behavior/enhancement capabilities on top of built-in or third party custom elements.  We'll refer to these attributes as "Enhancement Attributes."
+2.  In contrast, there are scenarios where we want to support somewhat fluid, renamable attributes within different Shadow DOM realms, which add behavior/enhancement capabilities on top of built-in or third party custom elements.  We'll refer to these attributes as "Enhancement Attributes."
 
-We want our api to be able to distinguish between these two, and to be able to combine both types in one mount observer instance.
+We want our api to be able to distinguish between these two, and to be able to combine both types in one mount observer instance's set of observed attributes.
 
 > [!NOTE]
 > The most important reason for pointing out this distinction is this:  "Source of Truth" attributes will only be *observed*, and will **not** trigger mount/unmount states unless they are part of the "on" selector string. And unlike all the other "where" conditions this proposal supports, the where clauses for the "Enhancement Attributes" are "one-way" -- they trigger a "mount" event / callback, followed by the ability to observe the stream of changes (including removal of those attributes), but they never trigger a "dismount". 
@@ -573,7 +619,16 @@ Possibly some libraries may prefer to mix it up a bit:
 </div>
 ```
 
-To support such syntax, specify the delimiter thusly:
+An example of this in the real world can be found with [HTMX](https://htmx.org/docs/#hx-on):
+
+```html
+<button hx-post="/example"
+        hx-on:htmx:config-request="event.detail.parameters.example = 'Hello Scripting!'">
+    Post Me!
+</button>
+```
+
+To support such syntax, specify the delimiters thusly:
 
 ```JavaScript
 const mo = new MountObserver({
@@ -589,47 +644,42 @@ const mo = new MountObserver({
 });
 ```
 
-## Resolving ambiguity
-
-Because we want the multiple root values (enh-*, data-enh-*, *) to be treated as equivalent, from a developer point of view, we have a possible ambiguity -- what if more than one root is present for the same base, branch and leaf?  Which value trumps the others?
-
-Tentative rules:
-
-1.  Roots must differ in length.
-2.  If one value is null (attribute not present) and the other a string, the one with the string value trumps.
-3.  If two or more equivalent attributes have string values, the one with the longer root prevails.
+## Supporting userland security protections
 
-The thinking here is that longer roots indicate higher "specificity", so it is safer to use that one.
+As we saw with the HTMX example above, element enhancement libraries that (progressively) enhance server rendered HTML are finding it necessary to support inline event handling.  Since the platform has provided no support for hashing built-in event handlers, there's no real advantage for these libraries to utilize the built-in event handlers, so might as well create bespoke event handlers, which unfortunately might not be detected by browser security mechanisms. Perhaps some of these libraries only enable that functionality after confirming no such CSP rules are in place, or provide console warnings, who knows?  This reminds me of the plausible (but probably not universally held) belief that illegalizing relatively safe recreational drugs like hashish or beer pushes the illegal market to gravitate towards drugs/beverages which have more "bang for the buck", which are considerably less safe, leading to the conclusion that the "health and safety" laws end up causing more harm than good.
 
+I am personally pursuing a [userland implementation of CSP tailored for attributes](https://github.com/bahrus/be-hashing-out).  What I'm finding necessary to support this is a way to quickly determine *the full list of* attributes a particular enhancement is monitoring for.
 
-## Preemptive downloading
+Thus the mountObserver does provide that information to the consumer as well:
 
-There are two significant steps to imports, each of which imposes a cost:  
+```JavaScript
+const mo = new MountObserver({
+   on: '*',
+   whereAttr:{
+      hasRootIn: ['data', 'enh', 'data-enh'],
+      hasBase: ['-', 'my-enhancement'],
+      hasBranchIn: [':', ['first-aspect', 'second-aspect', '']],
+      hasLeafIn: {
+         'first-aspect': ['--', ['wow-this-is-deep', 'have-you-considered-using-json-for-this']],
+      }
+   }
+});
+const observedAttributes = await mo.observedAttrs();
+```
 
-1.  Downloading the resource.
-2.  Loading the resource into memory.
+## Resolving ambiguity
 
-What if we want to download the resource ahead of time, but only load into memory when needed?
+Because we want the multiple root values (enh-*, data-enh-*, *) to be treated as equivalent, from a developer point of view, we have a possible ambiguity -- what if more than one root is present for the same base, branch and leaf?  Which value prevails over the others?
 
-The link rel=modulepreload option provides an already existing platform support for this, but the browser complains when no use of the resource is used within a short time span of page load.  That doesn't really fit the bill for lazy loading custom elements and other resources.
+Tentative rules:
 
-So for this we add option:
+1.  Roots must differ in length.
+2.  If one value is null (attribute not present) and the other a string, the one with the string value prevails.
+3.  If two or more equivalent attributes have string values, the one with the longer root prevails.
 
-```JavaScript
-const observer = new MountObserver({
-   on: 'my-element',
-   loadingEagerness: 'eager',
-   import: './my-element.js',
-   do:{
-      mount: (matchingElement, {modules}) => customElements.define(modules[0].MyElement)
-   }
-})
-```
+The thinking here is that longer roots indicate higher "specificity", so it is safer to use that one.
 
-So what this does is only check for the presence of an element with tag name "my-element", and it starts downloading the resource, even before the element has "mounted" based on other criteria.
 
-> [!NOTE]
-> As a result of the google IO 2024 talks, I became aware that there is some similarity between this proposal and the [speculation rules api](https://developer.chrome.com/blog/speculation-rules-improvements).  This motivated the change to the property from "loading" to loadingEagerness above.
 
 ## Intra document html imports
 
@@ -733,6 +783,8 @@ This proposal (and polyfill) also supports the option to utilize ShadowDOM / slo
 
 The discussion there leads to an open question whether a processing instruction would be better.  I think the compose tag would make much more sense, vs a processing instruction, as it could then support slotted children (behaving similar to the Beatles' example above).  Or maybe another tag should be introduced that is the equivalent of the slot, to avoid confusion. But I strongly suspect that could significantly reduce the payload size of some documents, if we can reuse blocks of HTML, inserting sections of customized content for each instance.
 
+The [add src attribute to template to load a template from file](https://github.com/whatwg/html/issues/10571) and an interesting proposal that is [coming from](https://github.com/htmlcomponents/declarative-shadow-imports/blob/main/examples/02-explainer-proposal/02-html.html) the Edge team [seem quite compatible](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md#proposal-inline-declarative-css-module-scripts) with this idea.
+
 ## Creating "frameworks" that revolve around MOSEs.
 
 Often, we will want to define a large number of "mount observer script elements (MOSEs)" programmatically, and we need it to be done in a generic way, that can be published and easily referenced.  

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/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.35",
+  "version": "0.0.37",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

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

@@ -1,25 +1,22 @@
-import {BEAllProps, IEnhancement} from '../trans-render/be/types';
+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';
+import {Handlers} from '../be-hive/types';
 
 export interface EndUserProps extends IEnhancement<HTMLElement>{
     forAttr?: string,
-    //onInput?: string,
-    //onChange?: string,
-    //onLoad?: string,
-    //assignTo?: Array<Specifier>,
-    nameOfCalculator: string,
+    handler: string
     eventArg: string,
 }
 
 export interface AllProps extends EndUserProps{
-    calculator: {new: () => EventListenerObject},
+    //calculator: {new: () => EventListenerObject},
     // value: any;
     // isParsed: boolean;
     // attrExpr?: string | null;
-    scriptEl?: HTMLScriptElement;
-    publishEventType: 'input' | 'change' | 'load',
+    //publishEventType: 'input' | 'change' | 'load',
+    handlerObj?: EventListenerOrFn,
     defaultEventType: StringWithAutocompleteOptions<
         | 'input'
         | 'change'
@@ -32,7 +29,7 @@ export interface AllProps extends EndUserProps{
     categorized?: boolean,
     remSpecifierLen?: number,
     propToAO: {[key: string] : AbsorbingObject},
-    hasInlineEvent: boolean,
+    checkedRegistry: boolean,
 } 
 
 export type AP = AllProps;
@@ -55,14 +52,15 @@ export type ProPAP = Promise<PAP>
 //     //onValue(self: this): void;
 // }
 
-export type BAP = AP & BEAllProps;
+export type BAP = AP & BEAllProps & Handlers;
 
 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;
+    // findScriptEl(self: BAP): PAP;
+    // importSymbols(self: BAP): ProPAP;
     genRemoteSpecifiers(self: BAP): PAP;
     seek(self: BAP): ProPAP;
     hydrate(self: BAP): ProPAP;

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

@@ -0,0 +1,26 @@
+import {BEAllProps, IEnhancement} from '../trans-render/be/types';
+import { RoundaboutReady } from '../trans-render/froop/types';
+
+export interface EndUserProps extends IEnhancement{
+    to: string;
+    nudges: boolean;
+    on: string;
+}
+
+export interface AllProps extends EndUserProps {
+    //isParsed?: boolean;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AllProps & BEAllProps & RoundaboutReady;
+
+export interface Actions{
+    hydrate(self: BAP): ProPAP;
+    // findTarget(self: this): Promise<void>;
+    // handleCommit(self: this, e: KeyboardEvent): Promise<void>;
+}

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

@@ -0,0 +1,88 @@
+import {BEAllProps, IEnhancement} from '../trans-render/be/types';
+import { Specifier } from "../trans-render/dss/types";
+import { RoundaboutReady } from '../trans-render/froop/types';
+
+export interface EndUserPropsBasic extends IEnhancement{
+    /**
+     * How much to increment on each event
+     */
+    step: number;
+    /**
+     * Don't allow count to exceed this number
+     */
+    ltOrEq?: number;
+    /** Don't allow count to reach this number. */
+    lt?: number;
+    /**
+     * Starting value of count, including after looping
+     */
+    min?: number;
+    /**
+     * Make count loop back to min value after hitting the ceiling set by ltOrEq or lt
+     */
+    loop?: boolean;
+
+    /**
+     * Slowly "awakens" a disabled element.  If the disabled attribute is not set to a number, or is set to "1", removes the disabled attribute.  If it is a larger number, decrements the number by 1. 
+     */
+    nudges?: boolean;
+    /**
+     * Event name to trigger count increment
+     */
+    incOn: string;
+    /**
+     * Property to subscribe to trigger count increment
+     * [TODO]
+     */
+    incOnSet?: string;
+    /**
+     * Disable on max
+     */
+    disableOnMax?: boolean;
+    /**
+     * set lt = 1
+     * and min = 0
+     * and step = 1
+     * and disableOnMax = true
+     */
+    once?: boolean
+}
+export interface EndUserProps extends EndUserPropsBasic, IEnhancement {
+
+}
+
+export interface AllProps extends EndUserProps{
+    count: number;
+    value: number;
+    parsedStatements?: Array<SharingParameters>;
+    //checked: boolean;
+    isMaxedOut?: boolean;
+    //isParsed?: boolean;
+    //transformer?: ITransformer<EndUserPropsBasic, Actions, {}>
+}
+
+export interface SharingParameters{
+    localProp: string,
+    remoteSpecifiers: Array<Specifier>
+}
+
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>
+
+export type BAP = AllProps & BEAllProps & RoundaboutReady;
+
+ export interface Actions{
+    hydrate(self: BAP): ProPAP;
+    onCount(self: BAP): PAP;
+    //shareValue(self: BAP): ProPAP;
+    onOnce(self: BAP): PAP
+    // inc(self: this): PAP;
+    // disableInc(self: this): POA;
+    // check(self: this, allGood: PAP): PAP;
+    // hydrateTransform(self: this): ProPAP;
+}
+

package/ts-refs/be-hashing-out/types.d.ts

@@ -0,0 +1,22 @@
+import {BEAllProps, IEnhancement} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement{
+    digest: string;
+}
+
+export interface AllProps extends EndUserProps {
+
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    logDigest(self: BAP): ProPAP;
+    checkDigest(self: BAP): ProPAP;
+}

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

@@ -0,0 +1,18 @@
+import { CustomHandlers, ScopedCustomHandlers } from '../trans-render/be/types';
+import {StringWithAutocompleteOptions} from '../trans-render/types';
+export type aggKeys = StringWithAutocompleteOptions<
+    | '+'
+    | '*'
+    | 'max'
+    | 'min'
+    | 'nearlyEq'
+    | 'eq'
+    | '||'
+    | '&&'
+    | '{}'
+>;
+
+export interface Handlers{
+    customHandlers: CustomHandlers;
+    scopedCustomHandlers?: ScopedCustomHandlers;
+}

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

@@ -0,0 +1,28 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import { Specifier } from '../trans-render/dss/types';
+
+export interface EndUserProps extends IEnhancement{
+
+}
+
+export interface AP extends EndUserProps{
+    parsedStatements?: Array<InvokingParameters>,
+    rawStatements?: Array<string>,
+}
+
+export type AllProps = AP;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP  = Promise<PAP>
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    hydrate(self: this): ProPAP;
+}
+
+export interface InvokingParameters {
+    remoteSpecifiers: Array<Specifier>,
+    localEventType?: string,
+}

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

@@ -0,0 +1,73 @@
+import {BEAllProps, IEnhancement} from '../trans-render/be/types';
+import { Specifier } from "../trans-render/dss/types";
+import {aggKeys, Handlers} from '../be-hive/types';
+import { StringWithAutocompleteOptions } from '../trans-render/types';
+import {AbsorbingObject} from '../trans-render/asmr/types';
+export interface EndUserProps extends IEnhancement{
+    
+} 
+
+export interface AllProps extends EndUserProps{
+    //observedFactors?: Array<Specifier>,
+    parsedStatements: Array<ObservingParameters>,
+    //bindings?: Array<EndPoints>,
+    rawStatements?: Array<string>,
+    didInferring?: boolean,
+    
+}
+
+
+
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps & Handlers;
+
+export interface Actions{
+    noAttrs(self: BAP): ProPAP;
+    infer(self: BAP) : ProPAP;
+    seek(self: BAP): ProPAP;
+    // hydrate(self: this): ProPAP;
+    warn(...data: any[]): void;
+}
+
+export interface AndIfThen{
+    ifCondition: string,
+    passValue: string,
+}
+
+export interface ObservingParameters{
+    localPropToSet?: string,
+    remoteSpecifiers: Array<Specifier>,
+    mappings?: Array<AndIfThen>,
+    aggKey: StringWithAutocompleteOptions<aggKeys>,
+    //aggregateRemoteVals?: 'Union' | 'Conjunction' | 'ObjectAssign' | 'Sum' | 'Product' | 'ArrayPush'
+}
+
+
+ 
+
+
+
+// export interface ObserverOptions{
+//     abortControllers: Array<AbortController>,
+//     remoteEl?: Element,
+// }
+
+export type LoadEventName = 'load';
+
+export interface EventForObserver{
+    factors: {[key: string | number] : any},
+    setProps?: {[key: string]: any};
+    enh: string,
+}
+
+// export interface ObserverEventModel{
+//     factors: {[key: string] : any},
+//     vals: any[],
+    
+// }

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

@@ -0,0 +1,140 @@
+//import { ActionOnEventConfigs } from "trans-render/froop/types";
+import {BEAllProps, IEnhancement} from '../trans-render/be/types';
+//import {BVAAllProps} from 'be-value-added/types';
+//import {AP as BPAP, ISignal, Actions as BPActions} from 'be-propagating/types';
+//import {ElTypes, SignalRefType} from 'be-linked/types';
+//import { Propagator } from "../trans-render/froop/PropSvc";
+import {Specifier} from '../trans-render/dss/types';
+
+export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
+    lhs?: any,
+    rhs?: any,
+    ifMediaMatches?: string,
+    checkIfNonEmptyArray?: boolean;
+    op?: '===';
+    /**
+     * If lhs and/or rhs is boolean, just check that truthiness matches.
+     */
+    beBoolish: boolean;
+    displayDelay?: number;
+    hiddenStyle?: string;
+    toggleInert?: boolean;
+    deferRendering?: boolean;
+    minMem?: boolean;
+    /**
+     * Works with beOosoom decorator, so becomes inert when out of view
+     */
+    beOosoom?: string;
+    // On?: Array<SwitchStatement>;
+    // on?: Array<SwitchStatement>;
+    // Off?: Array<SwitchStatement>;
+    // off?: Array<SwitchStatement>;
+}
+
+export interface AllProps extends EndUserProps{
+    val: boolean,
+    singleValSwitchesSatisfied?: boolean,
+    singleValSwitchNoGo?: boolean,
+    twoValSwitchesSatisfied?: boolean,
+    twoValSwitchNoGo?: boolean,
+    switchesSatisfied?: boolean,
+    echoVal: boolean,
+    singleValSwitches: Array<OneValueSwitch>,
+    twoValueSwitches: Array<TwoValueSwitch>,
+    offBinarySwitches?: Array<OneValueSwitch>,
+    nValueSwitches?: Array<NValueScriptSwitch>
+    rawStatements?: Array<string>
+}
+
+export type SwitchStatement = string;
+
+
+export interface OneValueSwitch{
+    ifPart: string,
+    specifier: Specifier,
+    //signal?: WeakRef<SignalRefType>,
+    req?: boolean,
+}
+
+export type Op = 'equals' | 'eq' | 'lt' | 'gt';
+
+export interface TwoPartOpStatement{
+    lhsPart: string,
+    op: Op,
+    rhsPart: string,
+    within: string,
+}
+
+export interface TwoValueSwitch{
+    lhsSpecifier: Specifier,
+    rhsSpecifier: Specifier,
+    withinSpecifier?: Specifier,
+    req?: boolean,
+    op?: Op,
+    negate?: boolean,
+    lhs?: ISide,
+    rhs?: ISide,
+}
+
+export interface Dependency extends Specifier{}
+
+export interface CanBeSwitchedOn {
+    switchedOn?: boolean,
+}
+
+export interface NValueScriptSwitch extends CanBeSwitchedOn {
+    dependsOn?: string,
+    dependencies: Array<Dependency>,
+    registeredHandler?: string,
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    calcSwitchesSatisfied(self: this): PAP;
+    calcVal(self: this): PAP;
+    onTrue(self: this): Promise<void>;
+    onFalse(self: this): Promise<void>;
+    // addMediaListener(self: this): POA;
+    // chkMedia(self: this, e: MediaQueryListEvent): PAP;
+    
+    // doOnBinarySwitches(self: this): Promise<void>;
+    onSingleValSwitches(self: this): Promise<void>;
+    onTwoValSwitches(self: this): Promise<void>;
+    onNValSwitches(self: this): Promise<void>;
+    onRawStatements(self: this): void;
+}
+
+
+
+// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
+//export type loadEventName = 'load';
+export type inputEventName = 'input';
+//export type changeEventName = 'change';
+
+export interface ISide {
+    val: any
+}
+
+export interface Elevate {
+    val: any,
+    to: string
+}
+
+export interface EventForNValueSwitch {
+    ctx: NValueScriptSwitch,
+    factors: {[key: string] : SignalRefType},
+    switchOn?: boolean,
+    elevate?: Elevate
+}
+
+export interface SignalAndEvent {
+    signal?: WeakRef<SignalRefType>,
+    eventSuggestion?: string
+}