simple-boot-front 1.0.98 β 1.0.101
Sign up to get free protection for your applications and to get access to all the features.
- package/README.MD +182 -129
- package/SimpleBootFront.d.ts +8 -1
- package/SimpleBootFront.js +126 -38
- package/decorators/Component.js +1 -25
- package/decorators/inject/InjectFrontSituationType.d.ts +3 -0
- package/decorators/inject/InjectFrontSituationType.js +7 -0
- package/lifecycle/OnInit.d.ts +6 -1
- package/package.json +8 -7
- package/service/CookieService.d.ts +5 -2
- package/service/CookieService.js +20 -8
- package/service/MetaTagService.d.ts +11 -0
- package/service/MetaTagService.js +52 -0
- package/service/Navigation.d.ts +8 -2
- package/service/Navigation.js +51 -9
- package/service/StorageService.d.ts +12 -0
- package/service/StorageService.js +67 -0
- package/service/view/ViewService.js +2 -2
- 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,11 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
[
|
|
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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
7
|
|
|
8
|
-
|
|
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)
|
|
9
14
|
- [https://simple-boot-front.github.io](https://simple-boot-front.github.io)
|
|
10
15
|
|
|
11
16
|
|
|
@@ -15,46 +20,151 @@
|
|
|
15
20
|
npm init simple-boot-front projectname
|
|
16
21
|
cd projectname
|
|
17
22
|
npm start
|
|
23
|
+
# open browser: http://localhost:4500
|
|
18
24
|
```
|
|
19
25
|
|
|
26
|
+
# π examples, templates
|
|
27
|
+
- [templates](./templates)
|
|
28
|
+
- [examples](./examples)
|
|
20
29
|
|
|
21
|
-
|
|
30
|
+
# directory structure
|
|
22
31
|
```
|
|
23
|
-
|
|
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)
|
|
24
47
|
```
|
|
25
|
-
---
|
|
26
48
|
|
|
27
|
-
|
|
28
|
-
-
|
|
29
|
-
|
|
30
|
-
|
|
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>
|
|
31
79
|
|
|
32
|
-
# π Code description
|
|
33
|
-
## start
|
|
34
80
|
```html
|
|
35
|
-
|
|
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
|
+
}
|
|
36
112
|
```
|
|
113
|
+
</details>
|
|
114
|
+
|
|
115
|
+
index.ts βΌ
|
|
37
116
|
```typescript
|
|
38
|
-
|
|
39
|
-
|
|
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);
|
|
40
140
|
simpleApplication.run();
|
|
41
141
|
```
|
|
42
142
|
|
|
43
|
-
##
|
|
143
|
+
## Decorator
|
|
144
|
+
<details>
|
|
145
|
+
<summary>@Sim<strong>π»(click)</strong></summary>
|
|
146
|
+
|
|
44
147
|
Objects managed by the SimpleBootFront framework
|
|
45
148
|
- parameter: SimConfig {schema: string}
|
|
149
|
+
|
|
46
150
|
```typescript
|
|
47
151
|
@Sim({scheme: 'index'})
|
|
48
152
|
```
|
|
153
|
+
</details>
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
<details>
|
|
157
|
+
<summary>@Component<strong>π»(click)</strong></summary>
|
|
49
158
|
|
|
50
|
-
## @Component
|
|
51
159
|
|
|
52
160
|
```html
|
|
53
161
|
<!--template.html-->
|
|
54
162
|
<h1>${this.title}</h1>
|
|
55
|
-
<div
|
|
163
|
+
<div>#innerHTML#</div>
|
|
56
164
|
```
|
|
57
165
|
```typescript
|
|
166
|
+
import template from './index.html'
|
|
167
|
+
import style from './index.css'
|
|
58
168
|
@Sim()
|
|
59
169
|
@Component({
|
|
60
170
|
selector: 'index', // default class name LowerCase
|
|
@@ -63,32 +173,39 @@ Objects managed by the SimpleBootFront framework
|
|
|
63
173
|
})
|
|
64
174
|
export class Index {
|
|
65
175
|
public title = ''
|
|
66
|
-
public
|
|
67
|
-
public setData(title: string, html: string) {
|
|
176
|
+
public setData(title: string) {
|
|
68
177
|
this.title = title;
|
|
69
|
-
this.html = html;
|
|
70
178
|
}
|
|
71
179
|
}
|
|
72
180
|
```
|
|
73
|
-
using
|
|
181
|
+
### using
|
|
74
182
|
```typescript
|
|
75
183
|
constructor(index: Index){...}
|
|
76
184
|
```
|
|
77
185
|
```html
|
|
78
186
|
<index></index>
|
|
79
187
|
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
|
|
80
|
-
<index dr-set="$index.setData('hello component'
|
|
188
|
+
<index dr-set="$index.setData('hello component')">
|
|
189
|
+
<ul>
|
|
190
|
+
<li>content</li>
|
|
191
|
+
</ul>
|
|
192
|
+
</index>
|
|
81
193
|
```
|
|
194
|
+
</details>
|
|
195
|
+
|
|
196
|
+
<details>
|
|
197
|
+
<summary>@Router<strong>π»(click)</strong></summary>
|
|
82
198
|
|
|
83
|
-
## @Router
|
|
84
199
|
```typescript
|
|
200
|
+
import template from './index.html'
|
|
201
|
+
import style from './index.css'
|
|
85
202
|
@Sim()
|
|
86
203
|
@Router({
|
|
87
204
|
path: '',
|
|
88
205
|
route: {
|
|
89
206
|
'/': Home,
|
|
90
207
|
'/user': User,
|
|
91
|
-
'/user
|
|
208
|
+
'/user/{id}': UserDetail
|
|
92
209
|
}
|
|
93
210
|
})
|
|
94
211
|
@Component({
|
|
@@ -102,6 +219,7 @@ export class Index implements RouterAction {
|
|
|
102
219
|
}
|
|
103
220
|
}
|
|
104
221
|
```
|
|
222
|
+
|
|
105
223
|
### activeRoute
|
|
106
224
|
```typescript
|
|
107
225
|
constructor(routerManager: RouterManager){
|
|
@@ -115,6 +233,7 @@ constructor(routerManager: RouterManager){
|
|
|
115
233
|
<route component="this.child"></route>
|
|
116
234
|
```
|
|
117
235
|
|
|
236
|
+
|
|
118
237
|
### router option
|
|
119
238
|
- attribute
|
|
120
239
|
- **router-active-class**: url === href attribute => class add (a-classname, b-classname)
|
|
@@ -126,10 +245,12 @@ constructor(routerManager: RouterManager){
|
|
|
126
245
|
```
|
|
127
246
|
- **router-link**:
|
|
128
247
|
- value: router link
|
|
248
|
+
|
|
249
|
+
</details>
|
|
129
250
|
|
|
251
|
+
<details>
|
|
252
|
+
<summary>@Script<strong>π»(click)</strong></summary>
|
|
130
253
|
|
|
131
|
-
|
|
132
|
-
## @Script
|
|
133
254
|
```typescript
|
|
134
255
|
@Sim({scheme: 'i18nScript'})
|
|
135
256
|
@Script({
|
|
@@ -161,17 +282,25 @@ counstructor(scriptService: ScriptService) {
|
|
|
161
282
|
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
|
|
162
283
|
```
|
|
163
284
|
|
|
285
|
+
</details>
|
|
286
|
+
|
|
287
|
+
<details>
|
|
288
|
+
<summary>@PostConstruct<strong>π»(click)</strong></summary>
|
|
164
289
|
|
|
165
|
-
## @PostConstruct
|
|
166
290
|
Methods that you run for a separate initialization operation after the object is created
|
|
291
|
+
|
|
167
292
|
```typescript
|
|
168
293
|
@PostConstruct
|
|
169
294
|
post(projectService: ProjectService) {
|
|
170
295
|
console.log('post Construct and dependency injection')
|
|
171
296
|
}
|
|
172
297
|
```
|
|
298
|
+
</details>
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
<details>
|
|
302
|
+
<summary>@After, @Before (AOP)<strong>π»(click)</strong></summary>
|
|
173
303
|
|
|
174
|
-
## @After, @Before (AOP)
|
|
175
304
|
```typescript
|
|
176
305
|
fire($event: MouseEvent, view: View<Element>) {
|
|
177
306
|
console.log('fire method')
|
|
@@ -188,8 +317,11 @@ after(obj: any, protoType: Function) {
|
|
|
188
317
|
console.log('after', obj, protoType)
|
|
189
318
|
}
|
|
190
319
|
```
|
|
320
|
+
</details>
|
|
321
|
+
|
|
322
|
+
<details>
|
|
323
|
+
<summary>@ExceptionHandler<strong>π»(click)</strong></summary>
|
|
191
324
|
|
|
192
|
-
## @ExceptionHandler
|
|
193
325
|
```typescript
|
|
194
326
|
@ExceptionHandler(TypeError)
|
|
195
327
|
public exceptionTypeError(e: TypeError) {
|
|
@@ -211,28 +343,26 @@ public exception2(e: SimNoSuch) {
|
|
|
211
343
|
console.log('NoSuchSim exception:')
|
|
212
344
|
}
|
|
213
345
|
```
|
|
346
|
+
</details>
|
|
214
347
|
|
|
215
|
-
----
|
|
216
348
|
|
|
217
|
-
#
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
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)
|
|
233
365
|
|
|
234
|
-
```
|
|
235
|
-
- If you want to see more information Move here go ***dom-render github***
|
|
236
366
|
----
|
|
237
367
|
|
|
238
368
|
|
|
@@ -253,83 +383,6 @@ public exception2(e: SimNoSuch) {
|
|
|
253
383
|
- onInitedChild(): module and child module inited event
|
|
254
384
|
|
|
255
385
|
----
|
|
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
386
|
# License
|
|
334
387
|
* MIT
|
|
335
388
|
* visualkhh@gmail.com
|
package/SimpleBootFront.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { SimFrontOption } from './option/SimFrontOption';
|
|
2
2
|
import { ConstructorType } from 'simple-boot-core/types/Types';
|
|
3
|
+
import { SimAtomic } from 'simple-boot-core/simstance/SimAtomic';
|
|
3
4
|
import { SimpleApplication } from 'simple-boot-core/SimpleApplication';
|
|
4
5
|
import { Navigation } from './service/Navigation';
|
|
5
6
|
import { HttpService } from './service/HttpService';
|
|
@@ -7,6 +8,7 @@ import { SimstanceManager } from 'simple-boot-core/simstance/SimstanceManager';
|
|
|
7
8
|
import { IntentManager } from 'simple-boot-core/intent/IntentManager';
|
|
8
9
|
import { RouterManager } from 'simple-boot-core/route/RouterManager';
|
|
9
10
|
import { Config, TargetElement, TargetAttr } from 'dom-render/Config';
|
|
11
|
+
import { RouterModule } from 'simple-boot-core/route/RouterModule';
|
|
10
12
|
export declare class SimpleBootFront extends SimpleApplication {
|
|
11
13
|
rootRouter: ConstructorType<any>;
|
|
12
14
|
option: SimFrontOption;
|
|
@@ -18,8 +20,13 @@ export declare class SimpleBootFront extends SimpleApplication {
|
|
|
18
20
|
constructor(rootRouter: ConstructorType<any>, option: SimFrontOption);
|
|
19
21
|
getComponentInnerHtml(targetObj: any): string;
|
|
20
22
|
createDomRender<T extends object>(obj: T): T;
|
|
21
|
-
|
|
23
|
+
private initRun;
|
|
24
|
+
goRouting(url: string): Promise<RouterModule<SimAtomic<Object>, any>>;
|
|
25
|
+
runRouting(otherInstanceSim?: Map<ConstructorType<any>, any>, url?: string): Promise<RouterModule<SimAtomic<Object>, any> | undefined>;
|
|
26
|
+
run(otherInstanceSim?: Map<ConstructorType<any>, any>, url?: string): SimpleBootFront;
|
|
22
27
|
private afterSetting;
|
|
23
28
|
initDomRenderScripts(): void;
|
|
24
29
|
private initDomRenderTargetElements;
|
|
30
|
+
getSimstanceManager(): SimstanceManager;
|
|
31
|
+
go(url: string): void;
|
|
25
32
|
}
|