ripple 0.3.68 → 0.3.69
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/CHANGELOG.md +48 -0
- package/package.json +3 -3
- package/src/jsx-runtime.d.ts +2 -2
- package/src/runtime/element.js +1 -1
- package/src/runtime/index-client.js +11 -11
- package/src/runtime/index-server.js +7 -4
- package/src/runtime/internal/client/bindings.js +1 -1
- package/src/runtime/internal/client/blocks.js +13 -4
- package/src/runtime/internal/client/component.js +55 -0
- package/src/runtime/internal/client/composite.js +4 -2
- package/src/runtime/internal/client/expression.js +65 -7
- package/src/runtime/internal/client/hmr.js +54 -43
- package/src/runtime/internal/client/index.js +5 -1
- package/src/runtime/internal/client/portal.js +70 -69
- package/src/runtime/internal/client/render.js +3 -0
- package/src/runtime/internal/server/index.js +92 -8
- package/tests/client/__snapshots__/html.test.tsrx.snap +3 -3
- package/tests/client/array/array.copy-within.test.tsrx +33 -31
- package/tests/client/array/array.derived.test.tsrx +186 -169
- package/tests/client/array/array.iteration.test.tsrx +40 -37
- package/tests/client/array/array.mutations.test.tsrx +113 -101
- package/tests/client/array/array.static.test.tsrx +119 -101
- package/tests/client/array/array.to-methods.test.tsrx +24 -21
- package/tests/client/async-suspend.test.tsrx +247 -246
- package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap +0 -1
- package/tests/client/basic/basic.attributes.test.tsrx +428 -423
- package/tests/client/basic/basic.collections.test.tsrx +109 -102
- package/tests/client/basic/basic.components.test.tsrx +323 -205
- package/tests/client/basic/basic.errors.test.tsrx +91 -91
- package/tests/client/basic/basic.events.test.tsrx +114 -115
- package/tests/client/basic/basic.get-set.test.tsrx +97 -87
- package/tests/client/basic/basic.hmr.test.tsrx +19 -16
- package/tests/client/basic/basic.reactivity.test.tsrx +199 -191
- package/tests/client/basic/basic.rendering.test.tsrx +272 -182
- package/tests/client/basic/basic.styling.test.tsrx +23 -22
- package/tests/client/basic/basic.utilities.test.tsrx +10 -8
- package/tests/client/boundaries.test.tsrx +26 -26
- package/tests/client/compiler/__snapshots__/compiler.assignments.test.rsrx.snap +5 -5
- package/tests/client/compiler/__snapshots__/compiler.assignments.test.tsrx.snap +5 -5
- package/tests/client/compiler/compiler.assignments.test.tsrx +77 -81
- package/tests/client/compiler/compiler.attributes.test.tsrx +15 -15
- package/tests/client/compiler/compiler.basic.test.tsrx +322 -314
- package/tests/client/compiler/compiler.regex.test.tsrx +44 -47
- package/tests/client/compiler/compiler.tracked-access.test.tsrx +38 -38
- package/tests/client/compiler/compiler.try-in-function.test.tsrx +16 -16
- package/tests/client/compiler/compiler.typescript.test.tsrx +2 -2
- package/tests/client/composite/composite.dynamic-components.test.tsrx +47 -48
- package/tests/client/composite/composite.generics.test.tsrx +168 -192
- package/tests/client/composite/composite.props.test.tsrx +97 -81
- package/tests/client/composite/composite.reactivity.test.tsrx +177 -147
- package/tests/client/composite/composite.render.test.tsrx +122 -105
- package/tests/client/computed-properties.test.tsrx +28 -28
- package/tests/client/context.test.tsrx +21 -21
- package/tests/client/css/global-additional-cases.test.tsrx +58 -58
- package/tests/client/css/global-advanced-selectors.test.tsrx +16 -16
- package/tests/client/css/global-at-rules.test.tsrx +10 -10
- package/tests/client/css/global-basic.test.tsrx +14 -14
- package/tests/client/css/global-classes-ids.test.tsrx +14 -14
- package/tests/client/css/global-combinators.test.tsrx +10 -10
- package/tests/client/css/global-complex-nesting.test.tsrx +14 -14
- package/tests/client/css/global-edge-cases.test.tsrx +18 -18
- package/tests/client/css/global-keyframes.test.tsrx +12 -12
- package/tests/client/css/global-nested.test.tsrx +10 -10
- package/tests/client/css/global-pseudo.test.tsrx +12 -12
- package/tests/client/css/global-scoping.test.tsrx +20 -20
- package/tests/client/css/style-identifier.test.tsrx +143 -291
- package/tests/client/date.test.tsrx +146 -133
- package/tests/client/dynamic-elements.test.tsrx +398 -365
- package/tests/client/events.test.tsrx +292 -290
- package/tests/client/for.test.tsrx +156 -153
- package/tests/client/head.test.tsrx +105 -96
- package/tests/client/html.test.tsrx +122 -26
- package/tests/client/input-value.test.tsrx +1361 -1314
- package/tests/client/lazy-array.test.tsrx +16 -13
- package/tests/client/lazy-destructuring.test.tsrx +257 -213
- package/tests/client/map.test.tsrx +65 -60
- package/tests/client/media-query.test.tsrx +22 -20
- package/tests/client/object.test.tsrx +87 -81
- package/tests/client/portal.test.tsrx +57 -51
- package/tests/client/ref.test.tsrx +233 -202
- package/tests/client/return.test.tsrx +71 -2560
- package/tests/client/set.test.tsrx +54 -45
- package/tests/client/svg.test.tsrx +216 -186
- package/tests/client/switch.test.tsrx +194 -193
- package/tests/client/track-async-hydration.test.tsrx +18 -14
- package/tests/client/tracked-index-access.test.tsrx +28 -18
- package/tests/client/try.test.tsrx +675 -548
- package/tests/client/tsx.test.tsrx +373 -311
- package/tests/client/typescript-generics.test.tsrx +145 -145
- package/tests/client/url/url.derived.test.tsrx +33 -28
- package/tests/client/url/url.parsing.test.tsrx +61 -51
- package/tests/client/url/url.partial-removal.test.tsrx +56 -48
- package/tests/client/url/url.reactivity.test.tsrx +142 -125
- package/tests/client/url/url.serialization.test.tsrx +13 -11
- package/tests/client/url-search-params/url-search-params.derived.test.tsrx +34 -29
- package/tests/client/url-search-params/url-search-params.initialization.test.tsrx +25 -21
- package/tests/client/url-search-params/url-search-params.iteration.test.tsrx +50 -45
- package/tests/client/url-search-params/url-search-params.mutation.test.tsrx +111 -99
- package/tests/client/url-search-params/url-search-params.retrieval.test.tsrx +49 -43
- package/tests/client/url-search-params/url-search-params.serialization.test.tsrx +14 -12
- package/tests/client/url-search-params/url-search-params.tracked-url.test.tsrx +16 -14
- package/tests/hydration/basic.test.js +3 -3
- package/tests/hydration/compiled/client/basic.js +586 -651
- package/tests/hydration/compiled/client/composite.js +79 -104
- package/tests/hydration/compiled/client/events.js +140 -148
- package/tests/hydration/compiled/client/for.js +1005 -1018
- package/tests/hydration/compiled/client/head.js +124 -134
- package/tests/hydration/compiled/client/hmr.js +41 -48
- package/tests/hydration/compiled/client/html-in-template.js +38 -41
- package/tests/hydration/compiled/client/html.js +970 -1314
- package/tests/hydration/compiled/client/if-children.js +234 -249
- package/tests/hydration/compiled/client/if.js +182 -189
- package/tests/hydration/compiled/client/mixed-control-flow.js +347 -303
- package/tests/hydration/compiled/client/nested-control-flow.js +1084 -832
- package/tests/hydration/compiled/client/portal.js +65 -85
- package/tests/hydration/compiled/client/reactivity.js +84 -90
- package/tests/hydration/compiled/client/return.js +38 -1939
- package/tests/hydration/compiled/client/switch.js +218 -224
- package/tests/hydration/compiled/client/track-async-serialization.js +250 -259
- package/tests/hydration/compiled/client/try.js +123 -132
- package/tests/hydration/compiled/server/basic.js +773 -831
- package/tests/hydration/compiled/server/composite.js +166 -191
- package/tests/hydration/compiled/server/events.js +170 -184
- package/tests/hydration/compiled/server/for.js +851 -909
- package/tests/hydration/compiled/server/head.js +206 -216
- package/tests/hydration/compiled/server/hmr.js +64 -72
- package/tests/hydration/compiled/server/html-in-template.js +42 -76
- package/tests/hydration/compiled/server/html.js +1362 -1667
- package/tests/hydration/compiled/server/if-children.js +419 -445
- package/tests/hydration/compiled/server/if.js +194 -208
- package/tests/hydration/compiled/server/mixed-control-flow.js +249 -257
- package/tests/hydration/compiled/server/nested-control-flow.js +491 -515
- package/tests/hydration/compiled/server/portal.js +152 -160
- package/tests/hydration/compiled/server/reactivity.js +94 -106
- package/tests/hydration/compiled/server/return.js +28 -2172
- package/tests/hydration/compiled/server/switch.js +274 -286
- package/tests/hydration/compiled/server/track-async-serialization.js +340 -358
- package/tests/hydration/compiled/server/try.js +167 -185
- package/tests/hydration/components/basic.tsrx +320 -272
- package/tests/hydration/components/composite.tsrx +44 -32
- package/tests/hydration/components/events.tsrx +101 -91
- package/tests/hydration/components/for.tsrx +510 -452
- package/tests/hydration/components/head.tsrx +87 -80
- package/tests/hydration/components/hmr.tsrx +22 -17
- package/tests/hydration/components/html-in-template.tsrx +22 -17
- package/tests/hydration/components/html.tsrx +525 -443
- package/tests/hydration/components/if-children.tsrx +158 -148
- package/tests/hydration/components/if.tsrx +109 -95
- package/tests/hydration/components/mixed-control-flow.tsrx +100 -96
- package/tests/hydration/components/nested-control-flow.tsrx +215 -203
- package/tests/hydration/components/portal.tsrx +41 -34
- package/tests/hydration/components/reactivity.tsrx +37 -27
- package/tests/hydration/components/return.tsrx +12 -556
- package/tests/hydration/components/switch.tsrx +120 -114
- package/tests/hydration/components/track-async-serialization.tsrx +107 -91
- package/tests/hydration/components/try.tsrx +55 -40
- package/tests/hydration/html.test.js +4 -4
- package/tests/hydration/return.test.js +13 -532
- package/tests/server/await.test.tsrx +3 -3
- package/tests/server/basic.attributes.test.tsrx +264 -195
- package/tests/server/basic.components.test.tsrx +296 -169
- package/tests/server/basic.test.tsrx +300 -198
- package/tests/server/compiler.test.tsrx +62 -60
- package/tests/server/composite.props.test.tsrx +77 -63
- package/tests/server/composite.test.tsrx +168 -192
- package/tests/server/context.test.tsrx +18 -12
- package/tests/server/dynamic-elements.test.tsrx +197 -180
- package/tests/server/for.test.tsrx +85 -78
- package/tests/server/head.test.tsrx +50 -43
- package/tests/server/html-nesting-validation.test.tsrx +8 -8
- package/tests/server/if.test.tsrx +57 -51
- package/tests/server/lazy-destructuring.test.tsrx +366 -294
- package/tests/server/return.test.tsrx +76 -1355
- package/tests/server/streaming-ssr.test.tsrx +4 -75
- package/tests/server/style-identifier.test.tsrx +169 -148
- package/tests/server/switch.test.tsrx +91 -85
- package/tests/server/track-async-serialization.test.tsrx +105 -85
- package/tests/server/try.test.tsrx +374 -280
- package/tests/utils/compiler-compat-config.test.js +2 -2
- package/tests/utils/runtime-imports.test.js +10 -0
- package/types/index.d.ts +8 -0
- package/tests/client/__snapshots__/html.test.rsrx.snap +0 -40
|
@@ -2,11 +2,12 @@ import { RippleURL, RippleURLSearchParams } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURLSearchParams > initialization', () => {
|
|
4
4
|
it('creates empty URLSearchParams with reactivity', () => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
function URLTest() {
|
|
6
|
+
return <>
|
|
7
|
+
const params = RippleURLSearchParams();
|
|
8
|
+
<pre>{params.toString()}</pre>
|
|
9
|
+
<pre>{params.size}</pre>
|
|
10
|
+
</>;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
render(URLTest);
|
|
@@ -16,12 +17,13 @@ describe('RippleURLSearchParams > initialization', () => {
|
|
|
16
17
|
});
|
|
17
18
|
|
|
18
19
|
it('creates URLSearchParams from string with reactivity', () => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
function URLTest() {
|
|
21
|
+
return <>
|
|
22
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
23
|
+
<pre>{params.toString()}</pre>
|
|
24
|
+
<pre>{params.size}</pre>
|
|
25
|
+
<pre>{params.get('foo')}</pre>
|
|
26
|
+
</>;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
render(URLTest);
|
|
@@ -32,11 +34,12 @@ describe('RippleURLSearchParams > initialization', () => {
|
|
|
32
34
|
});
|
|
33
35
|
|
|
34
36
|
it('creates URLSearchParams from object with reactivity', () => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
function URLTest() {
|
|
38
|
+
return <>
|
|
39
|
+
const params = RippleURLSearchParams({ foo: 'bar', baz: 'qux' });
|
|
40
|
+
<pre>{params.toString()}</pre>
|
|
41
|
+
<pre>{params.size}</pre>
|
|
42
|
+
</>;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
render(URLTest);
|
|
@@ -46,11 +49,12 @@ describe('RippleURLSearchParams > initialization', () => {
|
|
|
46
49
|
});
|
|
47
50
|
|
|
48
51
|
it('handles URL-encoded characters correctly', () => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
function URLTest() {
|
|
53
|
+
return <>
|
|
54
|
+
const params = RippleURLSearchParams('name=John+Doe&email=john%40example.com');
|
|
55
|
+
<pre>{params.get('name')}</pre>
|
|
56
|
+
<pre>{params.get('email')}</pre>
|
|
57
|
+
</>;
|
|
54
58
|
}
|
|
55
59
|
|
|
56
60
|
render(URLTest);
|
|
@@ -2,12 +2,13 @@ import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURLSearchParams > iteration', () => {
|
|
4
4
|
it('handles keys method with reactivity', () => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
function URLTest() {
|
|
6
|
+
return <>
|
|
7
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
8
|
+
let &[keys] = track(() => Array.from(params.keys()));
|
|
9
|
+
<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
|
|
10
|
+
<pre>{JSON.stringify(keys)}</pre>
|
|
11
|
+
</>;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
render(URLTest);
|
|
@@ -25,12 +26,13 @@ describe('RippleURLSearchParams > iteration', () => {
|
|
|
25
26
|
});
|
|
26
27
|
|
|
27
28
|
it('handles values method with reactivity', () => {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
function URLTest() {
|
|
30
|
+
return <>
|
|
31
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
32
|
+
let &[values] = track(() => Array.from(params.values()));
|
|
33
|
+
<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
|
|
34
|
+
<pre>{JSON.stringify(values)}</pre>
|
|
35
|
+
</>;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
render(URLTest);
|
|
@@ -48,12 +50,13 @@ describe('RippleURLSearchParams > iteration', () => {
|
|
|
48
50
|
});
|
|
49
51
|
|
|
50
52
|
it('handles entries method with reactivity', () => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
function URLTest() {
|
|
54
|
+
return <>
|
|
55
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
56
|
+
let &[entries] = track(() => Array.from(params.entries()));
|
|
57
|
+
<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
|
|
58
|
+
<pre>{JSON.stringify(entries)}</pre>
|
|
59
|
+
</>;
|
|
57
60
|
}
|
|
58
61
|
|
|
59
62
|
render(URLTest);
|
|
@@ -73,12 +76,13 @@ describe('RippleURLSearchParams > iteration', () => {
|
|
|
73
76
|
});
|
|
74
77
|
|
|
75
78
|
it('handles Symbol.iterator with reactivity', () => {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
function URLTest() {
|
|
80
|
+
return <>
|
|
81
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
82
|
+
let &[entries] = track(() => Array.from(params));
|
|
83
|
+
<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
|
|
84
|
+
<pre>{JSON.stringify(entries)}</pre>
|
|
85
|
+
</>;
|
|
82
86
|
}
|
|
83
87
|
|
|
84
88
|
render(URLTest);
|
|
@@ -96,14 +100,14 @@ describe('RippleURLSearchParams > iteration', () => {
|
|
|
96
100
|
});
|
|
97
101
|
|
|
98
102
|
it('handles iteration with for...of', () => {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
103
|
+
function URLTest() {
|
|
104
|
+
return <>
|
|
105
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
106
|
+
<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
|
|
107
|
+
for (const [key, value] of params) {
|
|
108
|
+
<pre>{`${key}=${value}`}</pre>
|
|
109
|
+
}
|
|
110
|
+
</>;
|
|
107
111
|
}
|
|
108
112
|
|
|
109
113
|
render(URLTest);
|
|
@@ -124,19 +128,20 @@ describe('RippleURLSearchParams > iteration', () => {
|
|
|
124
128
|
});
|
|
125
129
|
|
|
126
130
|
it('handles forEach iteration', () => {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
let
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
131
|
+
function URLTest() {
|
|
132
|
+
return <>
|
|
133
|
+
const params = RippleURLSearchParams('a=1&b=2&c=3');
|
|
134
|
+
let &[sum] = track(() => {
|
|
135
|
+
let total = 0;
|
|
136
|
+
// Access the params reactively through entries
|
|
137
|
+
for (const [key, value] of params.entries()) {
|
|
138
|
+
total += parseInt(value, 10);
|
|
139
|
+
}
|
|
140
|
+
return total;
|
|
141
|
+
});
|
|
142
|
+
<button onClick={() => params.append('d', '4')}>{'add d=4'}</button>
|
|
143
|
+
<pre>{sum}</pre>
|
|
144
|
+
</>;
|
|
140
145
|
}
|
|
141
146
|
|
|
142
147
|
render(URLTest);
|
|
@@ -2,12 +2,13 @@ import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURLSearchParams > mutation', () => {
|
|
4
4
|
it('handles append operation with reactivity', () => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
function URLTest() {
|
|
6
|
+
return <>
|
|
7
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
8
|
+
<button onClick={() => params.append('baz', 'qux')}>{'append'}</button>
|
|
9
|
+
<pre>{params.toString()}</pre>
|
|
10
|
+
<pre>{params.size}</pre>
|
|
11
|
+
</>;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
render(URLTest);
|
|
@@ -27,13 +28,14 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
27
28
|
});
|
|
28
29
|
|
|
29
30
|
it('handles append with multiple values for same key', () => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
function URLTest() {
|
|
32
|
+
return <>
|
|
33
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
34
|
+
let &[allFoo] = track(() => params.getAll('foo'));
|
|
35
|
+
<button onClick={() => params.append('foo', 'baz')}>{'append foo'}</button>
|
|
36
|
+
<pre>{params.toString()}</pre>
|
|
37
|
+
<pre>{JSON.stringify(allFoo)}</pre>
|
|
38
|
+
</>;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
render(URLTest);
|
|
@@ -53,13 +55,14 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
53
55
|
});
|
|
54
56
|
|
|
55
57
|
it('handles delete operation with reactivity', () => {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
function URLTest() {
|
|
59
|
+
return <>
|
|
60
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
61
|
+
<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
|
|
62
|
+
<pre>{params.toString()}</pre>
|
|
63
|
+
<pre>{params.size}</pre>
|
|
64
|
+
<pre>{params.has('foo').toString()}</pre>
|
|
65
|
+
</>;
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
render(URLTest);
|
|
@@ -81,12 +84,13 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
81
84
|
});
|
|
82
85
|
|
|
83
86
|
it('handles delete with specific value', () => {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
function URLTest() {
|
|
88
|
+
return <>
|
|
89
|
+
const params = RippleURLSearchParams('foo=bar&foo=baz&foo=qux');
|
|
90
|
+
<button onClick={() => params.delete('foo', 'baz')}>{'delete foo=baz'}</button>
|
|
91
|
+
<pre>{params.toString()}</pre>
|
|
92
|
+
<pre>{params.size}</pre>
|
|
93
|
+
</>;
|
|
90
94
|
}
|
|
91
95
|
|
|
92
96
|
render(URLTest);
|
|
@@ -106,13 +110,14 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
106
110
|
});
|
|
107
111
|
|
|
108
112
|
it('handles delete when key does not exist', () => {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
113
|
+
function URLTest() {
|
|
114
|
+
return <>
|
|
115
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
116
|
+
let &[reactiveSize] = track(() => params.size);
|
|
117
|
+
<button onClick={() => params.delete('nonexistent')}>{'delete nonexistent'}</button>
|
|
118
|
+
<pre>{params.toString()}</pre>
|
|
119
|
+
<pre>{reactiveSize}</pre>
|
|
120
|
+
</>;
|
|
116
121
|
}
|
|
117
122
|
|
|
118
123
|
render(URLTest);
|
|
@@ -132,13 +137,14 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
132
137
|
});
|
|
133
138
|
|
|
134
139
|
it('handles set operation with reactivity', () => {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
function URLTest() {
|
|
141
|
+
return <>
|
|
142
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
143
|
+
<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
|
|
144
|
+
<button onClick={() => params.set('baz', 'qux')}>{'add baz'}</button>
|
|
145
|
+
<pre>{params.toString()}</pre>
|
|
146
|
+
<pre>{params.size}</pre>
|
|
147
|
+
</>;
|
|
142
148
|
}
|
|
143
149
|
|
|
144
150
|
render(URLTest);
|
|
@@ -166,13 +172,14 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
166
172
|
});
|
|
167
173
|
|
|
168
174
|
it('handles set with multiple existing values', () => {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
175
|
+
function URLTest() {
|
|
176
|
+
return <>
|
|
177
|
+
const params = RippleURLSearchParams('foo=bar&foo=baz&foo=qux');
|
|
178
|
+
let &[allFoo] = track(() => params.getAll('foo'));
|
|
179
|
+
<button onClick={() => params.set('foo', 'single')}>{'set foo'}</button>
|
|
180
|
+
<pre>{params.toString()}</pre>
|
|
181
|
+
<pre>{JSON.stringify(allFoo)}</pre>
|
|
182
|
+
</>;
|
|
176
183
|
}
|
|
177
184
|
|
|
178
185
|
render(URLTest);
|
|
@@ -192,13 +199,14 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
192
199
|
});
|
|
193
200
|
|
|
194
201
|
it('handles set when value is the same', () => {
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
+
function URLTest() {
|
|
203
|
+
return <>
|
|
204
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
205
|
+
let &[reactiveString] = track(() => params.toString());
|
|
206
|
+
<button onClick={() => params.set('foo', 'bar')}>{'set same value'}</button>
|
|
207
|
+
<pre>{reactiveString}</pre>
|
|
208
|
+
<pre>{params.size}</pre>
|
|
209
|
+
</>;
|
|
202
210
|
}
|
|
203
211
|
|
|
204
212
|
render(URLTest);
|
|
@@ -217,11 +225,12 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
217
225
|
});
|
|
218
226
|
|
|
219
227
|
it('handles sort operation with reactivity', () => {
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
228
|
+
function URLTest() {
|
|
229
|
+
return <>
|
|
230
|
+
const params = RippleURLSearchParams('z=last&a=first&m=middle');
|
|
231
|
+
<button onClick={() => params.sort()}>{'sort'}</button>
|
|
232
|
+
<pre>{params.toString()}</pre>
|
|
233
|
+
</>;
|
|
225
234
|
}
|
|
226
235
|
|
|
227
236
|
render(URLTest);
|
|
@@ -239,20 +248,21 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
239
248
|
});
|
|
240
249
|
|
|
241
250
|
it('handles clearing all params via delete', () => {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
251
|
+
function URLTest() {
|
|
252
|
+
return <>
|
|
253
|
+
const url = RippleURL('https://example.com?foo=bar&baz=qux');
|
|
254
|
+
const params = url.searchParams;
|
|
255
|
+
<button
|
|
256
|
+
onClick={() => {
|
|
257
|
+
params.delete('foo');
|
|
258
|
+
params.delete('baz');
|
|
259
|
+
}}
|
|
260
|
+
>
|
|
261
|
+
{'clear all'}
|
|
262
|
+
</button>
|
|
263
|
+
<pre>{url.href}</pre>
|
|
264
|
+
<pre>{params.size}</pre>
|
|
265
|
+
</>;
|
|
256
266
|
}
|
|
257
267
|
|
|
258
268
|
render(URLTest);
|
|
@@ -274,23 +284,24 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
274
284
|
});
|
|
275
285
|
|
|
276
286
|
it('handles multiple operations in sequence', () => {
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
287
|
+
function URLTest() {
|
|
288
|
+
return <>
|
|
289
|
+
const params = RippleURLSearchParams();
|
|
290
|
+
<button
|
|
291
|
+
onClick={() => {
|
|
292
|
+
params.append('a', '1');
|
|
293
|
+
params.append('b', '2');
|
|
294
|
+
params.set('a', '10');
|
|
295
|
+
params.delete('b');
|
|
296
|
+
params.append('c', '3');
|
|
297
|
+
params.sort();
|
|
298
|
+
}}
|
|
299
|
+
>
|
|
300
|
+
{'complex operations'}
|
|
301
|
+
</button>
|
|
302
|
+
<pre>{params.toString()}</pre>
|
|
303
|
+
<pre>{params.size}</pre>
|
|
304
|
+
</>;
|
|
294
305
|
}
|
|
295
306
|
|
|
296
307
|
render(URLTest);
|
|
@@ -310,15 +321,16 @@ describe('RippleURLSearchParams > mutation', () => {
|
|
|
310
321
|
});
|
|
311
322
|
|
|
312
323
|
it('handles duplicate keys with different values', () => {
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
324
|
+
function URLTest() {
|
|
325
|
+
return <>
|
|
326
|
+
const params = RippleURLSearchParams();
|
|
327
|
+
let &[tags] = track(() => params.getAll('tag'));
|
|
328
|
+
<button onClick={() => params.append('tag', 'javascript')}>{'add js'}</button>
|
|
329
|
+
<button onClick={() => params.append('tag', 'typescript')}>{'add ts'}</button>
|
|
330
|
+
<button onClick={() => params.append('tag', 'ripple')}>{'add ripple'}</button>
|
|
331
|
+
<pre>{JSON.stringify(tags)}</pre>
|
|
332
|
+
<pre>{params.size}</pre>
|
|
333
|
+
</>;
|
|
322
334
|
}
|
|
323
335
|
|
|
324
336
|
render(URLTest);
|
|
@@ -2,14 +2,15 @@ import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURLSearchParams > retrieval', () => {
|
|
4
4
|
it('handles get operation with reactivity', () => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
function URLTest() {
|
|
6
|
+
return <>
|
|
7
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
8
|
+
let &[foo] = track(() => params.get('foo'));
|
|
9
|
+
let &[baz] = track(() => params.get('baz'));
|
|
10
|
+
<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
|
|
11
|
+
<pre>{foo}</pre>
|
|
12
|
+
<pre>{baz}</pre>
|
|
13
|
+
</>;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
render(URLTest);
|
|
@@ -29,11 +30,12 @@ describe('RippleURLSearchParams > retrieval', () => {
|
|
|
29
30
|
});
|
|
30
31
|
|
|
31
32
|
it('handles get for nonexistent key', () => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
function URLTest() {
|
|
34
|
+
return <>
|
|
35
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
36
|
+
let &[nonexistent] = track(() => params.get('nonexistent'));
|
|
37
|
+
<pre>{String(nonexistent)}</pre>
|
|
38
|
+
</>;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
render(URLTest);
|
|
@@ -42,12 +44,13 @@ describe('RippleURLSearchParams > retrieval', () => {
|
|
|
42
44
|
});
|
|
43
45
|
|
|
44
46
|
it('handles getAll operation with reactivity', () => {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
function URLTest() {
|
|
48
|
+
return <>
|
|
49
|
+
const params = RippleURLSearchParams('foo=bar&foo=baz');
|
|
50
|
+
let &[allFoo] = track(() => params.getAll('foo'));
|
|
51
|
+
<button onClick={() => params.append('foo', 'qux')}>{'append foo'}</button>
|
|
52
|
+
<pre>{JSON.stringify(allFoo)}</pre>
|
|
53
|
+
</>;
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
render(URLTest);
|
|
@@ -65,15 +68,16 @@ describe('RippleURLSearchParams > retrieval', () => {
|
|
|
65
68
|
});
|
|
66
69
|
|
|
67
70
|
it('handles has operation with reactivity', () => {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
71
|
+
function URLTest() {
|
|
72
|
+
return <>
|
|
73
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
74
|
+
let &[hasFoo] = track(() => params.has('foo'));
|
|
75
|
+
let &[hasBaz] = track(() => params.has('baz'));
|
|
76
|
+
<button onClick={() => params.append('baz', 'qux')}>{'add baz'}</button>
|
|
77
|
+
<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
|
|
78
|
+
<pre>{hasFoo.toString()}</pre>
|
|
79
|
+
<pre>{hasBaz.toString()}</pre>
|
|
80
|
+
</>;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
render(URLTest);
|
|
@@ -101,14 +105,15 @@ describe('RippleURLSearchParams > retrieval', () => {
|
|
|
101
105
|
});
|
|
102
106
|
|
|
103
107
|
it('handles has with specific value', () => {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
108
|
+
function URLTest() {
|
|
109
|
+
return <>
|
|
110
|
+
const params = RippleURLSearchParams('foo=bar&foo=baz');
|
|
111
|
+
let &[hasBarValue] = track(() => params.has('foo', 'bar'));
|
|
112
|
+
let &[hasQuxValue] = track(() => params.has('foo', 'qux'));
|
|
113
|
+
<button onClick={() => params.append('foo', 'qux')}>{'add qux'}</button>
|
|
114
|
+
<pre>{hasBarValue.toString()}</pre>
|
|
115
|
+
<pre>{hasQuxValue.toString()}</pre>
|
|
116
|
+
</>;
|
|
112
117
|
}
|
|
113
118
|
|
|
114
119
|
render(URLTest);
|
|
@@ -128,13 +133,14 @@ describe('RippleURLSearchParams > retrieval', () => {
|
|
|
128
133
|
});
|
|
129
134
|
|
|
130
135
|
it('handles size property with reactivity', () => {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
136
|
+
function URLTest() {
|
|
137
|
+
return <>
|
|
138
|
+
const params = RippleURLSearchParams('foo=bar');
|
|
139
|
+
let &[size] = track(() => params.size);
|
|
140
|
+
<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
|
|
141
|
+
<button onClick={() => params.delete('foo')}>{'delete'}</button>
|
|
142
|
+
<pre>{size}</pre>
|
|
143
|
+
</>;
|
|
138
144
|
}
|
|
139
145
|
|
|
140
146
|
render(URLTest);
|