mono-jsx 0.9.0 → 0.9.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.
- package/README.md +22 -6
- package/jsx-runtime.mjs +6 -6
- package/package.json +1 -1
- package/types/mono.d.ts +2 -2
package/README.md
CHANGED
|
@@ -534,10 +534,7 @@ mono-jsx uses signals for updating the view when a signal changes. Signals are s
|
|
|
534
534
|
You can use the `this` keyword in your components to manage signals. Signals are bound to the component instance, can be updated directly, and the view will automatically re-render when a signal changes:
|
|
535
535
|
|
|
536
536
|
```tsx
|
|
537
|
-
function Counter(
|
|
538
|
-
this: FC<{ count: number }>,
|
|
539
|
-
props: { initialCount?: number },
|
|
540
|
-
) {
|
|
537
|
+
function Counter(this: FC<{ count: number }>, props: { initialCount?: number }) {
|
|
541
538
|
// Initialize a signal
|
|
542
539
|
this.count = props.initialCount ?? 0;
|
|
543
540
|
|
|
@@ -554,6 +551,25 @@ function Counter(
|
|
|
554
551
|
}
|
|
555
552
|
```
|
|
556
553
|
|
|
554
|
+
You can also use `this.extend` method to extend the signals:
|
|
555
|
+
|
|
556
|
+
```tsx
|
|
557
|
+
function Counter(this: FC, props: { initialCount?: number }) {
|
|
558
|
+
const counter = this.extend({ count: props.initialCount ?? 0})
|
|
559
|
+
|
|
560
|
+
return (
|
|
561
|
+
<div>
|
|
562
|
+
{/* render signal */}
|
|
563
|
+
<span>{counter.count}</span>
|
|
564
|
+
|
|
565
|
+
{/* Update signal to trigger re-render */}
|
|
566
|
+
<button onClick={() => counter.count--}>-</button>
|
|
567
|
+
<button onClick={() => counter.count++}>+</button>
|
|
568
|
+
</div>
|
|
569
|
+
)
|
|
570
|
+
}
|
|
571
|
+
```
|
|
572
|
+
|
|
557
573
|
### Using App Signals
|
|
558
574
|
|
|
559
575
|
You can define app signals by adding the `app` prop to the root `<html>` element. The app signals are available in all components via `this.app.<SignalName>`. Changes to the app signals will trigger re-renders in all components that use them:
|
|
@@ -1352,13 +1368,13 @@ function Component(this: FC) {
|
|
|
1352
1368
|
|
|
1353
1369
|
mono-jsx renders HTML dynamically per request; large apps may tax your CPU resources. To improve rendering performance, mono-jsx introduces two built-in elements that can cache the rendered HTML of the children:
|
|
1354
1370
|
|
|
1355
|
-
- `<cache>` with specified `key` and `
|
|
1371
|
+
- `<cache>` with specified `key` and `maxAge`
|
|
1356
1372
|
- `<static>` for elements that rarely change, such as `<svg>`
|
|
1357
1373
|
|
|
1358
1374
|
```tsx
|
|
1359
1375
|
function BlogPage() {
|
|
1360
1376
|
return (
|
|
1361
|
-
<cache key="blog"
|
|
1377
|
+
<cache key="blog" maxAge={86400}>
|
|
1362
1378
|
<Blog />
|
|
1363
1379
|
</cache>
|
|
1364
1380
|
)
|
package/jsx-runtime.mjs
CHANGED
|
@@ -176,7 +176,7 @@ var $vnode = Symbol.for("jsx.vnode");
|
|
|
176
176
|
var $setup = Symbol.for("mono.setup");
|
|
177
177
|
|
|
178
178
|
// version.ts
|
|
179
|
-
var VERSION = "0.
|
|
179
|
+
var VERSION = "0.9.0";
|
|
180
180
|
|
|
181
181
|
// render.ts
|
|
182
182
|
var FunctionIdGenerator = class extends Map {
|
|
@@ -759,15 +759,15 @@ async function renderNode(rc, node, stripSlotProp) {
|
|
|
759
759
|
}
|
|
760
760
|
case "cache":
|
|
761
761
|
case "static": {
|
|
762
|
-
const { $stack, key = $stack,
|
|
762
|
+
const { $stack, key = $stack, maxAge, children } = props;
|
|
763
763
|
if (children) {
|
|
764
764
|
if (key) {
|
|
765
765
|
const now = Date.now();
|
|
766
766
|
const value = cache.get(key);
|
|
767
|
-
if (value && (!value.
|
|
768
|
-
write("<!--
|
|
767
|
+
if (value && (!value.expiresAt || value.expiresAt > now)) {
|
|
768
|
+
write("<!-- " + tag + " -->");
|
|
769
769
|
write(value.html);
|
|
770
|
-
write("<!-- /
|
|
770
|
+
write("<!-- /" + tag + " -->");
|
|
771
771
|
} else {
|
|
772
772
|
let buf = "";
|
|
773
773
|
await renderChildren(
|
|
@@ -780,7 +780,7 @@ async function renderNode(rc, node, stripSlotProp) {
|
|
|
780
780
|
children,
|
|
781
781
|
true
|
|
782
782
|
);
|
|
783
|
-
cache.set(key, { html: buf,
|
|
783
|
+
cache.set(key, { html: buf, expiresAt: typeof maxAge === "number" && maxAge > 0 ? now + maxAge * 1e3 : void 0 });
|
|
784
784
|
rc.write(buf);
|
|
785
785
|
}
|
|
786
786
|
} else {
|
package/package.json
CHANGED
package/types/mono.d.ts
CHANGED