tagu-tagu 4.0.0 → 4.0.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 +39 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -354,7 +354,10 @@ document.body.appendChild(InitializerCallbackExample());
|
|
|
354
354
|
#### Animation
|
|
355
355
|
[`animate` initializer](./docs/animate.md)
|
|
356
356
|
|
|
357
|
-
### `
|
|
357
|
+
### `Signal`
|
|
358
|
+
|
|
359
|
+
#### `useState`
|
|
360
|
+
|
|
358
361
|
```typescript
|
|
359
362
|
import { button, div, useState } from "tagu-tagu";
|
|
360
363
|
|
|
@@ -372,10 +375,11 @@ document.body.appendChild(SimpleStateExample());
|
|
|
372
375
|
```
|
|
373
376
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/j3948zpo/1/)
|
|
374
377
|
|
|
378
|
+
#### `useComputed`
|
|
375
379
|
```typescript
|
|
376
|
-
import { button, div, useState } from "tagu-tagu";
|
|
380
|
+
import { button, div, useState, useComputed } from "tagu-tagu";
|
|
377
381
|
|
|
378
|
-
function
|
|
382
|
+
function ComputedExample() {
|
|
379
383
|
const count = useState(0);
|
|
380
384
|
|
|
381
385
|
function incrementCount() {
|
|
@@ -388,14 +392,14 @@ function StateFromStateExample() {
|
|
|
388
392
|
]);
|
|
389
393
|
}
|
|
390
394
|
|
|
391
|
-
document.body.appendChild(
|
|
395
|
+
document.body.appendChild(ComputedExample());
|
|
392
396
|
```
|
|
393
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/by934m81/
|
|
397
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/by934m81/7/)
|
|
394
398
|
|
|
395
399
|
```typescript
|
|
396
|
-
import { button, div, useState } from "tagu-tagu";
|
|
400
|
+
import { button, div, useState, useComputed } from "tagu-tagu";
|
|
397
401
|
|
|
398
|
-
function
|
|
402
|
+
function TwoComputedSignalsExample() {
|
|
399
403
|
const count = useState(0);
|
|
400
404
|
|
|
401
405
|
function incrementCount() {
|
|
@@ -415,9 +419,35 @@ function TwoStatesFromStateExample() {
|
|
|
415
419
|
]);
|
|
416
420
|
}
|
|
417
421
|
|
|
418
|
-
document.body.appendChild(
|
|
422
|
+
document.body.appendChild(TwoComputedSignalsStateExample());
|
|
423
|
+
```
|
|
424
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/8hsuc5pn/5/)
|
|
425
|
+
|
|
426
|
+
#### `useEffect`
|
|
427
|
+
|
|
428
|
+
```typescript
|
|
429
|
+
import { button, div, useEffect, useState } from "tagu-tagu";
|
|
430
|
+
|
|
431
|
+
function EffectExample() {
|
|
432
|
+
const count = useState(0);
|
|
433
|
+
|
|
434
|
+
function incrementCount() {
|
|
435
|
+
count.set(count.get() + 1);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
useEffect(() => {
|
|
439
|
+
console.log("count:", count.get());
|
|
440
|
+
});
|
|
441
|
+
|
|
442
|
+
return div([
|
|
443
|
+
div("See console"),
|
|
444
|
+
button("+", { on: { click: incrementCount } }),
|
|
445
|
+
]);
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
document.body.appendChild(EffectExample());
|
|
419
449
|
```
|
|
420
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/
|
|
450
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/ge3mbua4/3/)
|
|
421
451
|
|
|
422
452
|
### `If`
|
|
423
453
|
|