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.
Files changed (182) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/package.json +3 -3
  3. package/src/jsx-runtime.d.ts +2 -2
  4. package/src/runtime/element.js +1 -1
  5. package/src/runtime/index-client.js +11 -11
  6. package/src/runtime/index-server.js +7 -4
  7. package/src/runtime/internal/client/bindings.js +1 -1
  8. package/src/runtime/internal/client/blocks.js +13 -4
  9. package/src/runtime/internal/client/component.js +55 -0
  10. package/src/runtime/internal/client/composite.js +4 -2
  11. package/src/runtime/internal/client/expression.js +65 -7
  12. package/src/runtime/internal/client/hmr.js +54 -43
  13. package/src/runtime/internal/client/index.js +5 -1
  14. package/src/runtime/internal/client/portal.js +70 -69
  15. package/src/runtime/internal/client/render.js +3 -0
  16. package/src/runtime/internal/server/index.js +92 -8
  17. package/tests/client/__snapshots__/html.test.tsrx.snap +3 -3
  18. package/tests/client/array/array.copy-within.test.tsrx +33 -31
  19. package/tests/client/array/array.derived.test.tsrx +186 -169
  20. package/tests/client/array/array.iteration.test.tsrx +40 -37
  21. package/tests/client/array/array.mutations.test.tsrx +113 -101
  22. package/tests/client/array/array.static.test.tsrx +119 -101
  23. package/tests/client/array/array.to-methods.test.tsrx +24 -21
  24. package/tests/client/async-suspend.test.tsrx +247 -246
  25. package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap +0 -1
  26. package/tests/client/basic/basic.attributes.test.tsrx +428 -423
  27. package/tests/client/basic/basic.collections.test.tsrx +109 -102
  28. package/tests/client/basic/basic.components.test.tsrx +323 -205
  29. package/tests/client/basic/basic.errors.test.tsrx +91 -91
  30. package/tests/client/basic/basic.events.test.tsrx +114 -115
  31. package/tests/client/basic/basic.get-set.test.tsrx +97 -87
  32. package/tests/client/basic/basic.hmr.test.tsrx +19 -16
  33. package/tests/client/basic/basic.reactivity.test.tsrx +199 -191
  34. package/tests/client/basic/basic.rendering.test.tsrx +272 -182
  35. package/tests/client/basic/basic.styling.test.tsrx +23 -22
  36. package/tests/client/basic/basic.utilities.test.tsrx +10 -8
  37. package/tests/client/boundaries.test.tsrx +26 -26
  38. package/tests/client/compiler/__snapshots__/compiler.assignments.test.rsrx.snap +5 -5
  39. package/tests/client/compiler/__snapshots__/compiler.assignments.test.tsrx.snap +5 -5
  40. package/tests/client/compiler/compiler.assignments.test.tsrx +77 -81
  41. package/tests/client/compiler/compiler.attributes.test.tsrx +15 -15
  42. package/tests/client/compiler/compiler.basic.test.tsrx +322 -314
  43. package/tests/client/compiler/compiler.regex.test.tsrx +44 -47
  44. package/tests/client/compiler/compiler.tracked-access.test.tsrx +38 -38
  45. package/tests/client/compiler/compiler.try-in-function.test.tsrx +16 -16
  46. package/tests/client/compiler/compiler.typescript.test.tsrx +2 -2
  47. package/tests/client/composite/composite.dynamic-components.test.tsrx +47 -48
  48. package/tests/client/composite/composite.generics.test.tsrx +168 -192
  49. package/tests/client/composite/composite.props.test.tsrx +97 -81
  50. package/tests/client/composite/composite.reactivity.test.tsrx +177 -147
  51. package/tests/client/composite/composite.render.test.tsrx +122 -105
  52. package/tests/client/computed-properties.test.tsrx +28 -28
  53. package/tests/client/context.test.tsrx +21 -21
  54. package/tests/client/css/global-additional-cases.test.tsrx +58 -58
  55. package/tests/client/css/global-advanced-selectors.test.tsrx +16 -16
  56. package/tests/client/css/global-at-rules.test.tsrx +10 -10
  57. package/tests/client/css/global-basic.test.tsrx +14 -14
  58. package/tests/client/css/global-classes-ids.test.tsrx +14 -14
  59. package/tests/client/css/global-combinators.test.tsrx +10 -10
  60. package/tests/client/css/global-complex-nesting.test.tsrx +14 -14
  61. package/tests/client/css/global-edge-cases.test.tsrx +18 -18
  62. package/tests/client/css/global-keyframes.test.tsrx +12 -12
  63. package/tests/client/css/global-nested.test.tsrx +10 -10
  64. package/tests/client/css/global-pseudo.test.tsrx +12 -12
  65. package/tests/client/css/global-scoping.test.tsrx +20 -20
  66. package/tests/client/css/style-identifier.test.tsrx +143 -291
  67. package/tests/client/date.test.tsrx +146 -133
  68. package/tests/client/dynamic-elements.test.tsrx +398 -365
  69. package/tests/client/events.test.tsrx +292 -290
  70. package/tests/client/for.test.tsrx +156 -153
  71. package/tests/client/head.test.tsrx +105 -96
  72. package/tests/client/html.test.tsrx +122 -26
  73. package/tests/client/input-value.test.tsrx +1361 -1314
  74. package/tests/client/lazy-array.test.tsrx +16 -13
  75. package/tests/client/lazy-destructuring.test.tsrx +257 -213
  76. package/tests/client/map.test.tsrx +65 -60
  77. package/tests/client/media-query.test.tsrx +22 -20
  78. package/tests/client/object.test.tsrx +87 -81
  79. package/tests/client/portal.test.tsrx +57 -51
  80. package/tests/client/ref.test.tsrx +233 -202
  81. package/tests/client/return.test.tsrx +71 -2560
  82. package/tests/client/set.test.tsrx +54 -45
  83. package/tests/client/svg.test.tsrx +216 -186
  84. package/tests/client/switch.test.tsrx +194 -193
  85. package/tests/client/track-async-hydration.test.tsrx +18 -14
  86. package/tests/client/tracked-index-access.test.tsrx +28 -18
  87. package/tests/client/try.test.tsrx +675 -548
  88. package/tests/client/tsx.test.tsrx +373 -311
  89. package/tests/client/typescript-generics.test.tsrx +145 -145
  90. package/tests/client/url/url.derived.test.tsrx +33 -28
  91. package/tests/client/url/url.parsing.test.tsrx +61 -51
  92. package/tests/client/url/url.partial-removal.test.tsrx +56 -48
  93. package/tests/client/url/url.reactivity.test.tsrx +142 -125
  94. package/tests/client/url/url.serialization.test.tsrx +13 -11
  95. package/tests/client/url-search-params/url-search-params.derived.test.tsrx +34 -29
  96. package/tests/client/url-search-params/url-search-params.initialization.test.tsrx +25 -21
  97. package/tests/client/url-search-params/url-search-params.iteration.test.tsrx +50 -45
  98. package/tests/client/url-search-params/url-search-params.mutation.test.tsrx +111 -99
  99. package/tests/client/url-search-params/url-search-params.retrieval.test.tsrx +49 -43
  100. package/tests/client/url-search-params/url-search-params.serialization.test.tsrx +14 -12
  101. package/tests/client/url-search-params/url-search-params.tracked-url.test.tsrx +16 -14
  102. package/tests/hydration/basic.test.js +3 -3
  103. package/tests/hydration/compiled/client/basic.js +586 -651
  104. package/tests/hydration/compiled/client/composite.js +79 -104
  105. package/tests/hydration/compiled/client/events.js +140 -148
  106. package/tests/hydration/compiled/client/for.js +1005 -1018
  107. package/tests/hydration/compiled/client/head.js +124 -134
  108. package/tests/hydration/compiled/client/hmr.js +41 -48
  109. package/tests/hydration/compiled/client/html-in-template.js +38 -41
  110. package/tests/hydration/compiled/client/html.js +970 -1314
  111. package/tests/hydration/compiled/client/if-children.js +234 -249
  112. package/tests/hydration/compiled/client/if.js +182 -189
  113. package/tests/hydration/compiled/client/mixed-control-flow.js +347 -303
  114. package/tests/hydration/compiled/client/nested-control-flow.js +1084 -832
  115. package/tests/hydration/compiled/client/portal.js +65 -85
  116. package/tests/hydration/compiled/client/reactivity.js +84 -90
  117. package/tests/hydration/compiled/client/return.js +38 -1939
  118. package/tests/hydration/compiled/client/switch.js +218 -224
  119. package/tests/hydration/compiled/client/track-async-serialization.js +250 -259
  120. package/tests/hydration/compiled/client/try.js +123 -132
  121. package/tests/hydration/compiled/server/basic.js +773 -831
  122. package/tests/hydration/compiled/server/composite.js +166 -191
  123. package/tests/hydration/compiled/server/events.js +170 -184
  124. package/tests/hydration/compiled/server/for.js +851 -909
  125. package/tests/hydration/compiled/server/head.js +206 -216
  126. package/tests/hydration/compiled/server/hmr.js +64 -72
  127. package/tests/hydration/compiled/server/html-in-template.js +42 -76
  128. package/tests/hydration/compiled/server/html.js +1362 -1667
  129. package/tests/hydration/compiled/server/if-children.js +419 -445
  130. package/tests/hydration/compiled/server/if.js +194 -208
  131. package/tests/hydration/compiled/server/mixed-control-flow.js +249 -257
  132. package/tests/hydration/compiled/server/nested-control-flow.js +491 -515
  133. package/tests/hydration/compiled/server/portal.js +152 -160
  134. package/tests/hydration/compiled/server/reactivity.js +94 -106
  135. package/tests/hydration/compiled/server/return.js +28 -2172
  136. package/tests/hydration/compiled/server/switch.js +274 -286
  137. package/tests/hydration/compiled/server/track-async-serialization.js +340 -358
  138. package/tests/hydration/compiled/server/try.js +167 -185
  139. package/tests/hydration/components/basic.tsrx +320 -272
  140. package/tests/hydration/components/composite.tsrx +44 -32
  141. package/tests/hydration/components/events.tsrx +101 -91
  142. package/tests/hydration/components/for.tsrx +510 -452
  143. package/tests/hydration/components/head.tsrx +87 -80
  144. package/tests/hydration/components/hmr.tsrx +22 -17
  145. package/tests/hydration/components/html-in-template.tsrx +22 -17
  146. package/tests/hydration/components/html.tsrx +525 -443
  147. package/tests/hydration/components/if-children.tsrx +158 -148
  148. package/tests/hydration/components/if.tsrx +109 -95
  149. package/tests/hydration/components/mixed-control-flow.tsrx +100 -96
  150. package/tests/hydration/components/nested-control-flow.tsrx +215 -203
  151. package/tests/hydration/components/portal.tsrx +41 -34
  152. package/tests/hydration/components/reactivity.tsrx +37 -27
  153. package/tests/hydration/components/return.tsrx +12 -556
  154. package/tests/hydration/components/switch.tsrx +120 -114
  155. package/tests/hydration/components/track-async-serialization.tsrx +107 -91
  156. package/tests/hydration/components/try.tsrx +55 -40
  157. package/tests/hydration/html.test.js +4 -4
  158. package/tests/hydration/return.test.js +13 -532
  159. package/tests/server/await.test.tsrx +3 -3
  160. package/tests/server/basic.attributes.test.tsrx +264 -195
  161. package/tests/server/basic.components.test.tsrx +296 -169
  162. package/tests/server/basic.test.tsrx +300 -198
  163. package/tests/server/compiler.test.tsrx +62 -60
  164. package/tests/server/composite.props.test.tsrx +77 -63
  165. package/tests/server/composite.test.tsrx +168 -192
  166. package/tests/server/context.test.tsrx +18 -12
  167. package/tests/server/dynamic-elements.test.tsrx +197 -180
  168. package/tests/server/for.test.tsrx +85 -78
  169. package/tests/server/head.test.tsrx +50 -43
  170. package/tests/server/html-nesting-validation.test.tsrx +8 -8
  171. package/tests/server/if.test.tsrx +57 -51
  172. package/tests/server/lazy-destructuring.test.tsrx +366 -294
  173. package/tests/server/return.test.tsrx +76 -1355
  174. package/tests/server/streaming-ssr.test.tsrx +4 -75
  175. package/tests/server/style-identifier.test.tsrx +169 -148
  176. package/tests/server/switch.test.tsrx +91 -85
  177. package/tests/server/track-async-serialization.test.tsrx +105 -85
  178. package/tests/server/try.test.tsrx +374 -280
  179. package/tests/utils/compiler-compat-config.test.js +2 -2
  180. package/tests/utils/runtime-imports.test.js +10 -0
  181. package/types/index.d.ts +8 -0
  182. package/tests/client/__snapshots__/html.test.rsrx.snap +0 -40
