mount-observer 0.0.93 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -57,6 +57,10 @@
       "default": "./refid/getAdjRefs.js",
       "types": "./refid/getAdjRefs.ts"
     },
+    "./refid/getCount.js": {
+      "default": "./refid/getCount.js",
+      "types": "./refid/getCount.ts"
+    },
     "./refid/joinMatching.js": {
       "default": "./refid/joinMatching.js",
       "types": "./refid/joinMatching.ts"

package/refid/genIds.js

@@ -4,12 +4,23 @@ const attrMap = {
     '@': 'name',
     '|': 'itemprop',
 };
+const scopeMatches = '[itemscope],fieldset';
+export function inScope(scopeFragment, el) {
+    const closest = el.closest(scopeMatches); //TODO account for itemref?
+    if (closest === null)
+        return true;
+    if (scopeFragment === closest)
+        return true;
+    if (scopeFragment.contains(closest))
+        return false;
+    return true;
+}
 export function genIds(enhancedElement) {
-    const { parentElement } = enhancedElement;
-    if (parentElement === null)
-        throw 404;
+    // const {parentElement} = enhancedElement;
+    // if(parentElement === null) throw 404;
+    const scopeFragment = (enhancedElement.closest(scopeMatches) || enhancedElement.getRootNode());
     //first find all elements with attribute #
-    const hashIds = Array.from(parentElement.querySelectorAll('[\\#]'));
+    const hashIds = Array.from(scopeFragment.querySelectorAll('[\\#]')).filter(x => inScope(scopeFragment, x));
     const uniqueCheck = new Set();
     for (const hi of hashIds) {
         if (!(hi instanceof HTMLElement))
@@ -26,7 +37,7 @@ export function genIds(enhancedElement) {
         hi.dataset.id = `{{${sideEffects}${localName}}}`;
         hi.removeAttribute('#');
     }
-    const dataIds = Array.from(parentElement.querySelectorAll('[data-id^="{{"][data-id$="}}"]'));
+    const dataIds = Array.from(scopeFragment.querySelectorAll('[data-id^="{{"][data-id$="}}"]')).filter(x => inScope(scopeFragment, x));
     const ids = [];
     for (const di of dataIds) {
         if (!(di instanceof HTMLElement))
@@ -41,8 +52,9 @@ export function genIds(enhancedElement) {
             throw 500;
         ids.push(id);
     }
-    const allChildren = Array.from(parentElement.querySelectorAll('*'));
-    allChildren.push(parentElement);
+    const allChildren = Array.from(scopeFragment.querySelectorAll('*')).filter(x => inScope(scopeFragment, x));
+    if (scopeFragment instanceof Element)
+        allChildren.push(scopeFragment);
     const idLookup = {};
     const base = 'gid';
     for (const child of allChildren) {
@@ -124,7 +136,7 @@ export function genIds(enhancedElement) {
             nudge(child, name);
         }
     }
-    if ('disabled' in parentElement) {
-        nudge(parentElement);
+    if (scopeFragment instanceof Element && 'disabled' in scopeFragment) {
+        nudge(scopeFragment);
     }
 }

package/refid/genIds.ts

@@ -6,12 +6,23 @@ const attrMap = {
     '|': 'itemprop',
 };
 
+const scopeMatches = '[itemscope],fieldset';
+
+export function inScope(scopeFragment: DocumentFragment | Element, el: Element){
+    const closest = el.closest(scopeMatches);//TODO account for itemref?
+    if(closest === null) return true;
+    if(scopeFragment === closest) return true;
+    if(scopeFragment.contains(closest)) return false;
+    return true;
+}
+
 export function genIds(enhancedElement: Element){
-    const {parentElement} = enhancedElement;
-    if(parentElement === null) throw 404;
+    // const {parentElement} = enhancedElement;
+    // if(parentElement === null) throw 404;
+    const scopeFragment = (enhancedElement.closest(scopeMatches) || enhancedElement.getRootNode()) as DocumentFragment | Element;
 
     //first find all elements with attribute #
-    const hashIds = Array.from(parentElement.querySelectorAll('[\\#]'));
+    const hashIds = Array.from(scopeFragment.querySelectorAll('[\\#]')).filter(x => inScope(scopeFragment, x));
     const uniqueCheck = new Set();
     for(const hi of hashIds){
         if(!(hi instanceof HTMLElement)) continue;
@@ -27,7 +38,7 @@ export function genIds(enhancedElement: Element){
         hi.removeAttribute('#');
     }
 
-    const dataIds = Array.from(parentElement.querySelectorAll('[data-id^="{{"][data-id$="}}"]'));
+    const dataIds = Array.from(scopeFragment.querySelectorAll('[data-id^="{{"][data-id$="}}"]')).filter(x => inScope(scopeFragment, x));
     const ids: Array<string> = [];
     for(const di of dataIds){
         if(!(di instanceof HTMLElement)) continue;
@@ -40,8 +51,8 @@ export function genIds(enhancedElement: Element){
         ids.push(id);
     }
 
-    const allChildren = Array.from(parentElement.querySelectorAll('*'));
-    allChildren.push(parentElement);
+    const allChildren = Array.from(scopeFragment.querySelectorAll('*')).filter(x => inScope(scopeFragment, x));
+    if(scopeFragment instanceof Element) allChildren.push(scopeFragment);
 
     const idLookup: {[key: string]: string}  = {};
     const base = 'gid';
@@ -120,7 +131,7 @@ export function genIds(enhancedElement: Element){
             nudge(child, name);
         }
     }
-    if('disabled' in parentElement){
-        nudge(parentElement);
+    if(scopeFragment instanceof Element && 'disabled' in scopeFragment){
+        nudge(scopeFragment);
     }
 }

package/refid/hostish.js

@@ -4,14 +4,14 @@ Element.prototype.hostish = async function () {
     if (closest === null)
         return this.getRootNode().host;
     const { localName } = closest;
-    if (localName.includes('-')) {
-        await customElements.whenDefined(localName);
-        return closest;
-    }
     const itemScopeAttr = closest.getAttribute('itemscope');
     if (itemScopeAttr) {
         const { waitForIsh } = await import('mount-observer/waitForIsh.js');
         return await waitForIsh(closest);
     }
+    if (localName.includes('-')) {
+        await customElements.whenDefined(localName);
+        return closest;
+    }
     return this.getRootNode().host;
 };

package/refid/hostish.ts

@@ -5,14 +5,15 @@ Element.prototype.hostish = async function(){
     const closest = this.closest('[itemscope]') as HTMLElement;
     if(closest === null) return (<any>this.getRootNode()).host;
     const {localName} = closest;
-    if(localName.includes('-')){
-        await customElements.whenDefined(localName);
-        return closest;
-    }
     const itemScopeAttr = closest.getAttribute('itemscope');
     if(itemScopeAttr){
         const {waitForIsh} = await import('mount-observer/waitForIsh.js');
         return await waitForIsh(closest);
     }
+    if(localName.includes('-')){
+        await customElements.whenDefined(localName);
+        return closest;
+    }
+
     return (<any>this.getRootNode()).host;
 }

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

@@ -4,7 +4,11 @@ import {BEAllProps, EMC, IEnhancement} from '../trans-render/be/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 {IPE, Specifier} from '../trans-render/dss/types';
+import {Specifier} from '../trans-render/dss/types';
+
+export interface Element{
+    hostish(): Promise<any>
+}
 
 export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
     lhs?: any,
@@ -58,7 +62,7 @@ export type SwitchStatement = string;
 
 export interface OneValueSwitch{
     ifPart: string,
-    ipe: IPE,
+    specifier: Specifier,
     req?: boolean,
 }
 
@@ -72,8 +76,8 @@ export interface TwoPartOpStatement{
 }
 
 export interface TwoValueSwitch{
-    lhsIPE: IPE,
-    rhsIPE: IPE,
+    lhsSpecifier: Specifier,
+    rhsSpecifier: Specifier,
     req?: boolean,
     op?: Op,
     lhs?: ISide,
@@ -86,7 +90,7 @@ export interface TwoValueSwitch{
 
 }
 
-export interface Dependency extends IPE{}
+export interface Dependency extends Specifier{}
 
 export interface CanBeSwitchedOn {
     switchedOn?: boolean,

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

@@ -1,55 +1,11 @@
-import { Scope } from '../lib/types'
-import { CSSQuery } from '../types';
+export type ID = `#${string}`;
+export type Host = `:host()`;
+export type Hostish = ``;
+export type Target = ID | Host | Hostish;
 
-export type DSS = string;
-
-export type DirectionalScopeSigils = 
-    /**
-     * upward direction, non recursive
-     */
-    |'^'  
-    /**
-     * downward direction, next element siblings only
-     */
-    |'Y' 
-    /**
-     * IdRef query
-     * 
-     */ 
-    |'?'
-    /**
-     * self
-     */
-    |'.'
-    /**
-     * modulo
-     */
-    |'%'
-    /**
-     * itemscoped host
-     */
-    |'$'
-    /**
-     * comment scope
-     */
-    |'/**/'
-    ;
-
-export type AttrSigils =
-    /**
-     * Reference to self / local element
-     */
-    '$0' |
-    /**
-     * Reference by ID
-     */
-    '#' | '@' |  '-' | '|' | '%';
-
-export type ElementSigils = '/' | '~';
-
-export type ScopeSigils = '';
-
-export type Sigils = AttrSigils | ElementSigils | ScopeSigils;
+export type MindReadProp = ``;
+export type PropPath = `?.${string}`;
+export type ConstVal = `\`${string}\``;
 
 export type asOptions = 
     | 'number'
@@ -60,113 +16,32 @@ export type asOptions =
     | 'urlpattern'
     | 'boolean|number'
 ;
+export type MindReadType = ``;
+export type TypeQualifier = `-as-${asOptions}`;
 
-export interface $copeDetail{
-    ceName?: string,
-    itemProp?: string,
-}
-
-export interface $ScopeHierarchy {
-    home: Element;
-    satellites?: Array<Element>;
-}
-
-// deprecated
-export interface Specifier {
-    /** Directional Scope Sigil */
-    dss?: DirectionalScopeSigils,
-    /**
-     * recursive
-     */
-    rec?: boolean,
-    /**
-     * root node fallback
-     */
-    rnf?: boolean,
-    /**
-     * include siblings in scope search
-     */
-    isiss?: boolean,
-    scopeS?: CSSSelector,
-    elS?: CSSSelector,
-    el?: string,
-    idRefS?: string,
-    s?: Sigils,
-
-    /**
-     * Inferred prop name
-     * This should be the last token word of the DSS expression
-     */
-    prop?: InferredPropName,
-    path?: SubPropPath;
-    /**
-     * Event Name
-     */
-    evt?: EventName;
+export type ValExpression = `${PropPath | ConstVal | MindReadProp}${TypeQualifier | MindReadType}`;
 
-    /**
-     * RoundAbout Prop events to listen for
-     */
-    raps?: Array<string>;
+export type MindReadEvent = ``;
 
-    ms?: MarkerString;
-    self?: boolean;
-    /**
-     * must have a dash in the localName
-     * wait for whenDefined in find
-     */
-    host?: boolean;
-    /**
-     * host prop
-     */
-    hp?: string;
-    /**
-     * host prop fallback
-     */
-    hpf?: string;
-    
-    as?: asOptions
-        
-    /**
-     * is a scope query within the aria-[row|col|row]index[text]
-     */
-    isModulo?: boolean;
-    /**
-     * Specify which aria-[?]index to use
-     */
-    modulo?: Modulo;
+export type EventPart = `::${string}`;
 
-    /**
-     * is a scope query within comments
-     */
-    cmtWrap?: boolean;
+export type DSS = `${Target}${ValExpression}${EventPart}`;
 
-    /**
-     * itemscope hierarchy domain specifier
-     */
-    is$cope?: boolean;
 
-    $copeDetail?: $copeDetail;
-
-    constVal?: any;
-
-    enhBase?: string;
-}
-
-export interface IPE {
+export interface Specifier {
     id?: string,
     prop?: string,
     path?: SubPropPath,
-    evtName?: string,
+    evtName?: EventName,
     as?: asOptions,
     constVal?: any;
     enhKey?: string;
     ish?: boolean;
+    //element to observe must be a shadowed custom element host.
+    host?: boolean;
 }
 
-export type Modulo = 'aria-rowindex' | 'aria-colindex' | 'aria-rowindextext'
 
-export type InferredPropName = string;
 
 /**
  * can contain dot (.) for sub property access and pipes (|) for method invocations
@@ -175,44 +50,3 @@ export type SubPropPath = string;
 
 export type EventName = string;
 
-export type CSSSelector = string;
-
-/**
- * starts with a dash, typically all kebab case 
- * inferred prop name will be camel cased based on this.
- */
-export type MarkerString = string;
-
-/**
- * PIP stands for Partner in Prop (for now) -- supports bi-directional data flow to property
- * IP stands for In Prop (for now) -- Data only Flow only goes in
- * OP s
- */
-
-export interface GetPIPOptions{
-    //name of event to listen for for when the prop being monitored for changes
-    evtName?: string,
-    isRoundAboutReady?: boolean;
-    prop?: string,
-    sota?: string,
-}
-
-/**
- * Partner In Prop
- */
-export interface PIP<TProp = any, TElement = Element> extends EventListenerObject{
-    readonly propagator: EventTarget;
-    async getValue(el: TElement): Promise<TProp | undefined>;
-    async setValue(el: TElement, val: TProp);
-    async hydrate(el: TElement);
-    syncVal(el: TElement);
-    disconnect();
-    toString(nv: TProp): string;
-    readonly outEvtName: string;
-}
-
-
-
-export interface HasIshList {
-    ishList: Array<any>;
-}

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

@@ -25,13 +25,10 @@ export interface ElO {
 export interface RegExpExt<TStatementGroup = any>{
     regExp: RegExp | string,
     defaultVals: Partial<TStatementGroup>,
-    // deprecated
     dssKeys?: [string, string][],
-    // deprecated
     dssArrayKeys?: [string, string][],
     statementPartParser?: StatementPartParser,
-    ipeKeys?: [string, string][];
-    ipeArrayKeys?: [string, string][];
+
 }
 
 export interface StatementPartParser {