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 CHANGED
@@ -1,11 +1,16 @@
1
- ![Single Page Application Framworks](assets/banner.png)
2
- [![npm version](https://img.shields.io/badge/npm-v1.0.81-blue)](https://www.npmjs.com/package/simple-boot-front) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE.md) [![Chat](https://img.shields.io/badge/discord-20%20online-brightgreen?logo=discord)](https://discord.gg/PW56dpns) [![Github](https://img.shields.io/badge/-github-black?logo=github)](https://github.com/visualkhh/simple-boot-front)
1
+ ![Single Page Application Framworks](assets/banner.png)
2
+ ![typescript](https://img.shields.io/badge/-typescript-black?logo=typescript) [![npm](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/simple-boot-front) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE.md) [![Chat](https://img.shields.io/badge/discord-20%20online-brightgreen?logo=discord)](https://discord.gg/PW56dpns) [![Github](https://img.shields.io/badge/-github-black?logo=github)](https://github.com/visualkhh/simple-boot-front)
3
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.
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
- # [πŸ“„ introduction page [link]](https://simple-boot-front.github.io)
8
+ ### dependencies
9
+ * dom-render [![npm](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/dom-render)
10
+ * simple-boot-core [![npm](https://img.shields.io/badge/-npm-black?logo=npm)](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
- - Installation and Getting Started
30
+ # directory structure
22
31
  ```
23
- npm install simple-boot-front
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
- # πŸ˜ƒ examples
28
- - [examples project](./examples)
29
- - [templates](./templates)
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
- <!DOCTYPE html><html lang="en"><body id="app"></body></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
+ }
36
112
  ```
113
+ </details>
114
+
115
+ index.ts β–Ό
37
116
  ```typescript
38
- const option = new SimFrontOption(window).setUrlType(UrlType.hash);
39
- const simpleApplication = new SimpleBootFront(Index, option);
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
- ## @Sim
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 dr-inner-html="this.html"></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 html = ''
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', $innerHTML)"></index>
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/:id': UserDetail
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
- # View template engine (dom-render)
218
- - **DomRender** [![npm version](https://img.shields.io/badge/npm-blue)](https://www.npmjs.com/package/dom-render) [![Github](https://img.shields.io/badge/-github-black?logo=github)](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>...
349
+ # Framework Core (simple-boot-core)
350
+ [![npm version](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/simple-boot-core) [![Github](https://img.shields.io/badge/-github-black?logo=github)](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
+ [![npm version](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/dom-render) [![Github](https://img.shields.io/badge/-github-black?logo=github)](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
@@ -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
- run(): void;
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
  }