package/tests/hydration/components/head.tsrx CHANGED
@@ -1,111 +1,118 @@
1
1
  import { track } from 'ripple';
2
2
 
3
3
  // Static title
4
- export component StaticTitle() {
5
- <head>
6
- <title>{'Static Test Title'}</title>
7
- </head>
8
-
9
- <div>{'Content'}</div>
4
+ export function StaticTitle() {
5
+ return <>
6
+ <head>
7
+ <title>{'Static Test Title'}</title>
8
+ </head>
9
+ <div>{'Content'}</div>
10
+ </>;
10
11
  }
11
12
 
12
13
  // Reactive title
13
- export component ReactiveTitle() {
14
- let &[title] = track('Initial Title');
15
-
16
- <head>
17
- <title>{title}</title>
18
- </head>
19
- <div>
20
- <span>{title}</span>
21
- </div>
14
+ export function ReactiveTitle() {
15
+ return <>
16
+ let &[title] = track('Initial Title');
17
+ <head>
18
+ <title>{title}</title>
19
+ </head>
20
+ <div>
21
+ <span>{title}</span>
22
+ </div>
23
+ </>;
22
24
  }
23
25
 
24
26
  // Multiple head elements
25
- export component MultipleHeadElements() {
26
- <head>
27
- <title>{'Page Title'}</title>
28
- <meta name="description" content="Page description" />
29
- <link rel="stylesheet" href="/styles.css" />
30
- </head>
31
-
32
- <div>{'Page content'}</div>
27
+ export function MultipleHeadElements() {
28
+ return <>
29
+ <head>
30
+ <title>{'Page Title'}</title>
31
+ <meta name="description" content="Page description" />
32
+ <link rel="stylesheet" href="/styles.css" />
33
+ </head>
34
+ <div>{'Page content'}</div>
35
+ </>;
33
36
  }
34
37
 
35
38
  // Head with reactive meta tags
36
- export component ReactiveMetaTags() {
37
- let &[description] = track('Initial description');
38
-
39
- <head>
40
- <title>{'My Page'}</title>
41
- <meta name="description" content={description} />
42
- </head>
43
-
44
- <div>{description}</div>
39
+ export function ReactiveMetaTags() {
40
+ return <>
41
+ let &[description] = track('Initial description');
42
+ <head>
43
+ <title>{'My Page'}</title>
44
+ <meta name="description" content={description} />
45
+ </head>
46
+ <div>{description}</div>
47
+ </>;
45
48
  }
46
49
 
47
50
  // Title with template literal
48
- export component TitleWithTemplate() {
49
- let &[name] = track('World');
50
-
51
- <head>
52
- <title>{`Hello ${name}!`}</title>
53
- </head>
54
-
55
- <div>{name}</div>
51
+ export function TitleWithTemplate() {
52
+ return <>
53
+ let &[name] = track('World');
54
+ <head>
55
+ <title>{`Hello ${name}!`}</title>
56
+ </head>
57
+ <div>{name}</div>
58
+ </>;
56
59
  }
57
60
 
58
61
  // Empty title
59
- export component EmptyTitle() {
60
- <head>
61
- <title>{''}</title>
62
- </head>
63
- <div>{'Empty title test'}</div>
62
+ export function EmptyTitle() {
63
+ return <>
64
+ <head>
65
+ <title>{''}</title>
66
+ </head>
67
+ <div>{'Empty title test'}</div>
68
+ </>;
64
69
  }
65
70
 
66
71
  // Title with conditional content
67
- export component ConditionalTitle() {
68
- let &[showPrefix] = track(true);
69
- let &[title] = track('Main Page');
70
-
71
- <head>
72
- <title>{showPrefix ? 'App - ' + title : title}</title>
73
- </head>
74
-
75
- <div>{title}</div>
72
+ export function ConditionalTitle() {
73
+ return <>
74
+ let &[showPrefix] = track(true);
75
+ let &[title] = track('Main Page');
76
+ <head>
77
+ <title>{showPrefix ? 'App - ' + title : title}</title>
78
+ </head>
79
+ <div>{title}</div>
80
+ </>;
76
81
  }
77
82
 
78
83
  // Title with computed value
79
- export component ComputedTitle() {
80
- let &[count] = track(0);
81
- let prefix = 'Count: ';
82
-
83
- <head>
84
- <title>{prefix + count}</title>
85
- </head>
86
- <div>
87
- <span>{count}</span>
88
- </div>
84
+ export function ComputedTitle() {
85
+ return <>
86
+ let &[count] = track(0);
87
+ let prefix = 'Count: ';
88
+ <head>
89
+ <title>{prefix + count}</title>
90
+ </head>
91
+ <div>
92
+ <span>{count}</span>
93
+ </div>
94
+ </>;
89
95
  }
90
96
 
91
97
  // Multiple head blocks (edge case)
92
- export component MultipleHeadBlocks() {
93
- <head>
94
- <title>{'First Head'}</title>
95
- </head>
96
-
97
- <div>{'Content'}</div>
98
-
99
- <head>
100
- <meta name="author" content="Test Author" />
101
- </head>
98
+ export function MultipleHeadBlocks() {
99
+ return <>
100
+ <head>
101
+ <title>{'First Head'}</title>
102
+ </head>
103
+ <div>{'Content'}</div>
104
+ <head>
105
+ <meta name="author" content="Test Author" />
106
+ </head>
107
+ </>;
102
108
  }
103
109
 
104
110
  // Head with style tag
105
- export component HeadWithStyle() {
106
- <head>
107
- <title>{'Styled Page'}</title>
108
- </head>
109
-
110
- <div>{'Styled content'}</div>
111
+ export function HeadWithStyle() {
112
+ return <>
113
+ <head>
114
+ <title>{'Styled Page'}</title>
115
+ </head>
116
+ <div>{'Styled content'}</div>
117
+ </>;
111
118
  }
package/tests/hydration/components/hmr.tsrx CHANGED
@@ -8,27 +8,32 @@ import { track } from 'ripple';
8
8
 
9
9
  // A layout component similar to docs-layout: a root div wrapping child components
10
10
  // where the children contain conditional content (if blocks)
11
- export component Layout({ children }: { children: any }) {
12
- <div class="layout">
13
- <nav class="nav">{'Navigation'}</nav>
14
- <main class="main">{children}</main>
15
- </div>
11
+ export function Layout({ children }: { children: any }) {
12
+ return <>
13
+ <div class="layout">
14
+ <nav class="nav">{'Navigation'}</nav>
15
+ <main class="main">{children}</main>
16
+ </div>
17
+ </>;
16
18
  }
17
19
 
18
20
  // A child component with an if block (the key source of deep hydrate_node)
19
- export component Content() {
20
- let &[visible] = track(true);
21
-
22
- <div class="content">
23
- if (visible) {
24
- <p class="text">{'Hello world'}</p>
25
- }
26
- </div>
21
+ export function Content() {
22
+ return <>
23
+ let &[visible] = track(true);
24
+ <div class="content">
25
+ if (visible) {
26
+ <p class="text">{'Hello world'}</p>
27
+ }
28
+ </div>
29
+ </>;
27
30
  }
28
31
 
29
32
  // The top-level component combining Layout + Content (mimics docs layout + page)
30
- export component LayoutWithContent() {
31
- <Layout>
32
- <Content />
33
- </Layout>
33
+ export function LayoutWithContent() {
34
+ return <>
35
+ <Layout>
36
+ <Content />
37
+ </Layout>
38
+ </>;
34
39
  }
package/tests/hydration/components/html-in-template.tsrx CHANGED
@@ -1,24 +1,29 @@
1
- // Test case for hydration error with {html} inside template elements
1
+ // Test case for hydration error with innerHTML inside template elements
2
2
  // Reproduces issue from website-new/src/pages/docs/comparison.tsrx
3
3
 
4
- export component SimpleTemplateHtml() {
5
- const data = 'test data';
6
- <template id="data1">{html data}</template>
4
+ export function SimpleTemplateHtml() {
5
+ return <>
6
+ const data = 'test data';
7
+ <template id="data1" innerHTML={data} />
8
+ </>;
7
9
  }
8
10
 
9
- export component TemplateWithJSON() {
10
- const jsonData = JSON.stringify({ message: 'hello', count: 42 });
11
- <template id="data2">{html jsonData}</template>
11
+ export function TemplateWithJSON() {
12
+ return <>
13
+ const jsonData = JSON.stringify({ message: 'hello', count: 42 });
14
+ <template id="data2" innerHTML={jsonData} />
15
+ </>;
12
16
  }
13
17
 
14
- export component TemplateAroundIfBlock() {
15
- const show = true;
16
-
17
- <div>
18
- <template id="before">{html 'before'}</template>
19
- if (show) {
20
- <span class="inside">{'inside'}</span>
21
- }
22
- <template id="after">{html 'after'}</template>
23
- </div>
18
+ export function TemplateAroundIfBlock() {
19
+ return <>
20
+ const show = true;
21
+ <div>
22
+ <template id="before" innerHTML="before" />
23
+ if (show) {
24
+ <span class="inside">{'inside'}</span>
25
+ }
26
+ <template id="after" innerHTML="after" />
27
+ </div>
28
+ </>;
24
29
  }