@wrnrlr/prelude 0.2.14 → 0.2.16
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/.github/workflows/cd.yml +1 -1
- package/.github/workflows/ci.yml +2 -3
- package/LICENSE +21 -1
- package/deno.jsonc +5 -2
- package/package.json +1 -1
- package/src/canvas.js +16 -0
- package/src/domdiff.ts +92 -0
- package/src/form.js +20 -0
- package/src/hyperscript.ts +5 -2
- package/src/{controlflow.ts → list.ts} +2 -24
- package/src/mod.ts +13 -11
- package/src/osm.js +0 -0
- package/src/reactive.ts +49 -0
- package/src/resource.js +24 -1
- package/src/router.js +26 -7
- package/src/runtime.ts +244 -309
- package/src/select.js +1 -0
- package/src/show.ts +48 -0
- package/src/svg.js +0 -0
- package/src/switch.ts +96 -0
- package/src/table.js +0 -0
- package/test/hyperscript.js +9 -6
- package/test/list.js +4 -4
- package/test/types.ts +8 -4
- package/.github/workflows/npm.yml +0 -23
package/.github/workflows/cd.yml
CHANGED
package/.github/workflows/ci.yml
CHANGED
@@ -1,10 +1,9 @@
|
|
1
|
-
name:
|
1
|
+
name: CI
|
2
2
|
|
3
3
|
on:
|
4
4
|
push:
|
5
5
|
branches:
|
6
6
|
- main
|
7
|
-
- release
|
8
7
|
|
9
8
|
jobs:
|
10
9
|
test:
|
@@ -16,7 +15,7 @@ jobs:
|
|
16
15
|
deno-version: v2.x
|
17
16
|
- run: deno install
|
18
17
|
# - run: deno lint
|
19
|
-
- run: deno task test
|
18
|
+
- run: deno task test --no-check
|
20
19
|
|
21
20
|
# Moving artifacts, website and docs into their own project...
|
22
21
|
# - name: Setup Pages
|
package/LICENSE
CHANGED
@@ -1 +1,21 @@
|
|
1
|
-
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2025 Werner Laurensse
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/deno.jsonc
CHANGED
@@ -1,7 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@wrnrlr/prelude",
|
3
|
-
"version": "0.2.
|
4
|
-
"exports":
|
3
|
+
"version": "0.2.16",
|
4
|
+
"exports": {
|
5
|
+
".": "./src/mod.ts",
|
6
|
+
"./style.css": "./src/style.css"
|
7
|
+
},
|
5
8
|
"compilerOptions": {
|
6
9
|
"strict": true,
|
7
10
|
"lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"]
|
package/package.json
CHANGED
package/src/canvas.js
ADDED
package/src/domdiff.ts
ADDED
@@ -0,0 +1,92 @@
|
|
1
|
+
// Original version: https://github.com/WebReflection/udomdiff/blob/master/index.js
|
2
|
+
/*
|
3
|
+
ISC License
|
4
|
+
|
5
|
+
Copyright (c) 2020, Andrea Giammarchi, @WebReflection
|
6
|
+
|
7
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
8
|
+
purpose with or without fee is hereby granted, provided that the above
|
9
|
+
copyright notice and this permission notice appear in all copies.
|
10
|
+
|
11
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
12
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
13
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
14
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
15
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
|
16
|
+
OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
17
|
+
PERFORMANCE OF THIS SOFTWARE.
|
18
|
+
*/
|
19
|
+
|
20
|
+
export function reconcileArrays(parentNode:Node, a:Element[], b:Element[]) {
|
21
|
+
const bLength = b.length
|
22
|
+
let aEnd = a.length,
|
23
|
+
bEnd = bLength,
|
24
|
+
aStart = 0,
|
25
|
+
bStart = 0,
|
26
|
+
map:Map<Node,number>|null = null;
|
27
|
+
const after = a[aEnd - 1].nextSibling
|
28
|
+
|
29
|
+
while (aStart < aEnd || bStart < bEnd) {
|
30
|
+
// common prefix
|
31
|
+
if (a[aStart] === b[bStart]) {
|
32
|
+
aStart++;
|
33
|
+
bStart++;
|
34
|
+
continue;
|
35
|
+
}
|
36
|
+
// common suffix
|
37
|
+
while (a[aEnd - 1] === b[bEnd - 1]) {
|
38
|
+
aEnd--;
|
39
|
+
bEnd--;
|
40
|
+
}
|
41
|
+
// append
|
42
|
+
if (aEnd === aStart) {
|
43
|
+
const node =
|
44
|
+
bEnd < bLength
|
45
|
+
? bStart
|
46
|
+
? b[bStart - 1].nextSibling
|
47
|
+
: b[bEnd - bStart]
|
48
|
+
: after;
|
49
|
+
|
50
|
+
while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
|
51
|
+
// remove
|
52
|
+
} else if (bEnd === bStart) {
|
53
|
+
while (aStart < aEnd) {
|
54
|
+
if (!map || !map.has(a[aStart])) a[aStart].remove();
|
55
|
+
aStart++;
|
56
|
+
}
|
57
|
+
// swap backward
|
58
|
+
} else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
|
59
|
+
const node = a[--aEnd].nextSibling;
|
60
|
+
parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
|
61
|
+
parentNode.insertBefore(b[--bEnd], node);
|
62
|
+
|
63
|
+
a[aEnd] = b[bEnd];
|
64
|
+
// fallback to map
|
65
|
+
} else {
|
66
|
+
if (!map) {
|
67
|
+
map = new Map();
|
68
|
+
let i = bStart;
|
69
|
+
while (i < bEnd) map.set(b[i], i++);
|
70
|
+
}
|
71
|
+
|
72
|
+
const index = map.get(a[aStart]);
|
73
|
+
if (index != null) {
|
74
|
+
if (bStart < index && index < bEnd) {
|
75
|
+
let i = aStart,
|
76
|
+
sequence = 1,
|
77
|
+
t:number|undefined;
|
78
|
+
|
79
|
+
while (++i < aEnd && i < bEnd) {
|
80
|
+
if ((t = map.get(a[i])) == null || t !== index + sequence) break;
|
81
|
+
sequence++;
|
82
|
+
}
|
83
|
+
|
84
|
+
if (sequence > index - bStart) {
|
85
|
+
const node = a[aStart];
|
86
|
+
while (bStart < index) parentNode.insertBefore(b[bStart++], node);
|
87
|
+
} else parentNode.replaceChild(b[bStart++], a[aStart++]);
|
88
|
+
} else aStart++;
|
89
|
+
} else a[aStart++].remove();
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
package/src/form.js
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
import {signal, context, useContext} from './reactive.ts'
|
2
|
+
|
3
|
+
const Ctx = context()
|
4
|
+
const useForm = () => useContext(Ctx)
|
5
|
+
|
6
|
+
function Form(props) {
|
7
|
+
return h('form', h(Ctx.Provider, {value:[props.value]}, props.children))
|
8
|
+
}
|
9
|
+
|
10
|
+
function Input(props) {
|
11
|
+
if (props.name) {
|
12
|
+
const [form] = useForm()
|
13
|
+
props.value = wrap(form, props.name)
|
14
|
+
}
|
15
|
+
return h('input', props)
|
16
|
+
}
|
17
|
+
|
18
|
+
function CurrencyInput(props) {
|
19
|
+
return h(Input, props)
|
20
|
+
}
|
package/src/hyperscript.ts
CHANGED
@@ -1,14 +1,17 @@
|
|
1
1
|
import type {DOMElements} from './constants.ts'
|
2
|
-
import type {Runtime} from './runtime.ts'
|
2
|
+
import type {Runtime,Mountable} from './runtime.ts'
|
3
|
+
import {r} from './runtime.ts'
|
3
4
|
|
4
5
|
const ELEMENT: unique symbol = Symbol(), {isArray} = Array
|
5
6
|
|
6
|
-
export type Mountable = View | HTMLElement | string | number | bigint | symbol | boolean | Date | Mountable[];
|
7
|
+
// export type Mountable = View | HTMLElement | string | number | bigint | symbol | boolean | Date | Mountable[];
|
7
8
|
export type Component<T> = ((props:T) => Mountable) | ((props:T) => Mountable[])
|
8
9
|
export type Tag = typeof DOMElements extends Set<infer K> ? K : never;
|
9
10
|
export type Child = { ():Child } | Element | Child[] | string | number | symbol | bigint | boolean | Date | Record<string,unknown> | {():Child, [ELEMENT]:boolean}
|
10
11
|
export type View = {():void, [ELEMENT]?:boolean}
|
11
12
|
|
13
|
+
export const h = hyperscript(r)
|
14
|
+
|
12
15
|
// export type PropsKeys = typeof Properties extends Set<infer K> ? K : never;
|
13
16
|
// export type BooleanProps = typeof BooleanAttributes ext ends Set<infer K> ? K : never;
|
14
17
|
// export type HandlerProps = typeof DelegatedEvents extends Set<infer K> ? K : never;
|
@@ -1,28 +1,6 @@
|
|
1
1
|
// @ts-nocheck:
|
2
|
-
import
|
3
|
-
import
|
4
|
-
|
5
|
-
export type ShowProps<T> = {
|
6
|
-
when: T,
|
7
|
-
children: Child | ((a:()=>T)=>void),
|
8
|
-
fallback: unknown
|
9
|
-
}
|
10
|
-
|
11
|
-
/**
|
12
|
-
Show children if `when` prop is true, otherwise show `fallback`.
|
13
|
-
@group Components
|
14
|
-
*/
|
15
|
-
export function Show<T>(props:ShowProps) {
|
16
|
-
const condition = memo(()=>props.when)
|
17
|
-
return memo(()=>{
|
18
|
-
const c = condition()
|
19
|
-
if (c) {
|
20
|
-
const child = props.children
|
21
|
-
const fn = typeof child === "function" && child.length > 0
|
22
|
-
return fn ? untrack(() => child(() => props.when)) : child
|
23
|
-
} else return props.fallback
|
24
|
-
})
|
25
|
-
}
|
2
|
+
import { signal, untrack, batch, memo, root, onCleanup} from './reactive.ts'
|
3
|
+
import type { Signal, Setter, Mountable } from './reactive.ts'
|
26
4
|
|
27
5
|
export type ListProps<T, U extends Mountable, F = Getter | Signal> = {
|
28
6
|
each: F<T[]>,
|
package/src/mod.ts
CHANGED
@@ -1,15 +1,17 @@
|
|
1
|
-
export type {Getter,Setter,
|
2
|
-
export {signal,effect,untrack,batch,memo,root,wrap,fuse,onMount,onCleanup} from './reactive.ts'
|
1
|
+
export type {Getter,Setter,Signal} from './reactive.ts'
|
2
|
+
export {signal,effect,untrack,batch,memo,root,context,useContext,wrap,fuse,onMount,onCleanup} from './reactive.ts'
|
3
3
|
export {nbsp} from './constants.ts'
|
4
|
-
export {
|
5
|
-
export {
|
6
|
-
|
7
|
-
export
|
8
|
-
|
9
|
-
export {
|
4
|
+
export {List} from './list.ts'
|
5
|
+
export {Show} from './show.ts'
|
6
|
+
export {r, type Runtime} from './runtime.ts'
|
7
|
+
export type * from './hyperscript.ts'
|
8
|
+
export {hyperscript, h} from './hyperscript.ts'
|
9
|
+
export {HashRouter} from './router.js'
|
10
10
|
export {resource,makeAbortable,abortable} from './resource.js'
|
11
|
+
import {r} from './runtime.ts'
|
12
|
+
export const render = r.render
|
11
13
|
|
12
|
-
const r:Runtime = /*#__PURE__*/ (typeof window === 'object') ? runtime(window) : undefined as unknown as Runtime
|
14
|
+
// const r:Runtime = /*#__PURE__*/ (typeof window === 'object') ? runtime(window) : undefined as unknown as Runtime
|
13
15
|
|
14
16
|
/** h
|
15
17
|
@example Element with a single child
|
@@ -26,7 +28,7 @@ h(Input,{onInput:e => {}})
|
|
26
28
|
```
|
27
29
|
@group Hyperscript
|
28
30
|
*/
|
29
|
-
export const h: HyperScript = /*#__PURE__*/ hyperscript(r, parseHtmlTag)
|
31
|
+
// export const h: HyperScript = /*#__PURE__*/ hyperscript(r, parseHtmlTag)
|
30
32
|
|
31
33
|
/** render
|
32
34
|
|
@@ -36,4 +38,4 @@ Render component to DOM element.
|
|
36
38
|
render(()=>'hi', document.body)
|
37
39
|
```
|
38
40
|
*/
|
39
|
-
export const render:(code:()=>void, element:Element, init:unknown) => void = /*#__PURE__*/ r?.render
|
41
|
+
// export const render:(code:()=>void, element:Element, init:unknown) => void = /*#__PURE__*/ r?.render
|
package/src/osm.js
ADDED
File without changes
|
package/src/reactive.ts
CHANGED
@@ -1,3 +1,29 @@
|
|
1
|
+
/*
|
2
|
+
Inspired by S.js by Adam Haile, https://github.com/solidjs/solid
|
3
|
+
|
4
|
+
The MIT License (MIT)
|
5
|
+
|
6
|
+
Copyright (c) 2017 Adam Haile
|
7
|
+
|
8
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
9
|
+
of this software and associated documentation files (the "Software"), to deal
|
10
|
+
in the Software without restriction, including without limitation the rights
|
11
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
12
|
+
copies of the Software, and to permit persons to whom the Software is
|
13
|
+
furnished to do so, subject to the following conditions:
|
14
|
+
|
15
|
+
The above copyright notice and this permission notice shall be included in all
|
16
|
+
copies or substantial portions of the Software.
|
17
|
+
|
18
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
19
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
20
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
21
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
22
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
23
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
24
|
+
SOFTWARE.
|
25
|
+
*/
|
26
|
+
|
1
27
|
// @ts-nocheck:
|
2
28
|
export interface EffectOptions {
|
3
29
|
name?: string;
|
@@ -399,6 +425,29 @@ export function untrack<T>(fn: ()=>T):T {
|
|
399
425
|
return observe(fn, OBSERVER, false)!
|
400
426
|
}
|
401
427
|
|
428
|
+
function resolveChildren(children: any | Getter<any>): any {
|
429
|
+
if (typeof children === "function" && !children.length) return resolveChildren(children());
|
430
|
+
if (Array.isArray(children)) {
|
431
|
+
const results: any[] = [];
|
432
|
+
for (let i = 0; i < children.length; i++) {
|
433
|
+
const result = resolveChildren(children[i]);
|
434
|
+
Array.isArray(result) ? results.push.apply(results, result) : results.push(result);
|
435
|
+
}
|
436
|
+
return results;
|
437
|
+
}
|
438
|
+
return children as ResolvedChildren;
|
439
|
+
}
|
440
|
+
|
441
|
+
export function children(fn: Getter<any>): any {
|
442
|
+
const children = memo(fn);
|
443
|
+
const kids = memo(() => resolveChildren(children()));
|
444
|
+
(kids as any).toArray = () => {
|
445
|
+
const c = kids();
|
446
|
+
return Array.isArray(c) ? c : c != null ? [c] : [];
|
447
|
+
};
|
448
|
+
return kids as any;
|
449
|
+
}
|
450
|
+
|
402
451
|
function observe<T>(fn: Fn<T>, observer: Observer | undefined, tracking: boolean ): T|undefined {
|
403
452
|
const OBSERVER_PREV = OBSERVER;
|
404
453
|
const TRACKING_PREV = TRACKING;
|
package/src/resource.js
CHANGED
@@ -1,10 +1,33 @@
|
|
1
|
+
/*
|
2
|
+
MIT License
|
3
|
+
|
4
|
+
Copyright (c) 2016-2025 Ryan Carniato
|
5
|
+
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
8
|
+
in the Software without restriction, including without limitation the rights
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
11
|
+
furnished to do so, subject to the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
14
|
+
copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
22
|
+
SOFTWARE.
|
23
|
+
*/
|
1
24
|
// @ts-nocheck:
|
2
25
|
import {signal,effect,untrack,memo,batch,onCleanup} from './reactive.ts'
|
3
26
|
|
4
27
|
const NO_INIT = {}
|
5
28
|
|
6
29
|
/**
|
7
|
-
resource
|
30
|
+
`resource`
|
8
31
|
*/
|
9
32
|
export function resource(pSource,pFetcher,pOptions) {
|
10
33
|
let source
|
package/src/router.js
CHANGED
@@ -1,3 +1,26 @@
|
|
1
|
+
/*
|
2
|
+
MIT License
|
3
|
+
|
4
|
+
Copyright (c) 2016-2025 Ryan Carniato
|
5
|
+
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
8
|
+
in the Software without restriction, including without limitation the rights
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
11
|
+
furnished to do so, subject to the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
14
|
+
copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
22
|
+
SOFTWARE.
|
23
|
+
*/
|
1
24
|
// @ts-nocheck
|
2
25
|
import {signal,effect,batch,untrack,memo,wrap,context,useContext,onMount} from './reactive.ts'
|
3
26
|
// import {h} from './hyperscript.ts'
|
@@ -8,7 +31,7 @@ export const useNavigate = () => wrap(useRouter(),'navigate')
|
|
8
31
|
export const useParams = () => wrap(useRouter(),'params')
|
9
32
|
export const useSearch = () => wrap(useRouter(),'search')
|
10
33
|
|
11
|
-
export function
|
34
|
+
export function HashRouter(props) {
|
12
35
|
const routes = props.children
|
13
36
|
const NotFound = ()=>'Not found'
|
14
37
|
const render = () => {console.log('render')}
|
@@ -18,13 +41,9 @@ export function Router(props) {
|
|
18
41
|
const search = signal(null)
|
19
42
|
onMount(()=>{
|
20
43
|
window.addEventListener("popstate", (event) => {
|
21
|
-
batch(()=>
|
22
|
-
const hash = parseHash(document.location.hash)
|
23
|
-
navigate(hash)
|
24
|
-
})
|
44
|
+
batch(()=>navigate(parseHash(document.location.hash)))
|
25
45
|
})
|
26
|
-
|
27
|
-
navigate(hash)
|
46
|
+
navigate(parseHash(document.location.hash))
|
28
47
|
})
|
29
48
|
const children = memo(() => {
|
30
49
|
let location = navigate()
|
package/src/runtime.ts
CHANGED
@@ -1,12 +1,15 @@
|
|
1
1
|
// @ts-nocheck:
|
2
2
|
import {effect,untrack,root} from './reactive.ts'
|
3
3
|
import {SVGNamespace,SVGElements,ChildProperties,getPropAlias,Properties,Aliases,DelegatedEvents} from './constants.ts'
|
4
|
+
import {reconcileArrays} from './domdiff.ts'
|
4
5
|
// import type {Mountable} from './constants.ts'
|
5
6
|
|
6
7
|
const {isArray} = Array
|
7
8
|
|
8
9
|
export type Mountable = HTMLElement | Document | ShadowRoot | DocumentFragment | Node | string | number | bigint | symbol;
|
9
10
|
|
11
|
+
export const r = { render, insert, spread, assign, element, component, text, isChild, clearDelegatedEvents}
|
12
|
+
|
10
13
|
// declare global {
|
11
14
|
// interface Document {
|
12
15
|
// '_$DX_DELEGATE'?: Record<string, Set<unknown>>
|
@@ -45,264 +48,271 @@ Create `Runtime` for `window`
|
|
45
48
|
@param window
|
46
49
|
@group Internal
|
47
50
|
*/
|
48
|
-
export function runtime(w:Window):Runtime {
|
49
|
-
const document = w.document
|
50
|
-
const isSVG = (e: unknown) => e instanceof (w.SVGElement),
|
51
|
-
element = (name:string) => SVGElements.has(name) ?
|
52
|
-
document.createElementNS("http://www.w3.org/2000/svg",name) : document.createElement(name),
|
53
|
-
text = (s:string) => document.createTextNode(s)
|
54
|
-
|
55
|
-
function isChild(a:unknown): a is Element {
|
56
|
-
return a instanceof Element
|
57
|
-
}
|
58
51
|
|
59
|
-
function component(fn:()=>unknown) {
|
60
|
-
return untrack(fn)
|
61
|
-
}
|
62
52
|
|
63
|
-
|
64
|
-
if (!element) throw new Error("The `element` passed to `render(..., element)` doesn't exist.");
|
65
|
-
root(() => {
|
66
|
-
if (element instanceof Document) code()
|
67
|
-
else insert(element as Element, code(), element.firstChild ? null : undefined, init)
|
68
|
-
})
|
69
|
-
}
|
53
|
+
const document = globalThis.document
|
70
54
|
|
71
|
-
|
72
|
-
type RxValue = (()=>Value) | Value
|
55
|
+
const isSVG = (e: unknown) => e instanceof (globalThis.window.SVGElement)
|
73
56
|
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
if (typeof accessor !== 'function') return insertExpression(parent, accessor, initial||[], marker)
|
79
|
-
let current = initial||[]
|
80
|
-
effect(() => {current = insertExpression(parent, accessor(), current, marker)})
|
81
|
-
}
|
57
|
+
function element(name:string) {
|
58
|
+
return SVGElements.has(name) ?
|
59
|
+
globalThis.document.createElementNS("http://www.w3.org/2000/svg",name) : globalThis.document.createElement(name)
|
60
|
+
}
|
82
61
|
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
effect(() => (props.ref?.call ? untrack(() => props.ref(node)) : (props.ref = node)))
|
87
|
-
effect(() => assign(node, props, true, prevProps, true))
|
88
|
-
return prevProps
|
89
|
-
}
|
62
|
+
function text(s:string) {
|
63
|
+
return globalThis.document.createTextNode(s)
|
64
|
+
}
|
90
65
|
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
66
|
+
function isChild(a:unknown): a is Element {
|
67
|
+
return a instanceof Element
|
68
|
+
}
|
69
|
+
|
70
|
+
function component(fn:()=>unknown) {
|
71
|
+
return untrack(fn)
|
72
|
+
}
|
73
|
+
|
74
|
+
function render(code: ()=>void, element:Element|Document, init?: unknown): void {
|
75
|
+
if (!element) throw new Error("The `element` passed to `render(..., element)` doesn't exist.");
|
76
|
+
root(() => {
|
77
|
+
if (element instanceof Document) code()
|
78
|
+
else insert(element as Element, code(), element.firstChild ? null : undefined, init)
|
79
|
+
})
|
80
|
+
}
|
81
|
+
|
82
|
+
type Value = string | number | Element | Text
|
83
|
+
type RxValue = (()=>Value) | Value
|
84
|
+
|
85
|
+
function insert(parent: Element, accessor: string, marker?: Node|null, initial?: any): void
|
86
|
+
function insert(parent: Element, accessor: ()=>string, marker?: Node|null, initial?: any): void
|
87
|
+
function insert(parent: Element, accessor: string|(()=>string), marker?: Node|null, initial?: any): void {
|
88
|
+
if (marker !== undefined && !initial) initial = []
|
89
|
+
if (typeof accessor !== 'function') return insertExpression(parent, accessor, initial||[], marker)
|
90
|
+
let current = initial||[]
|
91
|
+
effect(() => {current = insertExpression(parent, accessor(), current, marker)})
|
92
|
+
}
|
93
|
+
|
94
|
+
function spread(node:Element, props:any = {}, skipChildren:boolean) {
|
95
|
+
const prevProps:any = {}
|
96
|
+
if (!skipChildren) effect(() => (prevProps.children = insertExpression(node, props.children, prevProps.children)))
|
97
|
+
effect(() => (props.ref?.call ? untrack(() => props.ref(node)) : (props.ref = node)))
|
98
|
+
effect(() => assign(node, props, true, prevProps, true))
|
99
|
+
return prevProps
|
100
|
+
}
|
101
|
+
|
102
|
+
function assign(node:Element, props:any, skipChildren:boolean, prevProps:any = {}, skipRef:boolean = false) {
|
103
|
+
const svg = isSVG(node)
|
104
|
+
props || (props = {})
|
105
|
+
for (const prop in prevProps) {
|
106
|
+
if (!(prop in props)) {
|
107
|
+
if (prop === "children") continue;
|
108
|
+
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], svg, skipRef);
|
99
109
|
}
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
const value = props[prop];
|
106
|
-
prevProps[prop] = assignProp(node, prop, value, prevProps[prop], svg, skipRef);
|
110
|
+
}
|
111
|
+
for (const prop in props) {
|
112
|
+
if (prop === "children") {
|
113
|
+
if (!skipChildren) insertExpression(node, props.children);
|
114
|
+
continue;
|
107
115
|
}
|
116
|
+
const value = props[prop];
|
117
|
+
prevProps[prop] = assignProp(node, prop, value, prevProps[prop], svg, skipRef);
|
108
118
|
}
|
119
|
+
}
|
109
120
|
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
121
|
+
function assignProp(node: Element, prop: 'style', value: StyleProps, prev: StyleProps, isSVG: boolean, skipRef: boolean): StyleProps
|
122
|
+
function assignProp(node: Element, prop: 'classList', value: ClassListProps, prev: ClassListProps, isSVG: boolean, skipRef: boolean): ClassListProps
|
123
|
+
function assignProp(node: Element, prop: 'ref', value: ()=>string, prev:string, isSVG: boolean, skipRef: false): string
|
124
|
+
function assignProp(node: Element, prop: string, value: string, prev: string|undefined, isSVG: boolean, skipRef: boolean): string
|
125
|
+
function assignProp(node: Element, prop: string, value: undefined, prev: string|undefined, isSVG: boolean, skipRef: boolean): undefined
|
126
|
+
function assignProp(
|
127
|
+
node: Element,
|
128
|
+
prop: 'style' | 'classList' | 'ref' | string,
|
129
|
+
value: StyleProps | ClassListProps | (()=>string) | string | undefined,
|
130
|
+
prev: StyleProps | ClassListProps | (()=>string) | string | undefined,
|
131
|
+
isSVG: false | boolean,
|
132
|
+
skipRef: boolean
|
133
|
+
) {
|
134
|
+
let isCE, isProp, isChildProp, propAlias, forceProp;
|
135
|
+
if (prop === 'style') return style(node, value, prev);
|
136
|
+
if (prop === 'classList') return classList(node, value, prev);
|
137
|
+
if (value === prev) return prev;
|
138
|
+
if (prop === 'ref') {
|
139
|
+
if (!skipRef) value(node);
|
140
|
+
} else if (prop.slice(0, 3) === 'on:') {
|
141
|
+
const e = prop.slice(3);
|
142
|
+
prev && node.removeEventListener(e, prev);
|
143
|
+
value && node.addEventListener(e, value);
|
144
|
+
} else if (prop.slice(0, 10) === 'oncapture:') {
|
145
|
+
const e = prop.slice(10);
|
146
|
+
prev && node.removeEventListener(e, prev, true);
|
147
|
+
value && node.addEventListener(e, value, true);
|
148
|
+
} else if (prop.slice(0, 2) === 'on') {
|
149
|
+
const name = prop.slice(2).toLowerCase();
|
150
|
+
const delegate = DelegatedEvents.has(name);
|
151
|
+
if (!delegate && prev) {
|
152
|
+
const h = isArray(prev) ? prev[0] : prev;
|
153
|
+
node.removeEventListener(name, h);
|
154
|
+
}
|
155
|
+
if (delegate || value) {
|
156
|
+
addEventListener(node, name, value, delegate);
|
157
|
+
delegate && delegateEvents([name],globalThis.document);
|
158
|
+
}
|
159
|
+
} else if (prop.slice(0, 5) === 'attr:') {
|
160
|
+
setAttribute(node, prop.slice(5), value);
|
161
|
+
} else if (
|
162
|
+
(forceProp = prop.slice(0, 5) === 'prop:') ||
|
163
|
+
(isChildProp = ChildProperties.has(prop)) ||
|
164
|
+
(!isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
|
165
|
+
(isCE = node.nodeName.includes('-'))
|
122
166
|
) {
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
if (value === prev) return prev;
|
127
|
-
if (prop === 'ref') {
|
128
|
-
if (!skipRef) value(node);
|
129
|
-
} else if (prop.slice(0, 3) === 'on:') {
|
130
|
-
const e = prop.slice(3);
|
131
|
-
prev && node.removeEventListener(e, prev);
|
132
|
-
value && node.addEventListener(e, value);
|
133
|
-
} else if (prop.slice(0, 10) === 'oncapture:') {
|
134
|
-
const e = prop.slice(10);
|
135
|
-
prev && node.removeEventListener(e, prev, true);
|
136
|
-
value && node.addEventListener(e, value, true);
|
137
|
-
} else if (prop.slice(0, 2) === 'on') {
|
138
|
-
const name = prop.slice(2).toLowerCase();
|
139
|
-
const delegate = DelegatedEvents.has(name);
|
140
|
-
if (!delegate && prev) {
|
141
|
-
const h = isArray(prev) ? prev[0] : prev;
|
142
|
-
node.removeEventListener(name, h);
|
143
|
-
}
|
144
|
-
if (delegate || value) {
|
145
|
-
addEventListener(node, name, value, delegate);
|
146
|
-
delegate && delegateEvents([name],document);
|
147
|
-
}
|
148
|
-
} else if (prop.slice(0, 5) === 'attr:') {
|
149
|
-
setAttribute(node, prop.slice(5), value);
|
150
|
-
} else if (
|
151
|
-
(forceProp = prop.slice(0, 5) === 'prop:') ||
|
152
|
-
(isChildProp = ChildProperties.has(prop)) ||
|
153
|
-
(!isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
|
154
|
-
(isCE = node.nodeName.includes('-'))
|
155
|
-
) {
|
156
|
-
if (forceProp) {
|
157
|
-
prop = prop.slice(5);
|
158
|
-
isProp = true;
|
159
|
-
}
|
160
|
-
if (prop === 'class' || prop === 'className') if (value) node.className = value; else node.removeAttribute('class')
|
161
|
-
else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;
|
162
|
-
else node[propAlias || prop] = value;
|
163
|
-
} else {
|
164
|
-
const ns = isSVG && prop.indexOf(':') > -1 && SVGNamespace[prop.split(':')[0]]
|
165
|
-
if (ns) setAttributeNS(node, ns, prop, value)
|
166
|
-
else setAttribute(node, Aliases[prop] || prop, value)
|
167
|
+
if (forceProp) {
|
168
|
+
prop = prop.slice(5);
|
169
|
+
isProp = true;
|
167
170
|
}
|
168
|
-
|
171
|
+
if (prop === 'class' || prop === 'className') if (value) node.className = value; else node.removeAttribute('class')
|
172
|
+
else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;
|
173
|
+
else node[propAlias || prop] = value;
|
174
|
+
} else {
|
175
|
+
const ns = isSVG && prop.indexOf(':') > -1 && SVGNamespace[prop.split(':')[0]]
|
176
|
+
if (ns) setAttributeNS(node, ns, prop, value)
|
177
|
+
else setAttribute(node, Aliases[prop] || prop, value)
|
169
178
|
}
|
179
|
+
return value;
|
180
|
+
}
|
170
181
|
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
182
|
+
function insertExpression(
|
183
|
+
parent: Element,
|
184
|
+
value: RxValue,
|
185
|
+
current?: RxValue|Value[],
|
186
|
+
marker?: Node,
|
187
|
+
unwrapArray?: boolean
|
188
|
+
): Value|{():Value} {
|
189
|
+
while (typeof current === 'function') current = current();
|
190
|
+
if (value === current) return current;
|
191
|
+
const t = typeof value,
|
192
|
+
multi = marker !== undefined;
|
193
|
+
parent = (multi && current[0] && current[0].parentNode) || parent;
|
194
|
+
|
195
|
+
if (t === "string" || t === "number") {
|
196
|
+
if (t === "number") {
|
197
|
+
value = value.toString();
|
198
|
+
if (value === current) return current;
|
199
|
+
}
|
200
|
+
if (multi) {
|
201
|
+
let node = current[0];
|
202
|
+
if (node && node.nodeType === 3) {
|
203
|
+
node.data !== value && (node.data = value);
|
204
|
+
} else node = globalThis.document.createTextNode(value);
|
205
|
+
current = cleanChildren(parent, current, marker, node);
|
206
|
+
} else {
|
207
|
+
if (current !== "" && typeof current === 'string') {
|
208
|
+
current = (parent.firstChild as Text).data = value;
|
209
|
+
} else current = parent.textContent = value;
|
210
|
+
}
|
211
|
+
} else if (value == null || t === 'boolean') {
|
212
|
+
current = cleanChildren(parent, current, marker);
|
213
|
+
} else if (t === 'function') {
|
214
|
+
effect(() => {
|
215
|
+
let v = value();
|
216
|
+
while (typeof v === 'function') v = v();
|
217
|
+
current = insertExpression(parent, v, current, marker);
|
218
|
+
});
|
219
|
+
return () => current;
|
220
|
+
} else if (isArray(value)) {
|
221
|
+
const array:Node[] = [];
|
222
|
+
const currentArray = current && isArray(current);
|
223
|
+
if (normalizeIncomingArray(array, value, current, unwrapArray)) {
|
224
|
+
effect(() => (current = insertExpression(parent, array, current, marker, true)));
|
208
225
|
return () => current;
|
209
|
-
}
|
210
|
-
|
211
|
-
|
212
|
-
if (
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
} else
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
parent.appendChild(value);
|
234
|
-
} else parent.replaceChild(value, parent.firstChild);
|
235
|
-
current = value;
|
236
|
-
} else console.warn(`Unrecognized value. Skipped inserting`, value);
|
237
|
-
return current;
|
238
|
-
}
|
226
|
+
}
|
227
|
+
if (array.length === 0) {
|
228
|
+
current = cleanChildren(parent, current, marker);
|
229
|
+
if (multi) return current;
|
230
|
+
} else if (currentArray) {
|
231
|
+
if (current.length === 0) {
|
232
|
+
appendNodes(parent, array, marker);
|
233
|
+
} else reconcileArrays(parent, current, array);
|
234
|
+
} else {
|
235
|
+
current && cleanChildren(parent);
|
236
|
+
appendNodes(parent, array);
|
237
|
+
}
|
238
|
+
current = array;
|
239
|
+
} else if (value.nodeType) {
|
240
|
+
if (isArray(current)) {
|
241
|
+
if (multi) return (current = cleanChildren(parent, current, marker, value));
|
242
|
+
cleanChildren(parent, current, null, value);
|
243
|
+
} else if (current == null || current === "" || !parent.firstChild) {
|
244
|
+
parent.appendChild(value);
|
245
|
+
} else parent.replaceChild(value, parent.firstChild);
|
246
|
+
current = value;
|
247
|
+
} else console.warn(`Unrecognized value. Skipped inserting`, value);
|
248
|
+
return current;
|
249
|
+
}
|
239
250
|
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
} else {
|
261
|
-
normalized.push(item);
|
262
|
-
dynamic = true;
|
263
|
-
}
|
251
|
+
function normalizeIncomingArray(normalized:Node[], array:Node[], current:Node[], unwrap?:boolean): boolean {
|
252
|
+
let dynamic = false;
|
253
|
+
for (let i = 0, len = array.length; i < len; i++) {
|
254
|
+
let item = array[i]
|
255
|
+
const prev = current && current[normalized.length];
|
256
|
+
// if (item == null || item === true || item === false) {
|
257
|
+
// // matches null, undefined, true or false skip
|
258
|
+
// } else
|
259
|
+
if (typeof item === 'object' && item.nodeType) {
|
260
|
+
normalized.push(item);
|
261
|
+
} else if (isArray(item)) {
|
262
|
+
dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
|
263
|
+
} else if (item.call) {
|
264
|
+
if (unwrap) {
|
265
|
+
while (typeof item === 'function') item = item();
|
266
|
+
dynamic = normalizeIncomingArray(
|
267
|
+
normalized,
|
268
|
+
isArray(item) ? item : [item],
|
269
|
+
isArray(prev) ? prev : [prev]
|
270
|
+
) || dynamic;
|
264
271
|
} else {
|
265
|
-
|
266
|
-
|
267
|
-
else normalized.push(document.createTextNode(value));
|
272
|
+
normalized.push(item);
|
273
|
+
dynamic = true;
|
268
274
|
}
|
275
|
+
} else {
|
276
|
+
const value = String(item);
|
277
|
+
if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);
|
278
|
+
else normalized.push(globalThis.document.createTextNode(value));
|
269
279
|
}
|
270
|
-
return dynamic;
|
271
|
-
}
|
272
|
-
|
273
|
-
function cleanChildren(
|
274
|
-
parent: Element,
|
275
|
-
current?: Node[],
|
276
|
-
marker?: Node|null,
|
277
|
-
replacement?: boolean
|
278
|
-
): string | Node[] {
|
279
|
-
if (marker === undefined) return (parent.textContent = '');
|
280
|
-
const node = replacement || document.createTextNode('');
|
281
|
-
if (current.length) {
|
282
|
-
let inserted = false;
|
283
|
-
for (let i = current.length - 1; i >= 0; i--) {
|
284
|
-
const el = current[i];
|
285
|
-
if (node !== el) {
|
286
|
-
const isParent = el.parentNode === parent;
|
287
|
-
if (!inserted && !i)
|
288
|
-
isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
|
289
|
-
else isParent && el.remove();
|
290
|
-
} else inserted = true;
|
291
|
-
}
|
292
|
-
} else parent.insertBefore(node, marker);
|
293
|
-
return [node];
|
294
280
|
}
|
281
|
+
return dynamic;
|
282
|
+
}
|
295
283
|
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
284
|
+
function cleanChildren(
|
285
|
+
parent: Element,
|
286
|
+
current?: Node[],
|
287
|
+
marker?: Node|null,
|
288
|
+
replacement?: boolean
|
289
|
+
): string | Node[] {
|
290
|
+
if (marker === undefined) return (parent.textContent = '');
|
291
|
+
const node = replacement || globalThis.document.createTextNode('');
|
292
|
+
if (current.length) {
|
293
|
+
let inserted = false;
|
294
|
+
for (let i = current.length - 1; i >= 0; i--) {
|
295
|
+
const el = current[i];
|
296
|
+
if (node !== el) {
|
297
|
+
const isParent = el.parentNode === parent;
|
298
|
+
if (!inserted && !i)
|
299
|
+
isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
|
300
|
+
else isParent && el.remove();
|
301
|
+
} else inserted = true;
|
300
302
|
}
|
301
|
-
}
|
303
|
+
} else parent.insertBefore(node, marker);
|
304
|
+
return [node];
|
305
|
+
}
|
302
306
|
|
303
|
-
|
307
|
+
function clearDelegatedEvents() {
|
308
|
+
if (globalThis[$$EVENTS]) {
|
309
|
+
for (const name of globalThis[$$EVENTS].keys()) globalThis.document.removeEventListener(name, eventHandler);
|
310
|
+
delete globalThis[$$EVENTS];
|
311
|
+
}
|
304
312
|
}
|
305
313
|
|
314
|
+
export {render,component,insert,spread,assign,element,text,isChild,clearDelegatedEvents}
|
315
|
+
|
306
316
|
const $$EVENTS = "_$DX_DELEGATE"
|
307
317
|
|
308
318
|
function delegateEvents(eventNames:string[], document:Document) {
|
@@ -322,7 +332,7 @@ function eventHandler(e: Event) {
|
|
322
332
|
// reverse Shadow DOM retargetting
|
323
333
|
if (e.target !== node) Object.defineProperty(e, 'target', {configurable: true, value: node})
|
324
334
|
// simulate currentTarget
|
325
|
-
Object.defineProperty(e, 'currentTarget', {configurable: true, get() {return node || document}})
|
335
|
+
Object.defineProperty(e, 'currentTarget', {configurable: true, get() {return node || globalThis.document}})
|
326
336
|
while (node) {
|
327
337
|
const handler = node[key];
|
328
338
|
if (handler && !node.disabled) {
|
@@ -418,78 +428,3 @@ function appendNodes(parent:Node, array:Node[], marker:null|Node = null) {
|
|
418
428
|
for (let i = 0, len = array.length; i < len; i++)
|
419
429
|
parent.insertBefore(array[i], marker)
|
420
430
|
}
|
421
|
-
|
422
|
-
// Slightly modified version of: https://github.com/WebReflection/udomdiff/blob/master/index.js
|
423
|
-
function reconcileArrays(parentNode:Node, a:Element[], b:Element[]) {
|
424
|
-
const bLength = b.length
|
425
|
-
let aEnd = a.length,
|
426
|
-
bEnd = bLength,
|
427
|
-
aStart = 0,
|
428
|
-
bStart = 0,
|
429
|
-
map:Map<Node,number>|null = null;
|
430
|
-
const after = a[aEnd - 1].nextSibling
|
431
|
-
|
432
|
-
while (aStart < aEnd || bStart < bEnd) {
|
433
|
-
// common prefix
|
434
|
-
if (a[aStart] === b[bStart]) {
|
435
|
-
aStart++;
|
436
|
-
bStart++;
|
437
|
-
continue;
|
438
|
-
}
|
439
|
-
// common suffix
|
440
|
-
while (a[aEnd - 1] === b[bEnd - 1]) {
|
441
|
-
aEnd--;
|
442
|
-
bEnd--;
|
443
|
-
}
|
444
|
-
// append
|
445
|
-
if (aEnd === aStart) {
|
446
|
-
const node =
|
447
|
-
bEnd < bLength
|
448
|
-
? bStart
|
449
|
-
? b[bStart - 1].nextSibling
|
450
|
-
: b[bEnd - bStart]
|
451
|
-
: after;
|
452
|
-
|
453
|
-
while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
|
454
|
-
// remove
|
455
|
-
} else if (bEnd === bStart) {
|
456
|
-
while (aStart < aEnd) {
|
457
|
-
if (!map || !map.has(a[aStart])) a[aStart].remove();
|
458
|
-
aStart++;
|
459
|
-
}
|
460
|
-
// swap backward
|
461
|
-
} else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
|
462
|
-
const node = a[--aEnd].nextSibling;
|
463
|
-
parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
|
464
|
-
parentNode.insertBefore(b[--bEnd], node);
|
465
|
-
|
466
|
-
a[aEnd] = b[bEnd];
|
467
|
-
// fallback to map
|
468
|
-
} else {
|
469
|
-
if (!map) {
|
470
|
-
map = new Map();
|
471
|
-
let i = bStart;
|
472
|
-
while (i < bEnd) map.set(b[i], i++);
|
473
|
-
}
|
474
|
-
|
475
|
-
const index = map.get(a[aStart]);
|
476
|
-
if (index != null) {
|
477
|
-
if (bStart < index && index < bEnd) {
|
478
|
-
let i = aStart,
|
479
|
-
sequence = 1,
|
480
|
-
t:number|undefined;
|
481
|
-
|
482
|
-
while (++i < aEnd && i < bEnd) {
|
483
|
-
if ((t = map.get(a[i])) == null || t !== index + sequence) break;
|
484
|
-
sequence++;
|
485
|
-
}
|
486
|
-
|
487
|
-
if (sequence > index - bStart) {
|
488
|
-
const node = a[aStart];
|
489
|
-
while (bStart < index) parentNode.insertBefore(b[bStart++], node);
|
490
|
-
} else parentNode.replaceChild(b[bStart++], a[aStart++]);
|
491
|
-
} else aStart++;
|
492
|
-
} else a[aStart++].remove();
|
493
|
-
}
|
494
|
-
}
|
495
|
-
}
|
package/src/select.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
|
package/src/show.ts
ADDED
@@ -0,0 +1,48 @@
|
|
1
|
+
/*
|
2
|
+
MIT License
|
3
|
+
|
4
|
+
Copyright (c) 2016-2025 Ryan Carniato
|
5
|
+
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
8
|
+
in the Software without restriction, including without limitation the rights
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
11
|
+
furnished to do so, subject to the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
14
|
+
copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
22
|
+
SOFTWARE.
|
23
|
+
*/
|
24
|
+
|
25
|
+
import type { Child } from './hyperscript.ts'
|
26
|
+
import {untrack, memo} from './reactive.ts'
|
27
|
+
|
28
|
+
export type ShowProps<T> = {
|
29
|
+
when: T,
|
30
|
+
children: Child | ((a:()=>T)=>void),
|
31
|
+
fallback: unknown
|
32
|
+
}
|
33
|
+
|
34
|
+
/**
|
35
|
+
Show children if `when` prop is true, otherwise show `fallback`.
|
36
|
+
@group Components
|
37
|
+
*/
|
38
|
+
export function Show<T>(props:ShowProps<T>) {
|
39
|
+
const condition = memo(()=>props.when)
|
40
|
+
return memo(()=>{
|
41
|
+
const c = condition()
|
42
|
+
if (c) {
|
43
|
+
const child = props.children
|
44
|
+
const fn = typeof child === "function" && child.length > 0
|
45
|
+
return fn ? untrack(() => child(() => props.when)) : child
|
46
|
+
} else return props.fallback
|
47
|
+
})
|
48
|
+
}
|
package/src/svg.js
ADDED
File without changes
|
package/src/switch.ts
ADDED
@@ -0,0 +1,96 @@
|
|
1
|
+
import {memo, untrack, children, type Getter} from './reactive.ts'
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Switches between content based on mutually exclusive conditions
|
5
|
+
* ```typescript
|
6
|
+
* <Switch fallback={<FourOhFour />}>
|
7
|
+
* <Match when={state.route === 'home'}>
|
8
|
+
* <Home />
|
9
|
+
* </Match>
|
10
|
+
* <Match when={state.route === 'settings'}>
|
11
|
+
* <Settings />
|
12
|
+
* </Match>
|
13
|
+
* </Switch>
|
14
|
+
* ```
|
15
|
+
* @description https://docs.solidjs.com/reference/components/switch-and-match
|
16
|
+
*/
|
17
|
+
export function Switch(props: { fallback?: any; children: any }): any {
|
18
|
+
const chs = children(() => props.children);
|
19
|
+
const switchFunc = memo(() => {
|
20
|
+
const ch = chs() as unknown as MatchProps<unknown> | MatchProps<unknown>[];
|
21
|
+
const mps = Array.isArray(ch) ? ch : [ch];
|
22
|
+
let func: Getter<any | undefined> = () => undefined;
|
23
|
+
for (let i = 0; i < mps.length; i++) {
|
24
|
+
const index = i;
|
25
|
+
const mp = mps[i];
|
26
|
+
const prevFunc = func;
|
27
|
+
const conditionValue = memo(
|
28
|
+
() => (prevFunc() ? undefined : mp.when),
|
29
|
+
undefined, undefined
|
30
|
+
);
|
31
|
+
const condition = mp.keyed
|
32
|
+
? conditionValue
|
33
|
+
: memo(
|
34
|
+
conditionValue,
|
35
|
+
undefined,
|
36
|
+
{ equals: (a, b) => !a === !b }
|
37
|
+
);
|
38
|
+
func = () => prevFunc() || (condition() ? [index, conditionValue, mp] : undefined);
|
39
|
+
}
|
40
|
+
return func;
|
41
|
+
});
|
42
|
+
return memo(
|
43
|
+
() => {
|
44
|
+
const sel = switchFunc()();
|
45
|
+
if (!sel) return props.fallback;
|
46
|
+
const [index, conditionValue, mp] = sel;
|
47
|
+
const child = mp.children;
|
48
|
+
const fn = typeof child === "function" && child.length > 0;
|
49
|
+
return fn
|
50
|
+
? untrack(() =>
|
51
|
+
(child as any)(
|
52
|
+
mp.keyed
|
53
|
+
? (conditionValue() as any)
|
54
|
+
: () => {
|
55
|
+
if (untrack(switchFunc)()?.[0] !== index) throw 'Stale read from Switch'
|
56
|
+
return conditionValue();
|
57
|
+
}
|
58
|
+
)
|
59
|
+
)
|
60
|
+
: child;
|
61
|
+
},
|
62
|
+
undefined,
|
63
|
+
undefined
|
64
|
+
) as unknown as any;
|
65
|
+
}
|
66
|
+
|
67
|
+
export type MatchProps<T> = {
|
68
|
+
when: T | undefined | null | false;
|
69
|
+
keyed?: boolean;
|
70
|
+
children: any | ((item: NonNullable<T> | Getter<NonNullable<T>>) => any);
|
71
|
+
};
|
72
|
+
/**
|
73
|
+
* Selects a content based on condition when inside a `<Switch>` control flow
|
74
|
+
* ```typescript
|
75
|
+
* <Match when={condition()}>
|
76
|
+
* <Content/>
|
77
|
+
* </Match>
|
78
|
+
* ```
|
79
|
+
* @description https://docs.solidjs.com/reference/components/switch-and-match
|
80
|
+
*/
|
81
|
+
export function Match<
|
82
|
+
T,
|
83
|
+
TRenderFunction extends (item: Getter<NonNullable<T>>) => any
|
84
|
+
>(props: {
|
85
|
+
when: T | undefined | null | false;
|
86
|
+
keyed?: false;
|
87
|
+
children: any;
|
88
|
+
}): any;
|
89
|
+
export function Match<T, TRenderFunction extends (item: NonNullable<T>) => any>(props: {
|
90
|
+
when: T | undefined | null | false;
|
91
|
+
keyed: true;
|
92
|
+
children: any;
|
93
|
+
}): any;
|
94
|
+
export function Match<T>(props: MatchProps<T>) {
|
95
|
+
return props as unknown as any;
|
96
|
+
}
|
package/src/table.js
ADDED
File without changes
|
package/test/hyperscript.js
CHANGED
@@ -1,13 +1,16 @@
|
|
1
|
-
import {runtime} from '../src/runtime.ts'
|
2
|
-
import {hyperscript} from '../src/hyperscript.ts'
|
3
|
-
import {signal,root} from '../src/reactive.ts'
|
1
|
+
// import {runtime} from '../src/runtime.ts'
|
4
2
|
import { Window } from 'happy-dom'
|
5
3
|
import {assertEquals} from '@std/assert'
|
6
4
|
|
7
5
|
const window = new Window
|
8
|
-
|
9
|
-
globalThis = window
|
10
|
-
|
6
|
+
|
7
|
+
globalThis.window = window
|
8
|
+
globalThis.document = window.document
|
9
|
+
globalThis.navigator = window.navigator
|
10
|
+
|
11
|
+
import {signal,root} from '../src/reactive.ts'
|
12
|
+
import { r } from '../src/runtime.ts'
|
13
|
+
import {h} from '../src/hyperscript.ts'
|
11
14
|
|
12
15
|
function testing(name, props, f=props) {
|
13
16
|
const htest = t => (name, f) => {
|
package/test/list.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
import {assertEquals,assert} from '@std/assert'
|
2
|
-
import {describe,it} from '@std/testing/bdd'
|
1
|
+
// import {assertEquals,assert} from '@std/assert'
|
2
|
+
// import {describe,it} from '@std/testing/bdd'
|
3
3
|
|
4
|
-
import { signal } from '../src/reactive.ts'
|
5
|
-
import { listArray } from '../src/
|
4
|
+
// import { signal } from '../src/reactive.ts'
|
5
|
+
// import { listArray } from '../src/list.ts'
|
6
6
|
|
7
7
|
// Deno.test('listArray applies list to mapFn', ()=>{
|
8
8
|
// const l = signal([0,1,2])
|
package/test/types.ts
CHANGED
@@ -1,11 +1,15 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
1
|
+
import { type Mountable } from '../src/runtime.ts'
|
2
|
+
import { h } from '../src/hyperscript.ts'
|
3
3
|
import { signal, root } from '../src/reactive.ts'
|
4
|
-
import { List } from '../src/
|
4
|
+
import { List } from '../src/list.ts'
|
5
5
|
import { Window } from 'happy-dom'
|
6
6
|
|
7
7
|
const window = new Window
|
8
|
-
|
8
|
+
|
9
|
+
globalThis.window = (window as any)
|
10
|
+
globalThis.document = (window as any).document
|
11
|
+
globalThis.navigator = (window as any).navigator
|
12
|
+
|
9
13
|
|
10
14
|
h('hr')
|
11
15
|
h('div', ['hello'])
|
@@ -1,23 +0,0 @@
|
|
1
|
-
# name: Prelude CI/CD
|
2
|
-
|
3
|
-
# on:
|
4
|
-
# push:
|
5
|
-
# branches:
|
6
|
-
# - release
|
7
|
-
|
8
|
-
# permissions:
|
9
|
-
# contents: read
|
10
|
-
# id-token: write
|
11
|
-
|
12
|
-
# jobs:
|
13
|
-
# publish-npm:
|
14
|
-
# runs-on: ubuntu-latest
|
15
|
-
# steps:
|
16
|
-
# - uses: actions/checkout@v4
|
17
|
-
# - uses: actions/setup-node@v4
|
18
|
-
# with:
|
19
|
-
# node-version: 20
|
20
|
-
# registry-url: 'https://registry.npmjs.org/'
|
21
|
-
# - run: npm publish
|
22
|
-
# env:
|
23
|
-
# NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|