v0.71.37

Author: tenbits

.npmignore

@@ -17,5 +17,6 @@ src/
 builds/
 examples/
 /ref-**
+/projects
 
 

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "maskjs",
-    "version": "0.71.35",
+    "version": "0.71.37",
     "homepage": "https://github.com/atmajs/MaskJS",
     "authors": [
         "Alex Kit <[email protected]>"

package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "maskjs",
     "description": "Template / Markup / HMVC Engine",
-    "version": "0.71.35",
+    "version": "0.71.37",
     "homepage": "http://atmajs.com/mask",
     "contributors": [
         {
@@ -23,7 +23,9 @@
     "licenses": [
         "MIT"
     ],
-    "dependencies": {},
+    "dependencies": {
+        "@types/node": "^12.12.17"
+    },
     "devDependencies": {
         "@types/jquery": "^3.3.22",
         "@types/sinon": "^7.0.5",
@@ -45,7 +47,7 @@
         "server": "atma server --TEST",
         "examples": "atma server --TEST",
         "tsc": "tsc -p tsconfig-build.json",
-        "dts": "npm run tsc && atma run tools/build-dts"
+        "dts": "npm run tsc && atma run tools/build-dts --TEST"
     },
     "keywords": [],
     "atma": {

package.json

@@ -63,7 +63,8 @@ export const CompoProto = {
         serializeNodes: null,
         readAttributes: null,
         readProperties: null,
-        readArguments: null
+        readArguments: null,
+        refs: null
     },
 
     getAttribute <T = any> (key: string): T {
@@ -125,6 +126,9 @@ export const CompoProto = {
         if (this.compos != null) {
             Children_.select(this, this.compos);
         }
+        if (this.meta?.refs != null) {
+            Children_.selectSelf(this, this.meta.refs);
+        }
         if (this.hotkeys != null) {
             KeyboardHandler.hotkeys(this, this.hotkeys);
         }

projects/mask-compo/src/compo/CompoProto.ts

@@ -4,7 +4,7 @@ import { obj_create } from '@utils/obj';
 import { compo_prepairProperties } from '../util/compo_create';
 import { CompoProto } from './CompoProto';
 import { CompoStatics } from './CompoStatics';
-import { deco_slot, deco_attr } from '@compo/deco/component_decorators';
+import { deco_slot, deco_attr, deco_refCompo, deco_refElement, deco_refQuery } from '@compo/deco/component_decorators';
 import { IComponent } from '@compo/model/IComponent';
 
 export class Component extends class_create(CompoProto) implements IComponent {
@@ -67,7 +67,10 @@ export class Component extends class_create(CompoProto) implements IComponent {
 
     static deco = {
         slot: deco_slot,
-        attr: deco_attr
+        attr: deco_attr,
+        refCompo: deco_refCompo, 
+        refElement: deco_refElement, 
+        refQuery: deco_refQuery
     }
 }
 

projects/mask-compo/src/compo/Component.ts

@@ -19,13 +19,14 @@ export const Children_ = {
 	 *	});
 	 *
 	 */
-	select: function(component, compos) {
+	select (component, compos) {
 		for (var name in compos) {
 			var data = compos[name],
 				events = null,
 				selector = null;
 
 			if (data instanceof Array) {
+                console.error('obsolete');
 				selector = data[0];
 				events = data.splice(1);
 			}
@@ -60,5 +61,25 @@ export const Children_ = {
 				Events_.on(component, events, element);
 			}
 		}
-	}
+    },
+    selectSelf (self, refs: { compos?: any, elements?: any, queries?: any } ) {
+        let compos = refs.compos;
+        if (compos) {
+            for (let prop in compos) {
+                self[prop] = CompoConfig.selectors.compo(self, compos[prop]);
+            }
+        }
+        let q = refs.queries;
+        if (q) {
+            for (let prop in q) {
+                self[prop] = CompoConfig.selectors.$(self, q[prop]);
+            }
+        }
+        let els = refs.elements;
+        if (els) {
+            for (let prop in els) {
+                self[prop] = self.$[0].querySelector(els[prop]);
+            }
+        }
+    }
 };

projects/mask-compo/src/compo/children.ts

@@ -2,9 +2,9 @@ import { fn_proxy } from '@utils/fn';
 import { domLib_on } from '../util/domLib';
 
 export const Events_ = {
-	on: function(component, events, $element?) {
-		if ($element == null) {
-			$element = component.$;
+	on: function(component, events, $el?) {
+		if ($el == null) {
+			$el = component.$;
 		}
 
 		var isarray = events instanceof Array,
@@ -20,7 +20,7 @@ export const Events_ = {
 					x[0] = EventDecorator(x[0]);
 				}
 
-				$element.on.apply($element, x);
+				$el.on.apply($el, x);
 				continue;
 			}
 
@@ -42,7 +42,7 @@ export const Events_ = {
 					type = EventDecorator(type);
 				}
 
-				domLib_on($element, type, selector, fn_proxy(fn, component));
+				domLib_on($el, type, selector, fn_proxy(fn, component));
 			}
 		}
     },

projects/mask-compo/src/compo/events.ts

@@ -18,16 +18,39 @@ export function deco_slot (name?: string) {
 export function deco_attr (opts?: IAttrDefinition) {
 
     return function (target, propertyKey, descriptor?) {
-        let meta = target.meta;
-        if (meta == null) meta = target.meta = { attributes: {} };
-
-        let attr = meta.attributes;
-        if (attr == null) attr = meta.attributes = {};
-
+        let attr = ensureMeta(target, 'attributes');
         let name = opts?.name;
         if (name == null) {
             name = propertyKey[0] + propertyKey.substring(1).replace(/[A-Z]/g, c => `_${c.toLowerCase()}`);
         }
         attr [name] = obj_extend(opts, { name: propertyKey });
     };
-};
+};
+
+
+export function deco_refCompo (selector: string) {
+    return function (target, propertyKey, descriptor?) {
+        ensureRef(target, propertyKey, selector, 'compos');
+    };
+};
+export function deco_refElement (selector: string) {
+    return function (target, propertyKey, descriptor?) {
+        ensureRef(target, propertyKey, selector, 'elements');
+    };
+};
+export function deco_refQuery (selector: string) {
+    return function (target, propertyKey, descriptor?) {
+        ensureRef(target, propertyKey, selector, 'queries');
+    };
+};
+
+function ensureMeta(proto, name: string) {
+    let m = proto.meta;
+    if (m == null) m = proto.meta = { [name]: {} };
+    return m[name] ?? (m[name] = {});
+}
+function ensureRef(proto, key: string, selector: string, refName: string) {
+    let refs = ensureMeta(proto, 'refs');
+    let ref = refs[refName] ?? (refs[refName] = {});
+    ref[key] = selector;
+}

projects/mask-compo/src/deco/component_decorators.ts

@@ -269,6 +269,9 @@ export const Mask = {
     deco: {
         slot: Component.deco.slot,
         attr: Component.deco.attr,
+        refCompo: Component.deco.refCompo,
+        refElement: Component.deco.refCompo,
+        refQuery: Component.deco.refCompo,
         inject: Di.deco.injectableClass,
     },