Skip to content

Commit 7cfd76b

Browse files
WebReflectionWebReflection
committed
4.3.3
1 parent 872f520 commit 7cfd76b

File tree

9 files changed

+70
-18
lines changed

9 files changed

+70
-18
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,13 @@
1919
### Exports
2020

2121
* **[uhtml](https://cdn.jsdelivr.net/npm/uhtml/index.js)** as default `{ Hole, render, html, svg, attr }` with smart auto-keyed nodes - read [keyed or not ?](https://webreflection.github.io/uhtml/#keyed-or-not-) paragraph to know more
22-
* **uhtml/keyed** with extras `{ Hole, render, html, svg, htmlFor, svgFor, attr }`, providing keyed utilities - read [keyed or not ?](https://webreflection.github.io/uhtml/#keyed-or-not-) paragraph to know more
22+
* **[uhtml/keyed](https://cdn.jsdelivr.net/npm/uhtml/keyed.js)** with extras `{ Hole, render, html, svg, htmlFor, svgFor, attr }`, providing keyed utilities - read [keyed or not ?](https://webreflection.github.io/uhtml/#keyed-or-not-) paragraph to know more
2323
* **[uhtml/node](https://cdn.jsdelivr.net/npm/uhtml/node.js)** with *same default* exports but it's for *one-off* nodes creation only so that no cache or updates are available and it's just an easy way to hook *uhtml* into your existing project for DOM creation (not manipulation!)
2424
* **[uhtml/init](https://cdn.jsdelivr.net/npm/uhtml/init.js)** which returns a `document => uhtml/keyed` utility that can be bootstrapped with `uhtml/dom`, [LinkeDOM](https://github.com/WebReflection/linkedom), [JSDOM](https://github.com/jsdom/jsdom) for either *SSR* or *Workers* support
2525
* **[uhtml/dom](https://cdn.jsdelivr.net/npm/uhtml/dom.js)** which returns a specialized *uhtml* compliant DOM environment that can be passed to the `uhtml/init` export to have 100% same-thing running on both client or Web Worker / Server. This entry exports `{ Document, DOMParser }` where the former can be used to create a new *document* while the latter one can parse well formed HTML or SVG content and return the document out of the box.
2626
* **[uhtml/reactive](https://cdn.jsdelivr.net/npm/uhtml/reactive.js)** which allows usage of symbols within the optionally *keyed* render function. The only difference with other exports, beside exporting a `reactive` field instead of `render`, so that `const render = reactive(effect)` creates a reactive render per each library, is that the `render(where, () => what)`, with a function as second argument is mandatory when the rendered stuff has signals in it, otherwise these can't side-effect properly.
27-
* **[uhtml/preactive](https://cdn.jsdelivr.net/npm/uhtml/preactive.js)** is an already bundled `uhtml/reactive` with `@preact/signals-core` in it, so that its `render` exported function, among all other *preact* related exports, is already working.
27+
* **[uhtml/signal](https://cdn.jsdelivr.net/npm/uhtml/signal.js)** is an already bundled `uhtml/reactive` with `@webreflection/signal` in it, so that its `render` exported function is already reactive. This is the smallest possible bundle as it's ~3.3Kb but it's not nearly as complete, in terms of features, as *preact* signals are.
28+
* **[uhtml/preactive](https://cdn.jsdelivr.net/npm/uhtml/preactive.js)** is an already bundled `uhtml/reactive` with `@preact/signals-core` in it, so that its `render` exported function, among all other *preact* related exports, is already working. This is a *drop-in* replacement with extra *Preact signals* goodness in it so you can start small with *uhtml/signal* and switch any time to this more popular solution.
2829

2930
### uhtml/init example
3031

‎docs/README.md

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -428,21 +428,28 @@ render(document.body, () => html`
428428

429429
You can see the result [live on CodePen](https://codepen.io/WebReflection/pen/RwdrYXZ?editors=0010) to play around with. You click the button, the counter increments, that's it.
430430

431-
Alternatively, you can check [uhtml/preactive](https://codepen.io/WebReflection/pen/gOEPBxj?editors=0010) out of the box too, it basically bundles the same behind the scene.
431+
### pre bundled exports
432+
433+
To simplify everyone life, I've pre-bundled some signals based library and published these in npm:
434+
435+
* **[uhtml/preactive](https://cdn.jsdelivr.net/npm/uhtml/preactive.js)** already contains `@preact/signals-core` and it's probably the most bullet proof, or battle tested, solution
436+
* **[uhtml/signal](https://cdn.jsdelivr.net/npm/uhtml/signal.js)** already contains `@webreflection/signal` and it's surely the smallest bundle out there, with a total size of 3.3KB. The exports are very similar to the *Preact* one so either options are a drop-in replacement. Start small with this to experiment and feel free to switch to *preactive* any time later on
432437

433438
### constraints
434439

435440
The *reactive* version of *uhtml* is a drop-in replacement for anything you've done to date and a 1:1 API with other variants, but if signals are meant to be used within a template then the `render` function needs to have a lazy invoke of its content because otherwise signals don't get a chance to subscribe to it.
436441

437442
```js
438-
// ⚠️ DON'T DO THIS
443+
// ⚠️ DOES NOT CREATE AN EFFECT
439444
render(target, html`${signal.value}`)
440445

441-
// ✔ DO THIS INSTEAD 👍
446+
// ✔ CREATE AN EFFECT 👍
442447
render(target, () => html`${signal.value}`)
443448
```
444449

445-
The refactoring is going to take this much `() =>` refactoring to make signals available to any of your renders and that's pretty much the end of the story.
450+
The refactoring is going to take this much `() =>` time to make signals available to any of your renders and that's pretty much the end of the story.
451+
452+
Please note that components that are meant to be rendered within other components, and not stand-alone, passing a non callback as second argument might be even desired so that only the outer top-most render would react to changes.
446453

447454
### about the effect callback
448455

‎esm/reactive/preact.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { effect } from '@preact/signals-core';
22
export * from '@preact/signals-core';
33

4-
import { Hole, reactive, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
5-
6-
const render = reactive(effect);
7-
8-
export { Hole, render, html, svg, htmlFor, svgFor, attr };
4+
import { reactive } from '../reactive.js';
5+
export { Hole, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
6+
export const render = reactive(effect);

‎esm/reactive/signal.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { effect } from '@webreflection/signal';
2+
export * from '@webreflection/signal';
3+
4+
import { reactive } from '../reactive.js';
5+
export { Hole, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
6+
export const render = reactive(effect);

‎package-lock.json

Lines changed: 11 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "uhtml",
3-
"version": "4.3.2",
3+
"version": "4.3.3",
44
"description": "A micro HTML/SVG render",
55
"main": "./cjs/index.js",
66
"scripts": {
@@ -11,7 +11,7 @@
1111
"rollup:es": "rollup --config rollup/es.config.js",
1212
"rollup:init": "rollup --config rollup/init.config.js",
1313
"server": "npx static-handler .",
14-
"size": "echo \"index $(cat index.js | brotli | wc -c)\";echo \"keyed $(cat keyed.js | brotli | wc -c)\";echo \"reactive $(cat reactive.js | brotli | wc -c)\";echo \"preactive $(cat preactive.js | brotli | wc -c)\";echo \"node $(cat node.js | brotli | wc -c)\";",
14+
"size": "echo \"index $(cat index.js | brotli | wc -c)\";echo \"keyed $(cat keyed.js | brotli | wc -c)\";echo \"reactive $(cat reactive.js | brotli | wc -c)\";echo \"preactive $(cat preactive.js | brotli | wc -c)\";echo \"signal $(cat signal.js | brotli | wc -c)\";echo \"node $(cat node.js | brotli | wc -c)\";",
1515
"test": "c8 node test/coverage.js",
1616
"coverage": "mkdir -p ./coverage; c8 report --reporter=text-lcov > ./coverage/lcov.info",
1717
"ts": "tsc -p ."
@@ -90,6 +90,7 @@
9090
},
9191
"homepage": "https://github.com/WebReflection/uhtml#readme",
9292
"optionalDependencies": {
93-
"@preact/signals-core": "^1.5.1"
93+
"@preact/signals-core": "^1.5.1",
94+
"@webreflection/signal": "^2.0.0"
9495
}
9596
}

‎rollup/es.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,14 @@ export default [
5858
file: './preactive.js',
5959
},
6060
},
61+
{
62+
plugins,
63+
input: './esm/reactive/signal.js',
64+
output: {
65+
esModule: true,
66+
file: './signal.js',
67+
},
68+
},
6169
{
6270
plugins,
6371
input: './esm/dom/index.js',

‎signal.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/signal.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>uhtml/signal</title>
7+
<script type="module">
8+
9+
import { render, html, signal } from '../signal.js';
10+
11+
const count = signal(0);
12+
13+
render(document.body, () => html`
14+
<button onclick=${() => { count.value++ }}>
15+
Clicks: ${count.value}
16+
</button>
17+
`);
18+
</script>
19+
</head>
20+
</html>

0 commit comments

Comments
 (0)