@ibyar/core 0.6.1 → 0.8.3

package/README.md

@@ -1,4 +1,4 @@
-# Aurora Core
+# Ibyar Core
 
 [![NPM Version][npm-image]][npm-url]
 [![NPM Downloads][downloads-image]][downloads-url]
@@ -16,8 +16,9 @@
 [lerna-url]: https://lerna.js.org/
 [contributors]: https://img.shields.io/github/contributors/ibyar/aurora
 
+Ibyar Core, implements Aurora's core functionality, low-level services, and utilities.
+
 Aurora API is the base of this project
-Implements Aurora's core functionality, low-level services, and utilities.
  - Defines the class infrastructure for components, view, model change detection, rendering, and event handling.
  - Data Binding for inputs and outputs.
  - Defines the decorators that supply metadata.

package/annotation/decorators.d.ts

@@ -1,7 +1,8 @@
 import type { TypeOf } from '../utils/typeof.js';
-import { DomNode, DomRenderNode } from '@ibyar/elements';
+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
@@ -55,7 +56,7 @@ export interface ComponentOptions<T = Function> {
      * or us aurora jsx factory
      *
      */
-    template?: string | DomNode | DomRenderNode<T> | Promise<string>;
+    template?: string | DomNode;
     /**
      * style for this element
      */
@@ -66,7 +67,7 @@ export interface ComponentOptions<T = Function> {
      * what basic element should the new component inherit from,
      * the tag name to inherit from as 'a', 'div', 'table', 'td', 'th', 'tr', etc ...
      */
-    extend?: string;
+    extend?: keyof HTMLElementTagNameMap;
     /**
      * An encapsulation policy for the template and CSS styles. One of:
      *  'custom': Use global CSS without any encapsulation.
@@ -126,6 +127,90 @@ export interface ComponentOptions<T = Function> {
      * default: false
      */
     shadowDomDelegatesFocus?: boolean;
+    /**
+     * 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 `noop` to no zone.js patch effect applied,
      *  and used for manual change detection for heavily process components
@@ -152,7 +237,13 @@ export interface ViewChildOpt {
     childOptions?: ChildOptions;
 }
 export declare function Input(name?: string): Function;
-export declare function Output(name?: string): Function;
+export declare function FormValue(): Function;
+export declare type OutputEventInit = Omit<EventInit, 'cancelable'>;
+export declare type OutputOptions = {
+    name?: string;
+} & OutputEventInit;
+export declare function Output(options?: OutputOptions): Function;
+export declare function Output(name?: string, options?: OutputEventInit): Function;
 export declare function View(): Function;
 export declare function ViewChild(selector: string | typeof HTMLElement | CustomElementConstructor, childOptions?: ChildOptions): Function;
 export declare function ViewChildren(selector: string | typeof HTMLElement | CustomElementConstructor): Function;
@@ -161,6 +252,11 @@ export declare function HostBinding(hostPropertyName: string): Function;
 export declare function Pipe(opt: PipeOptions): Function;
 export declare function Service(opt: ServiceOptions): Function;
 export declare function Directive(opt: DirectiveOptions): Function;
-export declare function Component<T extends object>(opt: ComponentOptions<T>): Function;
+export declare function Component<T extends {
+    new (...args: any[]): {};
+}>(opt: ComponentOptions<T> | ComponentOptions<T>[]): Function;
 export declare function SelfSkip(name?: string): Function;
 export declare function Optional(): Function;
+export declare function customElement<T extends HTMLElement>(opt: {
+    selector: string;
+} & ElementDefinitionOptions): Function;

package/annotation/decorators.js

@@ -1,38 +1,49 @@
 import { Components } from '../component/component.js';
+import { ReflectComponents } from '../component/reflect.js';
 import { fetchHtml } from '../utils/path.js';
 export function Input(name) {
     return (target, propertyKey) => {
-        Components.addInput(target, propertyKey, name || propertyKey);
+        ReflectComponents.addInput(target, propertyKey, name || propertyKey);
     };
 }
-export function Output(name) {
+export function FormValue() {
     return (target, propertyKey) => {
-        Components.addOutput(target, propertyKey, name || propertyKey);
+        ReflectComponents.addInput(target, propertyKey, 'value');
+    };
+}
+export function Output(name, options) {
+    const eventType = typeof name === 'object' ? name.name : name;
+    const eventOpts = typeof name === 'object' ? name : options;
+    return (target, propertyKey) => {
+        ReflectComponents.addOutput(target, propertyKey, eventType || propertyKey, {
+            bubbles: eventOpts?.bubbles ?? false,
+            composed: eventOpts?.composed ?? false
+        });
     };
 }
 export function View() {
     return (target, propertyKey) => {
-        Components.setComponentView(target, propertyKey);
+        ReflectComponents.setComponentView(target, propertyKey);
     };
 }
 export function ViewChild(selector, childOptions) {
     return (target, propertyKey) => {
-        Components.addViewChild(target, propertyKey, selector, childOptions);
+        ReflectComponents.addViewChild(target, propertyKey, selector, childOptions);
     };
 }
 export function ViewChildren(selector) {
     return (target, propertyKey) => {
-        Components.addViewChildren(target, propertyKey, selector);
+        ReflectComponents.addViewChildren(target, propertyKey, selector);
     };
 }
 export function HostListener(eventName, args) {
     return (target, propertyKey) => {
-        Components.addHostListener(target, propertyKey, eventName, args || []);
+        ReflectComponents.addHostListener(target, propertyKey, eventName, args || []);
     };
 }
 export function HostBinding(hostPropertyName) {
     return (target, propertyKey) => {
-        Components.addHostBinding(target, propertyKey, hostPropertyName);
+        ReflectComponents.addHostBinding(target, propertyKey, hostPropertyName);
     };
 }
 export function Pipe(opt) {
@@ -53,22 +64,32 @@ export function Directive(opt) {
         return target;
     };
 }
+function generateComponent(target, opt) {
+    if (opt.templateUrl) {
+        fetchHtml(opt.templateUrl)
+            .then(htmlTemplate => {
+            if (htmlTemplate) {
+                opt.template = htmlTemplate;
+                Components.defineComponent(target, opt);
+            }
+        })
+            .catch(reason => {
+            console.error(`Error @URL: ${opt.templateUrl}, for model Class: ${target.name},\n Reason: ${reason}.`);
+        });
+    }
+    else {
+        Components.defineComponent(target, opt);
+    }
+}
 export function Component(opt) {
     return (target) => {
-        if (opt.templateUrl) {
-            fetchHtml(opt.templateUrl)
-                .then(htmlTemplate => {
-                if (htmlTemplate) {
-                    opt.template = htmlTemplate;
-                    Components.defineComponent(target, opt);
-                }
-            })
-                .catch(reason => {
-                console.error(`Error @URL: ${opt.templateUrl}, for model Class: ${target.name},\n Reason: ${reason}.`);
-            });
+        if (Array.isArray(opt)) {
+            for (const comp of opt) {
+                generateComponent(target, comp);
+            }
         }
-        else {
-            Components.defineComponent(target, opt);
+        else if (typeof opt === 'object') {
+            generateComponent(target, opt);
         }
         return target;
     };
@@ -93,4 +114,10 @@ export function Optional() {
         metadata[index] = true;
     };
 }
+export function customElement(opt) {
+    return (target) => {
+        Components.defineView(target, opt);
+        return target;
+    };
+}
 //# sourceMappingURL=decorators.js.map

package/annotation/decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../../src/core/annotation/decorators.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TypeOf } from '../utils/typeof.js';\nimport { DomNode, DomRenderNode } from '@ibyar/elements';\nimport { Components } from '../component/component.js';\nimport { fetchHtml, TemplateUrl } from '../utils/path.js';\nimport { ZoneType } from '../zone/bootstrap.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\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 = Function> {\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\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 | DomRenderNode<T> | Promise<string>;\n\t/**\n\t * style for this element\n\t */\n\tstyles?: string | { [key: string]: string }[];\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 */\n\textend?: 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 root element as \n\t * \n\t * ```html\n\t * <root-app></root-app>\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 * \tlet 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 * <root-app [version]=\"appVersion\" \n\t * \t\tonclick=\"onRootAppClick()\"\n\t * \t\t(save)=\"onSave()\" ></root-app>\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'\n\t */\n\tshadowDomMode?: ShadowRootMode;\n\n\t/**\n\t * default: false\n\t */\n\tshadowDomDelegatesFocus?: boolean;\n\n\t/**\n\t * use `noop` to no zone.js patch effect applied,\n\t *  and used for manual change detection for heavily process components\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 is the platform which is initialized using\n\t * \n\t * ```js\n\t * bootstrapZone('noop')\n\t * bootstrapZone('aurora')\n\t * ```\n\t * \n\t * if `bootstrapZone` never been called, then the default zone is a noop zone.\n\t */\n\tzone?: ZoneType;\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 function Input(name?: string): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tComponents.addInput(target, propertyKey, name || propertyKey);\n\t};\n}\nexport function Output(name?: string): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tComponents.addOutput(target, propertyKey, name || propertyKey);\n\t};\n}\n\nexport function View(): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tComponents.setComponentView(target, propertyKey);\n\t};\n}\n\nexport function ViewChild(selector: string | typeof HTMLElement | CustomElementConstructor,\n\tchildOptions?: ChildOptions): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tComponents.addViewChild(target, propertyKey, selector, childOptions);\n\t};\n}\n\nexport function ViewChildren(selector: string | typeof HTMLElement | CustomElementConstructor): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tComponents.addViewChildren(target, propertyKey, selector);\n\t};\n}\n\nexport function HostListener(eventName: string, args?: string[]): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tComponents.addHostListener(\n\t\t\ttarget,\n\t\t\tpropertyKey,\n\t\t\teventName,\n\t\t\targs || []\n\t\t);\n\t};\n}\n\nexport function HostBinding(hostPropertyName: string): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tComponents.addHostBinding(target, propertyKey, hostPropertyName);\n\t};\n}\n\nexport function Pipe(opt: PipeOptions): Function {\n\treturn (target: Function) => {\n\t\tComponents.definePipe(target, opt);\n\t\treturn target;\n\t};\n}\n\nexport function Service(opt: ServiceOptions): Function {\n\treturn (target: Function) => {\n\t\tComponents.defineService(target, opt);\n\t\treturn target;\n\t};\n}\nexport function Directive(opt: DirectiveOptions): Function {\n\treturn (target: Function) => {\n\t\tComponents.defineDirective(target, opt);\n\t\treturn target;\n\t};\n}\n\nexport function Component<T extends object>(opt: ComponentOptions<T>): Function {\n\treturn (target: TypeOf<T>) => {\n\t\tif (opt.templateUrl) {\n\t\t\tfetchHtml(opt.templateUrl)\n\t\t\t\t.then(htmlTemplate => {\n\t\t\t\t\tif (htmlTemplate) {\n\t\t\t\t\t\topt.template = htmlTemplate;\n\t\t\t\t\t\tComponents.defineComponent(target, opt);\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch(reason => {\n\t\t\t\t\tconsole.error(`Error @URL: ${opt.templateUrl}, for model Class: ${target.name},\\n Reason: ${reason}.`);\n\t\t\t\t});\n\t\t} else {\n\t\t\tComponents.defineComponent(target, opt);\n\t\t}\n\t\treturn target;\n\t};\n}\n\nexport function SelfSkip(name?: string): Function {\n\treturn (target: Function, propertyKey: string, index: number) => {\n\t\tlet metadata = Reflect.getMetadata('selfskip', target, propertyKey);\n\t\tif (!metadata) {\n\t\t\tmetadata = {};\n\t\t\tReflect.defineMetadata('selfskip', metadata, target, propertyKey);\n\t\t}\n\t\tmetadata[index] = name;\n\t};\n}\n\nexport function Optional(): Function {\n\treturn (target: Function, propertyKey: string, index: number) => {\n\t\tlet metadata = Reflect.getMetadata('optional', target, propertyKey);\n\t\tif (!metadata) {\n\t\t\tmetadata = {};\n\t\t\tReflect.defineMetadata('optional', metadata, target, propertyKey);\n\t\t}\n\t\tmetadata[index] = true;\n\t};\n}\n"]}
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../../src/core/annotation/decorators.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TypeOf } from '../utils/typeof.js';\nimport { DomNode } from '@ibyar/elements';\nimport { Components } from '../component/component.js';\nimport { ReflectComponents } from '../component/reflect.js';\nimport { fetchHtml, 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\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 = Function> {\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\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\t/**\n\t * style for this element\n\t */\n\tstyles?: string | { [key: string]: string }[];\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 */\n\textend?: keyof HTMLElementTagNameMap;\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 root element as \n\t * \n\t * ```html\n\t * <root-app></root-app>\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 * \tlet 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 * <root-app [version]=\"appVersion\" \n\t * \t\tonclick=\"onRootAppClick()\"\n\t * \t\t(save)=\"onSave()\" ></root-app>\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'\n\t */\n\tshadowDomMode?: ShadowRootMode;\n\n\t/**\n\t * default: false\n\t */\n\tshadowDomDelegatesFocus?: boolean;\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@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 `noop` to no zone.js patch effect applied,\n\t *  and used for manual change detection for heavily process components\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 is the platform which is initialized using\n\t * \n\t * ```js\n\t * bootstrapZone('noop')\n\t * bootstrapZone('aurora')\n\t * ```\n\t * \n\t * if `bootstrapZone` never been called, then the default zone is a noop zone.\n\t */\n\tzone?: ZoneType;\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 function Input(name?: string): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.addInput(target, propertyKey, name || propertyKey);\n\t};\n}\n\nexport function FormValue(): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.addInput(target, propertyKey, 'value');\n\t};\n}\n\nexport type OutputEventInit = Omit<EventInit, 'cancelable'>;\nexport type OutputOptions = { name?: string } & OutputEventInit;\n\nexport function Output(options?: OutputOptions): Function;\nexport function Output(name?: string, options?: OutputEventInit): Function;\nexport function Output(name?: string | OutputOptions, options?: OutputEventInit): Function {\n\tconst eventType = typeof name === 'object' ? name.name : name;\n\tconst eventOpts = typeof name === 'object' ? name : options;\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.addOutput(\n\t\t\ttarget,\n\t\t\tpropertyKey, eventType || propertyKey,\n\t\t\t{\n\t\t\t\tbubbles: eventOpts?.bubbles ?? false,\n\t\t\t\tcomposed: eventOpts?.composed ?? false\n\t\t\t}\n\t\t);\n\t};\n}\n\nexport function View(): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.setComponentView(target, propertyKey);\n\t};\n}\n\nexport function ViewChild(selector: string | typeof HTMLElement | CustomElementConstructor,\n\tchildOptions?: ChildOptions): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.addViewChild(target, propertyKey, selector, childOptions);\n\t};\n}\n\nexport function ViewChildren(selector: string | typeof HTMLElement | CustomElementConstructor): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.addViewChildren(target, propertyKey, selector);\n\t};\n}\n\nexport function HostListener(eventName: string, args?: string[]): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.addHostListener(\n\t\t\ttarget,\n\t\t\tpropertyKey,\n\t\t\teventName,\n\t\t\targs || []\n\t\t);\n\t};\n}\n\nexport function HostBinding(hostPropertyName: string): Function {\n\treturn (target: Object, propertyKey: string) => {\n\t\tReflectComponents.addHostBinding(target, propertyKey, hostPropertyName);\n\t};\n}\n\nexport function Pipe(opt: PipeOptions): Function {\n\treturn (target: Function) => {\n\t\tComponents.definePipe(target, opt);\n\t\treturn target;\n\t};\n}\n\nexport function Service(opt: ServiceOptions): Function {\n\treturn (target: Function) => {\n\t\tComponents.defineService(target, opt);\n\t\treturn target;\n\t};\n}\nexport function Directive(opt: DirectiveOptions): Function {\n\treturn (target: Function) => {\n\t\tComponents.defineDirective(target, opt);\n\t\treturn target;\n\t};\n}\n\nfunction generateComponent<T extends { new(...args: any[]): {} }>(target: TypeOf<T>, opt: ComponentOptions<T>) {\n\tif (opt.templateUrl) {\n\t\tfetchHtml(opt.templateUrl)\n\t\t\t.then(htmlTemplate => {\n\t\t\t\tif (htmlTemplate) {\n\t\t\t\t\topt.template = htmlTemplate;\n\t\t\t\t\tComponents.defineComponent(target, opt);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(reason => {\n\t\t\t\tconsole.error(`Error @URL: ${opt.templateUrl}, for model Class: ${target.name},\\n Reason: ${reason}.`);\n\t\t\t});\n\t} else {\n\t\tComponents.defineComponent(target, opt);\n\t}\n}\n\nexport function Component<T extends { new(...args: any[]): {} }>(opt: ComponentOptions<T> | ComponentOptions<T>[]): Function {\n\treturn (target: TypeOf<T>) => {\n\t\tif (Array.isArray(opt)) {\n\t\t\tfor (const comp of opt) {\n\t\t\t\tgenerateComponent(target, comp);\n\t\t\t}\n\t\t} else if (typeof opt === 'object') {\n\t\t\tgenerateComponent(target, opt);\n\t\t}\n\t\treturn target;\n\t};\n}\n\nexport function SelfSkip(name?: string): Function {\n\treturn (target: Function, propertyKey: string, index: number) => {\n\t\tlet metadata = Reflect.getMetadata('selfskip', target, propertyKey);\n\t\tif (!metadata) {\n\t\t\tmetadata = {};\n\t\t\tReflect.defineMetadata('selfskip', metadata, target, propertyKey);\n\t\t}\n\t\tmetadata[index] = name;\n\t};\n}\n\nexport function Optional(): Function {\n\treturn (target: Function, propertyKey: string, index: number) => {\n\t\tlet metadata = Reflect.getMetadata('optional', target, propertyKey);\n\t\tif (!metadata) {\n\t\t\tmetadata = {};\n\t\t\tReflect.defineMetadata('optional', metadata, target, propertyKey);\n\t\t}\n\t\tmetadata[index] = true;\n\t};\n}\n\nexport function customElement<T extends HTMLElement>(opt: { selector: string } & ElementDefinitionOptions): Function {\n\treturn (target: TypeOf<T>) => {\n\t\tComponents.defineView(target, opt);\n\t\treturn target;\n\t};\n}\n"]}

