@constela/runtime 0.12.1 → 0.12.2
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 +48 -0
- package/dist/index.js +24 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,6 +65,54 @@ Dynamic path with variables:
|
|
|
65
65
|
}
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
+
### String Concatenation (concat)
|
|
69
|
+
|
|
70
|
+
Build dynamic strings from multiple expressions:
|
|
71
|
+
|
|
72
|
+
```json
|
|
73
|
+
{
|
|
74
|
+
"expr": "concat",
|
|
75
|
+
"items": [
|
|
76
|
+
{ "expr": "lit", "value": "/users/" },
|
|
77
|
+
{ "expr": "var", "name": "userId" },
|
|
78
|
+
{ "expr": "lit", "value": "/profile" }
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Useful for:
|
|
84
|
+
- Dynamic URLs: `/api/posts/{id}`
|
|
85
|
+
- CSS class names: `btn btn-{variant}`
|
|
86
|
+
- Formatted messages: `Hello, {name}!`
|
|
87
|
+
|
|
88
|
+
### Object Payloads for Event Handlers
|
|
89
|
+
|
|
90
|
+
Pass multiple values to actions with object-shaped payloads:
|
|
91
|
+
|
|
92
|
+
```json
|
|
93
|
+
{
|
|
94
|
+
"kind": "element",
|
|
95
|
+
"tag": "button",
|
|
96
|
+
"props": {
|
|
97
|
+
"onClick": {
|
|
98
|
+
"event": "click",
|
|
99
|
+
"action": "toggleLike",
|
|
100
|
+
"payload": {
|
|
101
|
+
"index": { "expr": "var", "name": "index" },
|
|
102
|
+
"postId": { "expr": "var", "name": "post", "path": "id" },
|
|
103
|
+
"currentLiked": { "expr": "var", "name": "post", "path": "liked" }
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Each expression field in the payload is evaluated when the event fires. The action receives the evaluated object:
|
|
111
|
+
|
|
112
|
+
```json
|
|
113
|
+
{ "index": 5, "postId": "abc123", "currentLiked": true }
|
|
114
|
+
```
|
|
115
|
+
|
|
68
116
|
### Key-based List Diffing
|
|
69
117
|
|
|
70
118
|
Efficient list updates - only changed items re-render:
|
package/dist/index.js
CHANGED
|
@@ -13342,6 +13342,18 @@ function createReactiveLocals(baseLocals, itemKey, itemSignal, indexKey, indexSi
|
|
|
13342
13342
|
if (prop === itemKey) return true;
|
|
13343
13343
|
if (indexKey && prop === indexKey) return true;
|
|
13344
13344
|
return prop in target;
|
|
13345
|
+
},
|
|
13346
|
+
ownKeys(target) {
|
|
13347
|
+
const keys = Reflect.ownKeys(target);
|
|
13348
|
+
if (!keys.includes(itemKey)) keys.push(itemKey);
|
|
13349
|
+
if (indexKey && !keys.includes(indexKey)) keys.push(indexKey);
|
|
13350
|
+
return keys;
|
|
13351
|
+
},
|
|
13352
|
+
getOwnPropertyDescriptor(target, prop) {
|
|
13353
|
+
if (prop === itemKey || indexKey && prop === indexKey) {
|
|
13354
|
+
return { enumerable: true, configurable: true };
|
|
13355
|
+
}
|
|
13356
|
+
return Reflect.getOwnPropertyDescriptor(target, prop);
|
|
13345
13357
|
}
|
|
13346
13358
|
});
|
|
13347
13359
|
}
|
|
@@ -13616,6 +13628,18 @@ function createReactiveLocals2(baseLocals, itemSignal, indexSignal, itemName, in
|
|
|
13616
13628
|
if (prop === itemName) return true;
|
|
13617
13629
|
if (indexName && prop === indexName) return true;
|
|
13618
13630
|
return prop in target;
|
|
13631
|
+
},
|
|
13632
|
+
ownKeys(target) {
|
|
13633
|
+
const keys = Reflect.ownKeys(target);
|
|
13634
|
+
if (!keys.includes(itemName)) keys.push(itemName);
|
|
13635
|
+
if (indexName && !keys.includes(indexName)) keys.push(indexName);
|
|
13636
|
+
return keys;
|
|
13637
|
+
},
|
|
13638
|
+
getOwnPropertyDescriptor(target, prop) {
|
|
13639
|
+
if (prop === itemName || indexName && prop === indexName) {
|
|
13640
|
+
return { enumerable: true, configurable: true };
|
|
13641
|
+
}
|
|
13642
|
+
return Reflect.getOwnPropertyDescriptor(target, prop);
|
|
13619
13643
|
}
|
|
13620
13644
|
});
|
|
13621
13645
|
}
|