simple-boot-front 1.0.98 β 1.0.101
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 +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
|
}
|