vasille-jsx 4.1.0 → 4.3.0

package/README.md

@@ -35,6 +35,7 @@ $ npm create vasille
 ### Full documentation:
 * [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md)
 * [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v4/doc/Router-API.md)
+* [Vasille Compostion function](https://github.com/vasille-js/vasille-js/blob/v4/doc/Compositions.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -103,14 +104,18 @@ All of these are supported:
 
 ## Change log
 
-### 4.0.0
+### 4.2.0
 
-Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).
+Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
 
-## 4.1.0
+### 4.1.0
 
 Added SSG (static site generation) as build option `vasille-web build static`.
 
+### 4.0.0
+
+Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).
+
 ## Questions
 
 If you have questions, feel free to contact the maintainer of the project:

package/lib/components.js

@@ -1,10 +1,15 @@
-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 {
+            (slot ?? defaultSlot)?.({}, ctx);
+        }
     }
-    else {
-        (slot ?? defaultSlot)?.({}, ctx);
+    catch (e) {
+        reportError(e);
     }
 }
 export function Switch(options, ctx) {
@@ -35,20 +40,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 +66,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 +80,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/lib/internal.js

@@ -49,7 +49,7 @@ export function ensure(data) {
  * 1. `{[a]: a1 = 3} = {x: 2}` to `{[a]: a1 = match("a1", 3)} = {x: 2}`
  */
 export function match(name, data) {
-    const iValueRequired = name.startsWith("$");
+    const iValueRequired = typeof name === "string" && name.startsWith("$");
     const isIValue = data instanceof IValue;
     if (iValueRequired && !isIValue) {
         return new Reference(data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-jsx",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "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/internal.d.ts

@@ -32,7 +32,7 @@ export declare function ensure(data: unknown): IValue<any>;
  * 1. `{[a]: a1} = {x: 2}` to `{[a]: a1 = match("a1")} = {x: 2}`
  * 1. `{[a]: a1 = 3} = {x: 2}` to `{[a]: a1 = match("a1", 3)} = {x: 2}`
  */
-export declare function match(name: string, data?: unknown): any;
+export declare function match(name: string | number | symbol, data?: unknown): any;
 /**
  * Set a value of a field (alternative to proxies)
  * 1. `obj.$key = 23` to `set(obj, "$key", 23)`