simple-boot-front 1.0.68 → 1.0.72

package/README.MD

@@ -169,9 +169,9 @@ npm install simple-boot-front
           console.log('poo->', testService)
       }
   }
-
   ```
-* @After, @Before
+  
+* @After, @Before   (AOP)
   ```typescript
   fire($event: MouseEvent, view: View<Element>) {
       console.log('fire method')
@@ -187,18 +187,7 @@ npm install simple-boot-front
       console.log('after', obj, protoType)
   }
   ```
-* @EventListener
-  ```typescript
-    @EventListener({target: window, name: 'resize'})
-    callBackResize($event: Event, view: View<any>) {
-        console.log('----resize-----', view, $event)
-    }
 
-    @EventListener({target: '#zzz', name: 'input'})
-    callBackInput($event: Event, view: View<any>) {
-        console.log('----input-----', view, $event)
-    }
-  ```
 * @ExceptionHandler
   ```typescript
   @ExceptionHandler()
@@ -211,9 +200,10 @@ npm install simple-boot-front
 ```typescript
 click() {
   intentManager.publish(new Intent('layout://info/data?a=wow&aa=zzz', Math.floor(RandomUtils.random(0, 100))));
-  // this.publish(new Intent('layout://info/datas', Math.floor(RandomUtils.random(0, 100))));
-  // this.publish(new Intent('layout://', Math.floor(RandomUtils.random(0, 100)))); // default callback method -> subscribe(i: Intent)
-  // this.publish(new Intent('://info/datas', Math.floor(RandomUtils.random(0, 100))));
+  // const data = new CustomEvent('intent', {detail: {uri: 'index://showStore', data: {id: ${it.ID}}}}); window.dispatchEvent(data);
+  //intentManager(new Intent('layout://info/datas', Math.floor(RandomUtils.random(0, 100))));
+  //intentManager(new Intent('layout://', Math.floor(RandomUtils.random(0, 100)))); // default callback method -> subscribe(i: Intent)
+  //intentManager(new Intent('://info/datas', Math.floor(RandomUtils.random(0, 100))));
 }
 ```
 
