Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

simple-boot-front

Package Overview
Dependencies
Maintainers
1
Versions
117
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-boot-front - npm Package Compare versions

Comparing version 1.0.54 to 1.0.55

decorators/Component.d.ts
decorators/Component.js
service/HttpService.d.ts
service/HttpService.js

2

module/FrontLifeCycle.d.ts

@@ -1,2 +0,2 @@

import { LifeCycle } from 'simple-boot-core/module/LifeCycle';
import { LifeCycle } from 'simple-boot-core/cycles/LifeCycle';
export interface FrontLifeCycle extends LifeCycle {

@@ -3,0 +3,0 @@ onInit(): void;

7

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 {

@@ -8,7 +9,11 @@ path = "path",

export declare class SimFrontOption extends SimOption {
window: Window;
selector: string;
urlType: UrlType;
constructor(advice?: ConstructorType<any>[]);
private _domRenderConfig?;
constructor(window: Window, advice?: ConstructorType<any>[]);
setDomRenderConfig(config: ConfigParam): SimFrontOption;
getDomRenderConfig(): Config | undefined;
setSelector(selector: string): SimFrontOption;
setUrlType(urlType: UrlType): SimFrontOption;
}

12

option/SimFrontOption.js

@@ -20,2 +20,3 @@ "use strict";

var SimOption_1 = require("simple-boot-core/SimOption");
var Config_1 = require("dom-render/Config");
var UrlType;

@@ -28,10 +29,17 @@ (function (UrlType) {

__extends(SimFrontOption, _super);
function SimFrontOption(advice) {
function SimFrontOption(window, advice) {
if (advice === void 0) { advice = []; }
var _this = _super.call(this, advice) || this;
_this.window = window;
_this.selector = '#app';
_this.urlType = UrlType.path;
var a = '2';
return _this;
}
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) {

@@ -38,0 +46,0 @@ this.selector = selector;

18

package.json
{
"name": "simple-boot-front",
"version": "1.0.54",
"version": "1.0.55",
"main": "SimpleApplication.js",

@@ -33,8 +33,2 @@ "license": "MIT",

},
"workspaces": [
"./",
"examples/dev",
"examples/dev-onepage",
"templates/parcel-bundler"
],
"jest": {

@@ -66,2 +60,7 @@ "transform": {

},
"alias": {
"dom-render": "./libs/dom-render/src",
"simple-boot-core": "./libs/simple-boot-core/src",
"simple-boot-front": "./src"
},
"devDependencies": {

@@ -82,7 +81,6 @@ "@types/jest": "^26.0.22",

"dependencies": {
"dom-render": "^1.0.10",
"dom-render": "^1.0.12",
"reflect-metadata": "^0.1.13",
"rxjs": "^6.6.7",
"simple-boot-core": "^1.0.16"
"simple-boot-core": "^1.0.17"
}
}

53

proxy/SimFrontProxyHandler.js
"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.SimFrontProxyHandler = void 0;
var SimGlobal_1 = require("simple-boot-core/global/SimGlobal");
var SimProxy_1 = require("simple-boot-core/proxy/SimProxy");
var FrontModule_1 = require("../module/FrontModule");
var SimFrontProxyHandler = (function (_super) {
__extends(SimFrontProxyHandler, _super);
function SimFrontProxyHandler(simOption) {
var _a;
var _this = _super.call(this) || this;
_this.simOption = simOption;
_this.simstanceManager = (_a = SimGlobal_1.SimGlobal().application) === null || _a === void 0 ? void 0 : _a.simstanceManager;
return _this;
}
SimFrontProxyHandler.prototype.set = function (obj, prop, value) {
var _a, _b;
if (obj instanceof FrontModule_1.FrontModule) {
(_a = obj._refModule.get(prop)) === null || _a === void 0 ? void 0 : _a.forEach(function (it, val) {
it.forEach(function (sit) { return sit.callBack.apply(val, sit.params); });
});
try {
var sim = (_b = this.simstanceManager) === null || _b === void 0 ? void 0 : _b.getOrNewSim(obj.constructor);
if (sim && sim instanceof FrontModule_1.FrontModule) {
sim.renderToScope(prop);
}
else {
obj.renderToScope(prop);
}
}
catch (e) {
obj.renderToScope(prop);
}
}
return true;
};
return SimFrontProxyHandler;
}(SimProxy_1.SimProxy));
exports.SimFrontProxyHandler = SimFrontProxyHandler;

182

README.MD

@@ -36,7 +36,5 @@ ![Single Page Application Framworks](assets/banner.png)

```typescript
const option = new SimOption(AppRouter)
.setUrlType(UrlType.path)
.setAdvice(Advice);
const simpleApplication = new SimpleApplication(option);
simpleApplication.run();
const option = new SimFrontOption(window, [Advice]).setUrlType(UrlType.path);
const simpleApplication = new SimpleBootFront(AppRouter, option);
simpleApplication.run();
```

@@ -55,31 +53,34 @@

@Sim({scheme: 'layout-router'})
export class AppRouter extends Router {
'' = Index;
'/' = Index;
'/ajax' = Ajax;
'/intent' = Intents;
'/view' = Views;
'/exception' = Exception;
'/aop' = Aop;
'/views' = Views;
@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() {
super('', App);
constructor(private navigation: Navigation) {
}
async canActivate(url: Url, module: RouterModule): Promise<RouterModule | ConstructorType<Module>>{
if (url.path === 'views' && url.params.get('auth') === 'false') {
return Forbidden;
} else {
return module;
}
canActivate(url: Intent, module: ConstructorType<object>) {
console.log('canActivate router--->', url, module)
this.child = module;
}
notFound(url: Url): ConstructorType<Module> {
console.log(url.path)
return Notfound;
onReady(data: HTMLFrameElement): void {
}
onRenderd(data: HTMLFrameElement): void {
}
onScopeMaked(data: Scope): void {
}
}
```

@@ -89,17 +90,20 @@ * index.ts

@Sim({scheme: 'index'})
export class Index extends Module {
data = "default data";
thisData = 5151;
constructor(public v: ViewService, public manager: SimstanceManager, public navigation: Navigation) {
super({template: html});
}
Component({
template,
styles: [css]
})
export class Index {
public user?: User;
public data = {name: 'visualkhh'}
onInit() {
console.log('-->')
}
@PostConstruct
public post(renderer: Renderer) {
public g(s: User) {
}
}
```

@@ -109,45 +113,4 @@ * index.html

<h1>index</h1>
links:
<ul>
<li>ajax example page: <a router-link="/ajax">ajax</a></li>
</ul>
<div class="card mt-2" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">set module</h5>
<div>set variable: <!--%write(this.title)%--></div>
<div>input module variable: <input type="text" module-event-keyup="changeText"></div>
</div>
</div>
<div class="card mt-2" style="width: 100%;">
<div class="card-body">
<h5>event click change "module-event-click"</h5>
<!--%module(this.numbers)%-->
<button class="btn btn-info" module-event-click="changeData">change</button>
</div>
</div>
<div class="card mt-2" style="width: 100%;">
<div class="card-body">
<h5>default data set "module-value"</h5>
<input type="text" module-value="data">
</div>
</div>
<div class="card mt-2" style="width: 100%;">
<div class="card-body">
<h5>variable module</h5>
<!--%module(this.data)%-->
data link change event <input type="text" module-value-link="data">
</div>
</div>
<div>
<!--%write(this.thisData)%-->
thisData <button module-event-click="thisDataChange"> this data change</button>
</div>
<div>
<div module-event-click="goto">aaaaaaaaa</div>
</div>
<!--% write(this.data.name); %-->
<button dr-event-click="this.data.name='vvv'"> change name </button>
```

@@ -196,3 +159,7 @@

@Sim({scheme: 'index'})
export class Index extends Module { }
@Component({
template,
styles: [css]
})
export class Index { }
```

@@ -211,6 +178,2 @@ * @PostConstruct(): Methods that you run for a separate initialization operation after the object is created

constructor(public testService: TestService) {
super({
template: 'value:(<!--% write(this.value) %--> <button module-event-click="cc">CC</button>)',
value: 'default value'
});
console.log('ctitle constructor-->', this.testService)

@@ -268,3 +231,3 @@ }

click() {
this.publish(new Intent('layout://info/data?a=wow&aa=zzz', Math.floor(RandomUtils.random(0, 100))));
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))));

@@ -278,15 +241,14 @@ // this.publish(new Intent('layout://', Math.floor(RandomUtils.random(0, 100)))); // default callback method -> subscribe(i: Intent)

@Sim({scheme: 'layout'})
export class App extends Module {
@Component({
template,
styles: [css]
})
export class App {
info = new AppInfo();
constructor() {
super({template: html, styleImports:[css]});
}
constructor() {}
}
```
```typescript
export class AppInfo extends Module {
export class AppInfo {
datas = 'default data';
constructor() {
super({template: '<div><h3>info</h3><!--%write(this.datas)%--></div>'});
}
data(i: Intent) {

@@ -304,3 +266,3 @@ this.datas = i.data + '->' + i.params.aa

```html
<button module-event-click="changeData">change</button>
<button dr-event-click="changeData">change</button>
```

@@ -310,3 +272,3 @@ - **module-event-change**: change event

```html
<input module-event-change="changeData">
<input dr-event-change="changeData">
```

@@ -316,3 +278,3 @@ - **module-event-keyup**: keyup event

```html
<input module-event-keyup="changeData">
<input dr-event-keyup="changeData">
```

@@ -322,3 +284,3 @@ - **module-event-keydown**: keydown event

```html
<input module-event-keydown="changeData">
<input dr-event-keydown="changeData">
```

@@ -328,3 +290,3 @@ - **module-event-input**: input event

```html
<input module-event-input="changeData">
<input dr-event-input="changeData">
```

@@ -334,3 +296,3 @@ - **module-value-link**: link event (value change <-> input)

```html
<input module-value-link="value">
<input dr-value-link="value">
```

@@ -340,3 +302,3 @@ - **module-value**: value injection

```html
<input module-value="value">
<input dr-value="value">
```

@@ -363,13 +325,2 @@ - **module-change-attr**: change value setAttribute

```
- **module-event-{{eventName}}-intent-publish**: intent publish
- value: ['uri', 'variablename'] or ['uri']
- publish
```html
click event intent publish:
<button class="btn btn-primary" module-event-click-intent-publish="['layout://info/data?a=wow&aa=ppp','makeRandom']">publish data</button>
typing:
<input type="text" module-event-keyup-intent-publish="['layout://info/viewSubscribe?a=wow&aa=vvv']">
```
- subscribe

@@ -384,15 +335,6 @@ ```typescript

```
* css
- **moduleIdAttrSelector()**: module Dedicated style
- as-is
- ```css
<!--%moduleIdAttrSelector()%--> h1 {color: burlywood;}
```
- to-be
- ```css
*[module-id='___Module___module-selector..'] h1 { color: burlywood;}
```
## License
* MIT
* visualkhh@gmail.com

15

render/ScopeFrontObject.d.ts

@@ -1,5 +0,4 @@

import { FrontModule } from '../module/FrontModule';
import { FrontModuleOption } from '../module/FrontModuleOption';
import { ScopeObject } from 'dom-render/ScopeObject';
import { Config } from 'dom-render/Config';
import { Scope } from 'dom-render/Scope';
import { SimstanceManager } from 'simple-boot-core/simstance/SimstanceManager';
export declare type ScopeObjectCalls = {

@@ -11,11 +10,5 @@ name: string;

export declare class ScopeFrontObject extends ScopeObject {
uuid: string;
_dynamicModule: Map<string, FrontModule[]>;
_option: FrontModuleOption;
calls: ScopeObjectCalls;
[name: string]: any;
constructor(config: Config, uuid?: string);
simstanceManager: SimstanceManager;
constructor(scope: Scope, simstanceManager: SimstanceManager);
customScript(): string;
newSimOrAddDynamicModule(moduleName: string): any;
moduleWriteAndSetScope(module: FrontModule): void;
}

35

render/ScopeFrontObject.js

@@ -19,42 +19,15 @@ "use strict";

exports.ScopeFrontObject = void 0;
var RandomUtils_1 = require("simple-boot-core/utils/random/RandomUtils");
var SimGlobal_1 = require("simple-boot-core/global/SimGlobal");
var ScopeObject_1 = require("dom-render/ScopeObject");
var RootScope_1 = require("dom-render/RootScope");
var ScopeFrontObject = (function (_super) {
__extends(ScopeFrontObject, _super);
function ScopeFrontObject(config, uuid) {
if (uuid === void 0) { uuid = RandomUtils_1.RandomUtils.uuid(); }
var _this = _super.call(this, config) || this;
_this.uuid = uuid;
_this.calls = [];
function ScopeFrontObject(scope, simstanceManager) {
var _this = _super.call(this, scope) || this;
_this.simstanceManager = simstanceManager;
return _this;
}
ScopeFrontObject.prototype.customScript = function () {
return "\n const moduleIdAttrSelector = () => {\n return write(\"*[module-id='\"+this.id+\"']\");\n }\n const module = (module) => {\n if (typeof module === 'string') {\n module = this.newSimOrAddDynamicModule(module);\n }\n this.moduleWriteAndSetScope(module, true);\n this.calls.push({name: 'module', parameter: [module], result: module});\n return module;\n }\n ";
return "\n const component = (componentPrototype) => {\n // console.log('--component expression---->', componentPrototype)\n if (componentPrototype) {\n try{\n include(this.simstanceManager.getOrNewSim(componentPrototype));\n } catch(e) {\n console.error(e);\n }\n }\n }\n ";
};
ScopeFrontObject.prototype.newSimOrAddDynamicModule = function (moduleName) {
var _a;
var module = this._option.modules[moduleName];
if (module) {
var newSim = (_a = SimGlobal_1.SimGlobal().application) === null || _a === void 0 ? void 0 : _a.simstanceManager.newSim(module);
if (newSim) {
return newSim;
}
}
};
ScopeFrontObject.prototype.moduleWriteAndSetScope = function (module) {
var _a;
if (module) {
var uuid = RandomUtils_1.RandomUtils.uuid();
var targetSelecotr = module.getTemplateSelector(uuid);
var targetNode = new RootScope_1.TargetNode(targetSelecotr, RootScope_1.TargetNodeMode.replace);
var scope = module.setScope(this.config.document, targetNode, uuid);
if (scope) {
this.appendWrite((_a = module.getTemplateElementString(scope.uuid)) !== null && _a !== void 0 ? _a : '');
}
}
};
return ScopeFrontObject;
}(ScopeObject_1.ScopeObject));
exports.ScopeFrontObject = ScopeFrontObject;

11

service/view/View.d.ts

@@ -1,12 +0,7 @@

import { Observable } from 'rxjs';
import { FrontModule } from '../../module/FrontModule';
import { FromEventTarget } from 'rxjs/internal/observable/fromEvent';
export declare class View<T extends Element> {
private _e;
module?: FrontModule | undefined;
constructor(_e: T | FromEventTarget<any> | string, module?: FrontModule | undefined);
event<T>(eventName: string): Observable<T>;
click<E>(): Observable<E>;
get e(): FromEventTarget<any>;
module?: any;
constructor(_e: T | string, module?: any);
get e(): T;
get value(): any;
}

7

service/view/View.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.View = void 0;
var rxjs_1 = require("rxjs");
var View = (function () {

@@ -10,8 +9,2 @@ function View(_e, module) {

}
View.prototype.event = function (eventName) {
return rxjs_1.fromEvent(this.e, eventName);
};
View.prototype.click = function () {
return rxjs_1.fromEvent(this.e, 'click');
};
Object.defineProperty(View.prototype, "e", {

@@ -18,0 +11,0 @@ get: function () {

12

SimpleBootFront.d.ts
import { SimFrontOption } from './option/SimFrontOption';
import { ConstructorType } from 'simple-boot-core/types/Types';
import { SimpleApplication } from 'simple-boot-core/SimpleApplication';
import { ConstructorType } from 'simple-boot-core/types/Types';
import { FrontRouter } from './router/FrontRouter';
import { RouteRender } from './router/RouteRender';
import { Navigation } from './service/Navigation';
export declare class SimpleBootFront extends SimpleApplication {
rootRouter: ConstructorType<FrontRouter>;
rootRouter: ConstructorType<any>;
option: SimFrontOption;
routeRender: RouteRender;
constructor(rootRouter: ConstructorType<FrontRouter>, option: SimFrontOption);
navigation: Navigation;
constructor(rootRouter: ConstructorType<any>, option: SimFrontOption);
run(): void;
private afterSetting;
}

92

SimpleBootFront.js

@@ -55,8 +55,18 @@ "use strict";

exports.SimpleBootFront = void 0;
var SimFrontOption_1 = require("./option/SimFrontOption");
var Component_1 = require("./decorators/Component");
var DomRender_1 = require("dom-render/DomRender");
var RootScope_1 = require("dom-render/RootScope");
var SimAtomic_1 = require("simple-boot-core/simstance/SimAtomic");
var SimpleApplication_1 = require("simple-boot-core/SimpleApplication");
var SimFrontProxyHandler_1 = require("./proxy/SimFrontProxyHandler");
var Intent_1 = require("simple-boot-core/intent/Intent");
var Navigation_1 = require("./service/Navigation");
var Intent_1 = require("simple-boot-core/intent/Intent");
var rxjs_1 = require("rxjs");
var RouteRender_1 = require("./router/RouteRender");
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 SimpleBootFront = (function (_super) {

@@ -69,4 +79,27 @@ __extends(SimpleBootFront, _super);

window.__dirname = 'simple-boot-front__dirname';
option.simProxy = new SimFrontProxyHandler_1.SimFrontProxyHandler(option);
_this.routeRender = new RouteRender_1.RouteRender(_this.option, _this.simstanceManager);
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;
}
};
return _this;

@@ -77,9 +110,28 @@ }

_super.prototype.run.call(this);
var navigation = this.simstanceManager.getOrNewSim(Navigation_1.Navigation);
rxjs_1.fromEvent(window, 'popstate').subscribe(function (_) {
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());
this.option.window.addEventListener('popstate', function (event) {
var _a;
var intent = new Intent_1.Intent((_a = navigation.path) !== null && _a !== void 0 ? _a : '');
var intent = new Intent_1.Intent((_a = _this.navigation.path) !== null && _a !== void 0 ? _a : '');
_this.routing(intent).then(function (it) { return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.routeRender.routeRender(it, document);
var r;
var _a;
return __generator(this, function (_b) {
if (it) {
it.routerChains.reduce(function (a, b) {
var value = a.value;
if (value.canActivate) {
value.canActivate(intent, b.type);
}
return b;
});
r = (_a = it.router) === null || _a === void 0 ? void 0 : _a.value;
if (r.canActivate) {
r.canActivate(intent, it.module);
}
this.afterSetting();
}
return [2];

@@ -89,6 +141,22 @@ });

});
window.dispatchEvent(new Event('popstate'));
this.option.window.dispatchEvent(new Event('popstate'));
};
SimpleBootFront.prototype.afterSetting = function () {
var _this = this;
this.option.window.document.querySelectorAll('[router-active-class]').forEach(function (it) {
var _a, _b;
var _c, _d;
var link = (_c = it.getAttribute('router-link')) !== null && _c !== void 0 ? _c : '';
var activeClasss = (_d = it.getAttribute('router-active-class')) !== null && _d !== void 0 ? _d : '';
var classs = activeClasss.split(',');
if (_this.navigation.path === link) {
(_a = it.classList).add.apply(_a, classs);
}
else {
(_b = it.classList).remove.apply(_b, classs);
}
});
};
return SimpleBootFront;
}(SimpleApplication_1.SimpleApplication));
exports.SimpleBootFront = SimpleBootFront;
module/FrontModule.d.ts
module/FrontModule.js
module/FrontModuleOption.d.ts
module/FrontModuleOption.js
render/Renderer.d.ts
render/Renderer.js
router/FrontRouter.d.ts
router/FrontRouter.js
router/RouteRender.d.ts
router/RouteRender.js
service/AjaxService.d.ts
service/AjaxService.js
proxy/SimFrontProxyHandler.d.ts→proxy/SimFrontProxyHandler.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc