sprae 10.9.2 → 10.9.4

package/readme.md

@@ -17,6 +17,7 @@ A light alternative to alpine, petite-vue etc.
   import sprae from 'sprae'
 
   // init
+  const container = document.querySelector('#container');
   const state = sprae(container, { user: { name: 'Kitty' } })
 
   // update
@@ -26,7 +27,7 @@ A light alternative to alpine, petite-vue etc.
 
 Sprae evaluates `:`-directives and evaporates them, returning reactive state for updates.
 
-### As standalone
+### Standalone
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/sprae/dist/sprae.umd.js" init></script>
@@ -35,14 +36,8 @@ Sprae evaluates `:`-directives and evaporates them, returning reactive state for
 </script>
 ```
 
-`init` attribute autoinits sprae on document.
-
-### As CJS etc.
-
-```js
-const sprae = require('sprae/dist/sprae.umd.js');
-sprae(el);
-```
+`init` attribute autoinits sprae on document.<br>
+`sprae.umd.js` can be also used as commonjs.
 
 
 ## Directives
@@ -60,12 +55,12 @@ Control flow of elements.
 <template :if="foo">foo <span>bar</span> baz</template>
 ```
 
-
 #### `:each="item, index? in items"`
 
 Multiply element.
 
 ```html
+<!-- :text order matters -->
 <ul><li :each="item in items" :text="item"/></ul>
 
 <!-- cases -->
@@ -109,13 +104,13 @@ Set style value.
 
 ```html
 <!-- extends style -->
-<div style="foo: bar" :style="'baz: qux'">
+<div style="foo: bar" :style="'baz-baz: qux'">
 
 <!-- object -->
-<div :style="{foo: 'bar'}"></div>
+<div :style="{bazBaz: 'qux'}"></div>
 
 <!-- CSS variable -->
-<div :style="{'--baz': qux}"></div>
+<div :style="{'--baz-baz': qux}"></div>
 ```
 
 #### `:value="value"`
@@ -287,7 +282,7 @@ Trigger when element is connected / disconnected from DOM.
 
 ## Signals
 
-Sprae uses signals for reactivity and can take signal values as inputs.
+Sprae uses signals for reactivity and can take signal values as inputs.<br/>
 Signals provider can be switched to any preact-flavored implementation:
 
 ```js
@@ -314,15 +309,6 @@ Provider | Size | Feature
 [`@preact/signals-core`](https://ghub.io/@preact/signals-core) | 1.47kb | Best performance, good for any states, industry standard.
 [`signal-polyfill`](https://github.com/proposal-signals/signal-polyfill) | 2.5kb | Proposal signals. Use via [adapter](https://gist.github.com/dy/bbac687464ccf5322ab0e2fd0680dc4d).
 
-## Untracked
-
-Properties prefixed with `_` indicate untracked value:
-
-```js
-let state = sprae(el, {x:1, _y:2})
-state.x++ // updates template
-state._y++ // no side-effect
-```
 
 ## Evaluator
 
@@ -381,11 +367,12 @@ sprae.use({ compile })
 
 ## Hints
 
-* To prevent [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) add `<style>[:each],[:if],[:else] {visibility: hidden}</style>`
-* Attributes order matters, eg. `<li :each="el in els" :text="el.name"></li>` is not the same as `<li :text="el.name" :each="el in els"></li>`
+* To prevent [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) add `<style>[:each],[:if],[:else] {visibility: hidden}</style>`.
+* Attributes order matters, eg. `<li :each="el in els" :text="el.name"></li>` is not the same as `<li :text="el.name" :each="el in els"></li>`.
+* Properties prefixed with `_` are untracked: `let state = sprae(el, {_x:2}); state._x++; // no effect`.
 * To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`.
 * State getters/setters work as computed effects, eg. `sprae(el, { x:1, get x2(){ return this.x * 2} })`.
-* `this` keyword is not used, to get access to current element use `<input :ref="el" :text="el.value"/>`
+* `this` keyword is not used, to get access to current element use `<input :ref="el" :text="el.value"/>`.
 * Async/await is not supported in attributes, it's a strong indicator you need to put these methods into state.
 
 ## Justification

package/sprae.js

@@ -22,3 +22,9 @@ sprae.use(signals)
 sprae.use({ compile: expr => sprae.constructor(`with (arguments[0]) { return ${expr} };`) })
 
 export default sprae
+
+// standalone run
+if (document?.currentScript) {
+  window.sprae = sprae
+  if (document.currentScript.hasAttribute('init')) sprae(document.documentElement);
+}