mount-observer 0.0.94 → 0.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.94",
+  "version": "0.0.96",
   "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/getContext.js": {
+      "default": "./refid/getContext.js",
+      "types": "./refid/getContext.ts"
+    },
     "./refid/getCount.js": {
       "default": "./refid/getCount.js",
       "types": "./refid/getCount.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,23 @@ export function genIds(enhancedElement) {
         hi.dataset.id = `{{${sideEffects}${localName}}}`;
         hi.removeAttribute('#');
     }
-    const dataIds = Array.from(parentElement.querySelectorAll('[data-id^="{{"][data-id$="}}"]'));
+    //now find all elements with attribute @
+    const names = Array.from(scopeFragment.querySelectorAll('[name]:not([name=""])[\\@]')).filter(x => inScope(scopeFragment, x));
+    for (const nameEl of names) {
+        if (!(nameEl instanceof HTMLElement))
+            continue;
+        const val = nameEl.getAttribute('name');
+        if (uniqueCheck.has(val))
+            throw 500;
+        uniqueCheck.add(val);
+        let sideEffects = '';
+        const nameValue = nameEl.getAttribute('@');
+        if (nameValue) {
+            sideEffects = `${nameValue} `;
+        }
+        nameEl.dataset.id = `{{${sideEffects}${val}}}`;
+    }
+    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 +68,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 +152,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,22 @@ export function genIds(enhancedElement: Element){
         hi.removeAttribute('#');
     }
 
-    const dataIds = Array.from(parentElement.querySelectorAll('[data-id^="{{"][data-id$="}}"]'));
+    //now find all elements with attribute @
+    const names = Array.from(scopeFragment.querySelectorAll('[name]:not([name=""])[\\@]')).filter(x => inScope(scopeFragment, x));
+    for(const nameEl of names){
+        if(!(nameEl instanceof HTMLElement)) continue;
+        const val = nameEl.getAttribute('name');
+        if(uniqueCheck.has(val)) throw 500;
+        uniqueCheck.add(val);
+        let sideEffects = '';
+        const nameValue = nameEl.getAttribute('@');
+        if(nameValue){
+            sideEffects = `${nameValue} `;
+        }
+        nameEl.dataset.id = `{{${sideEffects}${val}}}`;
+    }
+
+    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 +66,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 +146,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/getContext.js

@@ -0,0 +1,13 @@
+import './hostish.js';
+export function getContext(el, ctr) {
+    let hostish = el.hostish(false);
+    while (hostish && !(hostish instanceof ctr)) {
+        if ('hostish' in hostish) {
+            hostish = hostish.hostish();
+        }
+        else {
+            return null;
+        }
+    }
+    return hostish;
+}

package/refid/getContext.ts

@@ -0,0 +1,14 @@
+import './hostish.js';
+
+export function getContext<T extends Object>(el: Element, ctr: {new(): T}){
+    let hostish = (<any>el).hostish(false);
+    while(hostish && !(hostish instanceof ctr)){
+        if('hostish' in hostish){
+            hostish = hostish.hostish();
+        }else{
+            return null;
+        }
+        
+    }
+    return hostish;
+}

package/refid/hostish.js

@@ -1,7 +1,8 @@
 "use strict";
-Element.prototype.hostish = async function () {
-    const closest = this.closest('[itemscope]');
-    if (closest === null)
+Element.prototype.hostish = async function (checkSelf = true) {
+    const from = checkSelf ? this : this.hasAttribute('itemscope') ? this.parentElement : this;
+    const closest = from?.closest('[itemscope]');
+    if (closest === null || closest === undefined)
         return this.getRootNode().host;
     const { localName } = closest;
     const itemScopeAttr = closest.getAttribute('itemscope');

package/refid/hostish.ts

@@ -1,9 +1,10 @@
 interface Element{
     hostish(): Promise<any>
 }
-Element.prototype.hostish = async function(){
-    const closest = this.closest('[itemscope]') as HTMLElement;
-    if(closest === null) return (<any>this.getRootNode()).host;
+Element.prototype.hostish = async function(checkSelf = true){
+    const from = checkSelf ? this : this.hasAttribute('itemscope') ? this.parentElement : this;
+    const closest = from?.closest('[itemscope]') as HTMLElement;
+    if(closest === null || closest === undefined) return (<any>this.getRootNode()).host;
     const {localName} = closest;
     const itemScopeAttr = closest.getAttribute('itemscope');
     if(itemScopeAttr){

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

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

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

@@ -1,4 +1,4 @@
-import {BEAllProps, EnhancementInfo, IEnhancement, IW} from '../trans-render/be/types';
+import {BEAllProps, IEnhancement, IW} 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';

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

@@ -4,7 +4,7 @@ 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>
@@ -62,7 +62,7 @@ export type SwitchStatement = string;
 
 export interface OneValueSwitch{
     ifPart: string,
-    ipe: IPE,
+    specifier: Specifier,
     req?: boolean,
 }
 
@@ -76,8 +76,8 @@ export interface TwoPartOpStatement{
 }
 
 export interface TwoValueSwitch{
-    lhsIPE: IPE,
-    rhsIPE: IPE,
+    lhsSpecifier: Specifier,
+    rhsSpecifier: Specifier,
     req?: boolean,
     op?: Op,
     lhs?: ISide,
@@ -90,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,6 +1,3 @@
-import { Scope } from '../lib/types'
-import { CSSQuery } from '../types';
-
 export type ID = `#${string}`;
 export type Host = `:host()`;
 export type Hostish = ``;
@@ -20,22 +17,24 @@ export type asOptions =
     | 'boolean|number'
 ;
 export type MindReadType = ``;
-export type TypeQualifier = `as ${asOptions}`;
+export type TypeQualifier = `-as-${asOptions}`;
 
 export type ValExpression = `${PropPath | ConstVal | MindReadProp}${TypeQualifier | MindReadType}`;
 
 export type MindReadEvent = ``;
 
-export type EvtName = `::${string}`;
+export type EventSpecifier = `::${string}`;
+
+export type EventPart = MindReadEvent | EventSpecifier;
 
-export type DSS = `${Target}${ValExpression}${EvtName}`;
+export type DSS = `${Target}${ValExpression}${EventPart}`;
 
 
 export interface Specifier {
     id?: string,
     prop?: string,
     path?: SubPropPath,
-    evtName?: string,
+    evtName?: EventName,
     as?: asOptions,
     constVal?: any;
     enhKey?: string;

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

@@ -28,8 +28,7 @@ export interface RegExpExt<TStatementGroup = any>{
     dssKeys?: [string, string][],
     dssArrayKeys?: [string, string][],
     statementPartParser?: StatementPartParser,
-    //ipeKeys?: [string, string][];
-   // ipeArrayKeys?: [string, string][];
+
 }
 
 export interface StatementPartParser {