vasille-jsx 4.2.0 → 4.3.1

package/README.md

@@ -104,6 +104,10 @@ All of these are supported:
 
 ## Change log
 
+### 4.3.0
+
+Add new function `safe` which make functions safe, errors are reported automatically.
+
 ### 4.2.0
 
 Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.

package/lib/components.js

@@ -1,10 +1,18 @@
-import { ArrayModel, ArrayView, Fragment, MapModel, MapView, SetModel, SetView, SwitchedNode, userError, Watch as CoreWatch, } from "vasille";
+import { ArrayModel, ArrayView, Fragment, MapModel, MapView, reportError, safe, SetModel, SetView, SwitchedNode, userError, Watch as CoreWatch, } from "vasille";
 export function Slot({ model, slot, ...options }, ctx, defaultSlot) {
-    if (model) {
-        model(options, ctx);
+    try {
+        if (model) {
+            model(options, ctx);
+        }
+        else if (slot) {
+            slot({}, ctx);
+        }
+        else if (defaultSlot) {
+            defaultSlot(ctx);
+        }
     }
-    else {
-        (slot ?? defaultSlot)?.({}, ctx);
+    catch (e) {
+        reportError(e);
     }
 }
 export function Switch(options, ctx) {
@@ -35,20 +43,21 @@ export function For({ of: model, slot: _slot }, ctx, defaultSlot) {
     }
     // fallback if is used external Array/Map/Set
     else {
+        const safeSlot = safe(slot);
         console.warn("Vasille <For of/> fallback detected. Please provide reactive data.");
         if (model instanceof Array) {
             model.forEach((value) => {
-                slot(ctx, value, value);
+                safeSlot(ctx, value, value);
             });
         }
         else if (model instanceof Map) {
             model.forEach((value, key) => {
-                slot(ctx, value, key);
+                safeSlot(ctx, value, key);
             });
         }
         else if (model instanceof Set) {
             model.forEach(value => {
-                slot(ctx, value, value);
+                safeSlot(ctx, value, value);
             });
         }
         else {
@@ -60,7 +69,7 @@ export function Watch({ $model, slot: _slot }, ctx, defaultSlot) {
     const slot = _slot ?? defaultSlot;
     /* istanbul ignore else */
     if (slot) {
-        ctx.create(new CoreWatch({ model: $model, slot }, ctx.runner));
+        ctx.create(new CoreWatch({ model: $model, slot: safe(slot) }, ctx.runner));
     }
 }
 export function Debug({ $model }, ctx) {
@@ -74,7 +83,7 @@ export function Delay({ time, slot: _slot }, ctx, defaultSlot) {
         /* istanbul ignore else */
         if (slot) {
             timer = setTimeout(() => {
-                slot(node);
+                safe(slot)(node);
                 timer = undefined;
             }, time);
         }

package/lib/compose.js

@@ -12,7 +12,7 @@ export function view(renderer) {
         node.create(frag);
         try {
             const result = renderer(frag, props);
-            if (result !== undefined && callback) {
+            if (result !== undefined && result !== null && callback) {
                 callback(result);
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-jsx",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "The same framework which is designed to build bulletproof frontends (JSX components)",
   "main": "lib/index.js",
   "exports": {
@@ -44,7 +44,7 @@
     "opera 15"
   ],
   "dependencies": {
-    "vasille": "^4.1.0"
+    "vasille": "^4.3.0"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",

package/types/components.d.ts

@@ -3,7 +3,7 @@ interface SlotOptions<Node, Element, TagOptions extends object, T extends object
     model?: (input: T, ctx: Fragment<Node, Element, TagOptions>) => void;
     slot?: (input: object, ctx: Fragment<Node, Element, TagOptions>) => void;
 }
-export declare function Slot<Node, Element, TagOptions extends object, T extends object = {}>({ model, slot, ...options }: SlotOptions<Node, Element, TagOptions, T> & T, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: (input: object, ctx: Fragment<Node, Element, TagOptions>) => void): void;
+export declare function Slot<Node, Element, TagOptions extends object, T extends object = {}>({ model, slot, ...options }: SlotOptions<Node, Element, TagOptions, T> & T, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: (ctx: Fragment<Node, Element, TagOptions>) => void): void;
 interface SwitchOptions<Node, Element, TagOptions extends object> {
     cases: {
         $case: IValue<unknown>;