simple-boot-front 1.0.95 → 1.0.99
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 +335 -335
- package/SimpleBootFront.d.ts +32 -25
- package/SimpleBootFront.js +327 -231
- package/decorators/Component.d.ts +11 -11
- package/decorators/Component.js +30 -54
- package/decorators/Script.d.ts +10 -10
- package/decorators/Script.js +31 -31
- package/decorators/inject/InjectFrontSituationType.d.ts +3 -0
- package/decorators/inject/InjectFrontSituationType.js +7 -0
- package/fetch/Fetcher.d.ts +4 -4
- package/fetch/Fetcher.js +9 -9
- package/lifecycle/OnChangedRender.d.ts +3 -3
- package/lifecycle/OnChangedRender.js +2 -2
- package/lifecycle/OnDestroy.d.ts +3 -3
- package/lifecycle/OnDestroy.js +2 -2
- package/lifecycle/OnFinish.d.ts +3 -3
- package/lifecycle/OnFinish.js +2 -2
- package/lifecycle/OnInit.d.ts +8 -3
- package/lifecycle/OnInit.js +2 -2
- package/lifecycle/OnInitedChild.d.ts +3 -3
- package/lifecycle/OnInitedChild.js +2 -2
- package/option/SimFrontOption.d.ts +14 -14
- package/option/SimFrontOption.js +45 -45
- package/package.json +84 -82
- package/script/ScriptRunnable.d.ts +7 -7
- package/script/ScriptRunnable.js +22 -22
- package/service/CookieService.d.ts +11 -8
- package/service/CookieService.js +54 -42
- package/service/HttpService.d.ts +3 -3
- package/service/HttpService.js +23 -23
- package/service/MetaTagService.d.ts +11 -0
- package/service/MetaTagService.js +52 -0
- package/service/Navigation.d.ts +18 -12
- package/service/Navigation.js +117 -75
- package/service/ScriptService.d.ts +7 -7
- package/service/ScriptService.js +39 -39
- package/service/StorageService.d.ts +12 -0
- package/service/StorageService.js +67 -0
- package/service/view/View.d.ts +6 -6
- package/service/view/View.js +29 -29
- package/service/view/ViewService.d.ts +7 -7
- package/service/view/ViewService.js +46 -46
- package/throwable/RouterError.d.ts +4 -4
- package/throwable/RouterError.js +27 -27
- package/throwable/RouterIntentError.d.ts +4 -4
- package/throwable/RouterIntentError.js +27 -27
- package/throwable/RouterNotFount.d.ts +4 -4
- package/throwable/RouterNotFount.js +27 -27
- package/utils/dom/DomUtils.d.ts +0 -13
- package/utils/dom/DomUtils.js +0 -45
- package/utils/node/NodeUtils.d.ts +0 -10
- package/utils/node/NodeUtils.js +0 -25
- package/utils/window/LocationUtils.d.ts +0 -8
- package/utils/window/LocationUtils.js +0 -34
package/README.MD
CHANGED
|
@@ -1,335 +1,335 @@
|
|
|
1
|
-
|
|
2
|
-
[](https://www.npmjs.com/package/simple-boot-front) [](LICENSE.md) [](https://discord.gg/PW56dpns) [](https://github.com/visualkhh/simple-boot-front)
|
|
3
|
-
|
|
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.
|
|
7
|
-
|
|
8
|
-
# [📄 introduction page [link]](https://simple-boot-front.github.io)
|
|
9
|
-
- [https://simple-boot-front.github.io
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
# 🚀 Quick start cli
|
|
14
|
-
```shell
|
|
15
|
-
npm init simple-boot-front projectname
|
|
16
|
-
cd projectname
|
|
17
|
-
npm start
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- Installation and Getting Started
|
|
22
|
-
```
|
|
23
|
-
npm install simple-boot-front
|
|
24
|
-
```
|
|
25
|
-
---
|
|
26
|
-
|
|
27
|
-
# 😃 examples
|
|
28
|
-
- [examples project](./examples)
|
|
29
|
-
- [templates](./templates)
|
|
30
|
-
---
|
|
31
|
-
|
|
32
|
-
# 📄 Code description
|
|
33
|
-
## start
|
|
34
|
-
```html
|
|
35
|
-
<!DOCTYPE html><html lang="en"><body id="app"></body></html>
|
|
36
|
-
```
|
|
37
|
-
```typescript
|
|
38
|
-
const option = new SimFrontOption(window).setUrlType(UrlType.hash);
|
|
39
|
-
const simpleApplication = new SimpleBootFront(Index, option);
|
|
40
|
-
simpleApplication.run();
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## @Sim
|
|
44
|
-
Objects managed by the SimpleBootFront framework
|
|
45
|
-
- parameter: SimConfig {schema: string}
|
|
46
|
-
```typescript
|
|
47
|
-
@Sim({scheme: 'index'})
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
## @Component
|
|
51
|
-
|
|
52
|
-
```html
|
|
53
|
-
<!--template.html-->
|
|
54
|
-
<h1>${this.title}</h1>
|
|
55
|
-
<div dr-inner-html="this.html"></div>
|
|
56
|
-
```
|
|
57
|
-
```typescript
|
|
58
|
-
@Sim()
|
|
59
|
-
@Component({
|
|
60
|
-
selector: 'index', // default class name LowerCase
|
|
61
|
-
template,
|
|
62
|
-
styles: [style]
|
|
63
|
-
})
|
|
64
|
-
export class Index {
|
|
65
|
-
public title = ''
|
|
66
|
-
public html = ''
|
|
67
|
-
public setData(title: string, html: string) {
|
|
68
|
-
this.title = title;
|
|
69
|
-
this.html = html;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
using
|
|
74
|
-
```typescript
|
|
75
|
-
constructor(index: Index){...}
|
|
76
|
-
```
|
|
77
|
-
```html
|
|
78
|
-
<index></index>
|
|
79
|
-
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
|
|
80
|
-
<index dr-set="$index.setData('hello component', $innerHTML)"></index>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
## @Router
|
|
84
|
-
```typescript
|
|
85
|
-
@Sim()
|
|
86
|
-
@Router({
|
|
87
|
-
path: '',
|
|
88
|
-
route: {
|
|
89
|
-
'/': Home,
|
|
90
|
-
'/user': User,
|
|
91
|
-
'/user/:id': UserDetail
|
|
92
|
-
}
|
|
93
|
-
})
|
|
94
|
-
@Component({
|
|
95
|
-
template,
|
|
96
|
-
styles: [style]
|
|
97
|
-
})
|
|
98
|
-
export class Index implements RouterAction {
|
|
99
|
-
child?: any;
|
|
100
|
-
canActivate(url: any, module: any): void {
|
|
101
|
-
this.child = module;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
```
|
|
105
|
-
### activeRoute
|
|
106
|
-
```typescript
|
|
107
|
-
constructor(routerManager: RouterManager){
|
|
108
|
-
// get path data
|
|
109
|
-
routerManager.activeRouterModule.pathData.id; // /user/:id
|
|
110
|
-
}
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
### component include
|
|
114
|
-
```html
|
|
115
|
-
<route component="this.child"></route>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### router option
|
|
119
|
-
- attribute
|
|
120
|
-
- **router-active-class**: url === href attribute => class add (a-classname, b-classname)
|
|
121
|
-
- value: add and remove class name
|
|
122
|
-
- **router-inactive-class**: url !== href attribute => class add (a-classname, b-classname)
|
|
123
|
-
- value: add and remove class name
|
|
124
|
-
```html
|
|
125
|
-
<a router-link="/home" router-active-class="active" router-inactive-class="inactive">home</a>
|
|
126
|
-
```
|
|
127
|
-
- **router-link**:
|
|
128
|
-
- value: router link
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
## @Script
|
|
133
|
-
```typescript
|
|
134
|
-
@Sim({scheme: 'i18nScript'})
|
|
135
|
-
@Script({
|
|
136
|
-
name: 'i18n'
|
|
137
|
-
})
|
|
138
|
-
export class I18nScript extends ScriptRunnable {
|
|
139
|
-
public language?: Language;
|
|
140
|
-
constructor(public i18nService: I18nService) {
|
|
141
|
-
super();
|
|
142
|
-
i18nService.subject.subscribe(it => {
|
|
143
|
-
this.language = it;
|
|
144
|
-
this.render(); // <-- ref target rerender
|
|
145
|
-
})
|
|
146
|
-
}
|
|
147
|
-
run(key: string): any {
|
|
148
|
-
return this.language?.defaultData?.[key] ?? key;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
```
|
|
152
|
-
### using script
|
|
153
|
-
```typescript
|
|
154
|
-
counstructor(i18nScript: I18nScript) {...}
|
|
155
|
-
counstructor(scriptService: ScriptService) {
|
|
156
|
-
const i18nScript = scriptService.getScript('i18n');
|
|
157
|
-
}
|
|
158
|
-
```
|
|
159
|
-
```html
|
|
160
|
-
<div>${$scripts.i18n('Get Locale JSON')}</div>
|
|
161
|
-
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
## @PostConstruct
|
|
166
|
-
Methods that you run for a separate initialization operation after the object is created
|
|
167
|
-
```typescript
|
|
168
|
-
@PostConstruct
|
|
169
|
-
post(projectService: ProjectService) {
|
|
170
|
-
console.log('post Construct and dependency injection')
|
|
171
|
-
}
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
## @After, @Before (AOP)
|
|
175
|
-
```typescript
|
|
176
|
-
fire($event: MouseEvent, view: View<Element>) {
|
|
177
|
-
console.log('fire method')
|
|
178
|
-
this.data = RandomUtils.random(0, 100);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
@Before({property: 'fire'})
|
|
182
|
-
before(obj: any, protoType: Function) {
|
|
183
|
-
console.log('before', obj, protoType)
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
@After({property: 'fire'})
|
|
187
|
-
after(obj: any, protoType: Function) {
|
|
188
|
-
console.log('after', obj, protoType)
|
|
189
|
-
}
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
## @ExceptionHandler
|
|
193
|
-
```typescript
|
|
194
|
-
@ExceptionHandler(TypeError)
|
|
195
|
-
public exceptionTypeError(e: TypeError) {
|
|
196
|
-
console.log('TypeError exception:')
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
@ExceptionHandler(SimError)
|
|
200
|
-
public exception1(e: SimError) {
|
|
201
|
-
console.log('SimError exception:')
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
@ExceptionHandler(RouterError)
|
|
205
|
-
public exception3(e: RouterError) {
|
|
206
|
-
console.log('NotFountRoute exception:')
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
@ExceptionHandler(SimNoSuch)
|
|
210
|
-
public exception2(e: SimNoSuch) {
|
|
211
|
-
console.log('NoSuchSim exception:')
|
|
212
|
-
}
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
----
|
|
216
|
-
|
|
217
|
-
# View template engine (dom-render)
|
|
218
|
-
- **DomRender** [](https://www.npmjs.com/package/dom-render) [](https://github.com/visualkhh/dom-render)
|
|
219
|
-
- It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
|
|
220
|
-
- Update view only for parts where the value has changed.
|
|
221
|
-
- event: addEventListener (attribute)
|
|
222
|
-
```html
|
|
223
|
-
<div>
|
|
224
|
-
click: <button dr-event-click="this.name = 'name' + new Date()">click</button> <br>
|
|
225
|
-
change: <input type="text" dr-event-change="this.name = $target.value"> <br>
|
|
226
|
-
input: <input type="text" dr-event-input="this.name = $target.value"> <br>
|
|
227
|
-
keyup: <input type="text" dr-event-keyup="this.name = $target.value"> <br>
|
|
228
|
-
keydown: <input type="text" dr-event-keydown="this.name = $target.value"><br>
|
|
229
|
-
...
|
|
230
|
-
submit: <form dr-event-submit="console.log($event); $event.preventDefault();"><input type="text"> <button type="submit">submit</button></form><br>
|
|
231
|
-
window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
|
|
232
|
-
</div>...
|
|
233
|
-
|
|
234
|
-
```
|
|
235
|
-
- If you want to see more information Move here go ***dom-render github***
|
|
236
|
-
----
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
# LifeCycle
|
|
241
|
-
## Module LifeCycle interface
|
|
242
|
-
* LifeCycle
|
|
243
|
-
- onCreate(): Sim onCreate just one call
|
|
244
|
-
* OnChangedRender
|
|
245
|
-
- onChangedRender(): change rended in module event
|
|
246
|
-
* OnFinish
|
|
247
|
-
- onFinish(): lifecycle finish event
|
|
248
|
-
* OnInit
|
|
249
|
-
- onInit(): module load event
|
|
250
|
-
* OnDestroy
|
|
251
|
-
- onDestroy(): module destroy event
|
|
252
|
-
* OnInitedChild
|
|
253
|
-
- onInitedChild(): module and child module inited event
|
|
254
|
-
|
|
255
|
-
----
|
|
256
|
-
|
|
257
|
-
# Intent event broker
|
|
258
|
-
```typescript
|
|
259
|
-
constructor(intentManager: IntentManager){...}
|
|
260
|
-
// call
|
|
261
|
-
queryParamCall() {
|
|
262
|
-
this.intentManager.publish(new Intent('layout://info/data?a=wow&aa=zzz', Math.floor(RandomUtils.random(0, 100))));
|
|
263
|
-
}
|
|
264
|
-
call() {
|
|
265
|
-
this.intentManager(new Intent('layout://info/datas', Math.floor(RandomUtils.random(0, 100))));
|
|
266
|
-
}
|
|
267
|
-
targetCall() {
|
|
268
|
-
this.intentManager(new Intent('layout://', Math.floor(RandomUtils.random(0, 100))));
|
|
269
|
-
// default callback method -> subscribe(i: Intent)
|
|
270
|
-
}
|
|
271
|
-
globalCall() {
|
|
272
|
-
this.intentManager(new Intent('://info/datas', Math.floor(RandomUtils.random(0, 100))));
|
|
273
|
-
}
|
|
274
|
-
windowEventCall() {
|
|
275
|
-
const data = new CustomEvent('intent', {detail: {uri: 'index://showStore', data: {id: 'id data'}}});
|
|
276
|
-
window.dispatchEvent(data);
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
// receive
|
|
280
|
-
showStore(i: Intent) {
|
|
281
|
-
this.datas = i.data + '->' + i.params.aa
|
|
282
|
-
}
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
```typescript
|
|
286
|
-
@Sim({scheme: 'layout'})
|
|
287
|
-
@Component({
|
|
288
|
-
template,
|
|
289
|
-
styles: [css]
|
|
290
|
-
})
|
|
291
|
-
export class App {
|
|
292
|
-
info = new AppInfo();
|
|
293
|
-
constructor() {}
|
|
294
|
-
}
|
|
295
|
-
```
|
|
296
|
-
```typescript
|
|
297
|
-
export class AppInfo {
|
|
298
|
-
datas = 'default data';
|
|
299
|
-
data(i: Intent) {
|
|
300
|
-
this.datas = i.data + '->' + i.params.aa
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
```
|
|
304
|
-
|
|
305
|
-
# Advice
|
|
306
|
-
- global advice
|
|
307
|
-
```typescript
|
|
308
|
-
@Sim()
|
|
309
|
-
export class Advice {
|
|
310
|
-
|
|
311
|
-
@ExceptionHandler()
|
|
312
|
-
public exception0(e: any) {
|
|
313
|
-
console.log('Advice Global exception:')
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
@Before({type: Aop, property: 'unkown'})
|
|
317
|
-
public beforeTest(obj: any, f: Function, name: string) {
|
|
318
|
-
console.log('before Test:')
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
@After({type: Aop, property: 'unkown'})
|
|
322
|
-
public afterTest(obj: any, f: Function, name: string) {
|
|
323
|
-
console.log('after Test:')
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
```
|
|
327
|
-
```typescript
|
|
328
|
-
const option = new SimFrontOption(window, [Advice]).setUrlType(UrlType.hash);
|
|
329
|
-
const simpleApplication = new SimpleBootFront(AppRouter, option);
|
|
330
|
-
simpleApplication.run();
|
|
331
|
-
```
|
|
332
|
-
----
|
|
333
|
-
# License
|
|
334
|
-
* MIT
|
|
335
|
-
* visualkhh@gmail.com
|
|
1
|
+
|
|
2
|
+
[](https://www.npmjs.com/package/simple-boot-front) [](LICENSE.md) [](https://discord.gg/PW56dpns) [](https://github.com/visualkhh/simple-boot-front)
|
|
3
|
+
|
|
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.
|
|
7
|
+
|
|
8
|
+
# [📄 introduction page [link]](https://simple-boot-front.github.io)
|
|
9
|
+
- [https://simple-boot-front.github.io](https://simple-boot-front.github.io)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
# 🚀 Quick start cli
|
|
14
|
+
```shell
|
|
15
|
+
npm init simple-boot-front projectname
|
|
16
|
+
cd projectname
|
|
17
|
+
npm start
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
- Installation and Getting Started
|
|
22
|
+
```
|
|
23
|
+
npm install simple-boot-front
|
|
24
|
+
```
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# 😃 examples
|
|
28
|
+
- [examples project](./examples)
|
|
29
|
+
- [templates](./templates)
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
# 📄 Code description
|
|
33
|
+
## start
|
|
34
|
+
```html
|
|
35
|
+
<!DOCTYPE html><html lang="en"><body id="app"></body></html>
|
|
36
|
+
```
|
|
37
|
+
```typescript
|
|
38
|
+
const option = new SimFrontOption(window).setUrlType(UrlType.hash);
|
|
39
|
+
const simpleApplication = new SimpleBootFront(Index, option);
|
|
40
|
+
simpleApplication.run();
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## @Sim
|
|
44
|
+
Objects managed by the SimpleBootFront framework
|
|
45
|
+
- parameter: SimConfig {schema: string}
|
|
46
|
+
```typescript
|
|
47
|
+
@Sim({scheme: 'index'})
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## @Component
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!--template.html-->
|
|
54
|
+
<h1>${this.title}</h1>
|
|
55
|
+
<div dr-inner-html="this.html"></div>
|
|
56
|
+
```
|
|
57
|
+
```typescript
|
|
58
|
+
@Sim()
|
|
59
|
+
@Component({
|
|
60
|
+
selector: 'index', // default class name LowerCase
|
|
61
|
+
template,
|
|
62
|
+
styles: [style]
|
|
63
|
+
})
|
|
64
|
+
export class Index {
|
|
65
|
+
public title = ''
|
|
66
|
+
public html = ''
|
|
67
|
+
public setData(title: string, html: string) {
|
|
68
|
+
this.title = title;
|
|
69
|
+
this.html = html;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
using
|
|
74
|
+
```typescript
|
|
75
|
+
constructor(index: Index){...}
|
|
76
|
+
```
|
|
77
|
+
```html
|
|
78
|
+
<index></index>
|
|
79
|
+
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
|
|
80
|
+
<index dr-set="$index.setData('hello component', $innerHTML)"></index>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## @Router
|
|
84
|
+
```typescript
|
|
85
|
+
@Sim()
|
|
86
|
+
@Router({
|
|
87
|
+
path: '',
|
|
88
|
+
route: {
|
|
89
|
+
'/': Home,
|
|
90
|
+
'/user': User,
|
|
91
|
+
'/user/:id': UserDetail
|
|
92
|
+
}
|
|
93
|
+
})
|
|
94
|
+
@Component({
|
|
95
|
+
template,
|
|
96
|
+
styles: [style]
|
|
97
|
+
})
|
|
98
|
+
export class Index implements RouterAction {
|
|
99
|
+
child?: any;
|
|
100
|
+
canActivate(url: any, module: any): void {
|
|
101
|
+
this.child = module;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
### activeRoute
|
|
106
|
+
```typescript
|
|
107
|
+
constructor(routerManager: RouterManager){
|
|
108
|
+
// get path data
|
|
109
|
+
routerManager.activeRouterModule.pathData.id; // /user/:id
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### component include
|
|
114
|
+
```html
|
|
115
|
+
<route component="this.child"></route>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### router option
|
|
119
|
+
- attribute
|
|
120
|
+
- **router-active-class**: url === href attribute => class add (a-classname, b-classname)
|
|
121
|
+
- value: add and remove class name
|
|
122
|
+
- **router-inactive-class**: url !== href attribute => class add (a-classname, b-classname)
|
|
123
|
+
- value: add and remove class name
|
|
124
|
+
```html
|
|
125
|
+
<a router-link="/home" router-active-class="active" router-inactive-class="inactive">home</a>
|
|
126
|
+
```
|
|
127
|
+
- **router-link**:
|
|
128
|
+
- value: router link
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
## @Script
|
|
133
|
+
```typescript
|
|
134
|
+
@Sim({scheme: 'i18nScript'})
|
|
135
|
+
@Script({
|
|
136
|
+
name: 'i18n'
|
|
137
|
+
})
|
|
138
|
+
export class I18nScript extends ScriptRunnable {
|
|
139
|
+
public language?: Language;
|
|
140
|
+
constructor(public i18nService: I18nService) {
|
|
141
|
+
super();
|
|
142
|
+
i18nService.subject.subscribe(it => {
|
|
143
|
+
this.language = it;
|
|
144
|
+
this.render(); // <-- ref target rerender
|
|
145
|
+
})
|
|
146
|
+
}
|
|
147
|
+
run(key: string): any {
|
|
148
|
+
return this.language?.defaultData?.[key] ?? key;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
### using script
|
|
153
|
+
```typescript
|
|
154
|
+
counstructor(i18nScript: I18nScript) {...}
|
|
155
|
+
counstructor(scriptService: ScriptService) {
|
|
156
|
+
const i18nScript = scriptService.getScript('i18n');
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
```html
|
|
160
|
+
<div>${$scripts.i18n('Get Locale JSON')}</div>
|
|
161
|
+
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
## @PostConstruct
|
|
166
|
+
Methods that you run for a separate initialization operation after the object is created
|
|
167
|
+
```typescript
|
|
168
|
+
@PostConstruct
|
|
169
|
+
post(projectService: ProjectService) {
|
|
170
|
+
console.log('post Construct and dependency injection')
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
## @After, @Before (AOP)
|
|
175
|
+
```typescript
|
|
176
|
+
fire($event: MouseEvent, view: View<Element>) {
|
|
177
|
+
console.log('fire method')
|
|
178
|
+
this.data = RandomUtils.random(0, 100);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
@Before({property: 'fire'})
|
|
182
|
+
before(obj: any, protoType: Function) {
|
|
183
|
+
console.log('before', obj, protoType)
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@After({property: 'fire'})
|
|
187
|
+
after(obj: any, protoType: Function) {
|
|
188
|
+
console.log('after', obj, protoType)
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
## @ExceptionHandler
|
|
193
|
+
```typescript
|
|
194
|
+
@ExceptionHandler(TypeError)
|
|
195
|
+
public exceptionTypeError(e: TypeError) {
|
|
196
|
+
console.log('TypeError exception:')
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@ExceptionHandler(SimError)
|
|
200
|
+
public exception1(e: SimError) {
|
|
201
|
+
console.log('SimError exception:')
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@ExceptionHandler(RouterError)
|
|
205
|
+
public exception3(e: RouterError) {
|
|
206
|
+
console.log('NotFountRoute exception:')
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
@ExceptionHandler(SimNoSuch)
|
|
210
|
+
public exception2(e: SimNoSuch) {
|
|
211
|
+
console.log('NoSuchSim exception:')
|
|
212
|
+
}
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
----
|
|
216
|
+
|
|
217
|
+
# View template engine (dom-render)
|
|
218
|
+
- **DomRender** [](https://www.npmjs.com/package/dom-render) [](https://github.com/visualkhh/dom-render)
|
|
219
|
+
- It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
|
|
220
|
+
- Update view only for parts where the value has changed.
|
|
221
|
+
- event: addEventListener (attribute)
|
|
222
|
+
```html
|
|
223
|
+
<div>
|
|
224
|
+
click: <button dr-event-click="this.name = 'name' + new Date()">click</button> <br>
|
|
225
|
+
change: <input type="text" dr-event-change="this.name = $target.value"> <br>
|
|
226
|
+
input: <input type="text" dr-event-input="this.name = $target.value"> <br>
|
|
227
|
+
keyup: <input type="text" dr-event-keyup="this.name = $target.value"> <br>
|
|
228
|
+
keydown: <input type="text" dr-event-keydown="this.name = $target.value"><br>
|
|
229
|
+
...
|
|
230
|
+
submit: <form dr-event-submit="console.log($event); $event.preventDefault();"><input type="text"> <button type="submit">submit</button></form><br>
|
|
231
|
+
window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
|
|
232
|
+
</div>...
|
|
233
|
+
|
|
234
|
+
```
|
|
235
|
+
- If you want to see more information Move here go ***dom-render github***
|
|
236
|
+
----
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
# LifeCycle
|
|
241
|
+
## Module LifeCycle interface
|
|
242
|
+
* LifeCycle
|
|
243
|
+
- onCreate(): Sim onCreate just one call
|
|
244
|
+
* OnChangedRender
|
|
245
|
+
- onChangedRender(): change rended in module event
|
|
246
|
+
* OnFinish
|
|
247
|
+
- onFinish(): lifecycle finish event
|
|
248
|
+
* OnInit
|
|
249
|
+
- onInit(): module load event
|
|
250
|
+
* OnDestroy
|
|
251
|
+
- onDestroy(): module destroy event
|
|
252
|
+
* OnInitedChild
|
|
253
|
+
- onInitedChild(): module and child module inited event
|
|
254
|
+
|
|
255
|
+
----
|
|
256
|
+
|
|
257
|
+
# Intent event broker
|
|
258
|
+
```typescript
|
|
259
|
+
constructor(intentManager: IntentManager){...}
|
|
260
|
+
// call
|
|
261
|
+
queryParamCall() {
|
|
262
|
+
this.intentManager.publish(new Intent('layout://info/data?a=wow&aa=zzz', Math.floor(RandomUtils.random(0, 100))));
|
|
263
|
+
}
|
|
264
|
+
call() {
|
|
265
|
+
this.intentManager(new Intent('layout://info/datas', Math.floor(RandomUtils.random(0, 100))));
|
|
266
|
+
}
|
|
267
|
+
targetCall() {
|
|
268
|
+
this.intentManager(new Intent('layout://', Math.floor(RandomUtils.random(0, 100))));
|
|
269
|
+
// default callback method -> subscribe(i: Intent)
|
|
270
|
+
}
|
|
271
|
+
globalCall() {
|
|
272
|
+
this.intentManager(new Intent('://info/datas', Math.floor(RandomUtils.random(0, 100))));
|
|
273
|
+
}
|
|
274
|
+
windowEventCall() {
|
|
275
|
+
const data = new CustomEvent('intent', {detail: {uri: 'index://showStore', data: {id: 'id data'}}});
|
|
276
|
+
window.dispatchEvent(data);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// receive
|
|
280
|
+
showStore(i: Intent) {
|
|
281
|
+
this.datas = i.data + '->' + i.params.aa
|
|
282
|
+
}
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
```typescript
|
|
286
|
+
@Sim({scheme: 'layout'})
|
|
287
|
+
@Component({
|
|
288
|
+
template,
|
|
289
|
+
styles: [css]
|
|
290
|
+
})
|
|
291
|
+
export class App {
|
|
292
|
+
info = new AppInfo();
|
|
293
|
+
constructor() {}
|
|
294
|
+
}
|
|
295
|
+
```
|
|
296
|
+
```typescript
|
|
297
|
+
export class AppInfo {
|
|
298
|
+
datas = 'default data';
|
|
299
|
+
data(i: Intent) {
|
|
300
|
+
this.datas = i.data + '->' + i.params.aa
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
# Advice
|
|
306
|
+
- global advice
|
|
307
|
+
```typescript
|
|
308
|
+
@Sim()
|
|
309
|
+
export class Advice {
|
|
310
|
+
|
|
311
|
+
@ExceptionHandler()
|
|
312
|
+
public exception0(e: any) {
|
|
313
|
+
console.log('Advice Global exception:')
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
@Before({type: Aop, property: 'unkown'})
|
|
317
|
+
public beforeTest(obj: any, f: Function, name: string) {
|
|
318
|
+
console.log('before Test:')
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
@After({type: Aop, property: 'unkown'})
|
|
322
|
+
public afterTest(obj: any, f: Function, name: string) {
|
|
323
|
+
console.log('after Test:')
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
```
|
|
327
|
+
```typescript
|
|
328
|
+
const option = new SimFrontOption(window, [Advice]).setUrlType(UrlType.hash);
|
|
329
|
+
const simpleApplication = new SimpleBootFront(AppRouter, option);
|
|
330
|
+
simpleApplication.run();
|
|
331
|
+
```
|
|
332
|
+
----
|
|
333
|
+
# License
|
|
334
|
+
* MIT
|
|
335
|
+
* visualkhh@gmail.com
|