import { MountContext, PipelineStage } from "../mount-observer/types"; import { ConvertOptions, Scope } from "./lib/types"; import { EMC} from './be/types'; export type PropAttrQueryType = | '|' //microdata itemprop | '@' //form element name | '#' //id | '%' //part | '.' //class //| '-' //marker | '$' //microdata itemprop + itemscope attributes (nested) | '-o' export type PropAttrPair = `${PropAttrQueryType} ${keyof TProps & string}`; export type PropQueryExpression = | `* ${CSSQuery}` | `:root` | `${keyof HTMLElementTagNameMap}` | `${PropAttrPair}` | `${PropAttrPair} -s ${keyof TElement & string}` | `${PropAttrPair} ${PropAttrPair}` | `${PropAttrPair} ${PropAttrPair} -s ${keyof TElement & string}` // | `${PropAttrPair} ${PropAttrPair} ${PropAttrPair}` // | `${PropAttrPair} ${PropAttrPair} ${PropAttrPair} -s ${keyof TElement & string}` // ; //#region derived expressions export type Expr0 = [string, number]; export type Expr1 = [...Expr0, string]; export type Expr2 = [...Expr1, number]; export type Expr3 = [...Expr2, string]; export type Expr4 = [...Expr3, number]; export type Expr5 = [...Expr4, string]; export type Expr6 = [...Expr5, number]; export type Expr7 = [...Expr6, string]; export type Expr8 = [...Expr7, number]; export type Expr9 = [...Expr8, string]; export type Expr10 = [...Expr9, number]; export type Expr11 = [...Expr10, string]; export type Expr12 = [...Expr11, number]; //export type Action = (matchingElement: Element, pique: IMountOrchestrator) => Promise> | Promise; export type InterpolatingExpression = Expr0 | Expr1 | Expr2 | Expr3 | Expr4 | Expr5 | Expr6 | Expr7 | Expr8 | Expr9 | Expr10 | Expr11 | Expr12; export type NumberExpression = [number]; export type DerivationCriteria = { //TODO path: string, from?: number, //TODO as?: ConvertOptions, //TODO - applicable to arrays filter?: keyof TMethods & string | ((val: any) => boolean), //TODO //map?: keyof TModhods & string | ((val: any) => any, }; export interface TransformOptions{ propagator?: MarkedUpEventTarget, propagatorIsReady?: boolean, skipInit?: boolean, useViewTransition?: boolean, outside?: string, } export type Derivative = | number | InterpolatingExpression | ((model: TProps & TMethods, transform: ITransformer, uow: UnitOfWork, matchingElement: Element) => any) | NumberExpression | DerivationCriteria // only works if lhs has field/property | keyof TMethods & string // combined observe an 0 | keyof TProps & string | boolean ; //#endregion export interface Engagement{ /** Invoked when the element is encountered. */ do?: keyof TMethods & string, /** Invoked when a previously matching element is no longer matching. */ undo?: keyof TMethods & string, /** Invoked when a previously matching element is disconnected. */ forget?: keyof TMethods & string, /** * Can be used for any kind of label, but most common use is for specifying a behavior/enhancement * to attach. */ be?: EMC, with?: any, waitForResolved?: boolean, dep?: () => void; } export type onMountStatusChange = 'onMount' | 'onDismount' | 'onDisconnect'; export interface EngagementCtx { be?: string, with?: any, type: onMountStatusChange, mountContext: MountContext } export type EngagementOrKeyOrEMC = | (keyof TMethods & string) | Engagement | EMC ; export type EngagementOrEMC = | Engagement | EMC export type Engagements = | EngagementOrKeyOrEMC | Array> ; export interface IMountOrchestrator{ //TODO add all the methods } // export type OneOrMore = // | keyof TProps & string // | `${keyof TProps & string} ${keyof TProps & string}` export type LHS = PropQueryExpression; export type CSSQuery = string; export interface ConditionGate{ ifAllOf?: number[], ifNoneOf?: number[], ifEqual?: [number, number | [number] | string], d?: Derivative, } export interface ScopingConfig { name: string; config?: IshConfig; } export type ScopeInstructions = | ScopingConfig ; export interface ScopedLoop{ config?: IshConfig; options: Partial } export type WhereConditions = | string //css matches | { matches: string, mediaMatches: string, containerQuery: string, } export type IfInstructions = string | boolean | number | [number] | ConditionGate ; export interface ObservePropParams { derivePropFrom?: string, } export type PropOrComputedProp = | keyof TProps & string | [keyof TProps & string, (val: any) => any] | [keyof TProps & string, keyof TMethods & string] | ObservePropParams | `:${string}` export interface CrossProduct { x: string | Array, y: (keyof TProps & TMethods & string) | Array } export interface ForEach{ each?: 0, /** css query to locate the template */ clone?: string, /** within scope for locating the template */ wi?: 'node' | 'rootNode' | 'upShadowSearch' indexProp?: string, xform: XForm & Info, appendTo?: string, timestampProp?: string, outOfRangeAction?: string, outOfRangeProp?: string, } // export interface MapInstructions{ // // itemCss: CSSQuery, // // each: string | [string, IshConfig], // // in: string | [string, IshConfig], // } export interface ForEachInterface{ init(): Promise; update(model: any[]): Promise; } export interface UnitOfWork{ /** * add event listener */ addEventListener?: AddEventListenerType | Array>, /** * abbrev. for addEventListener */ a?: 0 | AddEventListenerType | Array>, /** * Specify how the value we want to apply to the target element should be derived from the observed props. * derived value from observed props */ derivedValFromModel?: Derivative, /** * Specify how the value we want to apply to the target element should be derived from the observed props. * abbrev. for derivedValSpecs */ d?: Derivative, /** * Specify what to do when the element is encountered, and/or when it goes out of scope. * Register the found element in some way. * Actions not tied to observed props or user actions. */ engage?: Engagements /** * Specify what to do when the element is encountered, and/or when it goes out of scope. * Register the found element in some way. * Actions not tied to observed props or user actions. * Abbrev. for engagementActions */ e?: Engagements, forEachBinding?: ForEach /** * for each -- deprecated? */ f?: ForEach, /** * ifs ands or buts -- conditions on the model */ ifs?: IfInstructions, /** * ifs ands or buts -- conditions on the model * abbrev for ifs */ i?: IfInstructions, /** * method of matching element to pass derived value into * [TODO] */ invoke?: string, /** * modify the model in a (mostly) declarative way */ modifyModel?: ModificationUnitOfWork | Array>, /** * modify the model in a (mostly) declarative way * abbreviation for modifyModel */ m?: ModificationUnitOfWork | Array>, /** * List of props to observe from the model */ observedProps?: keyof TProps & string | PropOrComputedProp | PropOrComputedProp[], /** * List of props to observe from the model * abbrev. for observedProps */ o?: keyof TProps & string | PropOrComputedProp | PropOrComputedProp[], /** * set specified property of the matching element to the (derived) value */ setProp?: (keyof TElement & string) | {}, /** * set specified property of the matching element to the (derived) value * abbrev of setProp */ s?: (keyof TElement & string) | {}, /** * set specified attribute of the matching element to the (derived) value * */ setAttr?: string, /** * set specified attribute of the matching element to the (derived) value * abbrev of setAttr */ sa?: string, /** * set specified style of the matching element to the (derived) value */ ss?: string, /** * two way bind the listed props to data- attributes */ data?: Array /** * negate to */ negTo?: string, /** * Where condition for selecting the target elements. */ whereConditions?: WhereConditions, /** * Where conditions for selecting the target elements * abbrev. for whereConditions */ w?: WhereConditions, y?: number | YieldSettings, $?: ScopeInstructions, $$?: ScopedLoop, nudge?: boolean, } export interface YieldSettings{ to?: keyof TProps, as?: 'date' | 'number' } export type ValueFromElement = ( matchingElement: Element, transformer: ITransformer, mod: ModificationUnitOfWork ) => any export interface ModificationUnitOfWork{ on: string, //Double check that the event is the type expected instanceOf?: any, /** * Increment */ inc?: keyof TProps & string, /** * Increment by specified number, or by specified property coming from matching element */ byAmt?: number | string, /** * Set this prop on the host */ s?: keyof TProps & string, /** * [TODO] -- Set Custom State --only available for xtal-element */ ss?: string, /** * [TODO] -- Set attribute */ sa?: string, /** * [TODO] enhance / engage the host, or register the host in some way * don't implement this until a good use case is found, make sure it makes sense. */ e?: Engagements, /** * [TODO] Set hardcoded value */ to?: any, toValFrom?: string | ValueFromElement; toggle?: keyof TProps & string, stopPropagation?: boolean, } export interface QuenitOfWork extends UnitOfWork{ q: string, qi?: QueryInfo, } export type UnitOfWorkRHS = | 0 | keyof TMethods & string | keyof TProps & string | UnitOfWork | XForm & Info //unclear if this is necessary ; export type RHS = UnitOfWorkRHS | Array>; export interface AttrMap{ type: PropAttrQueryType, name: string } export interface QueryInfo{ isRootQry?: boolean, localPropCamelCase?: string, cssQuery?: CSSQuery, outside?: CSSQuery, o?: string[], s?: string[], localName?: string, //w?: WhereConditions, css?: string, hostPropToAttrMap?: Array } export type TransformerTarget = Element | DocumentFragment | Element[] | ShadowRoot | Document; export type Model = { [key: string]: any } export type EventListenerAction = (keyof TMethods & string) | ((e: Event, t: ITransformer, uow: UnitOfWork) => void); export type AddEventListenerType = | keyof TMethods & string | AddEventListener; export interface AddEventListener{ on: string, do: EventListenerAction, options?: boolean | EventListenerOptions, } export type XForm = Partial<{ [key in LHS]: RHS; }>; export interface Info { 411?: { w?: string, //idxFrom?: string } } export interface ITransformer{ target: TransformerTarget, model: TProps & TMethods, xform: XForm & Info, options: TransformOptions, initializedMods: Set>, //propagator?: EventTarget, } export type ToTransformer = ( target: TransformerTarget, model: TProps & TMethods, xform: XForm, propagator?: EventTarget ) => ITransformer; export interface MarkedUpEventTarget extends EventTarget{ ___props?: Set; ___nestedProps?: Map; } export interface TransRenderEndUserProps{ xform: XForm; scope: Scope; //model?: ModelProps & ModelMethods; options?: TransformOptions; } export interface TransRenderProps extends TransRenderEndUserProps{ } export interface TransRenderMethods{ getTarget(): Promise, getXForm(): Promise>, getModel(): Promise, skipInit: boolean, } import {IshConfig, OConfig} from './froop/types'; export interface MntCfg extends OConfig{ mainTemplate: string | HTMLTemplateElement, /** * Only set to true if shadow dom is used and the light children play a critical role as far as * progressive enhancement. */ appendOnClone?: boolean, /** * transform within ShadowRoot if applicable */ xform?: XForm, /** * transform applied to light children, if applicable * Use ":root" to match on the root element */ lcXform?: XForm, /** * transforms within ShadowRoot if applicable that uses view transitions */ xxform?: XForm styles?: /*CSSStyleSheet[] |*/ string | string[] | CSSStyleSheet | Array; shadowRootInit?: ShadowRootInit, assumeCSR?: boolean, } export interface MountProps{ readonly clonedTemplate?: DocumentFragment; deferHydration?: boolean; readonly hydrated?: boolean; readonly csr?: boolean; readonly xform?: XForm, readonly xxform?: XForm, } export type PMP = Partial>; export type ProPMP = Promise> export interface MountActions{ cloneMT(self: this): PMP; // inspect(self: this): PMP // mount(self: this): ProPMP initCSRXform(self: this): ProPMP; initSSRXform(self: this): ProPMP; onNoXForm(self: this): ProPMP; mountClone(self: this): Partial>; } export interface IObject$tring{ strVal: string | undefined; objVal: any; arrVal: any[] | undefined; parse(): Promise; } export type ZeroOrMore = T | Array | undefined; /** * https://x.com/mattpocockuk/status/1821926395380986219 */ export type StringWithAutocompleteOptions = | (string & {}) | TOptions; export interface Clone$Options{ //ish: HasIshList, ish: any, ishContainer: Element, seedEl: Element, idxStart: number, itemScopes: Array, mapIdxTo?: string, itemTemplates: Array; baseCrumb: string, idleTimeout: number, //model?: any, //listScope: string }