simple-boot-front 1.0.102 → 1.0.103
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 +388 -388
- package/SimpleBootFront.d.ts +34 -34
- package/SimpleBootFront.js +337 -337
- package/decorators/Component.d.ts +11 -11
- package/decorators/Component.js +30 -30
- package/decorators/Script.d.ts +10 -10
- package/decorators/Script.js +31 -31
- package/decorators/inject/InjectFrontSituationType.d.ts +3 -3
- package/decorators/inject/InjectFrontSituationType.js +7 -7
- 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 -8
- 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 +83 -83
- package/script/ScriptRunnable.d.ts +7 -7
- package/script/ScriptRunnable.js +22 -22
- package/service/CookieService.d.ts +11 -11
- package/service/CookieService.js +54 -54
- package/service/HttpService.d.ts +3 -3
- package/service/HttpService.js +23 -23
- package/service/MetaTagService.d.ts +11 -11
- package/service/MetaTagService.js +52 -52
- package/service/Navigation.d.ts +18 -18
- package/service/Navigation.js +117 -117
- package/service/ScriptService.d.ts +7 -7
- package/service/ScriptService.js +39 -39
- package/service/StorageService.d.ts +12 -12
- package/service/StorageService.js +67 -67
- 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/README.MD
CHANGED
@@ -1,388 +1,388 @@
|
|
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
|
-
### dependencies
|
9
|
-
* dom-render [](https://www.npmjs.com/package/dom-render)
|
10
|
-
* simple-boot-core [](https://www.npmjs.com/package/simple-boot-core)
|
11
|
-
|
12
|
-
|
13
|
-
# [📄 introduction page 🔗](https://simple-boot-front.github.io)
|
14
|
-
- [https://simple-boot-front.github.io](https://simple-boot-front.github.io)
|
15
|
-
|
16
|
-
|
17
|
-
---
|
18
|
-
# 🚀 Quick start cli
|
19
|
-
```shell
|
20
|
-
npm init simple-boot-front projectname
|
21
|
-
cd projectname
|
22
|
-
npm start
|
23
|
-
# open browser: http://localhost:4500
|
24
|
-
```
|
25
|
-
|
26
|
-
# 😃 examples, templates
|
27
|
-
- [templates](./templates)
|
28
|
-
- [examples](./examples)
|
29
|
-
|
30
|
-
# directory structure
|
31
|
-
```
|
32
|
-
┌─ assets
|
33
|
-
├─ dist (out put directory)
|
34
|
-
├─ src (source)
|
35
|
-
│ ├─ pages (your pages)
|
36
|
-
│ │ ├ home.ts (sample page)
|
37
|
-
│ │ └ user.ts (sample page)
|
38
|
-
│ ├─ index.css (index route page css)
|
39
|
-
│ ├─ index.html (index route page template)
|
40
|
-
│ └─ index.ts (simple-boot-fornt start and route point)
|
41
|
-
├─ types (typescript type)
|
42
|
-
│ └ index.d.ts (type definition)
|
43
|
-
├─ index.html start (point html)
|
44
|
-
├─ package.json (project config)
|
45
|
-
├─ rollup.config.js (rollup bundler config)
|
46
|
-
└─ tsconfig.json (typescript config)
|
47
|
-
```
|
48
|
-
|
49
|
-
## source
|
50
|
-
* simple-boot-front start and route point (set: ts, html, css)
|
51
|
-
<details>
|
52
|
-
<summary>pages/home.ts<strong>🔻(click)</strong></summary>
|
53
|
-
|
54
|
-
```typescript
|
55
|
-
@Sim()
|
56
|
-
@Component({
|
57
|
-
template: '<div>home</div>'
|
58
|
-
})
|
59
|
-
export class Home {
|
60
|
-
|
61
|
-
}
|
62
|
-
```
|
63
|
-
</details>
|
64
|
-
<details>
|
65
|
-
<summary>pages/user.ts<strong>🔻(click)</strong></summary>
|
66
|
-
|
67
|
-
```typescript
|
68
|
-
@Sim()
|
69
|
-
@Component({
|
70
|
-
template: '<div>user</div>'
|
71
|
-
})
|
72
|
-
export class User {
|
73
|
-
|
74
|
-
}
|
75
|
-
```
|
76
|
-
</details>
|
77
|
-
<details>
|
78
|
-
<summary>index.html<strong>🔻(click)</strong></summary>
|
79
|
-
|
80
|
-
```html
|
81
|
-
<header>
|
82
|
-
<nav>
|
83
|
-
<ul>
|
84
|
-
<li>
|
85
|
-
<button router-link="/">home</button>
|
86
|
-
</li>
|
87
|
-
<li>
|
88
|
-
<button router-link="/user">user</button>
|
89
|
-
</li>
|
90
|
-
</ul>
|
91
|
-
</nav>
|
92
|
-
|
93
|
-
</header>
|
94
|
-
<main>
|
95
|
-
<router component="this.child"></router>
|
96
|
-
</main>
|
97
|
-
<footer>
|
98
|
-
footer
|
99
|
-
</footer>
|
100
|
-
```
|
101
|
-
</details>
|
102
|
-
|
103
|
-
<details>
|
104
|
-
<summary>index.css<strong>🔻(click)</strong></summary>
|
105
|
-
|
106
|
-
```css
|
107
|
-
header, footer, main {
|
108
|
-
border: #333333 1px solid;
|
109
|
-
padding: 20px;
|
110
|
-
margin: 20px;
|
111
|
-
}
|
112
|
-
```
|
113
|
-
</details>
|
114
|
-
|
115
|
-
index.ts ▼
|
116
|
-
```typescript
|
117
|
-
import template from './index.html'
|
118
|
-
import style from './index.css'
|
119
|
-
@Sim()
|
120
|
-
@Router({
|
121
|
-
path: '',
|
122
|
-
route: {
|
123
|
-
'/': Home,
|
124
|
-
'/user': User
|
125
|
-
}
|
126
|
-
})
|
127
|
-
@Component({
|
128
|
-
template,
|
129
|
-
styles: [style]
|
130
|
-
})
|
131
|
-
export class Index implements RouterAction {
|
132
|
-
child?: any;
|
133
|
-
async canActivate(url: any, module: any) {
|
134
|
-
this.child = module;
|
135
|
-
}
|
136
|
-
}
|
137
|
-
|
138
|
-
const config = new SimFrontOption(window).setUrlType(UrlType.hash);
|
139
|
-
const simpleApplication = new SimpleBootFront(Index, config);
|
140
|
-
simpleApplication.run();
|
141
|
-
```
|
142
|
-
|
143
|
-
## Decorator
|
144
|
-
<details>
|
145
|
-
<summary>@Sim<strong>🔻(click)</strong></summary>
|
146
|
-
|
147
|
-
Objects managed by the SimpleBootFront framework
|
148
|
-
- parameter: SimConfig {schema: string}
|
149
|
-
|
150
|
-
```typescript
|
151
|
-
@Sim({scheme: 'index'})
|
152
|
-
```
|
153
|
-
</details>
|
154
|
-
|
155
|
-
|
156
|
-
<details>
|
157
|
-
<summary>@Component<strong>🔻(click)</strong></summary>
|
158
|
-
|
159
|
-
|
160
|
-
```html
|
161
|
-
<!--template.html-->
|
162
|
-
<h1>${this.title}</h1>
|
163
|
-
<div>#innerHTML#</div>
|
164
|
-
```
|
165
|
-
```typescript
|
166
|
-
import template from './index.html'
|
167
|
-
import style from './index.css'
|
168
|
-
@Sim()
|
169
|
-
@Component({
|
170
|
-
selector: 'index', // default class name LowerCase
|
171
|
-
template,
|
172
|
-
styles: [style]
|
173
|
-
})
|
174
|
-
export class Index {
|
175
|
-
public title = ''
|
176
|
-
public setData(title: string) {
|
177
|
-
this.title = title;
|
178
|
-
}
|
179
|
-
}
|
180
|
-
```
|
181
|
-
### using
|
182
|
-
```typescript
|
183
|
-
constructor(index: Index){...}
|
184
|
-
```
|
185
|
-
```html
|
186
|
-
<index></index>
|
187
|
-
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
|
188
|
-
<index dr-set="$index.setData('hello component')">
|
189
|
-
<ul>
|
190
|
-
<li>content</li>
|
191
|
-
</ul>
|
192
|
-
</index>
|
193
|
-
```
|
194
|
-
</details>
|
195
|
-
|
196
|
-
<details>
|
197
|
-
<summary>@Router<strong>🔻(click)</strong></summary>
|
198
|
-
|
199
|
-
```typescript
|
200
|
-
import template from './index.html'
|
201
|
-
import style from './index.css'
|
202
|
-
@Sim()
|
203
|
-
@Router({
|
204
|
-
path: '',
|
205
|
-
route: {
|
206
|
-
'/': Home,
|
207
|
-
'/user': User,
|
208
|
-
'/user/{id}': UserDetail
|
209
|
-
}
|
210
|
-
})
|
211
|
-
@Component({
|
212
|
-
template,
|
213
|
-
styles: [style]
|
214
|
-
})
|
215
|
-
export class Index implements RouterAction {
|
216
|
-
child?: any;
|
217
|
-
canActivate(url: any, module: any): void {
|
218
|
-
this.child = module;
|
219
|
-
}
|
220
|
-
}
|
221
|
-
```
|
222
|
-
|
223
|
-
### activeRoute
|
224
|
-
```typescript
|
225
|
-
constructor(routerManager: RouterManager){
|
226
|
-
// get path data
|
227
|
-
routerManager.activeRouterModule.pathData.id; // /user/:id
|
228
|
-
}
|
229
|
-
```
|
230
|
-
|
231
|
-
### component include
|
232
|
-
```html
|
233
|
-
<route component="this.child"></route>
|
234
|
-
```
|
235
|
-
|
236
|
-
|
237
|
-
### router option
|
238
|
-
- attribute
|
239
|
-
- **router-active-class**: url === href attribute => class add (a-classname, b-classname)
|
240
|
-
- value: add and remove class name
|
241
|
-
- **router-inactive-class**: url !== href attribute => class add (a-classname, b-classname)
|
242
|
-
- value: add and remove class name
|
243
|
-
```html
|
244
|
-
<a router-link="/home" router-active-class="active" router-inactive-class="inactive">home</a>
|
245
|
-
```
|
246
|
-
- **router-link**:
|
247
|
-
- value: router link
|
248
|
-
|
249
|
-
</details>
|
250
|
-
|
251
|
-
<details>
|
252
|
-
<summary>@Script<strong>🔻(click)</strong></summary>
|
253
|
-
|
254
|
-
```typescript
|
255
|
-
@Sim({scheme: 'i18nScript'})
|
256
|
-
@Script({
|
257
|
-
name: 'i18n'
|
258
|
-
})
|
259
|
-
export class I18nScript extends ScriptRunnable {
|
260
|
-
public language?: Language;
|
261
|
-
constructor(public i18nService: I18nService) {
|
262
|
-
super();
|
263
|
-
i18nService.subject.subscribe(it => {
|
264
|
-
this.language = it;
|
265
|
-
this.render(); // <-- ref target rerender
|
266
|
-
})
|
267
|
-
}
|
268
|
-
run(key: string): any {
|
269
|
-
return this.language?.defaultData?.[key] ?? key;
|
270
|
-
}
|
271
|
-
}
|
272
|
-
```
|
273
|
-
### using script
|
274
|
-
```typescript
|
275
|
-
counstructor(i18nScript: I18nScript) {...}
|
276
|
-
counstructor(scriptService: ScriptService) {
|
277
|
-
const i18nScript = scriptService.getScript('i18n');
|
278
|
-
}
|
279
|
-
```
|
280
|
-
```html
|
281
|
-
<div>${$scripts.i18n('Get Locale JSON')}</div>
|
282
|
-
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
|
283
|
-
```
|
284
|
-
|
285
|
-
</details>
|
286
|
-
|
287
|
-
<details>
|
288
|
-
<summary>@PostConstruct<strong>🔻(click)</strong></summary>
|
289
|
-
|
290
|
-
Methods that you run for a separate initialization operation after the object is created
|
291
|
-
|
292
|
-
```typescript
|
293
|
-
@PostConstruct
|
294
|
-
post(projectService: ProjectService) {
|
295
|
-
console.log('post Construct and dependency injection')
|
296
|
-
}
|
297
|
-
```
|
298
|
-
</details>
|
299
|
-
|
300
|
-
|
301
|
-
<details>
|
302
|
-
<summary>@After, @Before (AOP)<strong>🔻(click)</strong></summary>
|
303
|
-
|
304
|
-
```typescript
|
305
|
-
fire($event: MouseEvent, view: View<Element>) {
|
306
|
-
console.log('fire method')
|
307
|
-
this.data = RandomUtils.random(0, 100);
|
308
|
-
}
|
309
|
-
|
310
|
-
@Before({property: 'fire'})
|
311
|
-
before(obj: any, protoType: Function) {
|
312
|
-
console.log('before', obj, protoType)
|
313
|
-
}
|
314
|
-
|
315
|
-
@After({property: 'fire'})
|
316
|
-
after(obj: any, protoType: Function) {
|
317
|
-
console.log('after', obj, protoType)
|
318
|
-
}
|
319
|
-
```
|
320
|
-
</details>
|
321
|
-
|
322
|
-
<details>
|
323
|
-
<summary>@ExceptionHandler<strong>🔻(click)</strong></summary>
|
324
|
-
|
325
|
-
```typescript
|
326
|
-
@ExceptionHandler(TypeError)
|
327
|
-
public exceptionTypeError(e: TypeError) {
|
328
|
-
console.log('TypeError exception:')
|
329
|
-
}
|
330
|
-
|
331
|
-
@ExceptionHandler(SimError)
|
332
|
-
public exception1(e: SimError) {
|
333
|
-
console.log('SimError exception:')
|
334
|
-
}
|
335
|
-
|
336
|
-
@ExceptionHandler(RouterError)
|
337
|
-
public exception3(e: RouterError) {
|
338
|
-
console.log('NotFountRoute exception:')
|
339
|
-
}
|
340
|
-
|
341
|
-
@ExceptionHandler(SimNoSuch)
|
342
|
-
public exception2(e: SimNoSuch) {
|
343
|
-
console.log('NoSuchSim exception:')
|
344
|
-
}
|
345
|
-
```
|
346
|
-
</details>
|
347
|
-
|
348
|
-
|
349
|
-
# Framework Core (simple-boot-core)
|
350
|
-
[](https://www.npmjs.com/package/simple-boot-core) [](https://github.com/visualkhh/simple-boot-core)
|
351
|
-
* Object management.
|
352
|
-
* Dependency Injection (DI)
|
353
|
-
* Life cycle provided.
|
354
|
-
* Aspect Oriented Programming (AOP)
|
355
|
-
* ExceptionHandler (Global or Local)
|
356
|
-
* Router System
|
357
|
-
* Intent Event System
|
358
|
-
|
359
|
-
|
360
|
-
# View template engine (dom-render)
|
361
|
-
[](https://www.npmjs.com/package/dom-render) [](https://github.com/visualkhh/dom-render)
|
362
|
-
* view template engine
|
363
|
-
* Dom control and reorder and render
|
364
|
-
* all internal variables are managed by proxy. (DomRenderProxy)
|
365
|
-
|
366
|
-
----
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
# LifeCycle
|
371
|
-
## Module LifeCycle interface
|
372
|
-
* LifeCycle
|
373
|
-
- onCreate(): Sim onCreate just one call
|
374
|
-
* OnChangedRender
|
375
|
-
- onChangedRender(): change rended in module event
|
376
|
-
* OnFinish
|
377
|
-
- onFinish(): lifecycle finish event
|
378
|
-
* OnInit
|
379
|
-
- onInit(): module load event
|
380
|
-
* OnDestroy
|
381
|
-
- onDestroy(): module destroy event
|
382
|
-
* OnInitedChild
|
383
|
-
- onInitedChild(): module and child module inited event
|
384
|
-
|
385
|
-
----
|
386
|
-
# License
|
387
|
-
* MIT
|
388
|
-
* 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
|
+
### dependencies
|
9
|
+
* dom-render [](https://www.npmjs.com/package/dom-render)
|
10
|
+
* simple-boot-core [](https://www.npmjs.com/package/simple-boot-core)
|
11
|
+
|
12
|
+
|
13
|
+
# [📄 introduction page 🔗](https://simple-boot-front.github.io)
|
14
|
+
- [https://simple-boot-front.github.io](https://simple-boot-front.github.io)
|
15
|
+
|
16
|
+
|
17
|
+
---
|
18
|
+
# 🚀 Quick start cli
|
19
|
+
```shell
|
20
|
+
npm init simple-boot-front projectname
|
21
|
+
cd projectname
|
22
|
+
npm start
|
23
|
+
# open browser: http://localhost:4500
|
24
|
+
```
|
25
|
+
|
26
|
+
# 😃 examples, templates
|
27
|
+
- [templates](./templates)
|
28
|
+
- [examples](./examples)
|
29
|
+
|
30
|
+
# directory structure
|
31
|
+
```
|
32
|
+
┌─ assets
|
33
|
+
├─ dist (out put directory)
|
34
|
+
├─ src (source)
|
35
|
+
│ ├─ pages (your pages)
|
36
|
+
│ │ ├ home.ts (sample page)
|
37
|
+
│ │ └ user.ts (sample page)
|
38
|
+
│ ├─ index.css (index route page css)
|
39
|
+
│ ├─ index.html (index route page template)
|
40
|
+
│ └─ index.ts (simple-boot-fornt start and route point)
|
41
|
+
├─ types (typescript type)
|
42
|
+
│ └ index.d.ts (type definition)
|
43
|
+
├─ index.html start (point html)
|
44
|
+
├─ package.json (project config)
|
45
|
+
├─ rollup.config.js (rollup bundler config)
|
46
|
+
└─ tsconfig.json (typescript config)
|
47
|
+
```
|
48
|
+
|
49
|
+
## source
|
50
|
+
* simple-boot-front start and route point (set: ts, html, css)
|
51
|
+
<details>
|
52
|
+
<summary>pages/home.ts<strong>🔻(click)</strong></summary>
|
53
|
+
|
54
|
+
```typescript
|
55
|
+
@Sim()
|
56
|
+
@Component({
|
57
|
+
template: '<div>home</div>'
|
58
|
+
})
|
59
|
+
export class Home {
|
60
|
+
|
61
|
+
}
|
62
|
+
```
|
63
|
+
</details>
|
64
|
+
<details>
|
65
|
+
<summary>pages/user.ts<strong>🔻(click)</strong></summary>
|
66
|
+
|
67
|
+
```typescript
|
68
|
+
@Sim()
|
69
|
+
@Component({
|
70
|
+
template: '<div>user</div>'
|
71
|
+
})
|
72
|
+
export class User {
|
73
|
+
|
74
|
+
}
|
75
|
+
```
|
76
|
+
</details>
|
77
|
+
<details>
|
78
|
+
<summary>index.html<strong>🔻(click)</strong></summary>
|
79
|
+
|
80
|
+
```html
|
81
|
+
<header>
|
82
|
+
<nav>
|
83
|
+
<ul>
|
84
|
+
<li>
|
85
|
+
<button router-link="/">home</button>
|
86
|
+
</li>
|
87
|
+
<li>
|
88
|
+
<button router-link="/user">user</button>
|
89
|
+
</li>
|
90
|
+
</ul>
|
91
|
+
</nav>
|
92
|
+
|
93
|
+
</header>
|
94
|
+
<main>
|
95
|
+
<router component="this.child"></router>
|
96
|
+
</main>
|
97
|
+
<footer>
|
98
|
+
footer
|
99
|
+
</footer>
|
100
|
+
```
|
101
|
+
</details>
|
102
|
+
|
103
|
+
<details>
|
104
|
+
<summary>index.css<strong>🔻(click)</strong></summary>
|
105
|
+
|
106
|
+
```css
|
107
|
+
header, footer, main {
|
108
|
+
border: #333333 1px solid;
|
109
|
+
padding: 20px;
|
110
|
+
margin: 20px;
|
111
|
+
}
|
112
|
+
```
|
113
|
+
</details>
|
114
|
+
|
115
|
+
index.ts ▼
|
116
|
+
```typescript
|
117
|
+
import template from './index.html'
|
118
|
+
import style from './index.css'
|
119
|
+
@Sim()
|
120
|
+
@Router({
|
121
|
+
path: '',
|
122
|
+
route: {
|
123
|
+
'/': Home,
|
124
|
+
'/user': User
|
125
|
+
}
|
126
|
+
})
|
127
|
+
@Component({
|
128
|
+
template,
|
129
|
+
styles: [style]
|
130
|
+
})
|
131
|
+
export class Index implements RouterAction {
|
132
|
+
child?: any;
|
133
|
+
async canActivate(url: any, module: any) {
|
134
|
+
this.child = module;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
const config = new SimFrontOption(window).setUrlType(UrlType.hash);
|
139
|
+
const simpleApplication = new SimpleBootFront(Index, config);
|
140
|
+
simpleApplication.run();
|
141
|
+
```
|
142
|
+
|
143
|
+
## Decorator
|
144
|
+
<details>
|
145
|
+
<summary>@Sim<strong>🔻(click)</strong></summary>
|
146
|
+
|
147
|
+
Objects managed by the SimpleBootFront framework
|
148
|
+
- parameter: SimConfig {schema: string}
|
149
|
+
|
150
|
+
```typescript
|
151
|
+
@Sim({scheme: 'index'})
|
152
|
+
```
|
153
|
+
</details>
|
154
|
+
|
155
|
+
|
156
|
+
<details>
|
157
|
+
<summary>@Component<strong>🔻(click)</strong></summary>
|
158
|
+
|
159
|
+
|
160
|
+
```html
|
161
|
+
<!--template.html-->
|
162
|
+
<h1>${this.title}</h1>
|
163
|
+
<div>#innerHTML#</div>
|
164
|
+
```
|
165
|
+
```typescript
|
166
|
+
import template from './index.html'
|
167
|
+
import style from './index.css'
|
168
|
+
@Sim()
|
169
|
+
@Component({
|
170
|
+
selector: 'index', // default class name LowerCase
|
171
|
+
template,
|
172
|
+
styles: [style]
|
173
|
+
})
|
174
|
+
export class Index {
|
175
|
+
public title = ''
|
176
|
+
public setData(title: string) {
|
177
|
+
this.title = title;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
```
|
181
|
+
### using
|
182
|
+
```typescript
|
183
|
+
constructor(index: Index){...}
|
184
|
+
```
|
185
|
+
```html
|
186
|
+
<index></index>
|
187
|
+
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
|
188
|
+
<index dr-set="$index.setData('hello component')">
|
189
|
+
<ul>
|
190
|
+
<li>content</li>
|
191
|
+
</ul>
|
192
|
+
</index>
|
193
|
+
```
|
194
|
+
</details>
|
195
|
+
|
196
|
+
<details>
|
197
|
+
<summary>@Router<strong>🔻(click)</strong></summary>
|
198
|
+
|
199
|
+
```typescript
|
200
|
+
import template from './index.html'
|
201
|
+
import style from './index.css'
|
202
|
+
@Sim()
|
203
|
+
@Router({
|
204
|
+
path: '',
|
205
|
+
route: {
|
206
|
+
'/': Home,
|
207
|
+
'/user': User,
|
208
|
+
'/user/{id}': UserDetail
|
209
|
+
}
|
210
|
+
})
|
211
|
+
@Component({
|
212
|
+
template,
|
213
|
+
styles: [style]
|
214
|
+
})
|
215
|
+
export class Index implements RouterAction {
|
216
|
+
child?: any;
|
217
|
+
canActivate(url: any, module: any): void {
|
218
|
+
this.child = module;
|
219
|
+
}
|
220
|
+
}
|
221
|
+
```
|
222
|
+
|
223
|
+
### activeRoute
|
224
|
+
```typescript
|
225
|
+
constructor(routerManager: RouterManager){
|
226
|
+
// get path data
|
227
|
+
routerManager.activeRouterModule.pathData.id; // /user/:id
|
228
|
+
}
|
229
|
+
```
|
230
|
+
|
231
|
+
### component include
|
232
|
+
```html
|
233
|
+
<route component="this.child"></route>
|
234
|
+
```
|
235
|
+
|
236
|
+
|
237
|
+
### router option
|
238
|
+
- attribute
|
239
|
+
- **router-active-class**: url === href attribute => class add (a-classname, b-classname)
|
240
|
+
- value: add and remove class name
|
241
|
+
- **router-inactive-class**: url !== href attribute => class add (a-classname, b-classname)
|
242
|
+
- value: add and remove class name
|
243
|
+
```html
|
244
|
+
<a router-link="/home" router-active-class="active" router-inactive-class="inactive">home</a>
|
245
|
+
```
|
246
|
+
- **router-link**:
|
247
|
+
- value: router link
|
248
|
+
|
249
|
+
</details>
|
250
|
+
|
251
|
+
<details>
|
252
|
+
<summary>@Script<strong>🔻(click)</strong></summary>
|
253
|
+
|
254
|
+
```typescript
|
255
|
+
@Sim({scheme: 'i18nScript'})
|
256
|
+
@Script({
|
257
|
+
name: 'i18n'
|
258
|
+
})
|
259
|
+
export class I18nScript extends ScriptRunnable {
|
260
|
+
public language?: Language;
|
261
|
+
constructor(public i18nService: I18nService) {
|
262
|
+
super();
|
263
|
+
i18nService.subject.subscribe(it => {
|
264
|
+
this.language = it;
|
265
|
+
this.render(); // <-- ref target rerender
|
266
|
+
})
|
267
|
+
}
|
268
|
+
run(key: string): any {
|
269
|
+
return this.language?.defaultData?.[key] ?? key;
|
270
|
+
}
|
271
|
+
}
|
272
|
+
```
|
273
|
+
### using script
|
274
|
+
```typescript
|
275
|
+
counstructor(i18nScript: I18nScript) {...}
|
276
|
+
counstructor(scriptService: ScriptService) {
|
277
|
+
const i18nScript = scriptService.getScript('i18n');
|
278
|
+
}
|
279
|
+
```
|
280
|
+
```html
|
281
|
+
<div>${$scripts.i18n('Get Locale JSON')}</div>
|
282
|
+
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
|
283
|
+
```
|
284
|
+
|
285
|
+
</details>
|
286
|
+
|
287
|
+
<details>
|
288
|
+
<summary>@PostConstruct<strong>🔻(click)</strong></summary>
|
289
|
+
|
290
|
+
Methods that you run for a separate initialization operation after the object is created
|
291
|
+
|
292
|
+
```typescript
|
293
|
+
@PostConstruct
|
294
|
+
post(projectService: ProjectService) {
|
295
|
+
console.log('post Construct and dependency injection')
|
296
|
+
}
|
297
|
+
```
|
298
|
+
</details>
|
299
|
+
|
300
|
+
|
301
|
+
<details>
|
302
|
+
<summary>@After, @Before (AOP)<strong>🔻(click)</strong></summary>
|
303
|
+
|
304
|
+
```typescript
|
305
|
+
fire($event: MouseEvent, view: View<Element>) {
|
306
|
+
console.log('fire method')
|
307
|
+
this.data = RandomUtils.random(0, 100);
|
308
|
+
}
|
309
|
+
|
310
|
+
@Before({property: 'fire'})
|
311
|
+
before(obj: any, protoType: Function) {
|
312
|
+
console.log('before', obj, protoType)
|
313
|
+
}
|
314
|
+
|
315
|
+
@After({property: 'fire'})
|
316
|
+
after(obj: any, protoType: Function) {
|
317
|
+
console.log('after', obj, protoType)
|
318
|
+
}
|
319
|
+
```
|
320
|
+
</details>
|
321
|
+
|
322
|
+
<details>
|
323
|
+
<summary>@ExceptionHandler<strong>🔻(click)</strong></summary>
|
324
|
+
|
325
|
+
```typescript
|
326
|
+
@ExceptionHandler(TypeError)
|
327
|
+
public exceptionTypeError(e: TypeError) {
|
328
|
+
console.log('TypeError exception:')
|
329
|
+
}
|
330
|
+
|
331
|
+
@ExceptionHandler(SimError)
|
332
|
+
public exception1(e: SimError) {
|
333
|
+
console.log('SimError exception:')
|
334
|
+
}
|
335
|
+
|
336
|
+
@ExceptionHandler(RouterError)
|
337
|
+
public exception3(e: RouterError) {
|
338
|
+
console.log('NotFountRoute exception:')
|
339
|
+
}
|
340
|
+
|
341
|
+
@ExceptionHandler(SimNoSuch)
|
342
|
+
public exception2(e: SimNoSuch) {
|
343
|
+
console.log('NoSuchSim exception:')
|
344
|
+
}
|
345
|
+
```
|
346
|
+
</details>
|
347
|
+
|
348
|
+
|
349
|
+
# Framework Core (simple-boot-core)
|
350
|
+
[](https://www.npmjs.com/package/simple-boot-core) [](https://github.com/visualkhh/simple-boot-core)
|
351
|
+
* Object management.
|
352
|
+
* Dependency Injection (DI)
|
353
|
+
* Life cycle provided.
|
354
|
+
* Aspect Oriented Programming (AOP)
|
355
|
+
* ExceptionHandler (Global or Local)
|
356
|
+
* Router System
|
357
|
+
* Intent Event System
|
358
|
+
|
359
|
+
|
360
|
+
# View template engine (dom-render)
|
361
|
+
[](https://www.npmjs.com/package/dom-render) [](https://github.com/visualkhh/dom-render)
|
362
|
+
* view template engine
|
363
|
+
* Dom control and reorder and render
|
364
|
+
* all internal variables are managed by proxy. (DomRenderProxy)
|
365
|
+
|
366
|
+
----
|
367
|
+
|
368
|
+
|
369
|
+
|
370
|
+
# LifeCycle
|
371
|
+
## Module LifeCycle interface
|
372
|
+
* LifeCycle
|
373
|
+
- onCreate(): Sim onCreate just one call
|
374
|
+
* OnChangedRender
|
375
|
+
- onChangedRender(): change rended in module event
|
376
|
+
* OnFinish
|
377
|
+
- onFinish(): lifecycle finish event
|
378
|
+
* OnInit
|
379
|
+
- onInit(): module load event
|
380
|
+
* OnDestroy
|
381
|
+
- onDestroy(): module destroy event
|
382
|
+
* OnInitedChild
|
383
|
+
- onInitedChild(): module and child module inited event
|
384
|
+
|
385
|
+
----
|
386
|
+
# License
|
387
|
+
* MIT
|
388
|
+
* visualkhh@gmail.com
|