vasille-web 5.0.2 → 5.1.1

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.
Files changed (3) hide show
  1. package/README.md +45 -40
  2. package/lib/dev.js +69 -3
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -29,7 +29,6 @@
29
29
  - [1.0 - 1.2](#10---12)
30
30
  - [Questions](#questions)
31
31
 
32
-
33
32
  <hr>
34
33
 
35
34
  ## Installation
@@ -47,37 +46,41 @@ $ npm create steel-frame
47
46
  ```
48
47
 
49
48
  ### Full documentation:
50
- * [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
51
- * [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
52
- * [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
53
- * [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
49
+
50
+ - [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
51
+ - [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
52
+ - [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
53
+ - [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
54
54
 
55
55
  ### Examples
56
- * [TypeScript Example](https://github.com/vasille-js/example-typescript)
57
- * [JavaScript Example](https://github.com/vasille-js/example-javascript)
56
+
57
+ - [TypeScript Example](https://github.com/vasille-js/example-typescript)
58
+ - [JavaScript Example](https://github.com/vasille-js/example-javascript)
58
59
 
59
60
  <hr>
60
61
 
61
62
  ## How SAFE is SteelFrameKit
62
63
 
63
64
  The safe of your application is ensured by
64
- * `100%` coverage of code by unit tests.
65
+
66
+ - `100%` coverage of code by unit tests.
65
67
  Each function, each branch is working as designed.
66
- * OOP, DRY, KISS and SOLID principles are applied.
67
- * `strong typing` makes your javascript/typescript code safe as C++ code.
68
- All entities of `SteelFrameKit` core library are strongly typed, including:
69
- * data fields & properties.
70
- * computed properties (function parameters and result).
71
- * methods.
72
- * events (defined handlers & event emit).
73
- * DOM events & DOM operation (attributing, styling, etc.).
74
- * slots of components.
75
- * references to children.
76
- * No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
68
+ - OOP, DRY, KISS and SOLID principles are applied.
69
+ - `strong typing` makes your code safe.
70
+ All entities of `SteelFrameKit` core library are strongly typed, including:
71
+ - data fields & properties.
72
+ - computed properties (function parameters and result).
73
+ - methods.
74
+ - events (defined handlers & event emit).
75
+ - DOM events & DOM operation (attributing, styling, etc.).
76
+ - slots of components.
77
+ - references to children.
78
+ - No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
77
79
 
78
80
  ## How INTUITIVE is SteelFrameKit
79
81
 
80
82
  There is the "Hello World":
83
+
81
84
  ```typescript jsx
82
85
  import { compose, mount } from "steel-frame";
83
86
 
@@ -91,35 +94,37 @@ mount(document.body, App, {});
91
94
  ## How POWERFUL is SteelFrameKit
92
95
 
93
96
  All of these are supported:
94
- * Components.
95
- * Reactive values (observables).
96
- * Inline computed values.
97
- * Multiline computed values.
98
- * HTML tags.
99
- * Component custom slots.
100
- * 2-way data binding in components.
101
- * Logic block (if, else).
102
- * Loops (array, map, set).
103
- * Dependency injection.
97
+
98
+ - Components.
99
+ - Reactive values (observables).
100
+ - Inline computed values.
101
+ - Multiline computed values.
102
+ - HTML tags.
103
+ - Component custom slots.
104
+ - 2-way data binding in components.
105
+ - Logic block (if, else).
106
+ - Loops (array, map, set).
107
+ - Dependency injection.
104
108
 
105
109
  <hr>
106
110
 
107
111
  ## Road map
108
112
 
109
- * [x] `100%` Test Coverage for core Library v3.
110
- * [x] Develop the `JSX` library.
111
- * [x] `100%` Test Coverage for the JSX library.
112
- * [x] Develop the `Babel Plugin`.
113
- * [x] `100%` Test Coverage fot babel plugin.
114
- * [x] Add CSS support (define styles in components).
115
- * [x] Add router.
116
- * [x] Add SSG (static site generation).
117
- * [ ] Develop tools extension for debugging (WIP).
118
- * [ ] Add SSR (server side rendering).
113
+ - [x] `100%` Test Coverage for core Library v3.
114
+ - [x] Develop the `JSX` library.
115
+ - [x] `100%` Test Coverage for the JSX library.
116
+ - [x] Develop the `Babel Plugin`.
117
+ - [x] `100%` Test Coverage fot babel plugin.
118
+ - [x] Add CSS support (define styles in components).
119
+ - [x] Add router.
120
+ - [x] Add SSG (static site generation).
121
+ - [ ] Develop tools extension for debugging (WIP).
122
+ - [ ] Add SSR (server side rendering).
119
123
 
120
124
  ## Change log
121
125
 
122
126
  We respect semantic versioning:
127
+
123
128
  - A major version is increased when we make incompatible API changes.
124
129
  - A minor version is increased when we add functionality.
125
130
  - Patch version is increased when we fix bugs.
@@ -165,4 +170,4 @@ _Web components as custom tags are supported in any version._
165
170
 
166
171
  If you have questions, feel free to contact the maintainer of the project:
167
172
 
168
- * [Author's Email](mailto:vas.lixcode@gmail.com)
173
+ - [Author's Email](mailto:vas.lixcode@gmail.com)
package/lib/dev.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { devMount as coreMount } from "vasille-jsx/dev";
2
2
  import { devRouteApp as coreRouteApp } from "vasille-router/dev";
3
- import { DevPortal, DevRunner } from "vasille/dev";
3
+ import { DevPortal, DevRunner, errorToString, toDevValue } from "vasille/dev";
4
4
  import { modal, prompt } from "./index.js";
5
5
  function createPortal(node, declaration, usage, name) {
6
6
  const portal = new DevPortal({ node: document.body }, node.runner, declaration, usage, name);
@@ -9,12 +9,78 @@ function createPortal(node, declaration, usage, name) {
9
9
  }
10
10
  export function devModal(modalFn, declaration, name) {
11
11
  return (input, node, usage) => {
12
- modal(modalFn, node => createPortal(node, declaration, usage, name))(input, node);
12
+ modal(modalFn, node => {
13
+ const portal = createPortal(node, declaration, usage, name);
14
+ const inspector = portal.runner.inspector;
15
+ const event = {
16
+ position: usage,
17
+ target: { component: portal.id },
18
+ };
19
+ inspector.eventTrigger({
20
+ eventName: "open",
21
+ time: Date.now(),
22
+ ...event,
23
+ });
24
+ portal.runOnDestroy(() => {
25
+ portal.runner.inspector.eventTrigger({
26
+ eventName: "close",
27
+ time: Date.now(),
28
+ ...event,
29
+ });
30
+ });
31
+ return portal;
32
+ })(input, node);
13
33
  };
14
34
  }
15
35
  export function devPrompt(modal, declaration, name) {
16
36
  return function (node, input, timeout, usage) {
17
- return prompt(modal, node => createPortal(node, declaration, usage, name))(node, input, timeout);
37
+ let target = null;
38
+ let inspector = null;
39
+ const event = {
40
+ position: usage,
41
+ };
42
+ return prompt(modal, node => {
43
+ const portal = createPortal(node, declaration, usage, name);
44
+ target = { component: portal.id };
45
+ inspector = portal.runner.inspector;
46
+ inspector.eventTrigger({
47
+ eventName: "open",
48
+ time: Date.now(),
49
+ position: usage,
50
+ target,
51
+ });
52
+ return portal;
53
+ })(node, {
54
+ ...input,
55
+ resolve(data) {
56
+ if (inspector && target) {
57
+ inspector.eventTrigger({
58
+ ...event,
59
+ eventName: "close",
60
+ time: Date.now(),
61
+ target,
62
+ result: {
63
+ value: toDevValue(data),
64
+ },
65
+ });
66
+ }
67
+ input.resolve(data);
68
+ },
69
+ reject(err) {
70
+ if (inspector && target) {
71
+ inspector.eventTrigger({
72
+ ...event,
73
+ eventName: "close",
74
+ time: Date.now(),
75
+ target,
76
+ result: {
77
+ error: errorToString(err),
78
+ },
79
+ });
80
+ }
81
+ input.reject(err);
82
+ },
83
+ }, timeout);
18
84
  };
19
85
  }
20
86
  export function devMount(element, component, input, inspector) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vasille-web",
3
- "version": "5.0.2",
3
+ "version": "5.1.1",
4
4
  "description": "The same framework which is designed to build bulletproof frontends.",
5
5
  "main": "index.js",
6
6
  "types": "./index.d.ts",
@@ -50,10 +50,10 @@
50
50
  "homepage": "https://github.com/vasille-js/vasille-js#readme",
51
51
  "dependencies": {
52
52
  "csstype": "^3.1.3",
53
- "vasille": "^5.0.0",
53
+ "vasille": "^5.1.7",
54
54
  "vasille-context": "^5.0.0",
55
55
  "vasille-css": "^5.0.0",
56
- "vasille-jsx": "^5.0.0",
56
+ "vasille-jsx": "^5.1.3",
57
57
  "vasille-router": "^5.0.0"
58
58
  },
59
59
  "devDependencies": {