@ibyar/core 0.8.6 → 1.1.0

package/annotation/options.d.ts

@@ -0,0 +1,276 @@
+import type { Class, TypeOf } from '../utils/typeof.js';
+import { DomNode } from '@ibyar/elements';
+import { TemplateUrl } from '../utils/path.js';
+import { ZoneType } from '../zone/bootstrap.js';
+import { ValueControl } from '../component/custom-element.js';
+export interface DirectiveOptions {
+    /**
+     * the name of the directive which is used in the template
+     *
+     * a structural directive name should start with `*`,
+     * and an attributes directive should not.
+     */
+    selector: string;
+    /**
+     * - use `manual` for no zone.js patch effect applied,
+     *  and used for manual change detection for heavily process components.
+     *
+     * - use `proxy` zone for automatic detect changes without use of `zone.js`
+     *
+     * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,
+     *  `setInterval` and `fetch` and `XMLHttpRequest`, etc...
+     * make sure that `zone.js` is imported in the polyfills module.
+     *
+     * if no value specified, the value will be initialized by the custom element `web component` zone,
+     *  - if the web component zone is `manual`, the directive zone also will be `manual`, expect weird behavior.
+     *  - if the web component zone is `proxy`, the directive zone also will be `proxy`.
+     *  - if the web component zone is `aurora`, the directive zone also will be `aurora` and will get the benefit of `zone.js`.
+     */
+    zone?: ZoneType;
+}
+export interface ServiceOptions {
+    provideIn?: TypeOf<CustomElementConstructor> | 'root' | 'platform' | 'any';
+}
+export interface PipeOptions {
+    name: string;
+    asynchronous?: boolean;
+}
+export interface ComponentOptions<T = Class> {
+    /**
+     * a tag name for the component,
+     * if the tag name is valid custom element name, the view class will be a custom element,
+     * otherwise an HTMLUnknownElement will be created
+     */
+    selector: string;
+    /**
+     * add html file url path to fetch,
+     * templateUrl had propriety than template, and will override it.
+     *
+     * Can provide file name as "person-view.html" will resolved
+     * as 'http://site-address.org/persin-view.html',
+     *
+     * OR as an object { moduleMeta: import.meta, filename: 'person-edit.html' }
+     *  let (import.meta = '/person/person.js') will resolved
+     * as 'http://site-address.org/person/person-edit.html',
+     *
+     * OR as an object { moduleMeta: import.meta }
+     * let (import.meta = '/person/person.js') will resolved as 'http://site-address.org/person/person.html'.
+     *
+     * if url not found, component will not be defined,
+     *
+     * if you didn't use webpack or rollup.js or any bundler,
+     * you should copy the html files to its folder by yourself.
+     */
+    templateUrl?: TemplateUrl | string;
+    /**
+     * template: typeof 'string' ==> html string,
+     * 			 TypeOf 'DomRootRenderNode<T>' ==> JSX, create factory
+     * 	if template === null || undefined ==> it had nothing to render,
+     * and may be inherit from an html element
+     *
+     * 2 possible way to write a template, as inline string, represent a a valid html,
+     * or us aurora jsx factory
+     *
+     */
+    template?: string | DomNode;
+    /**
+     * style for this element
+     */
+    styles?: string | {
+        [key: string]: string;
+    }[];
+    /**
+     * what basic element should the new component inherit from,
+     * the tag name to inherit from as 'a', 'div', 'table', 'td', 'th', 'tr', etc ...
+     * also, support extends a custom element tag name.
+     */
+    extend?: keyof HTMLElementTagNameMap | `${string}-${string}`;
+    /**
+     * An encapsulation policy for the template and CSS styles. One of:
+     *  'custom': Use global CSS without any encapsulation.
+     *  'shadow-dom': Use Shadow DOM v1 to encapsulate styles.
+     *
+     *  'template': like 'custom', with load the template from the document ('index.html' file)
+     * 	 			that had the same id as the component "selector".
+     *  'shadow-dom-template': like 'shadowDom', and load template by selector id.
+     *
+     * Both 'template' & 'shadow-dom-template' encapsulation type:
+     *  should had attributes name like lowercase,
+     * 	the browser itself, will convert all attributes to lowercase
+     *
+     * ```typescript
+     *		@Input('personage') personAge: number;
+     *		@Input('propname') propName: string;
+     *		@Output('savebuttonclick') saveButtonClick = new EventEmitter<Persons>();
+     *		@View('personform') personForm: HTMLFormElement;
+     * ```
+     *
+     * any app root element as
+     *
+     * ```html
+     * <app-root></app-root>
+     * ```
+     *
+     * the supported bind options is 'One way binding *(as passing data only)'
+     *  and 'template parsing' and 'event binding' syntax, HTML (angular) like.
+     * it load its attributes from 'window object'
+     *
+     * so to pass date to A root element,
+     *
+     * ```html
+     * <script>
+     * 	const appVersion = '0.1.504';
+     * 	function onRootAppClick() {
+     *		console.log('root app clicked');
+     * 	}
+     * 	function onSave(data){
+     *		console.log('root app save', data);
+     * 	}
+     * </script>
+     * <app-root [version]="appVersion"
+     * 		onclick="onRootAppClick()"
+     * 		(save)="onSave()" >
+     * </app-root>
+     * ```
+     *
+     * default is 'custom'
+     * @type {'custom' | 'shadowDom' | 'template' | 'shadowDom-template'}
+     */
+    encapsulation?: 'custom' | 'shadow-dom' | 'template' | 'shadow-dom-template';
+    /**
+     * default: 'open' when encapsulation used,
+     * otherwise it is undefined and will not attach shadow root element.
+     */
+    shadowDomMode?: ShadowRootMode;
+    /**
+     * default: false
+     */
+    shadowDomDelegatesFocus?: boolean;
+    /**
+     * shadow root initialization options,
+     * default mode: `open`, delegatesFocus: `false` and slotAssignment: `manual`
+     */
+    shadowRootInit?: Partial<ShadowRootInit>;
+    /**
+     * Create a custom form-associated element with HTMLElement.attachInternals
+     * default: false
+     *
+     * if the value is `true` it is expected from the model class to implement `ValueControl<T>` interface
+     *
+     * otherwise you can register another class that implement `ValueControl<T>`,
+     * in case if you want split the model and the value controller.
+     *
+     * #### Usage Notes:
+     *
+     * ```ts
+     *
+     * @Component({
+     * 	selector: 'custom-message',
+     * 	template: `
+     * 		<label for="message">Message</label>
+     * 		<textarea id="message" [(value)]="message" [disabled]="disabled" (change)="onMessageChange($event.target.value)"></textarea>
+     * 	`,
+     * 	formAssociated: true,
+     * 	// formAssociated: CustomMessage,
+     * })
+     * export class CustomMessage implements ValueControl<string> {
+     *
+     * 	private message: string | null = '';
+     * 	private disabled: boolean = false;
+     * 	private _onChange: (_: any) => void = () => {};
+     *
+     * 	writeValue({ value, mode }: WriteValueOptions<string>) {
+     * 		this.message = mode !== 'reset' ? value : '';
+     * 	}
+     *
+     * 	registerOnChange(fn: (_: any) => void): void {
+     * 		this._onChange = fn;
+     * 	}
+     *
+     * 	setDisabledState(isDisabled: boolean) {
+     * 		this.disabled = isDisabled;
+     * 	}
+     *
+     * 	onMessageChange(message: string) {
+     * 		this._onChange(message);
+     * 	}
+     *
+     * }
+     *
+     *
+     * export class CustomInputValueControl implements ValueControl<number> {
+     *
+     * 	private _value: number | null = null;
+     * 	private _disabled: boolean = false;
+     * 	private _onChange: (_: any) => void = () => {};
+     *
+     * 	writeValue({ value, mode }: WriteValueOptions<number>) {
+     * 		this._value = mode !== 'reset' ? value : null;
+     * 	}
+     *
+     * 	registerOnChange(fn: (_: any) => void): void {
+     * 		this._onChange = fn;
+     * 	}
+     *
+     * 	setDisabledState(isDisabled: boolean) {
+     * 		this._disabled = isDisabled;
+     * 	}
+     *
+     * }
+     *
+     * @Component({
+     * 	selector: 'custom-input',
+     * 	extend: 'input',
+     * 	formAssociated: CustomInputValueControl,
+     * })
+     * export class CustomInputElement {
+     *
+     *  @View()
+     * 	view: HTMLInputElement;
+     *
+     * 	onInit() {
+     * 		this.view.type = 'number';
+     * 	}
+     * }
+     *
+     * ```
+     */
+    formAssociated?: boolean | TypeOf<ValueControl<any>>;
+    /**
+     * - use `manual` for no zone.js patch effect applied,
+     *  and used for manual change detection for heavily process components.
+     *
+     * - use `proxy` zone for automatic detect changes without use of `zone.js`
+     *
+     * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,
+     *  `setInterval` and `fetch` and `XMLHttpRequest`, etc...
+     * make sure that `zone.js` is imported in the polyfills module.
+     *
+     * the default value is the platform zone type which can be changed by:
+     *
+     * ```js
+     * bootstrapZone('manual')
+     * bootstrapZone('proxy')
+     * bootstrapZone('aurora')
+     * ```
+     *
+     * if `bootstrapZone` never been called, then the default zone is a `manual`.
+     */
+    zone?: ZoneType;
+    /**
+     * The imports property specifies the component's template dependencies — those directives, components, and pipes that can be used within its template.
+     */
+    imports?: (TypeOf<any> | ReadonlyArray<any>)[];
+}
+export interface ChildOptions {
+    [key: string]: any;
+}
+export interface ViewChildOpt {
+    selector: string | typeof HTMLElement | CustomElementConstructor;
+    childOptions?: ChildOptions;
+}
+export type OutputEventInit = Omit<EventInit, 'cancelable'>;
+export type OutputOptions = {
+    name?: string;
+} & OutputEventInit;
+//# sourceMappingURL=options.d.ts.map

