ripple 0.3.71 → 0.3.74
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 +75 -0
- package/package.json +3 -3
- package/src/jsx-runtime.d.ts +2 -8
- package/src/runtime/index-client.js +3 -13
- package/src/runtime/internal/client/blocks.js +3 -25
- package/src/runtime/internal/client/for.js +80 -5
- package/src/runtime/internal/client/index.js +0 -2
- package/src/runtime/internal/client/types.d.ts +0 -10
- package/tests/client/__snapshots__/computed-properties.test.tsrx.snap +8 -0
- package/tests/client/__snapshots__/for.test.tsrx.snap +22 -0
- package/tests/client/__snapshots__/html.test.tsrx.snap +4 -0
- package/tests/client/array/array.copy-within.test.tsrx +19 -19
- package/tests/client/array/array.derived.test.tsrx +97 -109
- package/tests/client/array/array.iteration.test.tsrx +28 -28
- package/tests/client/array/array.mutations.test.tsrx +68 -68
- package/tests/client/array/array.static.test.tsrx +82 -92
- package/tests/client/array/array.to-methods.test.tsrx +15 -15
- package/tests/client/async-suspend.test.tsrx +180 -179
- package/tests/client/basic/__snapshots__/basic.attributes.test.tsrx.snap +2 -0
- package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap +4 -0
- package/tests/client/basic/basic.attributes.test.tsrx +273 -317
- package/tests/client/basic/basic.collections.test.tsrx +59 -71
- package/tests/client/basic/basic.components.test.tsrx +196 -222
- package/tests/client/basic/basic.errors.test.tsrx +72 -78
- package/tests/client/basic/basic.events.test.tsrx +80 -85
- package/tests/client/basic/basic.get-set.test.tsrx +54 -64
- package/tests/client/basic/basic.hmr.test.tsrx +15 -19
- package/tests/client/basic/basic.reactivity.test.tsrx +121 -135
- package/tests/client/basic/basic.rendering.test.tsrx +273 -178
- package/tests/client/basic/basic.utilities.test.tsrx +8 -10
- package/tests/client/boundaries.test.tsrx +18 -18
- package/tests/client/compiler/compiler.assignments.test.tsrx +77 -76
- package/tests/client/compiler/compiler.attributes.test.tsrx +18 -14
- package/tests/client/compiler/compiler.basic.test.tsrx +364 -296
- package/tests/client/compiler/compiler.regex.test.tsrx +40 -44
- package/tests/client/compiler/compiler.tracked-access.test.tsrx +57 -38
- package/tests/client/compiler/compiler.try-in-function.test.tsrx +16 -16
- package/tests/client/compiler/compiler.typescript.test.tsrx +4 -3
- package/tests/client/composite/composite.dynamic-components.test.tsrx +41 -44
- package/tests/client/composite/composite.generics.test.tsrx +165 -167
- package/tests/client/composite/composite.props.test.tsrx +66 -74
- package/tests/client/composite/composite.reactivity.test.tsrx +132 -166
- package/tests/client/composite/composite.render.test.tsrx +92 -101
- package/tests/client/computed-properties.test.tsrx +14 -18
- package/tests/client/context.test.tsrx +14 -18
- package/tests/client/css/global-additional-cases.test.tsrx +491 -437
- package/tests/client/css/global-advanced-selectors.test.tsrx +169 -153
- package/tests/client/css/global-at-rules.test.tsrx +71 -66
- package/tests/client/css/global-basic.test.tsrx +105 -98
- package/tests/client/css/global-classes-ids.test.tsrx +128 -114
- package/tests/client/css/global-combinators.test.tsrx +83 -78
- package/tests/client/css/global-complex-nesting.test.tsrx +134 -120
- package/tests/client/css/global-edge-cases.test.tsrx +138 -120
- package/tests/client/css/global-keyframes.test.tsrx +108 -96
- package/tests/client/css/global-nested.test.tsrx +88 -78
- package/tests/client/css/global-pseudo.test.tsrx +104 -98
- package/tests/client/css/global-scoping.test.tsrx +145 -125
- package/tests/client/css/style-identifier.test.tsrx +62 -69
- package/tests/client/date.test.tsrx +83 -83
- package/tests/client/dynamic-elements.test.tsrx +227 -283
- package/tests/client/events.test.tsrx +252 -266
- package/tests/client/for.test.tsrx +120 -127
- package/tests/client/head.test.tsrx +40 -48
- package/tests/client/html.test.tsrx +37 -49
- package/tests/client/input-value.test.tsrx +1125 -1354
- package/tests/client/lazy-array.test.tsrx +10 -16
- package/tests/client/lazy-destructuring.test.tsrx +169 -221
- package/tests/client/map.test.tsrx +39 -41
- package/tests/client/media-query.test.tsrx +15 -19
- package/tests/client/object.test.tsrx +46 -56
- package/tests/client/portal.test.tsrx +31 -37
- package/tests/client/ref.test.tsrx +173 -193
- package/tests/client/return.test.tsrx +62 -37
- package/tests/client/set.test.tsrx +33 -33
- package/tests/client/svg.test.tsrx +195 -215
- package/tests/client/switch.test.tsrx +201 -191
- package/tests/client/track-async-hydration.test.tsrx +14 -18
- package/tests/client/tracked-index-access.test.tsrx +18 -28
- package/tests/client/try.test.tsrx +494 -619
- package/tests/client/tsx.test.tsrx +290 -371
- package/tests/client/typescript-generics.test.tsrx +121 -129
- package/tests/client/url/url.derived.test.tsrx +21 -25
- package/tests/client/url/url.parsing.test.tsrx +35 -35
- package/tests/client/url/url.partial-removal.test.tsrx +32 -32
- package/tests/client/url/url.reactivity.test.tsrx +68 -72
- package/tests/client/url/url.serialization.test.tsrx +8 -8
- package/tests/client/url-search-params/url-search-params.derived.test.tsrx +21 -27
- package/tests/client/url-search-params/url-search-params.initialization.test.tsrx +16 -16
- package/tests/client/url-search-params/url-search-params.iteration.test.tsrx +37 -37
- package/tests/client/url-search-params/url-search-params.mutation.test.tsrx +56 -60
- package/tests/client/url-search-params/url-search-params.retrieval.test.tsrx +32 -34
- package/tests/client/url-search-params/url-search-params.serialization.test.tsrx +9 -9
- package/tests/client/url-search-params/url-search-params.tracked-url.test.tsrx +10 -10
- package/tests/hydration/compiled/client/basic.js +396 -325
- package/tests/hydration/compiled/client/composite.js +52 -44
- package/tests/hydration/compiled/client/for.js +734 -604
- package/tests/hydration/compiled/client/head.js +183 -103
- package/tests/hydration/compiled/client/html.js +93 -86
- package/tests/hydration/compiled/client/if-children.js +95 -71
- package/tests/hydration/compiled/client/if.js +113 -89
- package/tests/hydration/compiled/client/mixed-control-flow.js +225 -209
- package/tests/hydration/compiled/client/nested-control-flow.js +94 -98
- package/tests/hydration/compiled/client/reactivity.js +26 -24
- package/tests/hydration/compiled/client/return.js +8 -42
- package/tests/hydration/compiled/client/switch.js +208 -173
- package/tests/hydration/compiled/client/track-async-serialization.js +176 -128
- package/tests/hydration/compiled/client/try.js +29 -21
- package/tests/hydration/compiled/server/basic.js +210 -221
- package/tests/hydration/compiled/server/composite.js +13 -14
- package/tests/hydration/compiled/server/for.js +427 -444
- package/tests/hydration/compiled/server/head.js +199 -189
- package/tests/hydration/compiled/server/html.js +33 -41
- package/tests/hydration/compiled/server/if-children.js +114 -117
- package/tests/hydration/compiled/server/if.js +77 -83
- package/tests/hydration/compiled/server/mixed-control-flow.js +145 -150
- package/tests/hydration/compiled/server/nested-control-flow.js +10 -0
- package/tests/hydration/compiled/server/reactivity.js +24 -22
- package/tests/hydration/compiled/server/return.js +6 -18
- package/tests/hydration/compiled/server/switch.js +179 -176
- package/tests/hydration/compiled/server/track-async-serialization.js +88 -70
- package/tests/hydration/compiled/server/try.js +31 -35
- package/tests/hydration/components/basic.tsrx +216 -286
- package/tests/hydration/components/composite.tsrx +32 -42
- package/tests/hydration/components/events.tsrx +81 -101
- package/tests/hydration/components/for.tsrx +270 -336
- package/tests/hydration/components/head.tsrx +43 -39
- package/tests/hydration/components/hmr.tsrx +16 -22
- package/tests/hydration/components/html-in-template.tsrx +15 -21
- package/tests/hydration/components/html.tsrx +442 -526
- package/tests/hydration/components/if-children.tsrx +107 -125
- package/tests/hydration/components/if.tsrx +68 -90
- package/tests/hydration/components/mixed-control-flow.tsrx +65 -72
- package/tests/hydration/components/nested-control-flow.tsrx +202 -216
- package/tests/hydration/components/portal.tsrx +33 -41
- package/tests/hydration/components/reactivity.tsrx +26 -34
- package/tests/hydration/components/return.tsrx +4 -6
- package/tests/hydration/components/switch.tsrx +73 -78
- package/tests/hydration/components/track-async-serialization.tsrx +83 -93
- package/tests/hydration/components/try.tsrx +37 -51
- package/tests/hydration/switch.test.js +8 -8
- package/tests/server/await.test.tsrx +3 -3
- package/tests/server/basic.attributes.test.tsrx +120 -167
- package/tests/server/basic.components.test.tsrx +163 -197
- package/tests/server/basic.test.tsrx +298 -220
- package/tests/server/compiler.test.tsrx +142 -72
- package/tests/server/composite.props.test.tsrx +54 -58
- package/tests/server/composite.test.tsrx +165 -167
- package/tests/server/context.test.tsrx +13 -17
- package/tests/server/dynamic-elements.test.tsrx +103 -135
- package/tests/server/for.test.tsrx +115 -84
- package/tests/server/head.test.tsrx +31 -31
- package/tests/server/html-nesting-validation.test.tsrx +16 -8
- package/tests/server/if.test.tsrx +49 -59
- package/tests/server/lazy-destructuring.test.tsrx +288 -366
- package/tests/server/return.test.tsrx +58 -36
- package/tests/server/streaming-ssr.test.tsrx +4 -4
- package/tests/server/style-identifier.test.tsrx +58 -66
- package/tests/server/switch.test.tsrx +89 -97
- package/tests/server/track-async-serialization.test.tsrx +85 -103
- package/tests/server/try.test.tsrx +275 -360
- package/tests/utils/ref-types.test.js +72 -0
- package/tests/utils/vite-plugin-config.test.js +41 -74
- package/types/index.d.ts +1 -0
- package/src/runtime/internal/client/compat.js +0 -40
- package/tests/utils/compiler-compat-config.test.js +0 -38
|
@@ -2,13 +2,13 @@ import { RippleURL, flushSync } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURL > partials/removal', () => {
|
|
4
4
|
it('handles URL with no port specified', () => {
|
|
5
|
-
function URLTest() {
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function URLTest() @{
|
|
6
|
+
const url = RippleURL('https://example.com/path');
|
|
7
|
+
<>
|
|
8
8
|
<pre>{url.port}</pre>
|
|
9
9
|
<pre>{url.host}</pre>
|
|
10
10
|
<button onClick={() => (url.port = '8080')}>{'Add Port'}</button>
|
|
11
|
-
|
|
11
|
+
</>
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
render(URLTest);
|
|
@@ -28,13 +28,13 @@ describe('RippleURL > partials/removal', () => {
|
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
it('handles URL with no search params', () => {
|
|
31
|
-
function URLTest() {
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
function URLTest() @{
|
|
32
|
+
const url = RippleURL('https://example.com/path');
|
|
33
|
+
<>
|
|
34
34
|
<pre>{url.search}</pre>
|
|
35
35
|
<pre>{url.searchParams.size}</pre>
|
|
36
36
|
<button onClick={() => url.searchParams.append('foo', 'bar')}>{'Add Param'}</button>
|
|
37
|
-
|
|
37
|
+
</>
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
render(URLTest);
|
|
@@ -54,12 +54,12 @@ describe('RippleURL > partials/removal', () => {
|
|
|
54
54
|
});
|
|
55
55
|
|
|
56
56
|
it('handles URL with no hash', () => {
|
|
57
|
-
function URLTest() {
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
function URLTest() @{
|
|
58
|
+
const url = RippleURL('https://example.com/path');
|
|
59
|
+
<>
|
|
60
60
|
<pre>{url.hash}</pre>
|
|
61
61
|
<button onClick={() => (url.hash = '#section')}>{'Add Hash'}</button>
|
|
62
|
-
|
|
62
|
+
</>
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
render(URLTest);
|
|
@@ -77,13 +77,13 @@ describe('RippleURL > partials/removal', () => {
|
|
|
77
77
|
});
|
|
78
78
|
|
|
79
79
|
it('handles removing port by setting empty string', () => {
|
|
80
|
-
function URLTest() {
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
function URLTest() @{
|
|
81
|
+
const url = RippleURL('https://example.com:8080/path');
|
|
82
|
+
<>
|
|
83
83
|
<button onClick={() => (url.port = '')}>{'Remove Port'}</button>
|
|
84
84
|
<pre>{url.href}</pre>
|
|
85
85
|
<pre>{url.port}</pre>
|
|
86
|
-
|
|
86
|
+
</>
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
render(URLTest);
|
|
@@ -103,13 +103,13 @@ describe('RippleURL > partials/removal', () => {
|
|
|
103
103
|
});
|
|
104
104
|
|
|
105
105
|
it('handles removing hash by setting empty string', () => {
|
|
106
|
-
function URLTest() {
|
|
107
|
-
|
|
108
|
-
|
|
106
|
+
function URLTest() @{
|
|
107
|
+
const url = RippleURL('https://example.com/path#section');
|
|
108
|
+
<>
|
|
109
109
|
<button onClick={() => (url.hash = '')}>{'Remove Hash'}</button>
|
|
110
110
|
<pre>{url.href}</pre>
|
|
111
111
|
<pre>{url.hash}</pre>
|
|
112
|
-
|
|
112
|
+
</>
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
render(URLTest);
|
|
@@ -131,14 +131,14 @@ describe('RippleURL > partials/removal', () => {
|
|
|
131
131
|
});
|
|
132
132
|
|
|
133
133
|
it('handles removing search by setting empty string', () => {
|
|
134
|
-
function URLTest() {
|
|
135
|
-
|
|
136
|
-
|
|
134
|
+
function URLTest() @{
|
|
135
|
+
const url = RippleURL('https://example.com/path?foo=bar');
|
|
136
|
+
<>
|
|
137
137
|
<button onClick={() => (url.search = '')}>{'Remove Search'}</button>
|
|
138
138
|
<pre>{url.href}</pre>
|
|
139
139
|
<pre>{url.search}</pre>
|
|
140
140
|
<pre>{url.searchParams.size}</pre>
|
|
141
|
-
|
|
141
|
+
</>
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
render(URLTest);
|
|
@@ -162,13 +162,13 @@ describe('RippleURL > partials/removal', () => {
|
|
|
162
162
|
});
|
|
163
163
|
|
|
164
164
|
it('handles hash without leading # character', () => {
|
|
165
|
-
function URLTest() {
|
|
166
|
-
|
|
167
|
-
|
|
165
|
+
function URLTest() @{
|
|
166
|
+
const url = RippleURL('https://example.com/path');
|
|
167
|
+
<>
|
|
168
168
|
<button onClick={() => (url.hash = 'section')}>{'Set Hash'}</button>
|
|
169
169
|
<pre>{url.hash}</pre>
|
|
170
170
|
<pre>{url.href}</pre>
|
|
171
|
-
|
|
171
|
+
</>
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
render(URLTest);
|
|
@@ -189,13 +189,13 @@ describe('RippleURL > partials/removal', () => {
|
|
|
189
189
|
});
|
|
190
190
|
|
|
191
191
|
it('handles search without leading ? character', () => {
|
|
192
|
-
function URLTest() {
|
|
193
|
-
|
|
194
|
-
|
|
192
|
+
function URLTest() @{
|
|
193
|
+
const url = RippleURL('https://example.com/path');
|
|
194
|
+
<>
|
|
195
195
|
<button onClick={() => (url.search = 'foo=bar')}>{'Set Search'}</button>
|
|
196
196
|
<pre>{url.search}</pre>
|
|
197
197
|
<pre>{url.href}</pre>
|
|
198
|
-
|
|
198
|
+
</>
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
render(URLTest);
|
|
@@ -2,14 +2,14 @@ import { RippleURL, flushSync } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURL > reactivity', () => {
|
|
4
4
|
it('handles protocol changes with reactivity', () => {
|
|
5
|
-
function URLTest() {
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function URLTest() @{
|
|
6
|
+
const url = RippleURL('https://example.com/path');
|
|
7
|
+
<>
|
|
8
8
|
<button onClick={() => (url.protocol = 'http:')}>{'Change Protocol'}</button>
|
|
9
9
|
<pre>{url.href}</pre>
|
|
10
10
|
<pre>{url.protocol}</pre>
|
|
11
11
|
<pre>{url.origin}</pre>
|
|
12
|
-
|
|
12
|
+
</>
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
render(URLTest);
|
|
@@ -31,14 +31,14 @@ describe('RippleURL > reactivity', () => {
|
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
it('handles hostname changes with reactivity', () => {
|
|
34
|
-
function URLTest() {
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
function URLTest() @{
|
|
35
|
+
const url = RippleURL('https://example.com/path');
|
|
36
|
+
<>
|
|
37
37
|
<button onClick={() => (url.hostname = 'newdomain.com')}>{'Change Hostname'}</button>
|
|
38
38
|
<pre>{url.href}</pre>
|
|
39
39
|
<pre>{url.hostname}</pre>
|
|
40
40
|
<pre>{url.host}</pre>
|
|
41
|
-
|
|
41
|
+
</>
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
render(URLTest);
|
|
@@ -60,14 +60,14 @@ describe('RippleURL > reactivity', () => {
|
|
|
60
60
|
});
|
|
61
61
|
|
|
62
62
|
it('handles port changes with reactivity', () => {
|
|
63
|
-
function URLTest() {
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
function URLTest() @{
|
|
64
|
+
const url = RippleURL('https://example.com:8080/path');
|
|
65
|
+
<>
|
|
66
66
|
<button onClick={() => (url.port = '9090')}>{'Change Port'}</button>
|
|
67
67
|
<pre>{url.href}</pre>
|
|
68
68
|
<pre>{url.port}</pre>
|
|
69
69
|
<pre>{url.host}</pre>
|
|
70
|
-
|
|
70
|
+
</>
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
render(URLTest);
|
|
@@ -89,15 +89,15 @@ describe('RippleURL > reactivity', () => {
|
|
|
89
89
|
});
|
|
90
90
|
|
|
91
91
|
it('handles host changes with reactivity', () => {
|
|
92
|
-
function URLTest() {
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
function URLTest() @{
|
|
93
|
+
const url = RippleURL('https://example.com:8080/path');
|
|
94
|
+
<>
|
|
95
95
|
<button onClick={() => (url.host = 'newdomain.com:9090')}>{'Change Host'}</button>
|
|
96
96
|
<pre>{url.href}</pre>
|
|
97
97
|
<pre>{url.host}</pre>
|
|
98
98
|
<pre>{url.hostname}</pre>
|
|
99
99
|
<pre>{url.port}</pre>
|
|
100
|
-
|
|
100
|
+
</>
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
render(URLTest);
|
|
@@ -123,13 +123,13 @@ describe('RippleURL > reactivity', () => {
|
|
|
123
123
|
});
|
|
124
124
|
|
|
125
125
|
it('handles pathname changes with reactivity', () => {
|
|
126
|
-
function URLTest() {
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
function URLTest() @{
|
|
127
|
+
const url = RippleURL('https://example.com/old-path');
|
|
128
|
+
<>
|
|
129
129
|
<button onClick={() => (url.pathname = '/new-path')}>{'Change Pathname'}</button>
|
|
130
130
|
<pre>{url.href}</pre>
|
|
131
131
|
<pre>{url.pathname}</pre>
|
|
132
|
-
|
|
132
|
+
</>
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
render(URLTest);
|
|
@@ -149,13 +149,13 @@ describe('RippleURL > reactivity', () => {
|
|
|
149
149
|
});
|
|
150
150
|
|
|
151
151
|
it('handles search changes with reactivity', () => {
|
|
152
|
-
function URLTest() {
|
|
153
|
-
|
|
154
|
-
|
|
152
|
+
function URLTest() @{
|
|
153
|
+
const url = RippleURL('https://example.com/path?foo=bar');
|
|
154
|
+
<>
|
|
155
155
|
<button onClick={() => (url.search = '?baz=qux')}>{'Change Search'}</button>
|
|
156
156
|
<pre>{url.href}</pre>
|
|
157
157
|
<pre>{url.search}</pre>
|
|
158
|
-
|
|
158
|
+
</>
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
render(URLTest);
|
|
@@ -179,13 +179,13 @@ describe('RippleURL > reactivity', () => {
|
|
|
179
179
|
});
|
|
180
180
|
|
|
181
181
|
it('handles hash changes with reactivity', () => {
|
|
182
|
-
function URLTest() {
|
|
183
|
-
|
|
184
|
-
|
|
182
|
+
function URLTest() @{
|
|
183
|
+
const url = RippleURL('https://example.com/path#section1');
|
|
184
|
+
<>
|
|
185
185
|
<button onClick={() => (url.hash = '#section2')}>{'Change Hash'}</button>
|
|
186
186
|
<pre>{url.href}</pre>
|
|
187
187
|
<pre>{url.hash}</pre>
|
|
188
|
-
|
|
188
|
+
</>
|
|
189
189
|
}
|
|
190
190
|
|
|
191
191
|
render(URLTest);
|
|
@@ -209,13 +209,13 @@ describe('RippleURL > reactivity', () => {
|
|
|
209
209
|
});
|
|
210
210
|
|
|
211
211
|
it('handles username changes with reactivity', () => {
|
|
212
|
-
function URLTest() {
|
|
213
|
-
|
|
214
|
-
|
|
212
|
+
function URLTest() @{
|
|
213
|
+
const url = RippleURL('https://user:pass@example.com/path');
|
|
214
|
+
<>
|
|
215
215
|
<button onClick={() => (url.username = 'newuser')}>{'Change Username'}</button>
|
|
216
216
|
<pre>{url.href}</pre>
|
|
217
217
|
<pre>{url.username}</pre>
|
|
218
|
-
|
|
218
|
+
</>
|
|
219
219
|
}
|
|
220
220
|
|
|
221
221
|
render(URLTest);
|
|
@@ -239,13 +239,13 @@ describe('RippleURL > reactivity', () => {
|
|
|
239
239
|
});
|
|
240
240
|
|
|
241
241
|
it('handles password changes with reactivity', () => {
|
|
242
|
-
function URLTest() {
|
|
243
|
-
|
|
244
|
-
|
|
242
|
+
function URLTest() @{
|
|
243
|
+
const url = RippleURL('https://user:pass@example.com/path');
|
|
244
|
+
<>
|
|
245
245
|
<button onClick={() => (url.password = 'newpass')}>{'Change Password'}</button>
|
|
246
246
|
<pre>{url.href}</pre>
|
|
247
247
|
<pre>{url.password}</pre>
|
|
248
|
-
|
|
248
|
+
</>
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
render(URLTest);
|
|
@@ -269,14 +269,12 @@ describe('RippleURL > reactivity', () => {
|
|
|
269
269
|
});
|
|
270
270
|
|
|
271
271
|
it('handles href changes with reactivity', () => {
|
|
272
|
-
function URLTest() {
|
|
273
|
-
|
|
274
|
-
|
|
272
|
+
function URLTest() @{
|
|
273
|
+
const url = RippleURL('https://example.com/path?foo=bar#section');
|
|
274
|
+
<>
|
|
275
275
|
<button
|
|
276
276
|
onClick={() => (url.href = 'https://newdomain.com:9090/newpath?baz=qux#newsection')}
|
|
277
|
-
>
|
|
278
|
-
{'Change Href'}
|
|
279
|
-
</button>
|
|
277
|
+
>{'Change Href'}</button>
|
|
280
278
|
<pre>{url.href}</pre>
|
|
281
279
|
<pre>{url.protocol}</pre>
|
|
282
280
|
<pre>{url.hostname}</pre>
|
|
@@ -284,7 +282,7 @@ describe('RippleURL > reactivity', () => {
|
|
|
284
282
|
<pre>{url.pathname}</pre>
|
|
285
283
|
<pre>{url.search}</pre>
|
|
286
284
|
<pre>{url.hash}</pre>
|
|
287
|
-
|
|
285
|
+
</>
|
|
288
286
|
}
|
|
289
287
|
|
|
290
288
|
render(URLTest);
|
|
@@ -318,14 +316,14 @@ describe('RippleURL > reactivity', () => {
|
|
|
318
316
|
});
|
|
319
317
|
|
|
320
318
|
it('handles origin property reactivity', () => {
|
|
321
|
-
function URLTest() {
|
|
322
|
-
|
|
323
|
-
|
|
319
|
+
function URLTest() @{
|
|
320
|
+
const url = RippleURL('https://example.com:8080/path');
|
|
321
|
+
<>
|
|
324
322
|
<button onClick={() => (url.protocol = 'http:')}>{'Change Protocol'}</button>
|
|
325
323
|
<button onClick={() => (url.hostname = 'newdomain.com')}>{'Change Hostname'}</button>
|
|
326
324
|
<button onClick={() => (url.port = '9090')}>{'Change Port'}</button>
|
|
327
325
|
<pre>{url.origin}</pre>
|
|
328
|
-
|
|
326
|
+
</>
|
|
329
327
|
}
|
|
330
328
|
|
|
331
329
|
render(URLTest);
|
|
@@ -351,16 +349,16 @@ describe('RippleURL > reactivity', () => {
|
|
|
351
349
|
expect(container.querySelector('pre').textContent).toBe('http://newdomain.com:9090');
|
|
352
350
|
});
|
|
353
351
|
it('handles searchParams changes with reactivity', () => {
|
|
354
|
-
function URLTest() {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
352
|
+
function URLTest() @{
|
|
353
|
+
const url = RippleURL('https://example.com/path?foo=bar');
|
|
354
|
+
const params = url.searchParams;
|
|
355
|
+
<>
|
|
358
356
|
<button onClick={() => params.set('foo', 'updated')}>{'Update Foo'}</button>
|
|
359
357
|
<button onClick={() => params.append('baz', 'qux')}>{'Add Baz'}</button>
|
|
360
358
|
<pre>{url.href}</pre>
|
|
361
359
|
<pre>{url.search}</pre>
|
|
362
360
|
<pre>{params.get('foo')}</pre>
|
|
363
|
-
|
|
361
|
+
</>
|
|
364
362
|
}
|
|
365
363
|
|
|
366
364
|
render(URLTest);
|
|
@@ -396,17 +394,17 @@ describe('RippleURL > reactivity', () => {
|
|
|
396
394
|
});
|
|
397
395
|
|
|
398
396
|
it('handles search property updates reflected in searchParams', () => {
|
|
399
|
-
function URLTest() {
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
397
|
+
function URLTest() @{
|
|
398
|
+
const url = RippleURL('https://example.com/path?foo=bar');
|
|
399
|
+
const params = url.searchParams;
|
|
400
|
+
<>
|
|
403
401
|
<button onClick={() => (url.search = '?baz=qux&test=value')}>{'Change Search'}</button>
|
|
404
402
|
<pre>{url.search}</pre>
|
|
405
403
|
<pre>{params.get('foo')}</pre>
|
|
406
404
|
<pre>{params.get('baz')}</pre>
|
|
407
405
|
<pre>{params.get('test')}</pre>
|
|
408
406
|
<pre>{params.size}</pre>
|
|
409
|
-
|
|
407
|
+
</>
|
|
410
408
|
}
|
|
411
409
|
|
|
412
410
|
render(URLTest);
|
|
@@ -432,9 +430,9 @@ describe('RippleURL > reactivity', () => {
|
|
|
432
430
|
});
|
|
433
431
|
|
|
434
432
|
it('handles multiple URL property changes in sequence', () => {
|
|
435
|
-
function URLTest() {
|
|
436
|
-
|
|
437
|
-
|
|
433
|
+
function URLTest() @{
|
|
434
|
+
const url = RippleURL('https://example.com/path');
|
|
435
|
+
<>
|
|
438
436
|
<button
|
|
439
437
|
onClick={() => {
|
|
440
438
|
url.protocol = 'http:';
|
|
@@ -444,11 +442,9 @@ describe('RippleURL > reactivity', () => {
|
|
|
444
442
|
url.search = '?key=value';
|
|
445
443
|
url.hash = '#section';
|
|
446
444
|
}}
|
|
447
|
-
>
|
|
448
|
-
{'Change All'}
|
|
449
|
-
</button>
|
|
445
|
+
>{'Change All'}</button>
|
|
450
446
|
<pre>{url.href}</pre>
|
|
451
|
-
|
|
447
|
+
</>
|
|
452
448
|
}
|
|
453
449
|
|
|
454
450
|
render(URLTest);
|
|
@@ -468,18 +464,18 @@ describe('RippleURL > reactivity', () => {
|
|
|
468
464
|
});
|
|
469
465
|
|
|
470
466
|
it('handles href change updates all properties and searchParams', () => {
|
|
471
|
-
function URLTest() {
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
<button
|
|
476
|
-
{
|
|
477
|
-
</button>
|
|
467
|
+
function URLTest() @{
|
|
468
|
+
const url = RippleURL('https://old.com/old?foo=bar#old');
|
|
469
|
+
const params = url.searchParams;
|
|
470
|
+
<>
|
|
471
|
+
<button
|
|
472
|
+
onClick={() => (url.href = 'https://new.com:9090/new?baz=qux#new')}
|
|
473
|
+
>{'Change Href'}</button>
|
|
478
474
|
<pre>{params.get('foo')}</pre>
|
|
479
475
|
<pre>{params.get('baz')}</pre>
|
|
480
476
|
<pre>{params.size}</pre>
|
|
481
477
|
<pre>{url.pathname}</pre>
|
|
482
|
-
|
|
478
|
+
</>
|
|
483
479
|
}
|
|
484
480
|
|
|
485
481
|
render(URLTest);
|
|
@@ -2,12 +2,12 @@ import { RippleURL, flushSync } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURL > serialization', () => {
|
|
4
4
|
it('handles toString method', () => {
|
|
5
|
-
function URLTest() {
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function URLTest() @{
|
|
6
|
+
const url = RippleURL('https://example.com/path?foo=bar#section');
|
|
7
|
+
<>
|
|
8
8
|
<button onClick={() => (url.pathname = '/newpath')}>{'Change Pathname'}</button>
|
|
9
9
|
<pre>{url.toString()}</pre>
|
|
10
|
-
|
|
10
|
+
</>
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
render(URLTest);
|
|
@@ -29,13 +29,13 @@ describe('RippleURL > serialization', () => {
|
|
|
29
29
|
});
|
|
30
30
|
|
|
31
31
|
it('handles toJSON method', () => {
|
|
32
|
-
function URLTest() {
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
function URLTest() @{
|
|
33
|
+
const url = RippleURL('https://example.com/path?foo=bar');
|
|
34
|
+
<>
|
|
35
35
|
<button onClick={() => (url.pathname = '/api')}>{'Change Pathname'}</button>
|
|
36
36
|
<pre>{url.toJSON()}</pre>
|
|
37
37
|
<pre>{JSON.stringify({ url: url.toJSON() })}</pre>
|
|
38
|
-
|
|
38
|
+
</>
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
render(URLTest);
|
|
@@ -2,18 +2,18 @@ import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURLSearchParams > derived', () => {
|
|
4
4
|
it('handles reactive computed properties based on search params', () => {
|
|
5
|
-
function URLTest() {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
function URLTest() @{
|
|
6
|
+
const params = RippleURLSearchParams('page=1&limit=10');
|
|
7
|
+
let &[page] = track(() => parseInt(params.get('page') || '1', 10));
|
|
8
|
+
let &[limit] = track(() => parseInt(params.get('limit') || '10', 10));
|
|
9
|
+
let &[offset] = track(() => (page - 1) * limit);
|
|
10
|
+
<>
|
|
11
11
|
<button onClick={() => params.set('page', '2')}>{'next page'}</button>
|
|
12
12
|
<button onClick={() => params.set('page', '1')}>{'first page'}</button>
|
|
13
13
|
<pre>{`Page: ${page}`}</pre>
|
|
14
14
|
<pre>{`Limit: ${limit}`}</pre>
|
|
15
15
|
<pre>{`Offset: ${offset}`}</pre>
|
|
16
|
-
|
|
16
|
+
</>
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
render(URLTest);
|
|
@@ -44,32 +44,26 @@ describe('RippleURLSearchParams > derived', () => {
|
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
it('maintains reactivity across multiple components', () => {
|
|
47
|
-
function ParentTest() {
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
function ParentTest() @{
|
|
48
|
+
const params = RippleURLSearchParams('count=0');
|
|
49
|
+
<>
|
|
50
50
|
<ChildA {params} />
|
|
51
51
|
<ChildB {params} />
|
|
52
|
-
|
|
52
|
+
</>
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
function ChildA({ params }: { params: RippleURLSearchParams }) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
>
|
|
63
|
-
{'increment'}
|
|
64
|
-
</button>
|
|
65
|
-
</>;
|
|
55
|
+
function ChildA({ params }: { params: RippleURLSearchParams }) @{
|
|
56
|
+
<button
|
|
57
|
+
onClick={() => {
|
|
58
|
+
const current = parseInt(params.get('count') || '0', 10);
|
|
59
|
+
params.set('count', String(current + 1));
|
|
60
|
+
}}
|
|
61
|
+
>{'increment'}</button>
|
|
66
62
|
}
|
|
67
63
|
|
|
68
|
-
function ChildB({ params }: { params: RippleURLSearchParams }) {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<pre>{count}</pre>
|
|
72
|
-
</>;
|
|
64
|
+
function ChildB({ params }: { params: RippleURLSearchParams }) @{
|
|
65
|
+
let &[count] = track(() => params.get('count'));
|
|
66
|
+
<pre>{count}</pre>
|
|
73
67
|
}
|
|
74
68
|
|
|
75
69
|
render(ParentTest);
|
|
@@ -2,12 +2,12 @@ import { RippleURL, RippleURLSearchParams } from 'ripple';
|
|
|
2
2
|
|
|
3
3
|
describe('RippleURLSearchParams > initialization', () => {
|
|
4
4
|
it('creates empty URLSearchParams with reactivity', () => {
|
|
5
|
-
function URLTest() {
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function URLTest() @{
|
|
6
|
+
const params = RippleURLSearchParams();
|
|
7
|
+
<>
|
|
8
8
|
<pre>{params.toString()}</pre>
|
|
9
9
|
<pre>{params.size}</pre>
|
|
10
|
-
|
|
10
|
+
</>
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
render(URLTest);
|
|
@@ -17,13 +17,13 @@ describe('RippleURLSearchParams > initialization', () => {
|
|
|
17
17
|
});
|
|
18
18
|
|
|
19
19
|
it('creates URLSearchParams from string with reactivity', () => {
|
|
20
|
-
function URLTest() {
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
function URLTest() @{
|
|
21
|
+
const params = RippleURLSearchParams('foo=bar&baz=qux');
|
|
22
|
+
<>
|
|
23
23
|
<pre>{params.toString()}</pre>
|
|
24
24
|
<pre>{params.size}</pre>
|
|
25
25
|
<pre>{params.get('foo')}</pre>
|
|
26
|
-
|
|
26
|
+
</>
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
render(URLTest);
|
|
@@ -34,12 +34,12 @@ describe('RippleURLSearchParams > initialization', () => {
|
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
it('creates URLSearchParams from object with reactivity', () => {
|
|
37
|
-
function URLTest() {
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
function URLTest() @{
|
|
38
|
+
const params = RippleURLSearchParams({ foo: 'bar', baz: 'qux' });
|
|
39
|
+
<>
|
|
40
40
|
<pre>{params.toString()}</pre>
|
|
41
41
|
<pre>{params.size}</pre>
|
|
42
|
-
|
|
42
|
+
</>
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
render(URLTest);
|
|
@@ -49,12 +49,12 @@ describe('RippleURLSearchParams > initialization', () => {
|
|
|
49
49
|
});
|
|
50
50
|
|
|
51
51
|
it('handles URL-encoded characters correctly', () => {
|
|
52
|
-
function URLTest() {
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
function URLTest() @{
|
|
53
|
+
const params = RippleURLSearchParams('name=John+Doe&email=john%40example.com');
|
|
54
|
+
<>
|
|
55
55
|
<pre>{params.get('name')}</pre>
|
|
56
56
|
<pre>{params.get('email')}</pre>
|
|
57
|
-
|
|
57
|
+
</>
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
render(URLTest);
|