4.3.3

README.md

@@ -19,12 +19,13 @@
 ### Exports
 
   * **[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
-  * **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
+  * **[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
   * **[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!)
   * **[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
   * **[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.
   * **[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.
-  * **[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.
+    * **[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.
+    * **[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.
 
 ### uhtml/init example
 

docs/README.md

@@ -428,21 +428,28 @@ render(document.body, () => html`
 
 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.
 
-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.
+### pre bundled exports
+
+To simplify everyone life, I've pre-bundled some signals based library and published these in npm:
+
+  * **[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
+  * **[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
 
 ### constraints
 
 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.
 
 ```js
-// ⚠️ DON'T DO THIS
+// ⚠️ DOES NOT CREATE AN EFFECT
 render(target, html`${signal.value}`)
 
-// ✔ DO THIS INSTEAD 👍
+// ✔ CREATE AN EFFECT 👍
 render(target, () => html`${signal.value}`)
 ```
 
-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.
+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.
+
+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.
 
 ### about the effect callback
 

esm/reactive/preact.js

@@ -1,8 +1,6 @@
 import { effect } from '@preact/signals-core';
 export * from '@preact/signals-core';
 
-import { Hole, reactive, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
-
-const render = reactive(effect);
-
-export { Hole, render, html, svg, htmlFor, svgFor, attr };
+import { reactive } from '../reactive.js';
+export { Hole, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
+export const render = reactive(effect);

esm/reactive/signal.js

@@ -0,0 +1,6 @@
+import { effect } from '@webreflection/signal';
+export * from '@webreflection/signal';
+
+import { reactive } from '../reactive.js';
+export { Hole, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
+export const render = reactive(effect);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhtml",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "description": "A micro HTML/SVG render",
   "main": "./cjs/index.js",
   "scripts": {
@@ -11,7 +11,7 @@
     "rollup:es": "rollup --config rollup/es.config.js",
     "rollup:init": "rollup --config rollup/init.config.js",
     "server": "npx static-handler .",
-    "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)\";",
+    "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)\";",
     "test": "c8 node test/coverage.js",
     "coverage": "mkdir -p ./coverage; c8 report --reporter=text-lcov > ./coverage/lcov.info",
     "ts": "tsc -p ."
@@ -90,6 +90,7 @@
   },
   "homepage": "https://github.com/WebReflection/uhtml#readme",
   "optionalDependencies": {
-    "@preact/signals-core": "^1.5.1"
+    "@preact/signals-core": "^1.5.1",
+    "@webreflection/signal": "^2.0.0"
   }
 }

rollup/es.config.js

@@ -58,6 +58,14 @@ export default [
       file: './preactive.js',
     },
   },
+  {
+    plugins,
+    input: './esm/reactive/signal.js',
+    output: {
+      esModule: true,
+      file: './signal.js',
+    },
+  },
   {
     plugins,
     input: './esm/dom/index.js',

test/signal.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>uhtml/signal</title>
+  <script type="module">
+
+    import { render, html, signal } from '../signal.js';
+
+    const count = signal(0);
+
+    render(document.body, () => html`
+      <button onclick=${() => { count.value++ }}>
+        Clicks: ${count.value}
+      </button>
+    `);
+  </script>
+</head>
+</html>