package/annotation/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/core/annotation/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAG9D,MAAM,WAAW,gBAAgB;IAEhC;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;OAcG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;CAC3E;AAED,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,KAAK;IAE1C;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAEnC;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;IAE9C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,qBAAqB,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;IAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,qBAAqB,CAAC;IAE7E;;;OAGG;IACH,aAAa,CAAC,EAAE,cAAc,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmFG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;IAErD;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;CAC/C;AAED,MAAM,WAAW,YAAY;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC5B,QAAQ,EAAE,MAAM,GAAG,OAAO,WAAW,GAAG,wBAAwB,CAAC;IACjE,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,eAAe,CAAC"}

package/annotation/options.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=options.js.map

package/annotation/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../../src/core/annotation/options.ts"],"names":[],"mappings":"","sourcesContent":["import type { Class, TypeOf } from '../utils/typeof.js';\nimport { DomNode } from '@ibyar/elements';\nimport { TemplateUrl } from '../utils/path.js';\nimport { ZoneType } from '../zone/bootstrap.js';\nimport { ValueControl } from '../component/custom-element.js';\n\n\nexport interface DirectiveOptions {\n\n\t/**\n\t * the name of the directive which is used in the template\n\t * \n\t * a structural directive name should start with `*`,\n\t * and an attributes directive should not.\n\t */\n\tselector: string;\n\n\t/**\n\t * - use `manual` for no zone.js patch effect applied,\n\t *  and used for manual change detection for heavily process components.\n\t * \n\t * - use `proxy` zone for automatic detect changes without use of `zone.js`\n\t * \n\t * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,\n\t *  `setInterval` and `fetch` and `XMLHttpRequest`, etc...\n\t * make sure that `zone.js` is imported in the polyfills module. \n\t * \n\t * if no value specified, the value will be initialized by the custom element `web component` zone,\n\t *  - if the web component zone is `manual`, the directive zone also will be `manual`, expect weird behavior.\n\t *  - if the web component zone is `proxy`, the directive zone also will be `proxy`.\n\t *  - if the web component zone is `aurora`, the directive zone also will be `aurora` and will get the benefit of `zone.js`.\n\t */\n\tzone?: ZoneType;\n}\n\nexport interface ServiceOptions {\n\tprovideIn?: TypeOf<CustomElementConstructor> | 'root' | 'platform' | 'any';\n}\n\nexport interface PipeOptions {\n\tname: string;\n\tasynchronous?: boolean;\n}\n\nexport interface ComponentOptions<T = Class> {\n\n\t/**\n\t * a tag name for the component,\n\t * if the tag name is valid custom element name, the view class will be a custom element,\n\t * otherwise an HTMLUnknownElement will be created\n\t */\n\tselector: string;\n\n\t/**\n\t * add html file url path to fetch,\n\t * templateUrl had propriety than template, and will override it.\n\t *\n\t * Can provide file name as \"person-view.html\" will resolved \n\t * as 'http://site-address.org/persin-view.html',\n\t * \n\t * OR as an object { moduleMeta: import.meta, filename: 'person-edit.html' }\n\t *  let (import.meta = '/person/person.js') will resolved \n\t * as 'http://site-address.org/person/person-edit.html',\n\t * \n\t * OR as an object { moduleMeta: import.meta }\n\t * let (import.meta = '/person/person.js') will resolved as 'http://site-address.org/person/person.html'.\n\t * \n\t * if url not found, component will not be defined,\n\t * \n\t * if you didn't use webpack or rollup.js or any bundler, \n\t * you should copy the html files to its folder by yourself. \n\t */\n\ttemplateUrl?: TemplateUrl | string;\n\n\t/**\n\t * template: typeof 'string' ==> html string,\n\t * \t\t\t TypeOf 'DomRootRenderNode<T>' ==> JSX, create factory\n\t * \tif template === null || undefined ==> it had nothing to render, \n\t * and may be inherit from an html element\n\t * \n\t * 2 possible way to write a template, as inline string, represent a a valid html, \n\t * or us aurora jsx factory \n\t * \t\t\t\t\n\t */\n\ttemplate?: string | DomNode;\n\n\t/**\n\t * style for this element\n\t */\n\tstyles?: string | { [key: string]: string }[];\n\n\t/**\n\t * what basic element should the new component inherit from,\n\t * the tag name to inherit from as 'a', 'div', 'table', 'td', 'th', 'tr', etc ...\n\t * also, support extends a custom element tag name.\n\t */\n\textend?: keyof HTMLElementTagNameMap | `${string}-${string}`;\n\n\t/**\n\t * An encapsulation policy for the template and CSS styles. One of:\n\t *  'custom': Use global CSS without any encapsulation.\n\t *  'shadow-dom': Use Shadow DOM v1 to encapsulate styles.\n\t * \n\t *  'template': like 'custom', with load the template from the document ('index.html' file)\n\t * \t \t\t\tthat had the same id as the component \"selector\".\n\t *  'shadow-dom-template': like 'shadowDom', and load template by selector id.\n\t * \n\t * Both 'template' & 'shadow-dom-template' encapsulation type:\n\t *  should had attributes name like lowercase,\n\t * \tthe browser itself, will convert all attributes to lowercase\n\t * \n\t * ```typescript\n\t *\t\t@Input('personage') personAge: number;\n\t *\t\t@Input('propname') propName: string;\n\t *\t\t@Output('savebuttonclick') saveButtonClick = new EventEmitter<Persons>();\n\t *\t\t@View('personform') personForm: HTMLFormElement;\n\t * ```\n\t * \n\t * any app root element as \n\t * \n\t * ```html\n\t * <app-root></app-root>\n\t * ```\n\t * \n\t * the supported bind options is 'One way binding *(as passing data only)'\n\t *  and 'template parsing' and 'event binding' syntax, HTML (angular) like.\n\t * it load its attributes from 'window object'\n\t * \n\t * so to pass date to A root element, \n\t * \n\t * ```html\n\t * <script>\n\t * \tconst appVersion = '0.1.504';\n\t * \tfunction onRootAppClick() {\n\t *\t\tconsole.log('root app clicked');\n\t * \t}\n\t * \tfunction onSave(data){\n\t *\t\tconsole.log('root app save', data);\n\t * \t}\n\t * </script>\n\t * <app-root [version]=\"appVersion\" \n\t * \t\tonclick=\"onRootAppClick()\"\n\t * \t\t(save)=\"onSave()\" >\n\t * </app-root>\n\t * ```\n\t * \n\t * default is 'custom'\n\t * @type {'custom' | 'shadowDom' | 'template' | 'shadowDom-template'}\n\t */\n\tencapsulation?: 'custom' | 'shadow-dom' | 'template' | 'shadow-dom-template';\n\n\t/**\n\t * default: 'open' when encapsulation used,\n\t * otherwise it is undefined and will not attach shadow root element.\n\t */\n\tshadowDomMode?: ShadowRootMode;\n\n\t/**\n\t * default: false\n\t */\n\tshadowDomDelegatesFocus?: boolean;\n\n\t/**\n\t * shadow root initialization options,\n\t * default mode: `open`, delegatesFocus: `false` and slotAssignment: `manual`\n\t */\n\tshadowRootInit?: Partial<ShadowRootInit>;\n\n\t/**\n\t * Create a custom form-associated element with HTMLElement.attachInternals\n\t * default: false\n\t * \n\t * if the value is `true` it is expected from the model class to implement `ValueControl<T>` interface\n\t * \n\t * otherwise you can register another class that implement `ValueControl<T>`,\n\t * in case if you want split the model and the value controller.\n\t * \n\t * #### Usage Notes:\n\t * \n\t * ```ts\n\t * \n\t * @Component({\n\t * \tselector: 'custom-message',\n\t * \ttemplate: `\n\t * \t\t<label for=\"message\">Message</label>\n\t * \t\t<textarea id=\"message\" [(value)]=\"message\" [disabled]=\"disabled\" (change)=\"onMessageChange($event.target.value)\"></textarea>\n\t * \t`,\n\t * \tformAssociated: true,\n\t * \t// formAssociated: CustomMessage,\n\t * })\n\t * export class CustomMessage implements ValueControl<string> {\n\t * \n\t * \tprivate message: string | null = '';\n\t * \tprivate disabled: boolean = false;\n\t * \tprivate _onChange: (_: any) => void = () => {};\n\t * \n\t * \twriteValue({ value, mode }: WriteValueOptions<string>) {\n\t * \t\tthis.message = mode !== 'reset' ? value : '';\n\t * \t}\n\t * \n\t * \tregisterOnChange(fn: (_: any) => void): void {\n\t * \t\tthis._onChange = fn;\n\t * \t}\n\t * \n\t * \tsetDisabledState(isDisabled: boolean) {\n\t * \t\tthis.disabled = isDisabled;\n\t * \t}\n\t * \n\t * \tonMessageChange(message: string) {\n\t * \t\tthis._onChange(message);\n\t * \t}\n\t * \t\n\t * }\n\t * \n\t * \n\t * export class CustomInputValueControl implements ValueControl<number> {\n\t * \n\t * \tprivate _value: number | null = null;\n\t * \tprivate _disabled: boolean = false;\n\t * \tprivate _onChange: (_: any) => void = () => {};\n\t * \n\t * \twriteValue({ value, mode }: WriteValueOptions<number>) {\n\t * \t\tthis._value = mode !== 'reset' ? value : null;\n\t * \t}\n\t * \n\t * \tregisterOnChange(fn: (_: any) => void): void {\n\t * \t\tthis._onChange = fn;\n\t * \t}\n\t * \n\t * \tsetDisabledState(isDisabled: boolean) {\n\t * \t\tthis._disabled = isDisabled;\n\t * \t}\n\t * \t\n\t * }\n\t * \n\t * @Component({\n\t * \tselector: 'custom-input',\n\t * \textend: 'input',\n\t * \tformAssociated: CustomInputValueControl,\n\t * })\n\t * export class CustomInputElement {\n\t * \t\n\t *  @View()\n\t * \tview: HTMLInputElement;\n\t * \n\t * \tonInit() {\n\t * \t\tthis.view.type = 'number';\n\t * \t}\n\t * }\n\t * \n\t * ```\n\t */\n\tformAssociated?: boolean | TypeOf<ValueControl<any>>;\n\n\t/**\n\t * - use `manual` for no zone.js patch effect applied,\n\t *  and used for manual change detection for heavily process components.\n\t * \n\t * - use `proxy` zone for automatic detect changes without use of `zone.js`\n\t * \n\t * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,\n\t *  `setInterval` and `fetch` and `XMLHttpRequest`, etc...\n\t * make sure that `zone.js` is imported in the polyfills module. \n\t * \n\t * the default value is the platform zone type which can be changed by:\n\t * \n\t * ```js\n\t * bootstrapZone('manual')\n\t * bootstrapZone('proxy')\n\t * bootstrapZone('aurora')\n\t * ```\n\t * \n\t * if `bootstrapZone` never been called, then the default zone is a `manual`.\n\t */\n\tzone?: ZoneType;\n\n\t/**\n\t * The imports property specifies the component's template dependencies — those directives, components, and pipes that can be used within its template.\n\t */\n\timports?: (TypeOf<any> | ReadonlyArray<any>)[];\n}\n\nexport interface ChildOptions {\n\t[key: string]: any;\n}\n\nexport interface ViewChildOpt {\n\tselector: string | typeof HTMLElement | CustomElementConstructor;\n\tchildOptions?: ChildOptions;\n}\n\nexport type OutputEventInit = Omit<EventInit, 'cancelable'>;\nexport type OutputOptions = { name?: string } & OutputEventInit;\n"]}

