sprae 12.4.17 → 13.0.1
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/core.js +17 -13
- package/directive/_.js +2 -2
- package/directive/change.js +40 -0
- package/directive/class.js +1 -1
- package/directive/intersect.js +44 -0
- package/directive/mount.js +37 -0
- package/directive/ref.js +19 -12
- package/directive/resize.js +39 -0
- package/directive/sequence.js +2 -2
- package/directive/spread.js +2 -2
- package/directive/style.js +1 -1
- package/directive/text.js +22 -1
- package/directive/value.js +11 -37
- package/dist/sprae-csp.js +11 -11
- package/dist/sprae-csp.js.map +4 -4
- package/dist/sprae-csp.umd.js +11 -11
- package/dist/sprae-csp.umd.js.map +4 -4
- package/dist/sprae-preact.js +4 -4
- package/dist/sprae-preact.js.map +4 -4
- package/dist/sprae-preact.umd.js +3 -3
- package/dist/sprae-preact.umd.js.map +4 -4
- package/dist/sprae.js +3 -3
- package/dist/sprae.js.map +4 -4
- package/dist/sprae.umd.js +3 -3
- package/dist/sprae.umd.js.map +4 -4
- package/package.json +1 -1
- package/readme.md +7 -2
- package/sprae.js +22 -5
- package/types/core.d.ts +4 -3
- package/types/core.d.ts.map +1 -1
- package/types/directive/_.d.ts.map +1 -1
- package/types/directive/change.d.ts +5 -0
- package/types/directive/change.d.ts.map +1 -0
- package/types/directive/intersect.d.ts +22 -0
- package/types/directive/intersect.d.ts.map +1 -0
- package/types/directive/mount.d.ts +5 -0
- package/types/directive/mount.d.ts.map +1 -0
- package/types/directive/ref.d.ts +1 -3
- package/types/directive/ref.d.ts.map +1 -1
- package/types/directive/resize.d.ts +21 -0
- package/types/directive/resize.d.ts.map +1 -1
- package/types/directive/spread.d.ts.map +1 -1
- package/types/directive/text.d.ts.map +1 -1
- package/types/directive/value.d.ts +1 -2
- package/types/directive/value.d.ts.map +1 -1
- package/types/sprae.d.ts.map +1 -1
package/sprae.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import store from "./store.js";
|
|
7
7
|
import { batch, computed, effect, signal, untracked } from './core.js';
|
|
8
8
|
import * as signals from './signal.js';
|
|
9
|
-
import sprae, { use, decorate, directive, modifier, parse, throttle, debounce, _off, _state, _on, _dispose, _add, start } from './core.js';
|
|
9
|
+
import sprae, { use, decorate, directive, modifier, parse, throttle, debounce, _off, _state, _on, _dispose, _add, start, isCE } from './core.js';
|
|
10
10
|
|
|
11
11
|
import _if from "./directive/if.js";
|
|
12
12
|
import _else from "./directive/else.js";
|
|
@@ -25,8 +25,15 @@ import _seq from "./directive/sequence.js";
|
|
|
25
25
|
import _html from "./directive/html.js";
|
|
26
26
|
import _portal from "./directive/portal.js";
|
|
27
27
|
import _hidden from "./directive/hidden.js";
|
|
28
|
+
import _mount from "./directive/mount.js";
|
|
29
|
+
import _change from "./directive/change.js";
|
|
30
|
+
import _intersect from "./directive/intersect.js";
|
|
31
|
+
import _resize from "./directive/resize.js";
|
|
28
32
|
|
|
29
33
|
|
|
34
|
+
// mark observers: they handle own modifiers, bypass reactive plumbing
|
|
35
|
+
_mount.observer = _change.observer = true
|
|
36
|
+
|
|
30
37
|
Object.assign(directive, {
|
|
31
38
|
_: _default,
|
|
32
39
|
'': _spread,
|
|
@@ -42,7 +49,11 @@ Object.assign(directive, {
|
|
|
42
49
|
else: _else,
|
|
43
50
|
each: _each,
|
|
44
51
|
portal: _portal,
|
|
45
|
-
hidden: _hidden
|
|
52
|
+
hidden: _hidden,
|
|
53
|
+
mount: _mount,
|
|
54
|
+
change: _change,
|
|
55
|
+
intersect: _intersect,
|
|
56
|
+
resize: _resize,
|
|
46
57
|
})
|
|
47
58
|
|
|
48
59
|
|
|
@@ -74,7 +85,9 @@ const dir = (target, name, expr, state) => {
|
|
|
74
85
|
evaluate = update.eval ?? parse(expr).bind(el),
|
|
75
86
|
_out, out = () => (typeof _out === 'function' && _out(), _out=null) // effect trigger and invoke may happen in the same tick, so it will be effect-within-effect call - we need to store output of evaluate to return from trigger effect
|
|
76
87
|
|
|
77
|
-
state
|
|
88
|
+
// use element's own state for expression evaluation, unless it's a custom element
|
|
89
|
+
// (custom elements: directives are parent prop setters, must evaluate against parent state)
|
|
90
|
+
if (!isCE(el)) state = el[_state] ?? state
|
|
78
91
|
|
|
79
92
|
let off = effect(() => {
|
|
80
93
|
const result = change.value == count ? (trigger()) : (count = change.value, _out = evaluate(state, update))
|
|
@@ -220,8 +233,12 @@ use({
|
|
|
220
233
|
// sequences: handle own modifiers, return dispose
|
|
221
234
|
if (name.includes('..')) return () => _seq(el, state, expr, name)[_dispose]
|
|
222
235
|
return name.split(':').reduce((prev, str) => {
|
|
223
|
-
|
|
224
|
-
|
|
236
|
+
let dirName = str.split('.')[0]
|
|
237
|
+
// events and observers handle own modifiers, return dispose
|
|
238
|
+
let obs = directive[dirName]
|
|
239
|
+
let start = str.startsWith('on') ? () => _event(el, state, expr, str)[_dispose]
|
|
240
|
+
: obs?.observer ? () => obs(el, state, expr, str)[_dispose]
|
|
241
|
+
: dir(el, str, expr, state)
|
|
225
242
|
return !prev ? start : (p, s) => (p = prev(), s = start(), () => { p(); s() })
|
|
226
243
|
}, null)
|
|
227
244
|
},
|
package/types/core.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const _off: unique symbol;
|
|
|
10
10
|
export const _add: unique symbol;
|
|
11
11
|
/** Directive prefix (default: ':') */
|
|
12
12
|
export let prefix: string;
|
|
13
|
+
export function isCE(el: any): any;
|
|
13
14
|
/**
|
|
14
15
|
* A reactive signal containing a value.
|
|
15
16
|
* @template T
|
|
@@ -83,8 +84,8 @@ export function mutate(fn: any): void;
|
|
|
83
84
|
export function start(root?: Element, values?: any): any;
|
|
84
85
|
export function frag(tpl: HTMLTemplateElement | FragmentLike): FragmentLike;
|
|
85
86
|
export function dashcase(str: string): string;
|
|
86
|
-
export function attr(el:
|
|
87
|
-
export function clsx(c: string | string[] | Record<string, boolean> | null | undefined
|
|
87
|
+
export function attr(el: any, name: any, v: any): any;
|
|
88
|
+
export function clsx(c: string | string[] | Record<string, boolean> | null | undefined): string;
|
|
88
89
|
export function throttle<T_1 extends Function>(fn: T_1, ms?: number | Function): T_1;
|
|
89
90
|
export function debounce<T_1 extends Function>(fn: T_1, ms?: number | Function, immediate?: boolean): T_1;
|
|
90
91
|
export * from "./store.js";
|
|
@@ -226,7 +227,7 @@ export type FragmentLike = {
|
|
|
226
227
|
* @param {Object} [state] - Initial state values to populate the element's reactive state.
|
|
227
228
|
* @returns {SpraeState & Object} The reactive state object associated with the element.
|
|
228
229
|
*/
|
|
229
|
-
declare function sprae(
|
|
230
|
+
declare function sprae(root?: HTMLElement, state?: any): SpraeState & any;
|
|
230
231
|
declare namespace sprae {
|
|
231
232
|
let version: any;
|
|
232
233
|
}
|
package/types/core.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../core.js"],"names":[],"mappings":"AAIA,uEAAuE;AACvE,2BAA8D;AAE9D,oDAAoD;AACpD,mCAAqC;AAErC,0CAA0C;AAC1C,gCAA+B;AAE/B,2CAA2C;AAC3C,iCAAiC;AAEjC,yCAAyC;AACzC,iCAAkC;AAElC,sCAAsC;AACtC,0BAAwB;
|
|
1
|
+
{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../core.js"],"names":[],"mappings":"AAIA,uEAAuE;AACvE,2BAA8D;AAE9D,oDAAoD;AACpD,mCAAqC;AAErC,0CAA0C;AAC1C,gCAA+B;AAE/B,2CAA2C;AAC3C,iCAAiC;AAEjC,yCAAyC;AACzC,iCAAkC;AAElC,sCAAsC;AACtC,0BAAwB;AAGjB,mCAAgD;AAEvD;;;;;;;;;GASG;AAEH;;;;;GAKG;AAEH;;;;GAIG;AACH,mBAFU,CAAC,GAAC,EAAE,KAAK,EAAE,GAAC,KAAK,MAAM,CAAC,GAAC,CAAC,CAElB;AAElB;;;GAGG;AACH,mBAFU,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,KAAK,MAAM,IAAI,CAErC;AAElB;;;;GAIG;AACH,qBAFU,CAAC,GAAC,EAAE,EAAE,EAAE,MAAM,GAAC,KAAK,MAAM,CAAC,GAAC,CAAC,CAEnB;AAEpB;;;;GAIG;AACH,kBAFU,CAAC,GAAC,EAAE,EAAE,EAAE,MAAM,GAAC,KAAK,GAAC,CAEC;AAEhC;;;;GAIG;AACH,sBAFU,CAAC,GAAC,EAAE,EAAE,EAAE,MAAM,GAAC,KAAK,GAAC,CAEF;AAE7B;;;GAGG;AACH,sBAFU,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAEhB;AAE1B;;;GAGG;AACH,qBAFU,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAEjB;AAqIxB,oGAAoG;AACpG,gBADW,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,KAAQ,KAAK,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAClF;AAEd;;;GAGG;AACH,oBAFU,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,KAAK,KAAQ,KAAK,GAAG,CAEhC;AAQX,4BAHI,MAAM,GACJ,CAAC,KAAK,KAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,CAyB5D;AAqBM,4BAHI,WAAW,GACT,IAAI,CAWhB;AAQM,6BAJI,WAAW;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,QAC/B,MAAM,EAAE,YAclB;AAGD,uDAAuD;AACvD,mBAAoB;AAEb,sCAA4G;AAgB5G,6BAVI,OAAO,qBA+BjB;AAkBM,0BAHI,mBAAmB,GAAG,YAAY,GAChC,YAAY,CAyBxB;AAOM,8BAHI,MAAM,GACJ,MAAM,CAEiH;AAW7H,sDAEqC;AAOrC,wBAHI,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,GAC5D,MAAM,CAKR;AAUJ,qCALM,QAAU,MACZ,GAAC,OACD,MAAM,WAAS,GACb,GAAC,CAab;AAUM,qCANM,QAAU,MACZ,GAAC,OACD,MAAM,WAAS,cACf,OAAO,GACL,GAAC,CAOb;;;;;;;;;;WA5aa,GAAC;;;;UACD,MAAM,GAAC;;;;aACP,MAAM,GAAC;;;;YACP,MAAM,GAAC;;;;cACP,MAAM,MAAM;;;;;;;;;UAMZ,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;;;;QAClB,MAAM,IAAI;;oCAmFb,OAAO,oBAEP,MAAM,SACN,MAAM,KACJ,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG;IAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,GAAG,IAAI;sDAM9E,MAAM,EAAA;;;;;eAMN,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;cA6HtB,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,KAAK,KAAQ,KAAK,GAAG;;;;aACxC,MAAM;;;;aACN,CAAC,GAAC,EAAE,KAAK,EAAE,GAAC,KAAK,MAAM,CAAC,GAAC,CAAC;;;;aAC1B,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,KAAK,MAAM,IAAI;;;;eAC7C,CAAC,GAAC,EAAE,EAAE,EAAE,MAAM,GAAC,KAAK,MAAM,CAAC,GAAC,CAAC;;;;YAC7B,CAAC,GAAC,EAAE,EAAE,EAAE,MAAM,GAAC,KAAK,GAAC;;;;gBACrB,CAAC,GAAC,EAAE,EAAE,EAAE,MAAM,GAAC,KAAK,GAAC;;;;UACrB,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,KAAQ,KAAK,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;;;;;;mBAmFrF,QAAQ;;;;gBACR,IAAI,EAAE;;;;aACN,gBAAgB;;;;YAChB,MAAM,IAAI;;;;iBACV,CAAC,EAAE,EAAE,IAAI,KAAK,IAAI;;;;gBAClB,IAAI,EAAE;;;;qBACN,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;;AA/OpC;;;;;;;GAOG;AAEH;;;;;GAKG;AAEH;;;GAGG;AAEH;;;;;;GAMG;AACH,yDAFa,UAAU,MAAS,CAkE/B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_.d.ts","sourceRoot":"","sources":["../../directive/_.js"],"names":[],"mappings":"AAUe,8BANJ,OAAO,eAEP,MAAM,QACN,MAAM,GACJ,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,
|
|
1
|
+
{"version":3,"file":"_.d.ts","sourceRoot":"","sources":["../../directive/_.js"],"names":[],"mappings":"AAUe,8BANJ,OAAO,eAEP,MAAM,QACN,MAAM,GACJ,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAEgG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"change.d.ts","sourceRoot":"","sources":["../../directive/change.js"],"names":[],"mappings":"AAee,8BANJ,OAAO,oBAEP,MAAM,QACN,MAAM,GACJ;IAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CA0B5C"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export default intersect;
|
|
2
|
+
/**
|
|
3
|
+
* Intersect directive - IntersectionObserver wrapper.
|
|
4
|
+
* Statement form fires on enter. Function form receives entry for full control.
|
|
5
|
+
*
|
|
6
|
+
* :intersect="visible = true"
|
|
7
|
+
* :intersect.once="loadImage()"
|
|
8
|
+
* :intersect="entry => visible = entry.isIntersecting"
|
|
9
|
+
*
|
|
10
|
+
* @param {Element} el - Target element
|
|
11
|
+
* @param {Object} state - State object
|
|
12
|
+
* @param {string} expr - Handler expression
|
|
13
|
+
* @param {string} name - Directive name with modifiers
|
|
14
|
+
* @returns {{ [Symbol.dispose]: () => void }} Disposal object
|
|
15
|
+
*/
|
|
16
|
+
declare function intersect(el: Element, state: any, expr: string, name: string): {
|
|
17
|
+
[Symbol.dispose]: () => void;
|
|
18
|
+
};
|
|
19
|
+
declare namespace intersect {
|
|
20
|
+
let observer: boolean;
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=intersect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"intersect.d.ts","sourceRoot":"","sources":["../../directive/intersect.js"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;GAaG;AACH,+BANW,OAAO,oBAEP,MAAM,QACN,MAAM,GACJ;IAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CA0B5C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../../directive/mount.js"],"names":[],"mappings":"AAiBe,8BANJ,OAAO,oBAEP,MAAM,QACN,MAAM,GACJ;IAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAqB5C"}
|
package/types/directive/ref.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ref.d.ts","sourceRoot":"","sources":["../../directive/ref.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ref.d.ts","sourceRoot":"","sources":["../../directive/ref.js"],"names":[],"mappings":"AAsBe,8BAJJ,OAAO,oBAEP,MAAM,QAMhB"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export default resize;
|
|
2
|
+
/**
|
|
3
|
+
* Resize directive - ResizeObserver wrapper.
|
|
4
|
+
* Function form receives {width, height, entry} object.
|
|
5
|
+
*
|
|
6
|
+
* :resize="({width, height}) => cols = Math.floor(width / 200)"
|
|
7
|
+
* :resize.throttle-100="({width}) => narrow = width < 600"
|
|
8
|
+
*
|
|
9
|
+
* @param {Element} el - Target element
|
|
10
|
+
* @param {Object} state - State object
|
|
11
|
+
* @param {string} expr - Handler expression
|
|
12
|
+
* @param {string} name - Directive name with modifiers
|
|
13
|
+
* @returns {{ [Symbol.dispose]: () => void }} Disposal object
|
|
14
|
+
*/
|
|
15
|
+
declare function resize(el: Element, state: any, expr: string, name: string): {
|
|
16
|
+
[Symbol.dispose]: () => void;
|
|
17
|
+
};
|
|
18
|
+
declare namespace resize {
|
|
19
|
+
let observer: boolean;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=resize.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../directive/resize.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../directive/resize.js"],"names":[],"mappings":";AAEA;;;;;;;;;;;;GAYG;AACH,4BANW,OAAO,oBAEP,MAAM,QACN,MAAM,GACJ;IAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAsB5C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spread.d.ts","sourceRoot":"","sources":["../../directive/spread.js"],"names":[],"mappings":"AAQe,kCAHJ,OAAO,GACL,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,
|
|
1
|
+
{"version":3,"file":"spread.d.ts","sourceRoot":"","sources":["../../directive/spread.js"],"names":[],"mappings":"AAQe,kCAHJ,OAAO,GACL,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAEuF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../directive/text.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../directive/text.js"],"names":[],"mappings":"AAQe,8BAHJ,OAAO,GAAG,mBAAmB,GAC3B,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CA0B5B"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
declare function _default(el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, state: any, expr: string): (value: any) => void;
|
|
1
|
+
declare function _default(el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, state: any): (value: any) => void;
|
|
3
2
|
export default _default;
|
|
4
3
|
//# sourceMappingURL=value.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../directive/value.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../directive/value.js"],"names":[],"mappings":"AAWe,8BAJJ,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,eAExD,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CA4BhC"}
|
package/types/sprae.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sprae.d.ts","sourceRoot":"","sources":["../sprae.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"sprae.d.ts","sourceRoot":"","sources":["../sprae.js"],"names":[],"mappings":";kBAQqI,WAAW;kBAH9H,YAAY;uBAC6B,WAAW;uBAAX,WAAW;yBAAX,WAAW;sBAAX,WAAW;0BAAX,WAAW;sBAE+D,WAAW;oBAAX,WAAW;yBAAX,WAAW;yBAAX,WAAW;AA0PhI,4BAFL,OAAO,OAEsC"}
|