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.
Files changed (165) hide show
  1. package/CHANGELOG.md +75 -0
  2. package/package.json +3 -3
  3. package/src/jsx-runtime.d.ts +2 -8
  4. package/src/runtime/index-client.js +3 -13
  5. package/src/runtime/internal/client/blocks.js +3 -25
  6. package/src/runtime/internal/client/for.js +80 -5
  7. package/src/runtime/internal/client/index.js +0 -2
  8. package/src/runtime/internal/client/types.d.ts +0 -10
  9. package/tests/client/__snapshots__/computed-properties.test.tsrx.snap +8 -0
  10. package/tests/client/__snapshots__/for.test.tsrx.snap +22 -0
  11. package/tests/client/__snapshots__/html.test.tsrx.snap +4 -0
  12. package/tests/client/array/array.copy-within.test.tsrx +19 -19
  13. package/tests/client/array/array.derived.test.tsrx +97 -109
  14. package/tests/client/array/array.iteration.test.tsrx +28 -28
  15. package/tests/client/array/array.mutations.test.tsrx +68 -68
  16. package/tests/client/array/array.static.test.tsrx +82 -92
  17. package/tests/client/array/array.to-methods.test.tsrx +15 -15
  18. package/tests/client/async-suspend.test.tsrx +180 -179
  19. package/tests/client/basic/__snapshots__/basic.attributes.test.tsrx.snap +2 -0
  20. package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap +4 -0
  21. package/tests/client/basic/basic.attributes.test.tsrx +273 -317
  22. package/tests/client/basic/basic.collections.test.tsrx +59 -71
  23. package/tests/client/basic/basic.components.test.tsrx +196 -222
  24. package/tests/client/basic/basic.errors.test.tsrx +72 -78
  25. package/tests/client/basic/basic.events.test.tsrx +80 -85
  26. package/tests/client/basic/basic.get-set.test.tsrx +54 -64
  27. package/tests/client/basic/basic.hmr.test.tsrx +15 -19
  28. package/tests/client/basic/basic.reactivity.test.tsrx +121 -135
  29. package/tests/client/basic/basic.rendering.test.tsrx +273 -178
  30. package/tests/client/basic/basic.utilities.test.tsrx +8 -10
  31. package/tests/client/boundaries.test.tsrx +18 -18
  32. package/tests/client/compiler/compiler.assignments.test.tsrx +77 -76
  33. package/tests/client/compiler/compiler.attributes.test.tsrx +18 -14
  34. package/tests/client/compiler/compiler.basic.test.tsrx +364 -296
  35. package/tests/client/compiler/compiler.regex.test.tsrx +40 -44
  36. package/tests/client/compiler/compiler.tracked-access.test.tsrx +57 -38
  37. package/tests/client/compiler/compiler.try-in-function.test.tsrx +16 -16
  38. package/tests/client/compiler/compiler.typescript.test.tsrx +4 -3
  39. package/tests/client/composite/composite.dynamic-components.test.tsrx +41 -44
  40. package/tests/client/composite/composite.generics.test.tsrx +165 -167
  41. package/tests/client/composite/composite.props.test.tsrx +66 -74
  42. package/tests/client/composite/composite.reactivity.test.tsrx +132 -166
  43. package/tests/client/composite/composite.render.test.tsrx +92 -101
  44. package/tests/client/computed-properties.test.tsrx +14 -18
  45. package/tests/client/context.test.tsrx +14 -18
  46. package/tests/client/css/global-additional-cases.test.tsrx +491 -437
  47. package/tests/client/css/global-advanced-selectors.test.tsrx +169 -153
  48. package/tests/client/css/global-at-rules.test.tsrx +71 -66
  49. package/tests/client/css/global-basic.test.tsrx +105 -98
  50. package/tests/client/css/global-classes-ids.test.tsrx +128 -114
  51. package/tests/client/css/global-combinators.test.tsrx +83 -78
  52. package/tests/client/css/global-complex-nesting.test.tsrx +134 -120
  53. package/tests/client/css/global-edge-cases.test.tsrx +138 -120
  54. package/tests/client/css/global-keyframes.test.tsrx +108 -96
  55. package/tests/client/css/global-nested.test.tsrx +88 -78
  56. package/tests/client/css/global-pseudo.test.tsrx +104 -98
  57. package/tests/client/css/global-scoping.test.tsrx +145 -125
  58. package/tests/client/css/style-identifier.test.tsrx +62 -69
  59. package/tests/client/date.test.tsrx +83 -83
  60. package/tests/client/dynamic-elements.test.tsrx +227 -283
  61. package/tests/client/events.test.tsrx +252 -266
  62. package/tests/client/for.test.tsrx +120 -127
  63. package/tests/client/head.test.tsrx +40 -48
  64. package/tests/client/html.test.tsrx +37 -49
  65. package/tests/client/input-value.test.tsrx +1125 -1354
  66. package/tests/client/lazy-array.test.tsrx +10 -16
  67. package/tests/client/lazy-destructuring.test.tsrx +169 -221
  68. package/tests/client/map.test.tsrx +39 -41
  69. package/tests/client/media-query.test.tsrx +15 -19
  70. package/tests/client/object.test.tsrx +46 -56
  71. package/tests/client/portal.test.tsrx +31 -37
  72. package/tests/client/ref.test.tsrx +173 -193
  73. package/tests/client/return.test.tsrx +62 -37
  74. package/tests/client/set.test.tsrx +33 -33
  75. package/tests/client/svg.test.tsrx +195 -215
  76. package/tests/client/switch.test.tsrx +201 -191
  77. package/tests/client/track-async-hydration.test.tsrx +14 -18
  78. package/tests/client/tracked-index-access.test.tsrx +18 -28
  79. package/tests/client/try.test.tsrx +494 -619
  80. package/tests/client/tsx.test.tsrx +290 -371
  81. package/tests/client/typescript-generics.test.tsrx +121 -129
  82. package/tests/client/url/url.derived.test.tsrx +21 -25
  83. package/tests/client/url/url.parsing.test.tsrx +35 -35
  84. package/tests/client/url/url.partial-removal.test.tsrx +32 -32
  85. package/tests/client/url/url.reactivity.test.tsrx +68 -72
  86. package/tests/client/url/url.serialization.test.tsrx +8 -8
  87. package/tests/client/url-search-params/url-search-params.derived.test.tsrx +21 -27
  88. package/tests/client/url-search-params/url-search-params.initialization.test.tsrx +16 -16
  89. package/tests/client/url-search-params/url-search-params.iteration.test.tsrx +37 -37
  90. package/tests/client/url-search-params/url-search-params.mutation.test.tsrx +56 -60
  91. package/tests/client/url-search-params/url-search-params.retrieval.test.tsrx +32 -34
  92. package/tests/client/url-search-params/url-search-params.serialization.test.tsrx +9 -9
  93. package/tests/client/url-search-params/url-search-params.tracked-url.test.tsrx +10 -10
  94. package/tests/hydration/compiled/client/basic.js +396 -325
  95. package/tests/hydration/compiled/client/composite.js +52 -44
  96. package/tests/hydration/compiled/client/for.js +734 -604
  97. package/tests/hydration/compiled/client/head.js +183 -103
  98. package/tests/hydration/compiled/client/html.js +93 -86
  99. package/tests/hydration/compiled/client/if-children.js +95 -71
  100. package/tests/hydration/compiled/client/if.js +113 -89
  101. package/tests/hydration/compiled/client/mixed-control-flow.js +225 -209
  102. package/tests/hydration/compiled/client/nested-control-flow.js +94 -98
  103. package/tests/hydration/compiled/client/reactivity.js +26 -24
  104. package/tests/hydration/compiled/client/return.js +8 -42
  105. package/tests/hydration/compiled/client/switch.js +208 -173
  106. package/tests/hydration/compiled/client/track-async-serialization.js +176 -128
  107. package/tests/hydration/compiled/client/try.js +29 -21
  108. package/tests/hydration/compiled/server/basic.js +210 -221
  109. package/tests/hydration/compiled/server/composite.js +13 -14
  110. package/tests/hydration/compiled/server/for.js +427 -444
  111. package/tests/hydration/compiled/server/head.js +199 -189
  112. package/tests/hydration/compiled/server/html.js +33 -41
  113. package/tests/hydration/compiled/server/if-children.js +114 -117
  114. package/tests/hydration/compiled/server/if.js +77 -83
  115. package/tests/hydration/compiled/server/mixed-control-flow.js +145 -150
  116. package/tests/hydration/compiled/server/nested-control-flow.js +10 -0
  117. package/tests/hydration/compiled/server/reactivity.js +24 -22
  118. package/tests/hydration/compiled/server/return.js +6 -18
  119. package/tests/hydration/compiled/server/switch.js +179 -176
  120. package/tests/hydration/compiled/server/track-async-serialization.js +88 -70
  121. package/tests/hydration/compiled/server/try.js +31 -35
  122. package/tests/hydration/components/basic.tsrx +216 -286
  123. package/tests/hydration/components/composite.tsrx +32 -42
  124. package/tests/hydration/components/events.tsrx +81 -101
  125. package/tests/hydration/components/for.tsrx +270 -336
  126. package/tests/hydration/components/head.tsrx +43 -39
  127. package/tests/hydration/components/hmr.tsrx +16 -22
  128. package/tests/hydration/components/html-in-template.tsrx +15 -21
  129. package/tests/hydration/components/html.tsrx +442 -526
  130. package/tests/hydration/components/if-children.tsrx +107 -125
  131. package/tests/hydration/components/if.tsrx +68 -90
  132. package/tests/hydration/components/mixed-control-flow.tsrx +65 -72
  133. package/tests/hydration/components/nested-control-flow.tsrx +202 -216
  134. package/tests/hydration/components/portal.tsrx +33 -41
  135. package/tests/hydration/components/reactivity.tsrx +26 -34
  136. package/tests/hydration/components/return.tsrx +4 -6
  137. package/tests/hydration/components/switch.tsrx +73 -78
  138. package/tests/hydration/components/track-async-serialization.tsrx +83 -93
  139. package/tests/hydration/components/try.tsrx +37 -51
  140. package/tests/hydration/switch.test.js +8 -8
  141. package/tests/server/await.test.tsrx +3 -3
  142. package/tests/server/basic.attributes.test.tsrx +120 -167
  143. package/tests/server/basic.components.test.tsrx +163 -197
  144. package/tests/server/basic.test.tsrx +298 -220
  145. package/tests/server/compiler.test.tsrx +142 -72
  146. package/tests/server/composite.props.test.tsrx +54 -58
  147. package/tests/server/composite.test.tsrx +165 -167
  148. package/tests/server/context.test.tsrx +13 -17
  149. package/tests/server/dynamic-elements.test.tsrx +103 -135
  150. package/tests/server/for.test.tsrx +115 -84
  151. package/tests/server/head.test.tsrx +31 -31
  152. package/tests/server/html-nesting-validation.test.tsrx +16 -8
  153. package/tests/server/if.test.tsrx +49 -59
  154. package/tests/server/lazy-destructuring.test.tsrx +288 -366
  155. package/tests/server/return.test.tsrx +58 -36
  156. package/tests/server/streaming-ssr.test.tsrx +4 -4
  157. package/tests/server/style-identifier.test.tsrx +58 -66
  158. package/tests/server/switch.test.tsrx +89 -97
  159. package/tests/server/track-async-serialization.test.tsrx +85 -103
  160. package/tests/server/try.test.tsrx +275 -360
  161. package/tests/utils/ref-types.test.js +72 -0
  162. package/tests/utils/vite-plugin-config.test.js +41 -74
  163. package/types/index.d.ts +1 -0
  164. package/src/runtime/internal/client/compat.js +0 -40
  165. 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