package/binding/binding.expressions.d.ts

@@ -1,4 +1,4 @@
-import { ExpressionNode, InfixExpressionNode, ScopeSubscription, Stack, Context, MemberExpression, Identifier, VisitNodeType, NodeDeserializer } from '@ibyar/expressions';
+import { Context, ExpressionNode, Identifier, InfixExpressionNode, MemberExpression, NodeDeserializer, ScopeSubscription, Stack, VisitNodeType } from '@ibyar/expressions';
 type OneWayOperator = '=:';
 type TwoWayOperator = '=::';
 type BindingOperators = OneWayOperator | TwoWayOperator;
@@ -40,3 +40,4 @@ export declare class TwoWayAssignmentExpression extends InfixExpressionNode<TwoW
     subscribe(stack: Stack): ScopeSubscription<Context>[];
 }
 export {};
+//# sourceMappingURL=binding.expressions.d.ts.map

package/binding/binding.expressions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"binding.expressions.d.ts","sourceRoot":"","sources":["../../../src/core/binding/binding.expressions.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,OAAO,EAAoC,cAAc,EACzD,UAAU,EAAE,mBAAmB,EAAE,gBAAgB,EACjD,gBAAgB,EAAwB,iBAAiB,EACzD,KAAK,EAAwB,aAAa,EAE1C,MAAM,oBAAoB,CAAC;AAK5B,KAAK,cAAc,GAAG,IAAI,CAAC;AAC3B,KAAK,cAAc,GAAG,KAAK,CAAC;AAC5B,KAAK,gBAAgB,GAAG,cAAc,GAAG,cAAc,CAAC;AAExD,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAC/E,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAC;CAChF;AAGD,qBACa,0BAA2B,SAAQ,mBAAmB,CAAC,cAAc,CAAE,YAAW,iBAAiB;IAC/G,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,0BAA0B,EAAE,YAAY,EAAE,gBAAgB,GAAG,0BAA0B;IAM7G,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,0BAA0B,EAAE,SAAS,EAAE,aAAa,GAAG,IAAI;IAK9E,UAAkB,IAAI,EAAE,gBAAgB,CAAC;IACzC,OAAO,CAAC,WAAW,CAAuB;gBAC9B,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc;IAGzD,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG;IAG5B,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG;IAKtB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE;CA+B/E;AAGD;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,mBAAmB,CAAC,cAAc,CAAE,YAAW,iBAAiB;IAC/G,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,0BAA0B,EAAE,YAAY,EAAE,gBAAgB,GAAG,0BAA0B;IAM7G,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,0BAA0B,EAAE,SAAS,EAAE,aAAa,GAAG,IAAI;IAK9E,UAAkB,IAAI,EAAE,gBAAgB,CAAC;IACzC,UAAkB,KAAK,EAAE,gBAAgB,GAAG,UAAU,CAAC;IAEvD,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,UAAU,CAAqB;gBAC3B,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,GAAG,UAAU;IAMxE,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG;IAG5B,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG;IAItB,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,iBAAiB;IASzB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE;CAerD"}

