ripple 0.3.72 → 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 +66 -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 +55 -61
  23. package/tests/client/basic/basic.components.test.tsrx +196 -218
  24. package/tests/client/basic/basic.errors.test.tsrx +70 -76
  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 +357 -288
  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 +286 -292
  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 +390 -319
  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 -258
  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 +117 -162
  143. package/tests/server/basic.components.test.tsrx +163 -193
  144. package/tests/server/basic.test.tsrx +298 -198
  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
package/tests/hydration/components/head.tsrx CHANGED
@@ -1,102 +1,106 @@
1
1
  import { track } from 'ripple';
2
2
 
3
3
  // Static title
4
- export function StaticTitle() {
5
- return <>
4
+ export function StaticTitle() @{
5
+ <>
6
6
  <head>
7
7
  <title>{'Static Test Title'}</title>
8
8
  </head>
9
9
  <div>{'Content'}</div>
10
- </>;
10
+ </>
11
11
  }
12
12
 
13
13
  // Reactive title
14
- export function ReactiveTitle() {
15
- return <>
16
- let &[title] = track('Initial Title');
14
+ export function ReactiveTitle() @{
15
+ let &[title] = track('Initial Title');
16
+ <>
17
17
  <head>
18
18
  <title>{title}</title>
19
19
  </head>
20
20
  <div>
21
21
  <span>{title}</span>
22
22
  </div>
23
- </>;
23
+ </>
24
24
  }
25
25
 
26
26
  // Multiple head elements
27
- export function MultipleHeadElements() {
28
- return <>
27
+ export function MultipleHeadElements() @{
28
+ <>
29
29
  <head>
30
30
  <title>{'Page Title'}</title>
31
31
  <meta name="description" content="Page description" />
32
32
  <link rel="stylesheet" href="/styles.css" />
33
33
  </head>
34
34
  <div>{'Page content'}</div>
35
- </>;
35
+ </>
36
36
  }
37
37
 
38
38
  // Head with reactive meta tags
39
- export function ReactiveMetaTags() {
40
- return <>
41
- let &[description] = track('Initial description');
39
+ export function ReactiveMetaTags() @{
40
+ let &[description] = track('Initial description');
41
+ <>
42
42
  <head>
43
43
  <title>{'My Page'}</title>
44
44
  <meta name="description" content={description} />
45
45
  </head>
46
46
  <div>{description}</div>
47
- </>;
47
+ </>
48
48
  }
49
49
 
50
50
  // Title with template literal
51
- export function TitleWithTemplate() {
52
- return <>
53
- let &[name] = track('World');
51
+ export function TitleWithTemplate() @{
52
+ let &[name] = track('World');
53
+ <>
54
54
  <head>
55
55
  <title>{`Hello ${name}!`}</title>
56
56
  </head>
57
57
  <div>{name}</div>
58
- </>;
58
+ </>
59
59
  }
60
60
 
61
61
  // Empty title
62
- export function EmptyTitle() {
63
- return <>
62
+ export function EmptyTitle() @{
63
+ <>
64
64
  <head>
65
65
  <title>{''}</title>
66
66
  </head>
67
67
  <div>{'Empty title test'}</div>
68
- </>;
68
+ </>
69
69
  }
70
70
 
71
71
  // Title with conditional content
72
- export function ConditionalTitle() {
73
- return <>
74
- let &[showPrefix] = track(true);
75
- let &[title] = track('Main Page');
72
+ export function ConditionalTitle() @{
73
+ let &[showPrefix] = track(true);
74
+ let &[title] = track('Main Page');
75
+ <>
76
76
  <head>
77
- <title>{showPrefix ? 'App - ' + title : title}</title>
77
+ <title>
78
+ {showPrefix ? 'App - ' + title : title}
79
+ </title>
78
80
  </head>
79
81
  <div>{title}</div>
80
- </>;
82
+ </>
81
83
  }
82
84
 
83
85
  // Title with computed value
84
- export function ComputedTitle() {
85
- return <>
86
- let &[count] = track(0);
87
- let prefix = 'Count: ';
86
+ export function ComputedTitle() @{
87
+ let &[count] = track(0);
88
+ let prefix = 'Count: ';
89
+ <>
88
90
  <head>
89
- <title>{prefix + count}</title>
91
+ <title>
92
+ {prefix + count}
93
+ </title>
90
94
  </head>
91
95
  <div>
92
96
  <span>{count}</span>
93
97
  </div>
94
- </>;
98
+ </>
95
99
  }
96
100
 
97
101
  // Multiple head blocks (edge case)
98
- export function MultipleHeadBlocks() {
99
- return <>
102
+ export function MultipleHeadBlocks() @{
103
+ <>
100
104
  <head>
101
105
  <title>{'First Head'}</title>
102
106
  </head>
@@ -104,15 +108,15 @@ export function MultipleHeadBlocks() {
104
108
  <head>
105
109
  <meta name="author" content="Test Author" />
106
110
  </head>
107
- </>;
111
+ </>
108
112
  }
109
113
 
110
114
  // Head with style tag
111
- export function HeadWithStyle() {
112
- return <>
115
+ export function HeadWithStyle() @{
116
+ <>
113
117
  <head>
114
118
  <title>{'Styled Page'}</title>
115
119
  </head>
116
120
  <div>{'Styled content'}</div>
117
- </>;
121
+ </>
118
122
  }
package/tests/hydration/components/hmr.tsrx CHANGED
@@ -8,32 +8,26 @@ 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 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
- </>;
11
+ export function Layout({ children }: { children: any }) @{
12
+ <div class="layout">
13
+ <nav class="nav">{'Navigation'}</nav>
14
+ <main class="main">{children}</main>
15
+ </div>
18
16
  }
19
17
 
20
18
  // A child component with an if block (the key source of deep hydrate_node)
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
- </>;
19
+ export function Content() @{
20
+ let &[visible] = track(true);
21
+ <div class="content">
22
+ @if (visible) {
23
+ <p class="text">{'Hello world'}</p>
24
+ }
25
+ </div>
30
26
  }
31
27
 
32
28
  // The top-level component combining Layout + Content (mimics docs layout + page)
33
- export function LayoutWithContent() {
34
- return <>
35
- <Layout>
36
- <Content />
37
- </Layout>
38
- </>;
29
+ export function LayoutWithContent() @{
30
+ <Layout>
31
+ <Content />
32
+ </Layout>
39
33
  }
package/tests/hydration/components/html-in-template.tsrx CHANGED
@@ -1,29 +1,23 @@
1
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 function SimpleTemplateHtml() {
5
- return <>
6
- const data = 'test data';
7
- <template id="data1" innerHTML={data} />
8
- </>;
4
+ export function SimpleTemplateHtml() @{
5
+ const data = 'test data';
6
+ <template id="data1" innerHTML={data} />
9
7
  }
10
8
 
11
- export function TemplateWithJSON() {
12
- return <>
13
- const jsonData = JSON.stringify({ message: 'hello', count: 42 });
14
- <template id="data2" innerHTML={jsonData} />
15
- </>;
9
+ export function TemplateWithJSON() @{
10
+ const jsonData = JSON.stringify({ message: 'hello', count: 42 });
11
+ <template id="data2" innerHTML={jsonData} />
16
12
  }
17
13
 
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
- </>;
14
+ export function TemplateAroundIfBlock() @{
15
+ const show = true;
16
+ <div>
17
+ <template id="before" innerHTML="before" />
18
+ @if (show) {
19
+ <span class="inside">{'inside'}</span>
20
+ }
21
+ <template id="after" innerHTML="after" />
22
+ </div>
29
23
  }