package/binding/binding.expressions.d.ts

@@ -1,11 +1,13 @@
-import { ExpressionNode, InfixExpressionNode, ScopeSubscription, Stack, Context, MemberExpression, Identifier } from '@ibyar/expressions';
-declare type OneWayOperator = '.=';
-declare type TwoWayOperator = ':=';
+import { ExpressionNode, InfixExpressionNode, ScopeSubscription, Stack, Context, MemberExpression, Identifier, VisitNodeType, NodeDeserializer } from '@ibyar/expressions';
+declare type OneWayOperator = '=:';
+declare type TwoWayOperator = '=::';
 declare type BindingOperators = OneWayOperator | TwoWayOperator;
 export interface BindingAssignment extends InfixExpressionNode<BindingOperators> {
     subscribe(stack: Stack, pipelineNames?: string[]): ScopeSubscription<Context>[];
 }
 export declare class OneWayAssignmentExpression extends InfixExpressionNode<OneWayOperator> implements BindingAssignment {
+    static fromJSON(node: OneWayAssignmentExpression, deserializer: NodeDeserializer): OneWayAssignmentExpression;
+    static visit(node: OneWayAssignmentExpression, visitNode: VisitNodeType): void;
     protected left: MemberExpression;
     private rightEvents;
     constructor(left: MemberExpression, right: ExpressionNode);
@@ -19,6 +21,8 @@ export declare class OneWayAssignmentExpression extends InfixExpressionNode<OneW
  *
  */
 export declare class TwoWayAssignmentExpression extends InfixExpressionNode<TwoWayOperator> implements BindingAssignment {
+    static fromJSON(node: TwoWayAssignmentExpression, deserializer: NodeDeserializer): TwoWayAssignmentExpression;
+    static visit(node: TwoWayAssignmentExpression, visitNode: VisitNodeType): void;
     protected left: MemberExpression;
     protected right: MemberExpression | Identifier;
     private rightEvents;

package/binding/binding.expressions.js

@@ -1,13 +1,21 @@
+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 { isOnDestroy } from '../component/lifecycle.js';
 import { AsyncPipeProvider, AsyncPipeScope, PipeProvider } from '../pipe/pipe.js';
-let OneWayAssignmentExpression = class OneWayAssignmentExpression extends InfixExpressionNode {
+let OneWayAssignmentExpression = OneWayAssignmentExpression_1 = class OneWayAssignmentExpression extends InfixExpressionNode {
     constructor(left, right) {
-        super('.=', left, right);
+        super('=:', left, right);
         this.rightEvents = this.right.events();
     }
+    static fromJSON(node, deserializer) {
+        return new OneWayAssignmentExpression_1(deserializer(node.left), deserializer(node.right));
+    }
+    static visit(node, visitNode) {
+        visitNode(node.left);
+        visitNode(node.right);
+    }
     set(stack, value) {
         return this.left.set(stack, value);
     }
@@ -49,7 +57,7 @@ let OneWayAssignmentExpression = class OneWayAssignmentExpression extends InfixE
         return subscriptions;
     }
 };
-OneWayAssignmentExpression = __decorate([
+OneWayAssignmentExpression = OneWayAssignmentExpression_1 = __decorate([
     Deserializer('OneWayAssignment'),
     __metadata("design:paramtypes", [MemberExpression, Object])
 ], OneWayAssignmentExpression);
@@ -59,12 +67,19 @@ export { OneWayAssignmentExpression };
  *
  *
  */
-let TwoWayAssignmentExpression = class TwoWayAssignmentExpression extends InfixExpressionNode {
+let TwoWayAssignmentExpression = TwoWayAssignmentExpression_1 = class TwoWayAssignmentExpression extends InfixExpressionNode {
     constructor(left, right) {
-        super(':=', left, right);
+        super('=::', left, right);
         this.rightEvents = this.right.events();
         this.leftEvents = this.left.events();
     }
+    static fromJSON(node, deserializer) {
+        return new TwoWayAssignmentExpression_1(deserializer(node.left), deserializer(node.right));
+    }
+    static visit(node, visitNode) {
+        visitNode(node.left);
+        visitNode(node.right);
+    }
     set(stack, value) {
         return this.setRTL(stack, value);
     }
@@ -113,7 +128,7 @@ let TwoWayAssignmentExpression = class TwoWayAssignmentExpression extends InfixE
         return rtlSubscriptions.concat(ltrSubscriptions);
     }
 };
-TwoWayAssignmentExpression = __decorate([
+TwoWayAssignmentExpression = TwoWayAssignmentExpression_1 = __decorate([
     Deserializer('TwoWayAssignment'),
     __metadata("design:paramtypes", [MemberExpression, Object])
 ], TwoWayAssignmentExpression);

package/binding/binding.expressions.js.map

@@ -1 +1 @@
-{"version":3,"file":"binding.expressions.js","sourceRoot":"","sources":["../../../src/core/binding/binding.expressions.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tExpressionNode, InfixExpressionNode, ScopeSubscription,\n\tStack, findReactiveScopeByEventMap, ReactiveScope,\n\tContext, ValueChangedCallback, Scope,\n\tMemberExpression, Identifier, Deserializer\n} from '@ibyar/expressions';\nimport { createSubscriptionDestroyer } from '../context/subscription.js';\nimport { isOnDestroy } from '../component/lifecycle.js';\nimport { AsyncPipeProvider, AsyncPipeScope, PipeProvider } from '../pipe/pipe.js';\n\ntype OneWayOperator = '.=';\ntype TwoWayOperator = ':=';\ntype BindingOperators = OneWayOperator | TwoWayOperator;\n\nexport interface BindingAssignment extends InfixExpressionNode<BindingOperators> {\n\tsubscribe(stack: Stack, pipelineNames?: string[]): ScopeSubscription<Context>[];\n}\n\n\n@Deserializer('OneWayAssignment')\nexport class OneWayAssignmentExpression extends InfixExpressionNode<OneWayOperator> implements BindingAssignment {\n\n\tdeclare protected left: MemberExpression;\n\tprivate rightEvents = this.right.events();\n\tconstructor(left: MemberExpression, right: ExpressionNode) {\n\t\tsuper('.=', left, right);\n\t}\n\tset(stack: Stack, value: any) {\n\t\treturn this.left.set(stack, value);\n\t}\n\tget(stack: Stack): any {\n\t\tconst rv = this.right.get(stack);\n\t\tthis.set(stack, rv);\n\t\treturn rv;\n\t}\n\tsubscribe(stack: Stack, pipelineNames?: string[]): ScopeSubscription<Context>[] {\n\t\tconst subscriptions: ScopeSubscription<Context>[] = [];\n\t\tif (pipelineNames?.length) {\n\t\t\tconst syncPipeScope = Scope.blockScope();\n\t\t\tconst asyncPipeScope = AsyncPipeScope.blockScope();\n\t\t\tlet hasAsync = false, hasSync = false;\n\t\t\tpipelineNames.forEach(pipelineName => {\n\t\t\t\tconst scope = stack.findScope(pipelineName);\n\t\t\t\tconst pipe = scope.get(pipelineName)!;\n\t\t\t\tif (scope instanceof AsyncPipeProvider) {\n\t\t\t\t\thasAsync = true;\n\t\t\t\t\tasyncPipeScope.set(pipelineName, pipe);\n\t\t\t\t\tif (isOnDestroy(pipe.prototype)) {\n\t\t\t\t\t\tsubscriptions.push(createSubscriptionDestroyer(() => asyncPipeScope.unsubscribe(pipelineName)));\n\t\t\t\t\t}\n\t\t\t\t} else if (scope instanceof PipeProvider) {\n\t\t\t\t\thasSync = true;\n\t\t\t\t\tsyncPipeScope.set(pipelineName, pipe);\n\t\t\t\t}\n\t\t\t});\n\t\t\thasSync && stack.pushScope(syncPipeScope);\n\t\t\thasAsync && stack.pushScope(asyncPipeScope);\n\t\t}\n\t\tconst tuples = findReactiveScopeByEventMap(this.rightEvents, stack);\n\t\tconst callback: ValueChangedCallback = () => this.get(stack);\n\t\ttuples.forEach(tuple => {\n\t\t\tconst subscription = tuple[1].subscribe(tuple[0], callback);\n\t\t\tsubscriptions.push(subscription);\n\t\t});\n\t\treturn subscriptions;\n\t}\n}\n\n\n/**\n * the default behavior is assign the right hand side to the left hand side.\n * \n * \n */\n@Deserializer('TwoWayAssignment')\nexport class TwoWayAssignmentExpression extends InfixExpressionNode<TwoWayOperator> implements BindingAssignment {\n\n\tdeclare protected left: MemberExpression;\n\tdeclare protected right: MemberExpression | Identifier;\n\n\tprivate rightEvents = this.right.events();\n\tprivate leftEvents = this.left.events();\n\tconstructor(left: MemberExpression, right: MemberExpression | Identifier) {\n\t\tsuper(':=', left, right);\n\t}\n\n\tset(stack: Stack, value: any) {\n\t\treturn this.setRTL(stack, value);\n\t}\n\tget(stack: Stack): any {\n\t\treturn this.getRTL(stack);\n\t}\n\n\tprivate setRTL(stack: Stack, value: any) {\n\t\treturn this.left.set(stack, value);\n\t}\n\tprivate getRTL(stack: Stack): any {\n\t\tconst rv = this.right.get(stack);\n\t\tthis.setRTL(stack, rv);\n\t\treturn rv;\n\t}\n\tprivate actionRTL(stack: Stack): ValueChangedCallback {\n\t\treturn () => this.getRTL(stack);\n\t}\n\n\tprivate setLTR(stack: Stack, value: any) {\n\t\treturn this.right.set(stack, value);\n\t}\n\tprivate getLTR(stack: Stack): any {\n\t\tconst lv = this.left.get(stack);\n\t\tthis.setLTR(stack, lv);\n\t\treturn lv;\n\t}\n\tprivate actionLTR(stack: Stack): ValueChangedCallback {\n\t\treturn () => this.getLTR(stack);\n\t}\n\n\tprivate subscribeToEvents(stack: Stack, tuples: [string, ReactiveScope<Context>][], actionCallback: ValueChangedCallback) {\n\t\tconst subscriptions: ScopeSubscription<Context>[] = [];\n\t\ttuples.forEach(tuple => {\n\t\t\tconst subscription = tuple[1].subscribe(tuple[0], actionCallback);\n\t\t\tsubscriptions.push(subscription);\n\t\t});\n\t\treturn subscriptions;\n\t}\n\n\tsubscribe(stack: Stack): ScopeSubscription<Context>[] {\n\n\t\t// right to left\n\t\tconst rightTuples = findReactiveScopeByEventMap(this.rightEvents, stack);\n\t\tconst rtlAction = this.actionRTL(stack);\n\t\tconst rtlSubscriptions = this.subscribeToEvents(stack, rightTuples, rtlAction);\n\n\t\t// left to right \n\t\tconst leftTuples = findReactiveScopeByEventMap(this.leftEvents, stack);\n\t\tconst ltrAction = this.actionLTR(stack);\n\t\tconst ltrSubscriptions = this.subscribeToEvents(stack, leftTuples, ltrAction);\n\n\t\treturn rtlSubscriptions.concat(ltrSubscriptions);\n\t}\n\n}\n"]}
+{"version":3,"file":"binding.expressions.js","sourceRoot":"","sources":["../../../src/core/binding/binding.expressions.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tExpressionNode, InfixExpressionNode, ScopeSubscription,\n\tStack, findReactiveScopeByEventMap, ReactiveScope,\n\tContext, ValueChangedCallback, Scope,\n\tMemberExpression, Identifier, Deserializer,\n\tVisitNodeType, NodeDeserializer\n} from '@ibyar/expressions';\nimport { createSubscriptionDestroyer } from '../context/subscription.js';\nimport { isOnDestroy } from '../component/lifecycle.js';\nimport { AsyncPipeProvider, AsyncPipeScope, PipeProvider } from '../pipe/pipe.js';\n\ntype OneWayOperator = '=:';\ntype TwoWayOperator = '=::';\ntype BindingOperators = OneWayOperator | TwoWayOperator;\n\nexport interface BindingAssignment extends InfixExpressionNode<BindingOperators> {\n\tsubscribe(stack: Stack, pipelineNames?: string[]): ScopeSubscription<Context>[];\n}\n\n\n@Deserializer('OneWayAssignment')\nexport class OneWayAssignmentExpression extends InfixExpressionNode<OneWayOperator> implements BindingAssignment {\n\tstatic fromJSON(node: OneWayAssignmentExpression, deserializer: NodeDeserializer): OneWayAssignmentExpression {\n\t\treturn new OneWayAssignmentExpression(\n\t\t\tdeserializer(node.left) as MemberExpression,\n\t\t\tdeserializer(node.right)\n\t\t);\n\t}\n\tstatic visit(node: OneWayAssignmentExpression, visitNode: VisitNodeType): void {\n\t\tvisitNode(node.left);\n\t\tvisitNode(node.right);\n\t}\n\n\tdeclare protected left: MemberExpression;\n\tprivate rightEvents = this.right.events();\n\tconstructor(left: MemberExpression, right: ExpressionNode) {\n\t\tsuper('=:', left, right);\n\t}\n\tset(stack: Stack, value: any) {\n\t\treturn this.left.set(stack, value);\n\t}\n\tget(stack: Stack): any {\n\t\tconst rv = this.right.get(stack);\n\t\tthis.set(stack, rv);\n\t\treturn rv;\n\t}\n\tsubscribe(stack: Stack, pipelineNames?: string[]): ScopeSubscription<Context>[] {\n\t\tconst subscriptions: ScopeSubscription<Context>[] = [];\n\t\tif (pipelineNames?.length) {\n\t\t\tconst syncPipeScope = Scope.blockScope();\n\t\t\tconst asyncPipeScope = AsyncPipeScope.blockScope();\n\t\t\tlet hasAsync = false, hasSync = false;\n\t\t\tpipelineNames.forEach(pipelineName => {\n\t\t\t\tconst scope = stack.findScope(pipelineName);\n\t\t\t\tconst pipe = scope.get(pipelineName)!;\n\t\t\t\tif (scope instanceof AsyncPipeProvider) {\n\t\t\t\t\thasAsync = true;\n\t\t\t\t\tasyncPipeScope.set(pipelineName, pipe);\n\t\t\t\t\tif (isOnDestroy(pipe.prototype)) {\n\t\t\t\t\t\tsubscriptions.push(createSubscriptionDestroyer(() => asyncPipeScope.unsubscribe(pipelineName)));\n\t\t\t\t\t}\n\t\t\t\t} else if (scope instanceof PipeProvider) {\n\t\t\t\t\thasSync = true;\n\t\t\t\t\tsyncPipeScope.set(pipelineName, pipe);\n\t\t\t\t}\n\t\t\t});\n\t\t\thasSync && stack.pushScope(syncPipeScope);\n\t\t\thasAsync && stack.pushScope(asyncPipeScope);\n\t\t}\n\t\tconst tuples = findReactiveScopeByEventMap(this.rightEvents, stack);\n\t\tconst callback: ValueChangedCallback = () => this.get(stack);\n\t\ttuples.forEach(tuple => {\n\t\t\tconst subscription = tuple[1].subscribe(tuple[0], callback);\n\t\t\tsubscriptions.push(subscription);\n\t\t});\n\t\treturn subscriptions;\n\t}\n}\n\n\n/**\n * the default behavior is assign the right hand side to the left hand side.\n * \n * \n */\n@Deserializer('TwoWayAssignment')\nexport class TwoWayAssignmentExpression extends InfixExpressionNode<TwoWayOperator> implements BindingAssignment {\n\tstatic fromJSON(node: TwoWayAssignmentExpression, deserializer: NodeDeserializer): TwoWayAssignmentExpression {\n\t\treturn new TwoWayAssignmentExpression(\n\t\t\tdeserializer(node.left) as MemberExpression,\n\t\t\tdeserializer(node.right) as MemberExpression | Identifier\n\t\t);\n\t}\n\tstatic visit(node: TwoWayAssignmentExpression, visitNode: VisitNodeType): void {\n\t\tvisitNode(node.left);\n\t\tvisitNode(node.right);\n\t}\n\n\tdeclare protected left: MemberExpression;\n\tdeclare protected right: MemberExpression | Identifier;\n\n\tprivate rightEvents = this.right.events();\n\tprivate leftEvents = this.left.events();\n\tconstructor(left: MemberExpression, right: MemberExpression | Identifier) {\n\t\tsuper('=::', left, right);\n\t}\n\n\tset(stack: Stack, value: any) {\n\t\treturn this.setRTL(stack, value);\n\t}\n\tget(stack: Stack): any {\n\t\treturn this.getRTL(stack);\n\t}\n\n\tprivate setRTL(stack: Stack, value: any) {\n\t\treturn this.left.set(stack, value);\n\t}\n\tprivate getRTL(stack: Stack): any {\n\t\tconst rv = this.right.get(stack);\n\t\tthis.setRTL(stack, rv);\n\t\treturn rv;\n\t}\n\tprivate actionRTL(stack: Stack): ValueChangedCallback {\n\t\treturn () => this.getRTL(stack);\n\t}\n\n\tprivate setLTR(stack: Stack, value: any) {\n\t\treturn this.right.set(stack, value);\n\t}\n\tprivate getLTR(stack: Stack): any {\n\t\tconst lv = this.left.get(stack);\n\t\tthis.setLTR(stack, lv);\n\t\treturn lv;\n\t}\n\tprivate actionLTR(stack: Stack): ValueChangedCallback {\n\t\treturn () => this.getLTR(stack);\n\t}\n\n\tprivate subscribeToEvents(stack: Stack, tuples: [string, ReactiveScope<Context>][], actionCallback: ValueChangedCallback) {\n\t\tconst subscriptions: ScopeSubscription<Context>[] = [];\n\t\ttuples.forEach(tuple => {\n\t\t\tconst subscription = tuple[1].subscribe(tuple[0], actionCallback);\n\t\t\tsubscriptions.push(subscription);\n\t\t});\n\t\treturn subscriptions;\n\t}\n\n\tsubscribe(stack: Stack): ScopeSubscription<Context>[] {\n\n\t\t// right to left\n\t\tconst rightTuples = findReactiveScopeByEventMap(this.rightEvents, stack);\n\t\tconst rtlAction = this.actionRTL(stack);\n\t\tconst rtlSubscriptions = this.subscribeToEvents(stack, rightTuples, rtlAction);\n\n\t\t// left to right \n\t\tconst leftTuples = findReactiveScopeByEventMap(this.leftEvents, stack);\n\t\tconst ltrAction = this.actionLTR(stack);\n\t\tconst ltrSubscriptions = this.subscribeToEvents(stack, leftTuples, ltrAction);\n\n\t\treturn rtlSubscriptions.concat(ltrSubscriptions);\n\t}\n\n}\n"]}

package/component/component.d.ts

@@ -1,41 +1,10 @@
 import type { TypeOf } from '../utils/typeof.js';
 import { Tag, DomNode, DomRenderNode } from '@ibyar/elements';
-import { HTMLComponent } from './custom-element.js';
+import { HTMLComponent, ValueControl } from './custom-element.js';
 import { AttributeDirective, StructuralDirective } from '../directive/directive.js';
-import { ComponentOptions, ChildOptions, PipeOptions, ServiceOptions, DirectiveOptions } from '../annotation/decorators.js';
+import { ComponentOptions, PipeOptions, ServiceOptions, DirectiveOptions } from '../annotation/decorators.js';
 import { ZoneType } from '../zone/bootstrap.js';
-export declare class PropertyRef {
-    modelProperty: string;
-    private _viewName?;
-    constructor(modelProperty: string, _viewName?: string | undefined);
-    get viewAttribute(): string;
-}
-export declare class ChildRef {
-    modelName: string;
-    selector: string | {
-        new (): HTMLElement;
-        prototype: HTMLElement;
-    } | CustomElementConstructor;
-    childOptions?: ChildOptions | undefined;
-    constructor(modelName: string, selector: string | {
-        new (): HTMLElement;
-        prototype: HTMLElement;
-    } | CustomElementConstructor, childOptions?: ChildOptions | undefined);
-}
-export declare class ListenerRef {
-    eventName: string;
-    args: string[];
-    modelCallbackName: string;
-    constructor(eventName: string, args: string[], modelCallbackName: string);
-}
-export declare class HostBindingRef {
-    viewProperty: string;
-    hostPropertyName: string;
-    constructor(viewProperty: string, hostPropertyName: string);
-}
-export interface BootstrapMetadata {
-    [key: string]: any;
-}
+import { ChildRef, HostBindingRef, InputPropertyRef, ListenerRef, OutputPropertyRef, PropertyRef } from './reflect.js';
 export interface ServiceRef<T> {
     provideIn: TypeOf<CustomElementConstructor> | 'root' | 'platform' | 'any';
     modelClass: TypeOf<T>;
@@ -61,12 +30,13 @@ export interface DirectiveRef<T> {
 export interface ComponentRef<T> {
     selector: string;
     template: DomNode | DomRenderNode<T>;
+    compiledTemplate?: DomNode;
     styles: string;
     extend: Tag;
     viewClass: TypeOf<HTMLComponent<T>> & CustomElementConstructor;
     modelClass: TypeOf<T>;
-    inputs: PropertyRef[];
-    outputs: PropertyRef[];
+    inputs: InputPropertyRef[];
+    outputs: OutputPropertyRef[];
     view: string;
     viewChild: ChildRef[];
     ViewChildren: ChildRef[];
@@ -76,23 +46,15 @@ export interface ComponentRef<T> {
     isShadowDom: boolean;
     shadowDomMode: ShadowRootMode;
     shadowDomDelegatesFocus: boolean;
+    formAssociated: boolean | TypeOf<ValueControl<any>>;
     zone: ZoneType;
 }
 export declare class Components {
-    static getOrCreateBootstrap<T extends {}>(target: Object): T;
-    static getBootstrap<T extends {}>(target: Object): T;
-    static getComponentRef<T>(target: object): ComponentRef<T>;
-    static setComponentRef<T>(target: object, componentRef: ComponentRef<T>): void;
-    static addOptional(modelProperty: Object): void;
-    static addInput(modelProperty: Object, modelName: string, viewName: string): void;
-    static addOutput(modelProperty: Object, modelName: string, viewName: string): void;
-    static setComponentView(modelProperty: Object, modelName: string): void;
-    static addViewChild(modelProperty: Object, modelName: string, selector: string | typeof HTMLElement | CustomElementConstructor, childOptions?: ChildOptions): void;
-    static addViewChildren(modelProperty: Object, modelName: string, selector: string | typeof HTMLElement | CustomElementConstructor): void;
-    static addHostListener(modelProperty: Object, propertyKey: string, eventName: string, args: string[]): void;
-    static addHostBinding(modelProperty: Object, propertyKey: string, hostPropertyName: string): void;
     static defineDirective(modelClass: Function, opts: DirectiveOptions): void;
     static definePipe(modelClass: Function, opts: PipeOptions): void;
     static defineService(modelClass: Function, opts: ServiceOptions): void;
     static defineComponent<T extends Object>(modelClass: TypeOf<T>, opts: ComponentOptions<T>): void;
+    static defineView<T extends HTMLElement>(viewClass: TypeOf<T>, opt: {
+        selector: string;
+    } & ElementDefinitionOptions): void;
 }