simple-boot-front 1.0.80 → 1.0.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.MD +286 -203
- package/SimpleBootFront.d.ts +2 -1
- package/SimpleBootFront.js +35 -48
- package/lifecycle/OnChangedRender.d.ts +3 -0
- package/{module/FrontLifeCycle.js → lifecycle/OnChangedRender.js} +0 -0
- package/lifecycle/OnDestroy.d.ts +3 -0
- package/lifecycle/OnDestroy.js +2 -0
- package/lifecycle/OnFinish.d.ts +3 -0
- package/lifecycle/OnFinish.js +2 -0
- package/lifecycle/OnInit.d.ts +3 -0
- package/lifecycle/OnInit.js +2 -0
- package/lifecycle/OnInitedChild.d.ts +3 -0
- package/lifecycle/OnInitedChild.js +2 -0
- package/package.json +2 -2
- package/service/ScriptService.d.ts +7 -0
- package/service/ScriptService.js +39 -0
- package/module/FrontLifeCycle.d.ts +0 -7
package/README.MD
CHANGED
@@ -1,206 +1,280 @@
|
|
1
1
|

|
2
|
-
[](https://www.npmjs.com/package/simple-boot-front) [](LICENSE.md) [](https://discord.gg/PW56dpns) [](https://github.com/visualkhh/simple-boot-front)
|
3
3
|
|
4
|
-
|
4
|
+
# Our primary goals are
|
5
|
+
- Single Page Application Framworks for Web
|
6
|
+
- Provide a radically faster and widely accessible getting started experience for all front end.
|
5
7
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
---
|
9
|
+
# 🚀 Quick start cli
|
10
|
+
```shell
|
11
|
+
npm init simple-boot-front projectname
|
12
|
+
cd projectname
|
13
|
+
npm start
|
14
|
+
```
|
11
15
|
|
12
|
-
## 🚀 Quick start cli
|
13
|
-
```shell
|
14
|
-
npm init simple-boot-front projectname
|
15
|
-
cd projectname
|
16
|
-
npm run bundle
|
17
|
-
npm run serve
|
18
|
-
```
|
19
16
|
|
20
17
|
- Installation and Getting Started
|
21
18
|
```
|
22
19
|
npm install simple-boot-front
|
23
20
|
```
|
21
|
+
---
|
24
22
|
|
23
|
+
# 😃 examples
|
24
|
+
- [examples project](./examples)
|
25
|
+
- [templates](./templates)
|
26
|
+
---
|
25
27
|
|
28
|
+
# 📄 Code description
|
29
|
+
## start
|
30
|
+
```html
|
31
|
+
<!DOCTYPE html><html lang="en"><body id="app"></body></html>
|
32
|
+
```
|
33
|
+
```typescript
|
34
|
+
const option = new SimFrontOption(window).setUrlType(UrlType.hash);
|
35
|
+
const simpleApplication = new SimpleBootFront(Index, option);
|
36
|
+
simpleApplication.run();
|
37
|
+
```
|
26
38
|
|
39
|
+
## @Sim
|
40
|
+
Objects managed by the SimpleBootFront framework
|
41
|
+
- parameter: SimConfig {schema: string}
|
42
|
+
```typescript
|
43
|
+
@Sim({scheme: 'index'})
|
44
|
+
```
|
27
45
|
|
28
|
-
##
|
29
|
-
|
30
|
-
* Here is a quick teaser of a complete simple-boot-front application in typescript
|
31
|
-
* index.ts
|
32
|
-
```typescript
|
33
|
-
const option = new SimFrontOption(window, [Advice]).setUrlType(UrlType.path);
|
34
|
-
const simpleApplication = new SimpleBootFront(AppRouter, option);
|
35
|
-
simpleApplication.run();
|
36
|
-
```
|
37
|
-
|
38
|
-
* index.html
|
39
|
-
```html
|
40
|
-
<!doctype html>
|
41
|
-
<html>
|
42
|
-
<head>...</head>
|
43
|
-
<body id="app"></body>
|
44
|
-
</html>
|
45
|
-
```
|
46
|
-
* AppRouter.ts
|
47
|
-
```typescript
|
48
|
-
@Sim({scheme: 'layout-router'})
|
49
|
-
@Component({template, styles: [css]})
|
50
|
-
@Router({
|
51
|
-
path: '',
|
52
|
-
childs: {
|
53
|
-
'': Index,
|
54
|
-
'/': Index,
|
55
|
-
'/user': User
|
56
|
-
}
|
57
|
-
})
|
58
|
-
export class AppRouter implements RouterAction, FrontLifeCycle {
|
59
|
-
name = 'AppRouter'
|
60
|
-
data = {name: 'good'}
|
61
|
-
child?: any
|
62
|
-
|
63
|
-
constructor(private navigation: Navigation, private simOption: SimFrontOption) {
|
64
|
-
}
|
65
|
-
|
66
|
-
canActivate(url: Intent, module: any) {
|
67
|
-
console.log('canActivate router--->', url, module)
|
68
|
-
this.child = module;
|
69
|
-
}
|
70
|
-
|
71
|
-
onReady(data: HTMLFrameElement): void {
|
72
|
-
}
|
73
|
-
|
74
|
-
onRenderd(data: HTMLFrameElement): void {
|
75
|
-
}
|
76
|
-
|
77
|
-
onChangedRender(): void {
|
78
|
-
}
|
79
|
-
|
80
|
-
onCreate(): void {
|
81
|
-
}
|
82
|
-
|
83
|
-
onFinish(): void {
|
84
|
-
}
|
85
|
-
|
86
|
-
onInit(): void {
|
87
|
-
}
|
88
|
-
|
89
|
-
onInitedChild(): void {
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
|
-
```
|
94
|
-
* index.ts
|
95
|
-
```typescript
|
96
|
-
@Sim({scheme: 'index'})
|
97
|
-
Component({
|
98
|
-
template,
|
99
|
-
styles: [css]
|
100
|
-
})
|
101
|
-
export class Index {
|
102
|
-
public user?: User;
|
103
|
-
public data = {name: 'visualkhh'}
|
104
|
-
onInit() {
|
105
|
-
console.log('-->')
|
106
|
-
}
|
107
|
-
|
108
|
-
@PostConstruct
|
109
|
-
public g(s: User) {
|
110
|
-
|
111
|
-
}
|
112
|
-
}
|
113
|
-
|
46
|
+
## @Component
|
114
47
|
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
- https://github.com/visualkhh/dom-render
|
125
|
-
- ### It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
|
126
|
-
- ### Update view only for parts where the value has changed.
|
127
|
-
|
128
|
-
## Module LifeCycle
|
129
|
-
* onCreate(): Sim onCreate just one call
|
130
|
-
* onInit(): module load event
|
131
|
-
* onChangedRender(): change rended in module event
|
132
|
-
* onInitedChild(): module and child module inited event
|
133
|
-
* onFinish(): lifecycle finish event
|
134
|
-
|
135
|
-
# Decorator
|
136
|
-
* @Sim(): Objects managed by the SimpleBootFront framework
|
137
|
-
- parameter: SimConfig {schema: string}
|
138
|
-
```typescript
|
139
|
-
@Sim({scheme: 'index'})
|
140
|
-
@Component({
|
48
|
+
```html
|
49
|
+
<!--template.html-->
|
50
|
+
<h1>${this.title}</h1>
|
51
|
+
<div dr-inner-html="this.html"></div>
|
52
|
+
```
|
53
|
+
```typescript
|
54
|
+
@Sim()
|
55
|
+
@Component({
|
56
|
+
selector: 'index', // default class name LowerCase
|
141
57
|
template,
|
142
|
-
styles: [
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
console.log('post Construct and dependency injection')
|
151
|
-
}
|
152
|
-
```
|
153
|
-
* @Injectable: No Sim Decorator Class Inject Sim
|
154
|
-
```typescript
|
155
|
-
@Injectable()
|
156
|
-
export class CTitle extends Title {
|
157
|
-
constructor(public testService: TestService) {
|
158
|
-
console.log('ctitle constructor-->', this.testService)
|
159
|
-
}
|
160
|
-
|
161
|
-
cc() {
|
162
|
-
this.value = this.testService.tail(Math.floor(RandomUtils.random(1, 50)), '---');
|
163
|
-
}
|
164
|
-
@PostConstruct
|
165
|
-
ttt(testService: TestService) {
|
166
|
-
console.log('poo->', testService)
|
167
|
-
}
|
168
|
-
}
|
169
|
-
```
|
170
|
-
|
171
|
-
* @After, @Before (AOP)
|
172
|
-
```typescript
|
173
|
-
fire($event: MouseEvent, view: View<Element>) {
|
174
|
-
console.log('fire method')
|
175
|
-
this.data = RandomUtils.random(0, 100);
|
176
|
-
}
|
177
|
-
@Before({property: 'fire'})
|
178
|
-
before(obj: any, protoType: Function) {
|
179
|
-
console.log('before', obj, protoType)
|
58
|
+
styles: [style]
|
59
|
+
})
|
60
|
+
export class Index {
|
61
|
+
public title = ''
|
62
|
+
public html = ''
|
63
|
+
public setData(title: string, html: string) {
|
64
|
+
this.title = title;
|
65
|
+
this.html = html;
|
180
66
|
}
|
67
|
+
}
|
68
|
+
```
|
69
|
+
using
|
70
|
+
```typescript
|
71
|
+
constructor(index: Index){...}
|
72
|
+
```
|
73
|
+
```html
|
74
|
+
<index></index>
|
75
|
+
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
|
76
|
+
<index dr-set="$index.setData('hello component', $innerHTML)"></index>
|
77
|
+
```
|
181
78
|
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
79
|
+
## @Router
|
80
|
+
```typescript
|
81
|
+
@Sim()
|
82
|
+
@Router({
|
83
|
+
path: '',
|
84
|
+
route: {
|
85
|
+
'/': Home,
|
86
|
+
'/user': User,
|
87
|
+
'/user/:id': UserDetail
|
88
|
+
}
|
89
|
+
})
|
90
|
+
@Component({
|
91
|
+
template,
|
92
|
+
styles: [style]
|
93
|
+
})
|
94
|
+
export class Index implements RouterAction {
|
95
|
+
child?: any;
|
96
|
+
canActivate(url: any, module: any): void {
|
97
|
+
this.child = module;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
```
|
101
|
+
### activeRoute
|
102
|
+
```typescript
|
103
|
+
constructor(routerManager: RouterManager){
|
104
|
+
// get path data
|
105
|
+
routerManager.activeRouterModule.pathData.id; // /user/:id
|
106
|
+
}
|
107
|
+
```
|
187
108
|
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
109
|
+
### component include
|
110
|
+
```html
|
111
|
+
<route component="this.child"></route>
|
112
|
+
```
|
113
|
+
|
114
|
+
### router option
|
115
|
+
- attribute
|
116
|
+
- **router-active-class**: url === href attribute => class add (a-classname, b-classname)
|
117
|
+
- value: add and remove class name
|
118
|
+
- **router-inactive-class**: url !== href attribute => class add (a-classname, b-classname)
|
119
|
+
- value: add and remove class name
|
120
|
+
```html
|
121
|
+
<a router-link="/home" router-active-class="active" router-inactive-class="inactive">home</a>
|
194
122
|
```
|
123
|
+
- **router-link**:
|
124
|
+
- value: router link
|
125
|
+
|
126
|
+
|
127
|
+
|
128
|
+
## @Script
|
129
|
+
```typescript
|
130
|
+
@Sim({scheme: 'i18nScript'})
|
131
|
+
@Script({
|
132
|
+
name: 'i18n'
|
133
|
+
})
|
134
|
+
export class I18nScript extends ScriptRunnable {
|
135
|
+
public language?: Language;
|
136
|
+
constructor(public i18nService: I18nService) {
|
137
|
+
super();
|
138
|
+
i18nService.subject.subscribe(it => {
|
139
|
+
this.language = it;
|
140
|
+
this.render(); // <-- ref target rerender
|
141
|
+
})
|
142
|
+
}
|
143
|
+
run(key: string): any {
|
144
|
+
return this.language?.defaultData?.[key] ?? key;
|
145
|
+
}
|
146
|
+
}
|
147
|
+
```
|
148
|
+
### using script
|
149
|
+
```typescript
|
150
|
+
counstructor(i18nScript: I18nScript) {...}
|
151
|
+
counstructor(scriptService: ScriptService) {
|
152
|
+
const i18nScript = scriptService.getScript('i18n');
|
153
|
+
}
|
154
|
+
```
|
155
|
+
```html
|
156
|
+
<div>${$scripts.i18n('Get Locale JSON')}</div>
|
157
|
+
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
|
158
|
+
```
|
159
|
+
|
160
|
+
|
161
|
+
## @PostConstruct
|
162
|
+
Methods that you run for a separate initialization operation after the object is created
|
163
|
+
```typescript
|
164
|
+
@PostConstruct
|
165
|
+
post(projectService: ProjectService) {
|
166
|
+
console.log('post Construct and dependency injection')
|
167
|
+
}
|
168
|
+
```
|
195
169
|
|
196
|
-
##
|
170
|
+
## @After, @Before (AOP)
|
197
171
|
```typescript
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
172
|
+
fire($event: MouseEvent, view: View<Element>) {
|
173
|
+
console.log('fire method')
|
174
|
+
this.data = RandomUtils.random(0, 100);
|
175
|
+
}
|
176
|
+
|
177
|
+
@Before({property: 'fire'})
|
178
|
+
before(obj: any, protoType: Function) {
|
179
|
+
console.log('before', obj, protoType)
|
180
|
+
}
|
181
|
+
|
182
|
+
@After({property: 'fire'})
|
183
|
+
after(obj: any, protoType: Function) {
|
184
|
+
console.log('after', obj, protoType)
|
185
|
+
}
|
186
|
+
```
|
187
|
+
|
188
|
+
## @ExceptionHandler
|
189
|
+
```typescript
|
190
|
+
@ExceptionHandler(TypeError)
|
191
|
+
public exceptionTypeError(e: TypeError) {
|
192
|
+
console.log('TypeError exception:')
|
193
|
+
}
|
194
|
+
|
195
|
+
@ExceptionHandler(SimError)
|
196
|
+
public exception1(e: SimError) {
|
197
|
+
console.log('SimError exception:')
|
198
|
+
}
|
199
|
+
|
200
|
+
@ExceptionHandler(RouterError)
|
201
|
+
public exception3(e: RouterError) {
|
202
|
+
console.log('NotFountRoute exception:')
|
203
|
+
}
|
204
|
+
|
205
|
+
@ExceptionHandler(SimNoSuch)
|
206
|
+
public exception2(e: SimNoSuch) {
|
207
|
+
console.log('NoSuchSim exception:')
|
208
|
+
}
|
209
|
+
```
|
210
|
+
|
211
|
+
----
|
212
|
+
|
213
|
+
# View template engine (dom-render)
|
214
|
+
- **DomRender** [](https://www.npmjs.com/package/dom-render) [](https://github.com/visualkhh/dom-render)
|
215
|
+
- It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
|
216
|
+
- Update view only for parts where the value has changed.
|
217
|
+
- event: addEventListener (attribute)
|
218
|
+
```html
|
219
|
+
<div>
|
220
|
+
click: <button dr-event-click="this.name = 'name' + new Date()">click</button> <br>
|
221
|
+
change: <input type="text" dr-event-change="this.name = $target.value"> <br>
|
222
|
+
input: <input type="text" dr-event-input="this.name = $target.value"> <br>
|
223
|
+
keyup: <input type="text" dr-event-keyup="this.name = $target.value"> <br>
|
224
|
+
keydown: <input type="text" dr-event-keydown="this.name = $target.value"><br>
|
225
|
+
...
|
226
|
+
submit: <form dr-event-submit="console.log($event); $event.preventDefault();"><input type="text"> <button type="submit">submit</button></form><br>
|
227
|
+
window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
|
228
|
+
</div>...
|
229
|
+
|
230
|
+
```
|
231
|
+
- If you want to see more information Move here go ***dom-render github***
|
232
|
+
----
|
233
|
+
|
234
|
+
|
235
|
+
|
236
|
+
# LifeCycle
|
237
|
+
## Module LifeCycle interface
|
238
|
+
* LifeCycle
|
239
|
+
- onCreate(): Sim onCreate just one call
|
240
|
+
* OnChangedRender
|
241
|
+
- onChangedRender(): change rended in module event
|
242
|
+
* OnFinish
|
243
|
+
- onFinish(): lifecycle finish event
|
244
|
+
* OnInit
|
245
|
+
- onInit(): module load event
|
246
|
+
* OnDestroy
|
247
|
+
- onDestroy(): module destroy event
|
248
|
+
* OnInitedChild
|
249
|
+
- onInitedChild(): module and child module inited event
|
250
|
+
|
251
|
+
----
|
252
|
+
|
253
|
+
# Intent event broker
|
254
|
+
```typescript
|
255
|
+
constructor(intentManager: IntentManager){...}
|
256
|
+
// call
|
257
|
+
queryParamCall() {
|
258
|
+
this.intentManager.publish(new Intent('layout://info/data?a=wow&aa=zzz', Math.floor(RandomUtils.random(0, 100))));
|
259
|
+
}
|
260
|
+
call() {
|
261
|
+
this.intentManager(new Intent('layout://info/datas', Math.floor(RandomUtils.random(0, 100))));
|
262
|
+
}
|
263
|
+
targetCall() {
|
264
|
+
this.intentManager(new Intent('layout://', Math.floor(RandomUtils.random(0, 100))));
|
265
|
+
// default callback method -> subscribe(i: Intent)
|
266
|
+
}
|
267
|
+
globalCall() {
|
268
|
+
this.intentManager(new Intent('://info/datas', Math.floor(RandomUtils.random(0, 100))));
|
269
|
+
}
|
270
|
+
windowEventCall() {
|
271
|
+
const data = new CustomEvent('intent', {detail: {uri: 'index://showStore', data: {id: 'id data'}}});
|
272
|
+
window.dispatchEvent(data);
|
273
|
+
}
|
274
|
+
|
275
|
+
// receive
|
276
|
+
showStore(i: Intent) {
|
277
|
+
this.datas = i.data + '->' + i.params.aa
|
204
278
|
}
|
205
279
|
```
|
206
280
|
|
@@ -223,26 +297,35 @@ export class AppInfo {
|
|
223
297
|
}
|
224
298
|
}
|
225
299
|
```
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
300
|
+
|
301
|
+
# Advice
|
302
|
+
- global advice
|
303
|
+
```typescript
|
304
|
+
@Sim()
|
305
|
+
export class Advice {
|
306
|
+
|
307
|
+
@ExceptionHandler()
|
308
|
+
public exception0(e: any) {
|
309
|
+
console.log('Advice Global exception:')
|
310
|
+
}
|
311
|
+
|
312
|
+
@Before({type: Aop, property: 'unkown'})
|
313
|
+
public beforeTest(obj: any, f: Function, name: string) {
|
314
|
+
console.log('before Test:')
|
315
|
+
}
|
316
|
+
|
317
|
+
@After({type: Aop, property: 'unkown'})
|
318
|
+
public afterTest(obj: any, f: Function, name: string) {
|
319
|
+
console.log('after Test:')
|
320
|
+
}
|
321
|
+
}
|
322
|
+
```
|
323
|
+
```typescript
|
324
|
+
const option = new SimFrontOption(window, [Advice]).setUrlType(UrlType.hash);
|
325
|
+
const simpleApplication = new SimpleBootFront(AppRouter, option);
|
326
|
+
simpleApplication.run();
|
327
|
+
```
|
328
|
+
----
|
329
|
+
# License
|
247
330
|
* MIT
|
248
331
|
* visualkhh@gmail.com
|
package/SimpleBootFront.d.ts
CHANGED
@@ -20,5 +20,6 @@ export declare class SimpleBootFront extends SimpleApplication {
|
|
20
20
|
createDomRender<T extends object>(obj: T): T;
|
21
21
|
run(): void;
|
22
22
|
private afterSetting;
|
23
|
-
|
23
|
+
initDomRenderScripts(): void;
|
24
|
+
private initDomRenderTargetElements;
|
24
25
|
}
|
package/SimpleBootFront.js
CHANGED
@@ -65,7 +65,6 @@ var HttpService_1 = require("./service/HttpService");
|
|
65
65
|
var SimstanceManager_1 = require("simple-boot-core/simstance/SimstanceManager");
|
66
66
|
var IntentManager_1 = require("simple-boot-core/intent/IntentManager");
|
67
67
|
var RouterManager_1 = require("simple-boot-core/route/RouterManager");
|
68
|
-
var RandomUtils_1 = require("dom-render/utils/random/RandomUtils");
|
69
68
|
var ScriptUtils_1 = require("dom-render/utils/script/ScriptUtils");
|
70
69
|
var SimGlobal_1 = require("simple-boot-core/global/SimGlobal");
|
71
70
|
var RawSet_1 = require("dom-render/RawSet");
|
@@ -100,38 +99,6 @@ var SimpleBootFront = (function (_super) {
|
|
100
99
|
proxyExcludeTyps: _this.domRendoerExcludeProxy
|
101
100
|
};
|
102
101
|
window.__dirname = 'simple-boot-front__dirname';
|
103
|
-
var selectors = Component_1.componentSelectors;
|
104
|
-
selectors.forEach(function (val, name) {
|
105
|
-
_this.domRenderTargetElements.push({
|
106
|
-
name: name,
|
107
|
-
callBack: function (element, obj, rawSet) {
|
108
|
-
var componentObj = _this.simstanceManager.newSim(val);
|
109
|
-
var set = element.getAttribute('dr-set');
|
110
|
-
var any;
|
111
|
-
if (set) {
|
112
|
-
var comEvalTargetObj_1 = { '$attribute': any = {} };
|
113
|
-
element.getAttributeNames().forEach(function (it) {
|
114
|
-
comEvalTargetObj_1['$attribute'][it] = element.getAttribute(it);
|
115
|
-
});
|
116
|
-
comEvalTargetObj_1['$innerHTML'] = element.innerHTML;
|
117
|
-
comEvalTargetObj_1['$element'] = element;
|
118
|
-
comEvalTargetObj_1[name] = componentObj;
|
119
|
-
var script = "var " + name + " = this['" + name + "']; var $element = this['$element']; var $innerHTML = this['$innerHTML']; var $attribute = this['$attribute']; " + set + " ";
|
120
|
-
ScriptUtils_1.ScriptUtils.eval(script, Object.assign(comEvalTargetObj_1, obj));
|
121
|
-
}
|
122
|
-
var componentOption = (0, Component_1.getComponent)(componentObj);
|
123
|
-
var fag = _this.option.window.document.createDocumentFragment();
|
124
|
-
if (componentOption) {
|
125
|
-
var key = "_" + RandomUtils_1.RandomUtils.getRandomString(20);
|
126
|
-
obj.__componentInstances[key] = componentObj;
|
127
|
-
var template = _this.option.window.document.createElement('div');
|
128
|
-
template.innerHTML = _this.getComponentInnerHtml(componentObj);
|
129
|
-
fag.append(RawSet_1.RawSet.drThisCreate(template, "this.__componentInstances." + key, '', true, obj));
|
130
|
-
}
|
131
|
-
return fag;
|
132
|
-
}
|
133
|
-
});
|
134
|
-
});
|
135
102
|
_this.domRenderTargetAttrs.push({
|
136
103
|
name: 'component', callBack: function (element, attrValue, obj, rawSet) {
|
137
104
|
var fag = _this.option.window.document.createDocumentFragment();
|
@@ -168,7 +135,8 @@ var SimpleBootFront = (function (_super) {
|
|
168
135
|
var _this = this;
|
169
136
|
var _a, _b, _c, _d, _e;
|
170
137
|
_super.prototype.run.call(this);
|
171
|
-
this.
|
138
|
+
this.initDomRenderScripts();
|
139
|
+
this.initDomRenderTargetElements();
|
172
140
|
this.navigation = this.simstanceManager.getOrNewSim(Navigation_1.Navigation);
|
173
141
|
var routerAtomic = new SimAtomic_1.SimAtomic(this.rootRouter);
|
174
142
|
var target = this.option.window.document.querySelector(this.option.selector);
|
@@ -217,21 +185,34 @@ var SimpleBootFront = (function (_super) {
|
|
217
185
|
};
|
218
186
|
SimpleBootFront.prototype.afterSetting = function () {
|
219
187
|
var _this = this;
|
220
|
-
this.option.window.document.querySelectorAll('[router-
|
221
|
-
var _a, _b;
|
222
|
-
var
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
188
|
+
this.option.window.document.querySelectorAll('[router-link]').forEach(function (it) {
|
189
|
+
var _a, _b, _c, _d;
|
190
|
+
var link = it.getAttribute('router-link');
|
191
|
+
if (link) {
|
192
|
+
var activeClasss = it.getAttribute('router-active-class');
|
193
|
+
var aClasss = activeClasss === null || activeClasss === void 0 ? void 0 : activeClasss.split(',');
|
194
|
+
var inActiveClasss = it.getAttribute('router-inactive-class');
|
195
|
+
var iClasss = inActiveClasss === null || inActiveClasss === void 0 ? void 0 : inActiveClasss.split(',');
|
196
|
+
if (_this.navigation.path === link) {
|
197
|
+
if (aClasss && aClasss.length > 0) {
|
198
|
+
(_a = it.classList).add.apply(_a, aClasss);
|
199
|
+
}
|
200
|
+
if (iClasss && iClasss.length > 0) {
|
201
|
+
(_b = it.classList).remove.apply(_b, iClasss);
|
202
|
+
}
|
203
|
+
}
|
204
|
+
else {
|
205
|
+
if (aClasss && aClasss.length > 0) {
|
206
|
+
(_c = it.classList).remove.apply(_c, aClasss);
|
207
|
+
}
|
208
|
+
if (iClasss && iClasss.length > 0) {
|
209
|
+
(_d = it.classList).add.apply(_d, iClasss);
|
210
|
+
}
|
211
|
+
}
|
231
212
|
}
|
232
213
|
});
|
233
214
|
};
|
234
|
-
SimpleBootFront.prototype.
|
215
|
+
SimpleBootFront.prototype.initDomRenderScripts = function () {
|
235
216
|
var _this = this;
|
236
217
|
var simstanceManager = this.simstanceManager;
|
237
218
|
Script_1.scripts.forEach(function (val, name) {
|
@@ -240,13 +221,11 @@ var SimpleBootFront = (function (_super) {
|
|
240
221
|
for (var _i = 0; _i < arguments.length; _i++) {
|
241
222
|
args[_i] = arguments[_i];
|
242
223
|
}
|
243
|
-
console.log(simstanceManager);
|
244
224
|
var obj = undefined;
|
245
225
|
try {
|
246
226
|
obj = simstanceManager.getOrNewSim(val);
|
247
227
|
}
|
248
228
|
catch (e) {
|
249
|
-
console.log('eee');
|
250
229
|
obj = simstanceManager.newSim(val);
|
251
230
|
}
|
252
231
|
var render = this.__render;
|
@@ -256,6 +235,14 @@ var SimpleBootFront = (function (_super) {
|
|
256
235
|
};
|
257
236
|
});
|
258
237
|
};
|
238
|
+
SimpleBootFront.prototype.initDomRenderTargetElements = function () {
|
239
|
+
var _this = this;
|
240
|
+
var selectors = Component_1.componentSelectors;
|
241
|
+
selectors.forEach(function (val, name) {
|
242
|
+
var component = (0, Component_1.getComponent)(val);
|
243
|
+
_this.domRenderTargetElements.push(RawSet_1.RawSet.createComponentTargetElement(name, function (e, o, r) { return _this.simstanceManager.newSim(val); }, component === null || component === void 0 ? void 0 : component.template, component === null || component === void 0 ? void 0 : component.styles, _this.domRenderConfig.scripts));
|
244
|
+
});
|
245
|
+
};
|
259
246
|
return SimpleBootFront;
|
260
247
|
}(SimpleApplication_1.SimpleApplication));
|
261
248
|
exports.SimpleBootFront = SimpleBootFront;
|
File without changes
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "simple-boot-front",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.84",
|
4
4
|
"main": "SimpleApplication.js",
|
5
5
|
"license": "MIT",
|
6
6
|
"description": "front end SPA frameworks",
|
@@ -75,7 +75,7 @@
|
|
75
75
|
"typescript": "^4.3.5"
|
76
76
|
},
|
77
77
|
"dependencies": {
|
78
|
-
"dom-render": "^1.0.
|
78
|
+
"dom-render": "^1.0.45",
|
79
79
|
"reflect-metadata": "^0.1.13",
|
80
80
|
"simple-boot-core": "^1.0.21"
|
81
81
|
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { ScriptRunnable } from '../script/ScriptRunnable';
|
2
|
+
import { SimstanceManager } from 'simple-boot-core/simstance/SimstanceManager';
|
3
|
+
export declare class ScriptService {
|
4
|
+
private simstanceManager;
|
5
|
+
constructor(simstanceManager: SimstanceManager);
|
6
|
+
getScript<T = ScriptRunnable>(name: string): T | undefined;
|
7
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
3
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
4
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
5
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
6
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
7
|
+
};
|
8
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
9
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
10
|
+
};
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
12
|
+
exports.ScriptService = void 0;
|
13
|
+
var SimDecorator_1 = require("simple-boot-core/decorators/SimDecorator");
|
14
|
+
var Script_1 = require("../decorators/Script");
|
15
|
+
var SimstanceManager_1 = require("simple-boot-core/simstance/SimstanceManager");
|
16
|
+
var ScriptService = (function () {
|
17
|
+
function ScriptService(simstanceManager) {
|
18
|
+
this.simstanceManager = simstanceManager;
|
19
|
+
}
|
20
|
+
ScriptService.prototype.getScript = function (name) {
|
21
|
+
var val = Script_1.scripts.get(name);
|
22
|
+
var obj = undefined;
|
23
|
+
if (val) {
|
24
|
+
try {
|
25
|
+
obj = this.simstanceManager.getOrNewSim(val);
|
26
|
+
}
|
27
|
+
catch (e) {
|
28
|
+
obj = this.simstanceManager.newSim(val);
|
29
|
+
}
|
30
|
+
}
|
31
|
+
return obj;
|
32
|
+
};
|
33
|
+
ScriptService = __decorate([
|
34
|
+
(0, SimDecorator_1.Sim)(),
|
35
|
+
__metadata("design:paramtypes", [SimstanceManager_1.SimstanceManager])
|
36
|
+
], ScriptService);
|
37
|
+
return ScriptService;
|
38
|
+
}());
|
39
|
+
exports.ScriptService = ScriptService;
|