sprae 10.10.4 → 10.10.6

package/readme.md

@@ -10,18 +10,18 @@ A light alternative to alpine, petite-vue etc.
 
 ```html
 <div id="container" :if="user">
-  Hello <span :text="user.name">World</span>.
+  Hello <span :text="user.name">there</span>.
 </div>
 
 <script type="module">
-  import sprae from 'sprae'
+  import sprae from './sprae.js'
 
   // init
   const container = document.querySelector('#container');
-  const state = sprae(container, { user: { name: 'Kitty' } })
+  const state = sprae(container, { user: { name: 'friend' } })
 
   // update
-  state.user.name = 'Dolly'
+  state.user.name = 'love'
 </script>
 ```
 
@@ -32,8 +32,8 @@ Sprae evaluates `:`-directives and evaporates them, returning reactive state for
 UMD version enables sprae via CDN, as CJS, AMD etc.
 
 ```html
-<!-- `init` attribute autoinits sprae on document -->
-<script src="https://cdn.jsdelivr.net/npm/sprae/dist/sprae.umd.js" init></script>
+<!-- `init` attribute autoinits sprae on document with initial state (optional) -->
+<script src="https://cdn.jsdelivr.net/npm/sprae/dist/sprae.umd.js" init="{ user: 'buddy' }"></script>
 
 <script>
   window.sprae(el); // global standalone
@@ -283,15 +283,15 @@ Trigger when element is connected / disconnected from DOM.
 
 ## Signals
 
-Sprae uses signals for reactivity and can take signal values as inputs.<br/>
-Signals provider can be switched to any preact-flavored implementation:
+Sprae uses _preact-flavored signals_ for reactivity and can take _signal_ values as inputs.<br/>
+Signals can be switched to any preact/compatible implementation:
 
 ```js
 import sprae from 'sprae';
 import { signal, computed, effect, batch, untracked } from 'sprae/signal';
 import * as signals from '@preact/signals-core';
 
-// switch provider to @preact/signals-core
+// switch sprae signals to @preact/signals-core
 sprae.use(signals);
 
 // use signal as state value
@@ -308,7 +308,7 @@ Provider | Size | Feature
 [`@webreflection/signal`](https://ghub.io/@webreflection/signal) | 531b | Class-based, better performance, good for small-medium states.
 [`usignal`](https://ghub.io/usignal) | 850b | Class-based with optimizations, good for medium states.
 [`@preact/signals-core`](https://ghub.io/@preact/signals-core) | 1.47kb | Best performance, good for any states, industry standard.
-[`signal-polyfill`](https://ghub.com/signal-polyfill) | 2.5kb | Proposal signals. Use via [adapter](https://gist.github.com/dy/bbac687464ccf5322ab0e2fd0680dc4d).
+[`signal-polyfill`](https://ghub.io/signal-polyfill) | 2.5kb | Proposal signals. Use via [adapter](https://gist.github.com/dy/bbac687464ccf5322ab0e2fd0680dc4d).
 
 
 ## Evaluator
@@ -378,6 +378,8 @@ sprae.use({ compile })
 
 ## Justification
 
+Modern frontend stack is unhealthy like non-organic / processed food. There are few resorts, but:
+
 * [Template-parts](https://github.com/dy/template-parts) is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [SVG attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc).
 * [Alpine](https://github.com/alpinejs/alpine) / [petite-vue](https://github.com/vuejs/petite-vue) / [lucia](https://github.com/aidenyabi/lucia) escape native HTML quirks, but have excessive API (`:`, `x-`, `{}`, `@`, `$`), tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223) and not care about size/performance.
 

package/sprae.js

@@ -21,4 +21,4 @@ sprae.use(signals)
 // default compiler (indirect new Function to avoid detector)
 sprae.use({ compile: expr => sprae.constructor(`with (arguments[0]) { return ${expr} };`) })
 
-export default sprae
+export default sprae