vasille 5.1.5 → 5.1.7

package/README.md

@@ -29,7 +29,6 @@
     - [1.0 - 1.2](#10---12)
   - [Questions](#questions)
 
-
 <hr>
 
 ## Installation
@@ -47,37 +46,41 @@ $ npm create steel-frame
 ```
 
 ### Full documentation:
-* [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
-* [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
-* [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
-* [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
+
+- [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
+- [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
+- [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
+- [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
 
 ### Examples
-* [TypeScript Example](https://github.com/vasille-js/example-typescript)
-* [JavaScript Example](https://github.com/vasille-js/example-javascript)
+
+- [TypeScript Example](https://github.com/vasille-js/example-typescript)
+- [JavaScript Example](https://github.com/vasille-js/example-javascript)
 
 <hr>
 
 ## How SAFE is SteelFrameKit
 
 The safe of your application is ensured by
-* `100%` coverage of code by unit tests.
+
+- `100%` coverage of code by unit tests.
   Each function, each branch is working as designed.
-* OOP, DRY, KISS and SOLID principles are applied.
-* `strong typing` makes your javascript/typescript code safe as C++ code.
-All entities of `SteelFrameKit` core library are strongly typed, including:
-  * data fields & properties.
-  * computed properties (function parameters and result).
-  * methods.
-  * events (defined handlers & event emit).
-  * DOM events & DOM operation (attributing, styling, etc.).
-  * slots of components.
-  * references to children.
-* No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
+- OOP, DRY, KISS and SOLID principles are applied.
+- `strong typing` makes your code safe.
+  All entities of `SteelFrameKit` core library are strongly typed, including:
+  - data fields & properties.
+  - computed properties (function parameters and result).
+  - methods.
+  - events (defined handlers & event emit).
+  - DOM events & DOM operation (attributing, styling, etc.).
+  - slots of components.
+  - references to children.
+- No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
 
 ## How INTUITIVE is SteelFrameKit
 
 There is the "Hello World":
+
 ```typescript jsx
 import { compose, mount } from "steel-frame";
 
@@ -91,35 +94,37 @@ mount(document.body, App, {});
 ## How POWERFUL is SteelFrameKit
 
 All of these are supported:
-* Components.
-* Reactive values (observables).
-* Inline computed values.
-* Multiline computed values.
-* HTML tags.
-* Component custom slots.
-* 2-way data binding in components.
-* Logic block (if, else).
-* Loops (array, map, set).
-* Dependency injection.
+
+- Components.
+- Reactive values (observables).
+- Inline computed values.
+- Multiline computed values.
+- HTML tags.
+- Component custom slots.
+- 2-way data binding in components.
+- Logic block (if, else).
+- Loops (array, map, set).
+- Dependency injection.
 
 <hr>
 
 ## Road map
 
-* [x] `100%` Test Coverage for core Library v3.
-* [x] Develop the `JSX` library.
-* [x] `100%` Test Coverage for the JSX library.
-* [x] Develop the `Babel Plugin`.
-* [x] `100%` Test Coverage fot babel plugin.
-* [x] Add CSS support (define styles in components).
-* [x] Add router.
-* [x] Add SSG (static site generation).
-* [ ] Develop tools extension for debugging (WIP).
-* [ ] Add SSR (server side rendering).
+- [x] `100%` Test Coverage for core Library v3.
+- [x] Develop the `JSX` library.
+- [x] `100%` Test Coverage for the JSX library.
+- [x] Develop the `Babel Plugin`.
+- [x] `100%` Test Coverage fot babel plugin.
+- [x] Add CSS support (define styles in components).
+- [x] Add router.
+- [x] Add SSG (static site generation).
+- [ ] Develop tools extension for debugging (WIP).
+- [ ] Add SSR (server side rendering).
 
 ## Change log
 
 We respect semantic versioning:
+
 - A major version is increased when we make incompatible API changes.
 - A minor version is increased when we add functionality.
 - Patch version is increased when we fix bugs.
@@ -165,4 +170,4 @@ _Web components as custom tags are supported in any version._
 
 If you have questions, feel free to contact the maintainer of the project:
 
-* [Author's Email](mailto:vas.lixcode@gmail.com)
+- [Author's Email](mailto:vas.lixcode@gmail.com)

package/lib/dev/index.js

@@ -1,6 +1,6 @@
 export { DevReactive } from "./core.js";
 export { DevApp, DevPortal, DevSwitchedNode, DevWatch } from "./components.js";
-export { executionPosition, provideId, runFn, wrapFn, registerReference, toDevId, toDevIdOrValue, toDevObject, toDevValue, errorToString, } from "./inspectable.js";
+export { executionPosition, provideId, setupPosition, getPosition, runFn, wrapFn, registerReference, toDevId, toDevIdOrValue, toDevObject, toDevValue, errorToString, } from "./inspectable.js";
 export { DevArrayModel, DevMapModel, DevSetModel } from "./models.js";
 export { DevFragment, ModelId, shareStateById } from "./node.js";
 export { DevRunner, PositionedText, positionedText, remapObject, DevTextNode, DevTag, } from "./runner.js";

package/lib/dev/inspectable.js

@@ -34,11 +34,24 @@ export function registerReference(value, declaration, inspector) {
     });
     return value;
 }
+const positionKey = Symbol("vasille-position");
 let executionId = 0;
+export function setupPosition(obj, declaration) {
+    Object.defineProperty(obj, positionKey, {
+        value: declaration,
+        enumerable: false,
+        configurable: false,
+        writable: false,
+    });
+    return obj;
+}
+export function getPosition(obj) {
+    return obj[positionKey];
+}
 export function wrapFn(fn, declaration, inspector) {
-    return (...args) => {
+    return setupPosition((...args) => {
         return runFn(fn, args, declaration, inspector);
-    };
+    }, declaration);
 }
 export function runFn(fn, args, declaration, inspector) {
     const id = ++executionId;
@@ -64,7 +77,7 @@ export function runFn(fn, args, declaration, inspector) {
                 result.catch(e => {
                     inspector.functionThrows({
                         targetId: id,
-                        error: e instanceof Error ? (e.stack ?? e.message) : `${e}`,
+                        error: errorToString(e),
                         async: false,
                         time: Date.now(),
                     });
@@ -85,7 +98,7 @@ export function runFn(fn, args, declaration, inspector) {
     catch (e) {
         inspector.functionThrows({
             targetId: id,
-            error: e instanceof Error ? (e.stack ?? e.message) : `${e}`,
+            error: errorToString(e),
             async: false,
             time: Date.now(),
         });

package/lib/dev/runner.js

@@ -1,6 +1,6 @@
 import { IValue } from "../core/ivalue.js";
 import { Runner, Tag, TextNode } from "../runner/web/runner.js";
-import { provideId, toDevId, toDevIdOrValue, toDevObject, toDevValue, } from "./inspectable.js";
+import { getPosition, provideId, toDevId, toDevIdOrValue, toDevObject, toDevValue, } from "./inspectable.js";
 import { DevExpression, DevReference } from "./state.js";
 export class PositionedText {
     text;
@@ -87,9 +87,10 @@ export class DevTag extends Tag {
                     const userHandler = handler[0];
                     handler[0] = ev => {
                         this.runner.inspector.eventTrigger({
-                            tagId: this.id,
+                            target: { tag: this.id },
                             eventName: key,
                             time: Date.now(),
+                            position: getPosition(handler[0]),
                         });
                         userHandler(ev);
                     };
@@ -97,9 +98,10 @@ export class DevTag extends Tag {
                 else {
                     options[key] = ev => {
                         this.runner.inspector.eventTrigger({
-                            tagId: this.id,
+                            target: { tag: this.id },
                             eventName: key,
                             time: Date.now(),
+                            position: getPosition(handler),
                         });
                         handler(ev);
                     };

package/package.json

@@ -3,7 +3,7 @@
   "description": "The same framework which is designed to build bulletproof frontends (core library).",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "5.1.5",
+  "version": "5.1.7",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",

package/types/dev/index.d.ts

@@ -1,6 +1,6 @@
 export { DevReactive } from "./core.js";
 export { DevApp, DevPortal, DevSwitchedNode, DevWatch } from "./components.js";
-export { type Dependency, type DevValue, type Inspectable, type InspectableReactive, type InspectableReference, type Inspector, type StaticPosition, type ExecutionPosition, type ProtocolExecutionPosition, type ProtocolComponent, type ProtocolDependency, type ProtocolExpression, type ProtocolExpressionError, type ProtocolExpressionUpdate, type ProtocolModel, type ProtocolModelUpdate, type ProtocolNode, type ProtocolParent, type ProtocolPosition, type ProtocolReference, type ProtocolReferenceError, type ProtocolReferenceUpdate, type ProtocolState, type ProtocolTag, type ProtocolCustomModel, type ProtocolStore, type ProtocolRouterActionCall, type ProtocolDevValue, type ProtocolSlotError, type ProtocolRouterStateChange, type ProtocolRoutes, type ProtocolRouterTargetResult, type ProtocolFunctionError, type ProtocolFunctionResult, type ProtocolFunctionCall, type ProtocolEventTrigger, type ProtocolComposeTime, type ProtocolError, type IDevRunner, type DestroyData, executionPosition, provideId, runFn, wrapFn, registerReference, toDevId, toDevIdOrValue, toDevObject, toDevValue, errorToString, } from "./inspectable.js";
+export { type Dependency, type DevValue, type Inspectable, type InspectableReactive, type InspectableReference, type Inspector, type StaticPosition, type ExecutionPosition, type ProtocolExecutionPosition, type ProtocolComponent, type ProtocolDependency, type ProtocolExpression, type ProtocolExpressionError, type ProtocolExpressionUpdate, type ProtocolModel, type ProtocolModelUpdate, type ProtocolNode, type ProtocolParent, type ProtocolPosition, type ProtocolReference, type ProtocolReferenceError, type ProtocolReferenceUpdate, type ProtocolState, type ProtocolTag, type ProtocolCustomModel, type ProtocolStore, type ProtocolRouterActionCall, type ProtocolDevValue, type ProtocolSlotError, type ProtocolRouterStateChange, type ProtocolRoutes, type ProtocolRouterTargetResult, type ProtocolFunctionError, type ProtocolFunctionResult, type ProtocolFunctionCall, type ProtocolEventTrigger, type ProtocolComposeTime, type ProtocolError, type IDevRunner, type DestroyData, executionPosition, provideId, setupPosition, getPosition, runFn, wrapFn, registerReference, toDevId, toDevIdOrValue, toDevObject, toDevValue, errorToString, } from "./inspectable.js";
 export { DevArrayModel, DevMapModel, DevSetModel } from "./models.js";
 export { DevFragment, ModelId, shareStateById } from "./node.js";
 export { DevRunner, PositionedText, type DevTagOptions, positionedText, remapObject, DevTextNode, DevTag, } from "./runner.js";

package/types/dev/inspectable.d.ts

@@ -174,9 +174,17 @@ export interface ProtocolFunctionCall {
     time: number;
 }
 export interface ProtocolEventTrigger {
-    tagId: number;
+    target: {
+        tag?: number;
+        component?: number;
+    };
     eventName: string;
     time: number;
+    position?: StaticPosition;
+    result?: {
+        value?: DevValue;
+        error?: string;
+    };
 }
 export interface ProtocolFunctionResult {
     id: number;
@@ -229,6 +237,8 @@ export interface DevValue {
     id?: number;
 }
 export declare function registerReference<T>(value: DevReference<T>, declaration: StaticPosition, inspector: Inspector): DevReference<T>;
+export declare function setupPosition<T extends object>(obj: T, declaration: StaticPosition): T;
+export declare function getPosition(obj: object): StaticPosition | undefined;
 export declare function wrapFn<Args extends unknown[], Result extends object>(fn: (...args: Args) => Result, declaration: StaticPosition, inspector: Inspector): (...args: Args) => Result;
 export declare function runFn<Args extends unknown[], Result extends object>(fn: (...args: Args) => Result, args: Args, declaration: StaticPosition, inspector: Inspector): Result;
 export declare function toDevValue(value: unknown): {