package/binding/binding.expressions.js

@@ -1,136 +1,161 @@
-var OneWayAssignmentExpression_1, TwoWayAssignmentExpression_1;
-import { __decorate, __metadata } from "tslib";
-import { InfixExpressionNode, findReactiveScopeByEventMap, Scope, MemberExpression, Deserializer } from '@ibyar/expressions';
-import { createSubscriptionDestroyer } from '../context/subscription.js';
+import { __esDecorate, __runInitializers } from "tslib";
+import { Deserializer, InfixExpressionNode, Scope, findReactiveScopeByEventMap } from '@ibyar/expressions';
 import { isOnDestroy } from '../component/lifecycle.js';
+import { createSubscriptionDestroyer } from '../context/subscription.js';
 import { AsyncPipeProvider, AsyncPipeScope, PipeProvider } from '../pipe/pipe.js';
-let OneWayAssignmentExpression = OneWayAssignmentExpression_1 = class OneWayAssignmentExpression extends InfixExpressionNode {
-    static fromJSON(node, deserializer) {
-        return new OneWayAssignmentExpression_1(deserializer(node.left), deserializer(node.right));
-    }
-    static visit(node, visitNode) {
-        visitNode(node.left);
-        visitNode(node.right);
-    }
-    constructor(left, right) {
-        super('=:', left, right);
-        this.rightEvents = this.right.events();
-    }
-    set(stack, value) {
-        return this.left.set(stack, value);
-    }
-    get(stack) {
-        const rv = this.right.get(stack);
-        this.set(stack, rv);
-        return rv;
-    }
-    subscribe(stack, pipelineNames) {
-        const subscriptions = [];
-        if (pipelineNames?.length) {
-            const syncPipeScope = Scope.blockScope();
-            const asyncPipeScope = AsyncPipeScope.blockScope();
-            let hasAsync = false, hasSync = false;
-            pipelineNames.forEach(pipelineName => {
-                const scope = stack.findScope(pipelineName);
-                const pipe = scope.get(pipelineName);
-                if (scope instanceof AsyncPipeProvider) {
-                    hasAsync = true;
-                    asyncPipeScope.set(pipelineName, pipe);
-                    if (isOnDestroy(pipe.prototype)) {
-                        subscriptions.push(createSubscriptionDestroyer(() => asyncPipeScope.unsubscribe(pipelineName)));
+let OneWayAssignmentExpression = (() => {
+    let _classDecorators = [Deserializer('OneWayAssignment')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = InfixExpressionNode;
+    var OneWayAssignmentExpression = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            OneWayAssignmentExpression = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        static fromJSON(node, deserializer) {
+            return new OneWayAssignmentExpression(deserializer(node.left), deserializer(node.right));
+        }
+        static visit(node, visitNode) {
+            visitNode(node.left);
+            visitNode(node.right);
+        }
+        rightEvents = this.right.events();
+        constructor(left, right) {
+            super('=:', left, right);
+        }
+        set(stack, value) {
+            return this.left.set(stack, value);
+        }
+        get(stack) {
+            const rv = this.right.get(stack);
+            this.set(stack, rv);
+            return rv;
+        }
+        subscribe(stack, pipelineNames) {
+            const subscriptions = [];
+            if (pipelineNames?.length) {
+                const syncPipeScope = Scope.blockScope();
+                const asyncPipeScope = AsyncPipeScope.blockScope();
+                let hasAsync = false, hasSync = false;
+                pipelineNames.forEach(pipelineName => {
+                    const scope = stack.findScope(pipelineName);
+                    const pipe = scope.get(pipelineName);
+                    if (scope instanceof AsyncPipeProvider) {
+                        hasAsync = true;
+                        asyncPipeScope.set(pipelineName, pipe);
+                        if (isOnDestroy(pipe.prototype)) {
+                            subscriptions.push(createSubscriptionDestroyer(() => asyncPipeScope.unsubscribe(pipelineName)));
+                        }
+                    }
+                    else if (scope instanceof PipeProvider) {
+                        hasSync = true;
+                        syncPipeScope.set(pipelineName, pipe);
                     }
-                }
-                else if (scope instanceof PipeProvider) {
-                    hasSync = true;
-                    syncPipeScope.set(pipelineName, pipe);
-                }
+                });
+                hasSync && stack.pushScope(syncPipeScope);
+                hasAsync && stack.pushScope(asyncPipeScope);
+            }
+            const tuples = findReactiveScopeByEventMap(this.rightEvents, stack);
+            const callback = () => this.get(stack);
+            tuples.forEach(tuple => {
+                const subscription = tuple[1].subscribe(tuple[0], callback);
+                subscriptions.push(subscription);
             });
-            hasSync && stack.pushScope(syncPipeScope);
-            hasAsync && stack.pushScope(asyncPipeScope);
-        }
-        const tuples = findReactiveScopeByEventMap(this.rightEvents, stack);
-        const callback = () => this.get(stack);
-        tuples.forEach(tuple => {
-            const subscription = tuple[1].subscribe(tuple[0], callback);
-            subscriptions.push(subscription);
-        });
-        return subscriptions;
-    }
-};
-OneWayAssignmentExpression = OneWayAssignmentExpression_1 = __decorate([
-    Deserializer('OneWayAssignment'),
-    __metadata("design:paramtypes", [MemberExpression, Object])
-], OneWayAssignmentExpression);
+            return subscriptions;
+        }
+    };
+    return OneWayAssignmentExpression = _classThis;
+})();
 export { OneWayAssignmentExpression };
 /**
  * the default behavior is assign the right hand side to the left hand side.
  *
  *
  */
-let TwoWayAssignmentExpression = TwoWayAssignmentExpression_1 = class TwoWayAssignmentExpression extends InfixExpressionNode {
-    static fromJSON(node, deserializer) {
-        return new TwoWayAssignmentExpression_1(deserializer(node.left), deserializer(node.right));
-    }
-    static visit(node, visitNode) {
-        visitNode(node.left);
-        visitNode(node.right);
-    }
-    constructor(left, right) {
-        super('=::', left, right);
-        this.rightEvents = this.right.events();
-        this.leftEvents = this.left.events();
-    }
-    set(stack, value) {
-        return this.setRTL(stack, value);
-    }
-    get(stack) {
-        return this.getRTL(stack);
-    }
-    setRTL(stack, value) {
-        return this.left.set(stack, value);
-    }
-    getRTL(stack) {
-        const rv = this.right.get(stack);
-        this.setRTL(stack, rv);
-        return rv;
-    }
-    actionRTL(stack) {
-        return () => this.getRTL(stack);
-    }
-    setLTR(stack, value) {
-        return this.right.set(stack, value);
-    }
-    getLTR(stack) {
-        const lv = this.left.get(stack);
-        this.setLTR(stack, lv);
-        return lv;
-    }
-    actionLTR(stack) {
-        return () => this.getLTR(stack);
-    }
-    subscribeToEvents(stack, tuples, actionCallback) {
-        const subscriptions = [];
-        tuples.forEach(tuple => {
-            const subscription = tuple[1].subscribe(tuple[0], actionCallback);
-            subscriptions.push(subscription);
-        });
-        return subscriptions;
-    }
-    subscribe(stack) {
-        // right to left
-        const rightTuples = findReactiveScopeByEventMap(this.rightEvents, stack);
-        const rtlAction = this.actionRTL(stack);
-        const rtlSubscriptions = this.subscribeToEvents(stack, rightTuples, rtlAction);
-        // left to right 
-        const leftTuples = findReactiveScopeByEventMap(this.leftEvents, stack);
-        const ltrAction = this.actionLTR(stack);
-        const ltrSubscriptions = this.subscribeToEvents(stack, leftTuples, ltrAction);
-        return rtlSubscriptions.concat(ltrSubscriptions);
-    }
-};
-TwoWayAssignmentExpression = TwoWayAssignmentExpression_1 = __decorate([
-    Deserializer('TwoWayAssignment'),
-    __metadata("design:paramtypes", [MemberExpression, Object])
-], TwoWayAssignmentExpression);
+let TwoWayAssignmentExpression = (() => {
+    let _classDecorators = [Deserializer('TwoWayAssignment')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = InfixExpressionNode;
+    var TwoWayAssignmentExpression = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            TwoWayAssignmentExpression = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        static fromJSON(node, deserializer) {
+            return new TwoWayAssignmentExpression(deserializer(node.left), deserializer(node.right));
+        }
+        static visit(node, visitNode) {
+            visitNode(node.left);
+            visitNode(node.right);
+        }
+        rightEvents;
+        leftEvents;
+        constructor(left, right) {
+            super('=::', left, right);
+            this.rightEvents = this.right.events();
+            this.leftEvents = this.left.events();
+        }
+        set(stack, value) {
+            return this.setRTL(stack, value);
+        }
+        get(stack) {
+            return this.getRTL(stack);
+        }
+        setRTL(stack, value) {
+            return this.left.set(stack, value);
+        }
+        getRTL(stack) {
+            const rv = this.right.get(stack);
+            this.setRTL(stack, rv);
+            return rv;
+        }
+        actionRTL(stack) {
+            return () => this.getRTL(stack);
+        }
+        setLTR(stack, value) {
+            return this.right.set(stack, value);
+        }
+        getLTR(stack) {
+            const lv = this.left.get(stack);
+            this.setLTR(stack, lv);
+            return lv;
+        }
+        actionLTR(stack) {
+            return () => this.getLTR(stack);
+        }
+        subscribeToEvents(stack, tuples, actionCallback) {
+            const subscriptions = [];
+            tuples.forEach(tuple => {
+                const subscription = tuple[1].subscribe(tuple[0], actionCallback);
+                subscriptions.push(subscription);
+            });
+            return subscriptions;
+        }
+        subscribe(stack) {
+            // right to left
+            const rightTuples = findReactiveScopeByEventMap(this.rightEvents, stack);
+            const rtlAction = this.actionRTL(stack);
+            const rtlSubscriptions = this.subscribeToEvents(stack, rightTuples, rtlAction);
+            // left to right 
+            const leftTuples = findReactiveScopeByEventMap(this.leftEvents, stack);
+            const ltrAction = this.actionLTR(stack);
+            const ltrSubscriptions = this.subscribeToEvents(stack, leftTuples, ltrAction);
+            return rtlSubscriptions.concat(ltrSubscriptions);
+        }
+    };
+    return TwoWayAssignmentExpression = _classThis;
+})();
 export { TwoWayAssignmentExpression };
 //# sourceMappingURL=binding.expressions.js.map