@@ -239,73 +229,23 @@ export class AppInfo {
 ## Reserved key word
  * html
    - attribute
-     - **[router-outlet]**: child module space
-     - **module-event-click**: click event
-       - value: method name, parameter($event, View)
-     ```html
-     <button dr-event-click="changeData">change</button>
-     ```
-     - **module-event-change**: change event
-       - value: method name, parameter($event, View)
-     ```html
-     <input dr-event-change="changeData">
-     ```
-     - **module-event-keyup**: keyup event
-       - value: method name, parameter($event, View)
-     ```html
-     <input dr-event-keyup="changeData">
-     ```
-     - **module-event-keydown**: keydown event
-       - value: method name, parameter($event, View)
-     ```html
-     <input dr-event-keydown="changeData">
-     ```
-     - **module-event-input**: input event
-       - value: method name, parameter($event, View)
-     ```html
-     <input dr-event-input="changeData">
-     ```
-     - **module-value-link**: link event (value change <-> input)
-       - value: variable name
-     ```html
-     <input dr-value-link="value">
-     ```
-     - **module-value**: value injection
-       - value: variable name
-     ```html
-     <input dr-value="value">
-     ```
-     - **module-change-attr**: change value setAttribute
-       - value: script
-     ```html
-     <img src="https://cdn.imweb.me/thumbnail/20190912/460132b4e4fce.jpg" module-change-attr="return {height: this.size, width: this.size}">
-     ```
-     - **module-change-style**: change value set Style
-       - value: script
-     ```html
-     <div module-change-style="return {fontSize: `${this.size}px`, color: this.randomColor()}">hello</div>
-     ```
      - **router-active-class**: url === href attribute => class add 
        - value: add and remove class name
      ```html
-     <a router-link="ajax" router-active-class="['active']">Ajax</a>
+     <a router-link="ajax" router-active-class="active">Ajax</a>
      ```
      - **router-link**:
        - value: router link
      ```html
      <a router-link="ajax">Ajax</a>
      ```
-     - subscribe
+     - intent
      ```typescript
-     data(i: Intent) {
+     showStore(i: Intent) {
       this.datas = i.data + '->' + i.params.aa
      }
-     viewSubscribe(i: Intent<View<HTMLInputElement>>) {
-       this.datas = i.data?.value + '->' + i.params.aa + '-->' + i.event
-     }
-    ```
-
-
+     call -> const data = new CustomEvent('intent', {detail: {uri: 'index://showStore', data: {id: ${it.ID}}}}); window.dispatchEvent(data);
+     ```
 ## License
 * MIT
 * visualkhh@gmail.com

package/SimpleBootFront.d.ts

@@ -6,12 +6,16 @@ import { HttpService } from './service/HttpService';
 import { SimstanceManager } from 'simple-boot-core/simstance/SimstanceManager';
 import { IntentManager } from 'simple-boot-core/intent/IntentManager';
 import { RouterManager } from 'simple-boot-core/route/RouterManager';
+import { TargetElement, TargetAttr } from 'dom-render/Config';
 export declare class SimpleBootFront extends SimpleApplication {
     rootRouter: ConstructorType<any>;
     option: SimFrontOption;
     navigation: Navigation;
     domRendoerExcludeProxy: (typeof SimFrontOption | typeof SimstanceManager | typeof SimpleApplication | typeof Navigation | typeof HttpService | typeof IntentManager | typeof RouterManager)[];
+    targetElements: TargetElement[];
+    targetAttrs: TargetAttr[];
     constructor(rootRouter: ConstructorType<any>, option: SimFrontOption);
+    getComponentInnerHtml(targetObj: any): string;
     createDomRender<T extends object>(obj: T): T;
     run(): void;
     private afterSetting;

package/SimpleBootFront.js

@@ -75,34 +75,64 @@ var SimpleBootFront = (function (_super) {
         _this.option = option;
         _this.domRendoerExcludeProxy = [SimpleApplication_1.SimpleApplication, IntentManager_1.IntentManager, RouterManager_1.RouterManager, SimstanceManager_1.SimstanceManager, SimFrontOption_1.SimFrontOption, Navigation_1.Navigation, ViewService_1.ViewService, HttpService_1.HttpService];
         window.__dirname = 'simple-boot-front__dirname';
+        _this.targetElements = [];
+        var selectors = Component_1.componentSelectors;
+        selectors.forEach(function (val, name) {
+            _this.targetElements.push({
+                name: name,
+                callBack: function (element, obj, rawSet) {
+                    var componentObj = _this.simstanceManager.newSim(val);
+                    var set = element.getAttribute('dr-set');
+                    if (set) {
+                        var comEvalTargetObj = {};
+                        comEvalTargetObj[name] = componentObj;
+                        var script = "var " + name + " = this['" + name + "']; " + set + " ";
+                        ScriptUtils_1.ScriptUtils.eval(script, Object.assign(comEvalTargetObj, obj));
+                    }
+                    var componentOption = (0, Component_1.getComponent)(componentObj);
+                    var fag = _this.option.window.document.createDocumentFragment();
+                    if (componentOption) {
+                        obj.__componentInstances[rawSet.uuid] = componentObj;
+                        var template = _this.option.window.document.createElement('div');
+                        template.innerHTML = _this.getComponentInnerHtml(componentObj);
+                        fag.append(RawSet_1.RawSet.drThisCreate(template, "this.__componentInstances['" + rawSet.uuid + "']", '', true, obj));
+                    }
+                    return fag;
+                }
+            });
+        });
+        _this.targetAttrs = [{
+                name: 'component', callBack: function (element, attrValue, obj, rawSet) {
+                    var fag = _this.option.window.document.createDocumentFragment();
+                    if (attrValue) {
+                        var targetObj = ScriptUtils_1.ScriptUtils.eval("return " + attrValue, obj);
+                        var n = element.cloneNode(true);
+                        var innerHTML = _this.getComponentInnerHtml(targetObj);
+                        n.innerHTML = innerHTML;
+                        fag.append(RawSet_1.RawSet.drThisCreate(n, attrValue, '', true, obj));
+                    }
+                    return fag;
+                }
+            }];
         option.proxy = {
             onProxy: function (it) { return _this.createDomRender(it); }
         };
         return _this;
     }
+    SimpleBootFront.prototype.getComponentInnerHtml = function (targetObj) {
+        var _a, _b, _c;
+        var component = (0, Component_1.getComponent)(targetObj);
+        var styles = ((_b = (_a = component === null || component === void 0 ? void 0 : component.styles) === null || _a === void 0 ? void 0 : _a.map(function (it) { return "<style>" + it + "</style>"; })) !== null && _b !== void 0 ? _b : []).join(' ');
+        var template = ((_c = component === null || component === void 0 ? void 0 : component.template) !== null && _c !== void 0 ? _c : '');
+        return styles + template;
+    };
     SimpleBootFront.prototype.createDomRender = function (obj) {
-        var _this = this;
-        var component = Component_1.getComponent(obj);
+        var component = (0, Component_1.getComponent)(obj);
         if (component && typeof obj === 'object') {
             return DomRender_1.DomRender.run(obj, undefined, {
-                targets: [{
-                        attrName: 'component', callBack: function (element, attrValue, obj) {
-                            var _a, _b, _c;
-                            var fag = _this.option.window.document.createDocumentFragment();
-                            if (attrValue) {
-                                var targetObj = ScriptUtils_1.ScriptUtils.eval("return " + attrValue, obj);
-                                var component_1 = Component_1.getComponent(targetObj);
-                                var styles = ((_b = (_a = component_1 === null || component_1 === void 0 ? void 0 : component_1.styles) === null || _a === void 0 ? void 0 : _a.map(function (it) { return "<style>" + it + "</style>"; })) !== null && _b !== void 0 ? _b : []).join(' ');
-                                var template = ((_c = component_1 === null || component_1 === void 0 ? void 0 : component_1.template) !== null && _c !== void 0 ? _c : '');
-                                var n = element.cloneNode(true);
-                                var innerHTML = styles + template;
-                                n.innerHTML = innerHTML;
-                                fag.append(RawSet_1.RawSet.drThisCreate(n, attrValue, '', true, obj));
-                            }
-                            return fag;
-                        }
-                    }],
-                onInit: function (attrName, attrValue, obj) {
+                targetElements: this.targetElements,
+                targetAttrs: this.targetAttrs,
+                onAttrInit: function (attrName, attrValue, obj) {
                     var _a, _b;
                     if (attrName === 'component') {
                         var bindObj = ScriptUtils_1.ScriptUtils.evalReturn(attrValue, obj);
@@ -113,7 +143,7 @@ var SimpleBootFront = (function (_super) {
                         attrName: 'router-link', callBack: function (elements, attrValue, obj) {
                             elements.addEventListener('click', function (event) {
                                 var _a;
-                                (_a = SimGlobal_1.SimGlobal().application.simstanceManager.getOrNewSim(Navigation_1.Navigation)) === null || _a === void 0 ? void 0 : _a.go(attrValue);
+                                (_a = (0, SimGlobal_1.SimGlobal)().application.simstanceManager.getOrNewSim(Navigation_1.Navigation)) === null || _a === void 0 ? void 0 : _a.go(attrValue);
                             });
                         }
                     }],

package/decorators/Component.d.ts

@@ -1,10 +1,10 @@
 import { ConstructorType, GenericClassDecorator } from 'simple-boot-core/types/Types';
+export declare const componentSelectors: Map<string, ConstructorType<any>>;
 export interface ComponentConfig {
+    selector?: string;
     template?: string;
     styles?: (string)[];
-    modules?: {
-        [name: string]: ConstructorType<any>;
-    };
+    using?: (ConstructorType<any>)[];
 }
 export declare const ComponentMetadataKey: unique symbol;
 export declare const Component: (config?: ComponentConfig | undefined) => GenericClassDecorator<ConstructorType<any>>;

package/decorators/Component.js

@@ -1,11 +1,39 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponent = exports.Component = exports.ComponentMetadataKey = void 0;
+exports.getComponent = exports.Component = exports.ComponentMetadataKey = exports.componentSelectors = void 0;
 var ReflectUtils_1 = require("simple-boot-core/utils/reflect/ReflectUtils");
+exports.componentSelectors = new Map();
 exports.ComponentMetadataKey = Symbol('Component');
 var Component = function (config) {
     return function (target) {
+        if (config === null || config === void 0 ? void 0 : config.selector) {
+            exports.componentSelectors.set(config === null || config === void 0 ? void 0 : config.selector, target);
+        }
         ReflectUtils_1.ReflectUtils.defineMetadata(exports.ComponentMetadataKey, config, target);
+        return (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.__componentInstances = {};
+                return _this;
+            }
+            return class_1;
+        }(target));
     };
 };
 exports.Component = Component;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-boot-front",
-  "version": "1.0.68",
+  "version": "1.0.72",
   "main": "SimpleApplication.js",
   "license": "MIT",
   "description": "front end SPA frameworks",
@@ -73,8 +73,8 @@
     "typescript": "^4.3.5"
   },
   "dependencies": {
-    "dom-render": "^1.0.27",
+    "dom-render": "^1.0.33",
     "reflect-metadata": "^0.1.13",
-    "simple-boot-core": "^1.0.19"
+    "simple-boot-core": "^1.0.20"
   }
 }

package/service/HttpService.js

@@ -15,7 +15,7 @@ var HttpService = (function () {
     function HttpService() {
     }
     HttpService = __decorate([
-        SimDecorator_1.Sim(),
+        (0, SimDecorator_1.Sim)(),
         __metadata("design:paramtypes", [])
     ], HttpService);
     return HttpService;

package/service/Navigation.js

@@ -67,7 +67,7 @@ var Navigation = (function () {
         window.dispatchEvent(new Event('popstate'));
     };
     Navigation = __decorate([
-        SimDecorator_1.Sim(),
+        (0, SimDecorator_1.Sim)(),
         __metadata("design:paramtypes", [SimFrontOption_1.SimFrontOption])
     ], Navigation);
     return Navigation;

package/service/view/ViewService.js

@@ -38,7 +38,7 @@ var ViewService = (function () {
         return (_a = this.e("." + selector)) !== null && _a !== void 0 ? _a : undefined;
     };
     ViewService = __decorate([
-        SimDecorator_1.Sim(),
+        (0, SimDecorator_1.Sim)(),
         __metadata("design:paramtypes", [])
     ], ViewService);
     return ViewService;