sprae 6.1.0 → 6.1.1

package/license

@@ -0,0 +1,7 @@
+Copyright 2022 Dmitry Ivanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",
@@ -47,7 +47,7 @@
     "templating"
   ],
   "author": "Dmitry Ivanov <df.creative@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/dy/sprae/issues"
   },

package/readme.md

@@ -1,8 +1,8 @@
 # ∴ spræ [![tests](https://github.com/dy/sprae/actions/workflows/node.js.yml/badge.svg)](https://github.com/dy/sprae/actions/workflows/node.js.yml) [![size](https://img.shields.io/bundlephobia/minzip/sprae?label=size)](https://bundlephobia.com/result?p=sprae) [![npm](https://img.shields.io/npm/v/sprae?color=orange)](https://npmjs.org/sprae)
 
-> DOM microhydration with `:` attributes.
+> DOM tree hydration with reactivity.
 
-_Sprae_ is tiny progressive enhancement framework, a minimal essential alternative to [alpine](https://github.com/alpinejs/alpine)/[lucia](https://github.com/aidenybai/lucia), [petite-vue](https://github.com/vuejs/petite-vue) or [template-parts](https://github.com/github/template-parts) with improved ergonomics[*](#justification--alternatives). It enables simple markup logic without external scripts. Perfect for small websites, prototypes or UI logic.
+_Sprae_ is progressive enhancement framework, a tiny essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue) or [template-parts](https://github.com/github/template-parts) with improved ergonomics[*](#justification--alternatives). It enables simple markup logic without external scripts. Perfect for small websites, prototypes or UI logic.
 
 ## Use
 
@@ -19,7 +19,7 @@ To autoinit document, include [`sprae.auto.js`](./sprae.auto.js):
 
 ### Manual init
 
-To use as module, import [`sprae.js`](./sprae.js):
+To init manually as module, import [`sprae.js`](./sprae.js):
 
 ```html
 <div id="container" :if="user">
@@ -35,8 +35,7 @@ To use as module, import [`sprae.js`](./sprae.js):
 </script>
 ```
 
-Sprae evaluates `:`-attributes and evaporates them. Reactive `state` reflects current values, can be updated directly.
-
+Sprae evaluates `:`-attributes and evaporates them. Reactive `state` reflects current values, can be updated directly (batches multiple updates internally for efficiency).
 
 ## Attributes
 
@@ -218,14 +217,15 @@ Attach event(s) listener with possible modifiers. `event` variable holds current
 
 ## Sandbox
 
-Expressions are sandboxed, ie. have no access to global or window (since sprae can be run in server environment).
+Expressions are sandboxed, ie. don't access global/window scope by default (since sprae can be run in server environment).
 
 ```html
-<div :x="global.x"></div>
-<!-- global is undefined -->
+<div :x="scrollY"></div>
+<!-- scrollY is undefined -->
 ```
 
-Default sandbox provides: _window_, _document_, _console_, _history_, _location_, _Array_, _Object_, _Number_, _String_, _Boolean_, _Date_, _Set_, _Map_.<br/>
+Default sandbox provides: _window_, _document_, _console_, _history_, _location_, _Array_, _Object_, _Number_, _String_, _Boolean_, _Date_, _Set_, _Map_.
+
 Sandbox can be extended as `Object.assign(sprae.globals, { BigInt })`.
 
 ## FOUC
@@ -246,7 +246,7 @@ To avoid _flash of unstyled content_, you can hide sprae attribute or add a cust
 ## Justification & alternatives
 
 * [Template-parts](https://github.com/dy/template-parts) / [templize](https://github.com/dy/templize) is progressive, but 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). Also ergonomics of `attr="{{}}"` is inferior to `:attr=""` since it creates flash of uninitialized values. Also it's just nice to keep `{{}}` generic, regardless of markup, and attributes as part of markup.
-* [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) / [lucia](https://github.com/aidenybai/lucia) escape native HTML quirks, but the syntax space (`:attr`, `v-*`,`x-*`, `l-*` `@evt`, `{{}}`) is too broad, as well as functionality. Perfection is when there's nothing to take away, not add (c). Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223) making interop hard, invent own tooling or complex reactivity.
+* [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) escape native HTML quirks, but the syntax space (`:attr`, `v-*`,`x-*`, `l-*` `@evt`, `{{}}`) is too broad, as well as functionality. Perfection is when there's nothing to take away, not add (c). Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223) making interop hard, invent own tooling or complex reactivity.
 * React/[preact](https://ghub.io/preact) does the job wiring up JS to HTML, but with an extreme of migrating HTML to JSX and enforcing SPA, which is not organic for HTML. Also it doesn't support reactive fields (needs render call).
 
 _Sprae_ takes idea of _templize directives_/_alpine_/_vue_ attrs and builds upon <del>[_@preact/signals_](https://ghub.io/@preact/signals)</del> simple reactive state.
@@ -261,5 +261,11 @@ _Sprae_ takes idea of _templize directives_/_alpine_/_vue_ attrs and builds upon
 
 It is reminiscent of [XSLT](https://www.w3schools.com/xml/xsl_intro.asp), considered a [buried treasure](https://github.com/bahrus/be-restated) by web-connoisseurs.
 
+## Alternatives
+
+* [Alpine](https://github.com/alpinejs/alpine)
+* [Lucia](https://github.com/aidenybai/lucia)
+* [Petite-vue](https://github.com/vuejs/petite-vue)
+* [Reken](https://github.com/hbroek/reken)
 
 <p align="center"><a href="https://github.com/krsnzd/license/">🕉</a></p>

package/todo.md

@@ -38,7 +38,6 @@
 * [x] :if :ref, :if :with -> context setters must come first always
 * [x] :style="{'--x':value}"
 * [x] :onkeydown.ctrl-alt-D
-* [ ] frameworks benchmark
 * [x] examples
   * [x] todomvc
   * [x] waveplay
@@ -51,4 +50,5 @@
 * [x] There's some bug with prostogreen not triggering effect. (caused by special array.length case)
 * [x] Getters must become evaluable
 * [x] `<li :each="item in items" :with="{collapsed:true}"><button :onclick='e=>collapsed=false'></li>`
-* [ ] `:with="{likes:[], like(){ /* likes should not be undefined here */ }}"`
+* [ ] `:with="{likes:[], like(){ /* likes should not be undefined here */ }}"`
+* [ ] frameworks benchmark