- return <>
7
- const url = RippleURL('https://example.com/path');
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
- return <>
33
- const url = RippleURL('https://example.com/path');
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
- return <>
59
- const url = RippleURL('https://example.com/path');
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
- return <>
82
- const url = RippleURL('https://example.com:8080/path');
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
- return <>
108
- const url = RippleURL('https://example.com/path#section');
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
- return <>
136
- const url = RippleURL('https://example.com/path?foo=bar');
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
- return <>
167
- const url = RippleURL('https://example.com/path');
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
- return <>
194
- const url = RippleURL('https://example.com/path');
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
- return <>
7
- const url = RippleURL('https://example.com/path');
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
- return <>
36
- const url = RippleURL('https://example.com/path');
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
- return <>
65
- const url = RippleURL('https://example.com:8080/path');
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
- return <>
94
- const url = RippleURL('https://example.com:8080/path');
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
- return <>
128
- const url = RippleURL('https://example.com/old-path');
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
- return <>
154
- const url = RippleURL('https://example.com/path?foo=bar');
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
- return <>
184
- const url = RippleURL('https://example.com/path#section1');
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
- return <>
214
- const url = RippleURL('https://user:pass@example.com/path');
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
- return <>
244
- const url = RippleURL('https://user:pass@example.com/path');
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
- return <>
274
- const url = RippleURL('https://example.com/path?foo=bar#section');
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
- return <>
323
- const url = RippleURL('https://example.com:8080/path');
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
- return <>
356
- const url = RippleURL('https://example.com/path?foo=bar');
357
- const params = url.searchParams;
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
- return <>
401
- const url = RippleURL('https://example.com/path?foo=bar');
402
- const params = url.searchParams;
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
- return <>
437
- const url = RippleURL('https://example.com/path');
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
- return <>
473
- const url = RippleURL('https://old.com/old?foo=bar#old');
474
- const params = url.searchParams;
475
- <button onClick={() => (url.href = 'https://new.com:9090/new?baz=qux#new')}>
476
- {'Change Href'}
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
- return <>
7
- const url = RippleURL('https://example.com/path?foo=bar#section');
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
- return <>
34
- const url = RippleURL('https://example.com/path?foo=bar');
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
- return <>
7
- const params = RippleURLSearchParams('page=1&limit=10');
8
- let &[page] = track(() => parseInt(params.get('page') || '1', 10));
9
- let &[limit] = track(() => parseInt(params.get('limit') || '10', 10));
10
- let &[offset] = track(() => (page - 1) * limit);
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
- return <>
49
- const params = RippleURLSearchParams('count=0');
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
- return <>
57
- <button
58
- onClick={() => {
59
- const current = parseInt(params.get('count') || '0', 10);
60
- params.set('count', String(current + 1));
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
- return <>
70
- let &[count] = track(() => params.get('count'));
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
- return <>
7
- const params = RippleURLSearchParams();
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
- return <>
22
- const params = RippleURLSearchParams('foo=bar&baz=qux');
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
- return <>
39
- const params = RippleURLSearchParams({ foo: 'bar', baz: 'qux' });
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
- return <>
54
- const params = RippleURLSearchParams('name=John+Doe&email=john%40example.com');
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);