mount-observer 0.0.31 → 0.0.32

package/compose.js

@@ -1,5 +1,6 @@
 import { inclTemplQry } from './MountObserver.js';
-export const guid = Symbol.for('Wr0WPVh84k+O93miuENdMA');
+export const childRefsKey = Symbol.for('Wr0WPVh84k+O93miuENdMA');
+export const cloneKey = Symbol.for('LD97VKZYc02CQv23DT/6fQ');
 export async function compose(self, el, level) {
     const src = el.getAttribute('src');
     el.removeAttribute('src');
@@ -69,25 +70,36 @@ export async function compose(self, el, level) {
         el.dispatchEvent(new LoadEvent(clone));
     }
     if (level === 0) {
-        const childRefs = [];
+        const refs = [];
         for (const child of clone.children) {
-            childRefs.push(new WeakRef(child));
+            refs.push(new WeakRef(child));
         }
-        el[guid] = childRefs;
+        el[childRefsKey] = refs;
     }
-    if (shadowRootModeOnLoad !== null) {
-        const parent = el.parentElement;
-        if (parent === null)
-            throw 404;
-        if (parent.shadowRoot === null)
-            parent.attachShadow({ mode: shadowRootModeOnLoad });
-        parent.shadowRoot?.append(clone);
+    //if template has itemscope attribute, assume want to do some data binding before instantiating into
+    //DOM fragment.
+    let cloneStashed = false;
+    if (el.hasAttribute('itemscope')) {
+        el[cloneKey] = clone;
+        cloneStashed = true;
     }
     else {
-        el.after(clone);
+        if (shadowRootModeOnLoad !== null) {
+            const parent = el.parentElement;
+            if (parent === null)
+                throw 404;
+            if (parent.shadowRoot === null)
+                parent.attachShadow({ mode: shadowRootModeOnLoad });
+            parent.shadowRoot?.append(clone);
+        }
+        else {
+            el.after(clone);
+        }
+    }
+    if (!cloneStashed) {
+        if (level !== 0 || (slots.length === 0 && el.attributes.length === 0))
+            el.remove();
     }
-    if (level !== 0 || (slots.length === 0 && !el.hasAttribute('itemscope')))
-        el.remove();
 }
 export class LoadEvent extends Event {
     clone;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -30,7 +30,7 @@
     "*.js",
     "types.d.ts"
   ],
-  "types": "types.d.ts",
+  "types": "./ts-refs/mount-observer/types.d.ts",
   "scripts": {
     "serve": "node node_modules/may-it-serve",
     "test": "playwright test",

package/types.d.ts

@@ -1,201 +0,0 @@
-//import { MountObserver } from "./MountObserver";
-
-export interface JSONSerializableMountInit{
-    readonly on?: CSSMatch,
-    readonly observedAttrsWhenMounted?: (string | ObservedSourceOfTruthAttribute)[],
-    readonly whereAttr?: WhereAttr,  
-    readonly whereElementIntersectsWith?: IntersectionObserverInit,
-    readonly whereMediaMatches?: MediaQuery,
-    readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
-
-}
-
-export interface ObservedSourceOfTruthAttribute<TProps = any>  {
-    name: string,
-    mapsTo?: keyof TProps & string,
-    valIfNull?: any,
-    valIfFalsy?: any,
-    instanceOf?: any,
-    customParser?: (newValue: string | null, oldValue: string | null, instance: Element) => any
-}
-
-export interface MountInit extends JSONSerializableMountInit{
-    
-    readonly withTargetShadowRoot?: ShadowRoot, 
-    readonly whereInstanceOf?: Array<{new(): Element}>,
-    readonly whereSatisfies?: PipelineProcessor<boolean>,
-    readonly do?: MountObserverCallbacks
-    // /**
-    //  * Purpose -- there are scenarios where we may only want to affect changes that occur after the initial 
-    //  * server rendering, so we only want to mount elements that appear 
-    //  */
-    // readonly ignoreInitialMatches?: boolean,
-}
-
-export interface MountObserverCallbacks{
-    readonly mount?: PipelineProcessor,
-    readonly dismount?: PipelineProcessor,
-    readonly disconnect?: PipelineProcessor,
-    readonly reconfirm?: PipelineProcessor,
-    readonly exit?: PipelineProcessor,
-}
-
-export interface RootCnfg{
-    start: string,
-    context: 'BuiltIn' | 'CustomElement' | 'Both'
-}
-
-//export type RootAttrOptions = Array<string | RootCnfg>;
-export type delimiter = string;
-export interface WhereAttr{
-    
-    hasBase?: string | [delimiter, string],
-    hasBranchIn?: Array<string> | [delimiter, Array<string>],
-    hasRootIn?: Array<RootCnfg>,
-    /**
-     * Used by consumers to track the universal meaning of this combination
-     * regardless of how the actual name values may be changed.
-     */
-    metadata?: any,
-}
-type CSSMatch = string;
-type ImportString = string;
-type MediaQuery = string;
-
-export interface AttribMatch{
-    names: string[],
-    //for boolean, support true/false/mixed
-    // type?: 'number' | 'string' | 'date' | 'json-object' | 'boolean',
-    // valConverter?: (s: string) => any,
-    // validator?: (v: any) => boolean;
-}
-
-export interface IMountObserver {
-    // readonly mountInit: MountInit,
-    // readonly mountedRefs:  WeakRef<Element>[],
-    // readonly dismountedRefs: WeakRef<Element>[],
-    observe(within: Node): void;
-    disconnect(within: Node): void;
-    module?: any;
-    mountedElements: WeakSet<Element>;
-    readAttrs(match: Element, branchIndexes?: Set<number>) : AttrChangeInfo[]
-} 
-
-export interface MountContext{
-    stage?: PipelineStage,
-    initializing?: boolean,
-}
-
-type PipelineStage = 'Inspecting' | 'PreImport' | 'PostImport' | 'Import' 
-export type PipelineProcessor<ReturnType = void> = (matchingElement: Element, observer: IMountObserver, ctx: MountContext) => Promise<ReturnType> | ReturnType;
-
-//#region mutation event
-export type mutationEventName = 'mutation-event';
-export interface MutationEvent{
-    mutationRecords: Array<MutationRecord>
-}
-export type mutationEventHandler = (e: MutationEvent) => void;
-
-export interface AddMutationEventListener {
-    addEventListener(eventName: mutationEventName, handler: mutationEventHandler, options?: AddEventListenerOptions): void;
-}
-//#endregion
-
-interface AttrParts{
-    name: string,
-    root?: string,
-    base?: string,
-    branch?: string,
-    branchIdx: number,
-    leaf?: string, //TODO
-    leafIdx?: number, //TODO
-    rootCnfg?: RootCnfg,
-    metadata?: any,
-}
-
-interface AttrChangeInfo{
-    oldValue: string | null,
-    newValue: string | null,
-    isSOfTAttr: boolean,
-    idx?: number,
-    name: string,
-    parts?: AttrParts,
-    mapsTo?: string,
-}
-
-//#region mount event
-export type mountEventName = 'mount';
-export interface IMountEvent{
-    mountedElement: Element,
-}
-export type mountEventHandler = (e: IMountEvent) => void;
-
-export interface AddMountEventListener {
-    addEventListener(eventName: mountEventName, handler: mountEventHandler, options?: AddEventListenerOptions): void;
-}
-//#endregion
-
-//#region dismount event
-export type dismountEventName = 'dismount';
-export interface IDismountEvent {
-    dismountedElement: Element
-}
-
-export type dismountEventHandler = (e: IDismountEvent) => void;
-
-export interface AddDismountEventListener {
-    addEventListener(eventName: dismountEventName, handler: dismountEventHandler, options?: AddEventListenerOptions): void;
-}
-//#endregion
-
-//#region disconnected event
-export type disconnectedEventName = 'disconnect';
-export interface IDisconnectEvent {
-    disconnectedElement: Element
-}
-
-export type disconnectedEventHandler = (e: IDisconnectEvent) => void;
-
-export interface AddDisconnectEventListener {
-    addEventListener(eventName: disconnectedEventName, handler: disconnectedEventHandler, options?: AddEventListenerOptions): void;
-}
-//endregion
-
-//#region attribute change event
-export type attrChangeEventName = 'attrChange';
-export interface IAttrChangeEvent extends IMountEvent {
-    attrChangeInfos: Array<AttrChangeInfo>,
-}
-export type attrChangeEventHandler = (e: IAttrChangeEvent) => void;
-export interface AddAttrChangeEventListener{
-    addEventListener(eventName: attrChangeEventName, handler: attrChangeEventHandler, options?: AddEventListenerOptions): void;
-}
-//#endregion
-
-//#region load event
-export type loadEventName = 'load';
-export interface ILoadEvent {
-    clone: DocumentFragment
-}
-export type loadEventHandler = (e: ILoadEvent) => void;
-export interface AddLoadEventListener{
-    addEventListener(eventName: loadEventName, handler: loadEventHandler, options?: AddEventListenerOptions): void
-}
-//#endregion
-
-//#region MountObserver Script Element
-export interface MOSEAddedProps<TSynConfig=any>{
-    init: JSONSerializableMountInit;
-    observer: IMountObserver;
-    do: MountObserverCallbacks;
-    synConfig: TSynConfig;
-}
-export interface MOSE<TSynConfig=any> 
-    extends HTMLScriptElement, MOSEAddedProps<TSynConfig>{
-
-}
-
-//#endregion
-
-
-