simple-boot-front - npm Package Compare versions

Comparing version 1.0.57 to 1.0.58

decorators/Component.js

@@ -13,3 +13,3 @@ "use strict";
 var getComponent = function (target) {
-    if (typeof target === 'object') {
+    if (target && typeof target === 'object') {
         target = target.constructor;
@@ -16,0 +16,0 @@ }

option/SimFrontOption.d.ts

 import { SimOption } from 'simple-boot-core/SimOption';
 import { ConstructorType } from 'simple-boot-core/types/Types';
-import { Config, ConfigParam } from 'dom-render/Config';
 export declare enum UrlType {
@@ -12,8 +11,5 @@ path = "path",
     urlType: UrlType;
-    private _domRenderConfig?;
     constructor(window: Window, advice?: ConstructorType<any>[]);
-    setDomRenderConfig(config: ConfigParam): SimFrontOption;
-    getDomRenderConfig(): Config | undefined;
     setSelector(selector: string): SimFrontOption;
     setUrlType(urlType: UrlType): SimFrontOption;
 }

option/SimFrontOption.js

@@ -20,3 +20,2 @@ "use strict";
 var SimOption_1 = require("simple-boot-core/SimOption");
-var Config_1 = require("dom-render/Config");
 var UrlType;
@@ -37,9 +36,2 @@ (function (UrlType) {
     }
-    SimFrontOption.prototype.setDomRenderConfig = function (config) {
-        this._domRenderConfig = new Config_1.Config(config);
-        return this;
-    };
-    SimFrontOption.prototype.getDomRenderConfig = function () {
-        return this._domRenderConfig;
-    };
     SimFrontOption.prototype.setSelector = function (selector) {
@@ -46,0 +38,0 @@ this.selector = selector;

package.json

 {
   "name": "simple-boot-front",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "main": "SimpleApplication.js",
@@ -5,0 +5,0 @@ "license": "MIT",

README.MD

@@ -51,34 +51,46 @@ ![Single Page Application Framworks](assets/banner.png)
     ```typescript
-    @Sim({scheme: 'layout-router'})
-    @Component({template, styles: [css]})
-    @Router({
-      path: '',
-      childs: {
-      '': Index,
-      '/': Index,
-      '/user': User
-      }
-    })
-    export class AppRouter implements RouterAction, LifeCycle {
-        name = 'AppRouter'
-        data = {name: 'good'}
-        child?: ConstructorType<any>
-    
-        constructor(private navigation: Navigation) {
-        }
-    
-        canActivate(url: Intent, module: ConstructorType<object>) {
-            console.log('canActivate  router--->', url, module)
-            this.child = module;
-        }
-    
-        onReady(data: HTMLFrameElement): void {
-        }
-    
-        onRenderd(data: HTMLFrameElement): void {
-        }
-    
-        onScopeMaked(data: Scope): void {
-        }
-    }
+     @Sim({scheme: 'layout-router'})
+     @Component({template, styles: [css]})
+     @Router({
+     path: '',
+     childs: {
+     '': Index,
+     '/': Index,
+     '/user': User
+     }
+     })
+     export class AppRouter implements RouterAction, FrontLifeCycle {
+     name = 'AppRouter'
+     data = {name: 'good'}
+     child?: any
+     
+         constructor(private navigation: Navigation, private simOption: SimFrontOption) {
+         }
+     
+         canActivate(url: Intent, module: any) {
+             console.log('canActivate  router--->', url, module)
+             this.child = module;
+         }
+     
+         onReady(data: HTMLFrameElement): void {
+         }
+     
+         onRenderd(data: HTMLFrameElement): void {
+         }
+     
+         onChangedRender(): void {
+         }
+     
+         onCreate(): void {
+         }
+     
+         onFinish(): void {
+         }
+     
+         onInit(): void {
+         }
+     
+         onInitedChild(): void {
+         }
+     }
 
@@ -111,36 +123,10 @@ ```
     <h1>index</h1>
-    <!--% write(this.data.name); %-->
+    ${this.data.name}
     <button dr-event-click="this.data.name='vvv'"> change name </button>
     ```
 
-## View template engine
+## View template engine (dom-render)
+ - https://github.com/visualkhh/dom-render
  - ### It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
  - ### Update view only for parts where the value has changed.
- - scope
-   - start: <!--% 
-   - end: %-->
-   - write: write string
-   - include  
-     - include: donRenderProxy obj include 
-   - component  
-     - component: component include 
-   - ex
-      ```html
-      <div><!--%write(this.data)%--></div>
-      <div><!--%component(this.aModule)%--></div>
-      <div>
-      <!--%
-          for (let i of this.datas) {
-              write('<li>' + i + '</li>');
-          }
-      %-->
-      </div>
-      <div>
-          <!--%
-          for(var i = 0 ; i < this.count ; i ++) {
-              write("<img src='https://cdn.imweb.me/thumbnail/20190912/460132b4e4fce.jpg' module-change-attr=\"return {height: this.size, width: this.size}\">");
-          }
-          %-->
-      </div>
-      ```
 
@@ -147,0 +133,0 @@ ## Module LifeCycle

SimpleBootFront.d.ts

@@ -5,2 +5,6 @@ import { SimFrontOption } from './option/SimFrontOption';
 import { Navigation } from './service/Navigation';
+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';
 export declare class SimpleBootFront extends SimpleApplication {
@@ -10,5 +14,7 @@ rootRouter: ConstructorType<any>;
     navigation: Navigation;
+    domRendoerExcludeProxy: (typeof SimFrontOption | typeof SimstanceManager | typeof SimpleApplication | typeof Navigation | typeof HttpService | typeof IntentManager | typeof RouterManager)[];
     constructor(rootRouter: ConstructorType<any>, option: SimFrontOption);
+    createDomRender<T extends object>(obj: T): T;
     run(): void;
     private afterSetting;
 }

SimpleBootFront.js

@@ -58,3 +58,2 @@ "use strict";
 var DomRender_1 = require("dom-render/DomRender");
-var RootScope_1 = require("dom-render/RootScope");
 var SimAtomic_1 = require("simple-boot-core/simstance/SimAtomic");
@@ -64,10 +63,10 @@ var SimpleApplication_1 = require("simple-boot-core/SimpleApplication");
 var Navigation_1 = require("./service/Navigation");
-var ScopeFrontObject_1 = require("./render/ScopeFrontObject");
 var ViewService_1 = require("./service/view/ViewService");
 var HttpService_1 = require("./service/HttpService");
 var SimstanceManager_1 = require("simple-boot-core/simstance/SimstanceManager");
-var EventManager_1 = require("dom-render/events/EventManager");
-var SimGlobal_1 = require("simple-boot-core/global/SimGlobal");
 var IntentManager_1 = require("simple-boot-core/intent/IntentManager");
 var RouterManager_1 = require("simple-boot-core/route/RouterManager");
+var ScriptUtils_1 = require("dom-render/utils/script/ScriptUtils");
+var SimGlobal_1 = require("simple-boot-core/global/SimGlobal");
+var RawSet_1 = require("dom-render/RawSet");
 var SimpleBootFront = (function (_super) {
@@ -79,38 +78,59 @@ __extends(SimpleBootFront, _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';
-        option.setDomRenderConfig({
-            factoryScopeObject: function (scope) { return new ScopeFrontObject_1.ScopeFrontObject(scope, _this.simstanceManager); },
-            targetAttributeNames: ['router-link'],
-            applyEvent: function (obj, elements) {
-                EventManager_1.eventManager.procAttr(elements, 'router-link', function (e, v) {
-                    if (v) {
-                        e.addEventListener('click', function (event) {
-                            var _a;
-                            (_a = SimGlobal_1.SimGlobal().application.simstanceManager.getOrNewSim(Navigation_1.Navigation)) === null || _a === void 0 ? void 0 : _a.go(v);
-                        });
-                    }
-                });
-            }
-        });
         option.proxy = {
-            onProxy: function (it) {
-                var _a;
-                var component = Component_1.getComponent(it);
-                if (component && typeof it === 'object') {
-                    var proxy = DomRender_1.DomRender.proxy(it, { template: (_a = component.template) !== null && _a !== void 0 ? _a : '', styles: component.styles }, [SimpleApplication_1.SimpleApplication, IntentManager_1.IntentManager, RouterManager_1.RouterManager, SimstanceManager_1.SimstanceManager, SimFrontOption_1.SimFrontOption, Navigation_1.Navigation, ViewService_1.ViewService, HttpService_1.HttpService]);
-                    return proxy;
-                }
-                return it;
-            }
+            onProxy: function (it) { return _this.createDomRender(it); }
         };
         return _this;
     }
+    SimpleBootFront.prototype.createDomRender = function (obj) {
+        var _this = this;
+        var component = 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;
+                        }
+                    }],
+                applyEvents: [{
+                        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);
+                            });
+                        }
+                    }],
+                proxyExcludeTyps: this.domRendoerExcludeProxy
+            });
+        }
+        return obj;
+    };
     SimpleBootFront.prototype.run = function () {
         var _this = this;
+        var _a, _b, _c;
         _super.prototype.run.call(this);
         this.navigation = this.simstanceManager.getOrNewSim(Navigation_1.Navigation);
         var routerAtomic = new SimAtomic_1.SimAtomic(this.rootRouter);
-        var targetNode = new RootScope_1.TargetNode(this.option.selector, RootScope_1.TargetNodeMode.child, this.option.window.document);
-        var router = routerAtomic.value;
-        var rootScope = DomRender_1.DomRender.proxyObjectRender(router, targetNode, this.option.getDomRenderConfig());
+        var target = this.option.window.document.querySelector(this.option.selector);
+        if (target && routerAtomic.value) {
+            var component = routerAtomic.getConfig(Component_1.ComponentMetadataKey);
+            var template = this.option.window.document.createElement('template');
+            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(' ');
+            target.innerHTML = styles + " " + ((_c = component === null || component === void 0 ? void 0 : component.template) !== null && _c !== void 0 ? _c : '');
+            var domRenderProxy = routerAtomic.value._DomRender_proxy;
+            domRenderProxy.initRender(target);
+        }
         this.option.window.addEventListener('popstate', function (event) {
@@ -120,19 +140,21 @@ var _a;
             _this.routing(intent).then(function (it) { return __awaiter(_this, void 0, void 0, function () {
-                var r;
-                var _a;
-                return __generator(this, function (_b) {
-                    if (it) {
-                        it.routerChains.reduce(function (a, b) {
+                var routerChain;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                return __generator(this, function (_k) {
+                    if (((_a = it === null || it === void 0 ? void 0 : it.routerChains) === null || _a === void 0 ? void 0 : _a.length) && ((_b = it === null || it === void 0 ? void 0 : it.routerChains) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                        (_d = (_c = it === null || it === void 0 ? void 0 : it.routerChains) === null || _c === void 0 ? void 0 : _c.reduce) === null || _d === void 0 ? void 0 : _d.call(_c, function (a, b) {
+                            var _a;
                             var value = a.value;
-                            if (value.canActivate) {
-                                value.canActivate(intent, b.type);
-                            }
+                            (_a = value === null || value === void 0 ? void 0 : value.canActivate) === null || _a === void 0 ? void 0 : _a.call(value, intent, b.value);
                             return b;
                         });
-                        r = (_a = it.router) === null || _a === void 0 ? void 0 : _a.value;
-                        if (r.canActivate) {
-                            r.canActivate(intent, it.module);
-                        }
-                        this.afterSetting();
                     }
+                    if (!(it === null || it === void 0 ? void 0 : it.module)) {
+                        routerChain = it === null || it === void 0 ? void 0 : it.routerChains[it.routerChains.length - 1];
+                        (_f = (_e = routerChain === null || routerChain === void 0 ? void 0 : routerChain.value) === null || _e === void 0 ? void 0 : _e.canActivate) === null || _f === void 0 ? void 0 : _f.call(_e, intent, it === null || it === void 0 ? void 0 : it.getModuleInstance());
+                    }
+                    else {
+                        (_j = (_h = (_g = it.router) === null || _g === void 0 ? void 0 : _g.value) === null || _h === void 0 ? void 0 : _h.canActivate) === null || _j === void 0 ? void 0 : _j.call(_h, intent, it.getModuleInstance());
+                    }
+                    this.afterSetting();
                     return [2];
@@ -139,0 +161,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

45127

decreased by-0.15%

Number of package files

32

decreased by-11.11%

Lines of code

749

decreased by-3.85%

Number of lines in readme file

312

decreased by-4.29%

No dependency changes