sprae 8.1.2 → 8.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sprae",
|
|
3
3
|
"description": "DOM microhydration.",
|
|
4
|
-
"version": "8.1.
|
|
4
|
+
"version": "8.1.3",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"files": [
|
|
9
|
-
"
|
|
10
|
-
"sprae.auto.min.js",
|
|
11
|
-
"sprae.js",
|
|
12
|
-
"sprae.min.js",
|
|
9
|
+
"dist",
|
|
13
10
|
"src"
|
|
14
11
|
],
|
|
15
12
|
"dependencies": {
|
|
@@ -29,10 +26,10 @@
|
|
|
29
26
|
"scripts": {
|
|
30
27
|
"test": "node -r ./test/register.cjs test/test.js",
|
|
31
28
|
"build": "npm run build-esm && npm run build-iife && npm run min",
|
|
32
|
-
"build-esm": "esbuild --bundle ./src/index.js --outfile
|
|
33
|
-
"build-iife": "esbuild --bundle ./src/index.js --outfile
|
|
34
|
-
"watch": "esbuild --bundle ./src/index.js --outfile
|
|
35
|
-
"min": "terser sprae.js -o sprae.min.js --module -c passes=3 -m && terser sprae.auto.js -o sprae.auto.min.js --module -c passes=3 -m"
|
|
29
|
+
"build-esm": "esbuild --bundle ./src/index.js --outfile=./dist/sprae.js --format=esm",
|
|
30
|
+
"build-iife": "esbuild --bundle ./src/index.js --outfile=./dist/sprae.auto.js --format=iife",
|
|
31
|
+
"watch": "esbuild --bundle ./src/index.js --outfile=./dist/sprae.js --format=esm --sourcemap --watch",
|
|
32
|
+
"min": "terser ./dist/sprae.js -o ./dist/sprae.min.js --module -c passes=3 -m && terser ./dist/sprae.auto.js -o ./dist/sprae.auto.min.js --module -c passes=3 -m"
|
|
36
33
|
},
|
|
37
34
|
"repository": {
|
|
38
35
|
"type": "git",
|
package/readme.md
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
> DOM tree hydration with reactivity.
|
|
4
4
|
|
|
5
|
-
_Sprae_ is compact ergonomic
|
|
5
|
+
_Sprae_ is compact ergonomic progressive enhancement framework.<br/>
|
|
6
6
|
It provides reactive `:`-attributes that enable simple markup logic without need for complex scripts.<br/>
|
|
7
7
|
Perfect for small-scale websites, prototypes or UI logic.<br/>
|
|
8
|
-
It is tiny and
|
|
8
|
+
It is tiny, performant and open 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).
|
|
9
9
|
|
|
10
10
|
## Usage
|
|
11
11
|
|
|
@@ -14,7 +14,7 @@ It is tiny and performant alternative to [alpine](https://github.com/alpinejs/al
|
|
|
14
14
|
To autoinit document, include [`sprae.auto.js`](./sprae.auto.js):
|
|
15
15
|
|
|
16
16
|
```html
|
|
17
|
-
<!-- <script src="https://cdn.jsdelivr.net/npm/sprae/sprae.auto.js" defer></script> -->
|
|
17
|
+
<!-- <script src="https://cdn.jsdelivr.net/npm/sprae/dist/sprae.auto.js" defer></script> -->
|
|
18
18
|
<script defer src="./path/to/sprae.auto.js"></script>
|
|
19
19
|
|
|
20
20
|
<ul>
|
|
@@ -34,7 +34,7 @@ To init manually as module, import [`sprae.js`](./sprae.js):
|
|
|
34
34
|
</div>
|
|
35
35
|
|
|
36
36
|
<script type="module">
|
|
37
|
-
// import sprae from 'https://cdn.jsdelivr.net/npm/sprae/sprae.js';
|
|
37
|
+
// import sprae from 'https://cdn.jsdelivr.net/npm/sprae/dist/sprae.js';
|
|
38
38
|
import sprae from './path/to/sprae.js';
|
|
39
39
|
|
|
40
40
|
const state = sprae(container, { user: { name: 'Dmitry Ivanov' } });
|
|
@@ -50,6 +50,8 @@ Sprae creates reactive state that mirrors current DOM values.<br/>
|
|
|
50
50
|
It is based on [signals](https://github.com/preactjs/signals) and can take them as inputs.
|
|
51
51
|
|
|
52
52
|
```js
|
|
53
|
+
import { signal } from '@preact/signals-core'
|
|
54
|
+
|
|
53
55
|
const version = signal('alpha')
|
|
54
56
|
|
|
55
57
|
// Sprae container with initial state values
|
|
@@ -282,6 +284,12 @@ To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`.
|
|
|
282
284
|
|
|
283
285
|
See [js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/current.html#eyJmcmFtZXdvcmtzIjpbIm5vbi1rZXllZC9wZXRpdGUtdnVlIiwibm9uLWtleWVkL3NwcmFlIl0sImJlbmNobWFya3MiOlsiMDFfcnVuMWsiLCIwMl9yZXBsYWNlMWsiLCIwM191cGRhdGUxMHRoMWtfeDE2IiwiMDRfc2VsZWN0MWsiLCIwNV9zd2FwMWsiLCIwNl9yZW1vdmUtb25lLTFrIiwiMDdfY3JlYXRlMTBrIiwiMDhfY3JlYXRlMWstYWZ0ZXIxa194MiIsIjA5X2NsZWFyMWtfeDgiLCIyMV9yZWFkeS1tZW1vcnkiLCIyMl9ydW4tbWVtb3J5IiwiMjNfdXBkYXRlNS1tZW1vcnkiLCIyNV9ydW4tY2xlYXItbWVtb3J5IiwiMjZfcnVuLTEway1tZW1vcnkiLCIzMV9zdGFydHVwLWNpIiwiMzRfc3RhcnR1cC10b3RhbGJ5dGVzIiwiNDFfc2l6ZS11bmNvbXByZXNzZWQiLCI0Ml9zaXplLWNvbXByZXNzZWQiXSwiZGlzcGxheU1vZGUiOjF9).
|
|
284
286
|
|
|
287
|
+
<details>
|
|
288
|
+
<summary>Results table</summary>
|
|
289
|
+
|
|
290
|
+

|
|
291
|
+
</details>
|
|
292
|
+
|
|
285
293
|
<details>
|
|
286
294
|
<summary>How to run</summary>
|
|
287
295
|
|
|
@@ -292,7 +300,7 @@ npm run install-server
|
|
|
292
300
|
npm start
|
|
293
301
|
|
|
294
302
|
# build
|
|
295
|
-
cd frameworks/keyed/sprae
|
|
303
|
+
cd frameworks/non-keyed/sprae
|
|
296
304
|
npm ci
|
|
297
305
|
npm run build-prod
|
|
298
306
|
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|