ripple 0.3.72 → 0.3.76

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 (172) hide show
  1. package/CHANGELOG.md +116 -0
  2. package/package.json +3 -3
  3. package/src/jsx-runtime.d.ts +4 -10
  4. package/src/runtime/dynamic-client.js +33 -0
  5. package/src/runtime/dynamic-server.js +80 -0
  6. package/src/runtime/index-client.js +5 -13
  7. package/src/runtime/index-server.js +2 -0
  8. package/src/runtime/internal/client/blocks.js +6 -27
  9. package/src/runtime/internal/client/composite.js +11 -6
  10. package/src/runtime/internal/client/for.js +80 -5
  11. package/src/runtime/internal/client/index.js +0 -2
  12. package/src/runtime/internal/client/render.js +5 -2
  13. package/src/runtime/internal/client/types.d.ts +0 -10
  14. package/src/runtime/internal/server/index.js +8 -1
  15. package/tests/client/__snapshots__/computed-properties.test.tsrx.snap +8 -0
  16. package/tests/client/__snapshots__/for.test.tsrx.snap +22 -0
  17. package/tests/client/__snapshots__/html.test.tsrx.snap +4 -0
  18. package/tests/client/array/array.copy-within.test.tsrx +19 -19
  19. package/tests/client/array/array.derived.test.tsrx +97 -109
  20. package/tests/client/array/array.iteration.test.tsrx +28 -28
  21. package/tests/client/array/array.mutations.test.tsrx +68 -68
  22. package/tests/client/array/array.static.test.tsrx +82 -92
  23. package/tests/client/array/array.to-methods.test.tsrx +15 -15
  24. package/tests/client/async-suspend.test.tsrx +180 -179
  25. package/tests/client/basic/__snapshots__/basic.attributes.test.tsrx.snap +2 -0
  26. package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap +4 -0
  27. package/tests/client/basic/basic.attributes.test.tsrx +273 -317
  28. package/tests/client/basic/basic.collections.test.tsrx +55 -61
  29. package/tests/client/basic/basic.components.test.tsrx +198 -220
  30. package/tests/client/basic/basic.errors.test.tsrx +70 -76
  31. package/tests/client/basic/basic.events.test.tsrx +80 -85
  32. package/tests/client/basic/basic.get-set.test.tsrx +54 -64
  33. package/tests/client/basic/basic.hmr.test.tsrx +15 -19
  34. package/tests/client/basic/basic.reactivity.test.tsrx +121 -135
  35. package/tests/client/basic/basic.rendering.test.tsrx +273 -178
  36. package/tests/client/basic/basic.styling.test.tsrx +16 -14
  37. package/tests/client/basic/basic.utilities.test.tsrx +8 -10
  38. package/tests/client/boundaries.test.tsrx +18 -18
  39. package/tests/client/compiler/compiler.assignments.test.tsrx +77 -76
  40. package/tests/client/compiler/compiler.attributes.test.tsrx +18 -14
  41. package/tests/client/compiler/compiler.basic.test.tsrx +357 -288
  42. package/tests/client/compiler/compiler.regex.test.tsrx +40 -44
  43. package/tests/client/compiler/compiler.tracked-access.test.tsrx +57 -38
  44. package/tests/client/compiler/compiler.try-in-function.test.tsrx +16 -16
  45. package/tests/client/compiler/compiler.typescript.test.tsrx +4 -3
  46. package/tests/client/composite/composite.dynamic-components.test.tsrx +62 -47
  47. package/tests/client/composite/composite.generics.test.tsrx +165 -167
  48. package/tests/client/composite/composite.props.test.tsrx +66 -74
  49. package/tests/client/composite/composite.reactivity.test.tsrx +132 -166
  50. package/tests/client/composite/composite.render.test.tsrx +92 -101
  51. package/tests/client/computed-properties.test.tsrx +14 -18
  52. package/tests/client/context.test.tsrx +14 -18
  53. package/tests/client/css/global-additional-cases.test.tsrx +493 -439
  54. package/tests/client/css/global-advanced-selectors.test.tsrx +169 -153
  55. package/tests/client/css/global-at-rules.test.tsrx +71 -66
  56. package/tests/client/css/global-basic.test.tsrx +105 -98
  57. package/tests/client/css/global-classes-ids.test.tsrx +128 -114
  58. package/tests/client/css/global-combinators.test.tsrx +83 -78
  59. package/tests/client/css/global-complex-nesting.test.tsrx +134 -120
  60. package/tests/client/css/global-edge-cases.test.tsrx +138 -120
  61. package/tests/client/css/global-keyframes.test.tsrx +108 -96
  62. package/tests/client/css/global-nested.test.tsrx +88 -78
  63. package/tests/client/css/global-pseudo.test.tsrx +104 -98
  64. package/tests/client/css/global-scoping.test.tsrx +145 -125
  65. package/tests/client/css/style-identifier.test.tsrx +65 -72
  66. package/tests/client/date.test.tsrx +83 -83
  67. package/tests/client/dynamic-elements.test.tsrx +318 -299
  68. package/tests/client/events.test.tsrx +252 -266
  69. package/tests/client/for.test.tsrx +120 -127
  70. package/tests/client/head.test.tsrx +74 -48
  71. package/tests/client/html.test.tsrx +37 -49
  72. package/tests/client/input-value.test.tsrx +1125 -1354
  73. package/tests/client/lazy-array.test.tsrx +10 -16
  74. package/tests/client/lazy-destructuring.test.tsrx +169 -221
  75. package/tests/client/map.test.tsrx +39 -41
  76. package/tests/client/media-query.test.tsrx +15 -19
  77. package/tests/client/object.test.tsrx +46 -56
  78. package/tests/client/portal.test.tsrx +31 -37
  79. package/tests/client/ref.test.tsrx +173 -193
  80. package/tests/client/return.test.tsrx +62 -37
  81. package/tests/client/set.test.tsrx +33 -33
  82. package/tests/client/svg.test.tsrx +197 -216
  83. package/tests/client/switch.test.tsrx +201 -191
  84. package/tests/client/track-async-hydration.test.tsrx +14 -18
  85. package/tests/client/tracked-index-access.test.tsrx +18 -28
  86. package/tests/client/try.test.tsrx +494 -619
  87. package/tests/client/tsx.test.tsrx +286 -292
  88. package/tests/client/typescript-generics.test.tsrx +121 -129
  89. package/tests/client/url/url.derived.test.tsrx +21 -25
  90. package/tests/client/url/url.parsing.test.tsrx +35 -35
  91. package/tests/client/url/url.partial-removal.test.tsrx +32 -32
  92. package/tests/client/url/url.reactivity.test.tsrx +68 -72
  93. package/tests/client/url/url.serialization.test.tsrx +8 -8
  94. package/tests/client/url-search-params/url-search-params.derived.test.tsrx +21 -27
  95. package/tests/client/url-search-params/url-search-params.initialization.test.tsrx +16 -16
  96. package/tests/client/url-search-params/url-search-params.iteration.test.tsrx +37 -37
  97. package/tests/client/url-search-params/url-search-params.mutation.test.tsrx +56 -60
  98. package/tests/client/url-search-params/url-search-params.retrieval.test.tsrx +32 -34
  99. package/tests/client/url-search-params/url-search-params.serialization.test.tsrx +9 -9
  100. package/tests/client/url-search-params/url-search-params.tracked-url.test.tsrx +10 -10
  101. package/tests/hydration/compiled/client/basic.js +390 -319
  102. package/tests/hydration/compiled/client/composite.js +52 -44
  103. package/tests/hydration/compiled/client/for.js +734 -604
  104. package/tests/hydration/compiled/client/head.js +183 -103
  105. package/tests/hydration/compiled/client/html.js +93 -86
  106. package/tests/hydration/compiled/client/if-children.js +95 -71
  107. package/tests/hydration/compiled/client/if.js +113 -89
  108. package/tests/hydration/compiled/client/mixed-control-flow.js +225 -209
  109. package/tests/hydration/compiled/client/nested-control-flow.js +94 -98
  110. package/tests/hydration/compiled/client/reactivity.js +26 -24
  111. package/tests/hydration/compiled/client/return.js +8 -42
  112. package/tests/hydration/compiled/client/switch.js +208 -173
  113. package/tests/hydration/compiled/client/track-async-serialization.js +176 -128
  114. package/tests/hydration/compiled/client/try.js +29 -21
  115. package/tests/hydration/compiled/server/basic.js +210 -221
  116. package/tests/hydration/compiled/server/composite.js +13 -14
  117. package/tests/hydration/compiled/server/for.js +427 -444
  118. package/tests/hydration/compiled/server/head.js +199 -189
  119. package/tests/hydration/compiled/server/html.js +33 -41
  120. package/tests/hydration/compiled/server/if-children.js +114 -117
  121. package/tests/hydration/compiled/server/if.js +77 -83
  122. package/tests/hydration/compiled/server/mixed-control-flow.js +145 -150
  123. package/tests/hydration/compiled/server/nested-control-flow.js +10 -0
  124. package/tests/hydration/compiled/server/reactivity.js +24 -22
  125. package/tests/hydration/compiled/server/return.js +6 -18
  126. package/tests/hydration/compiled/server/switch.js +179 -176
  127. package/tests/hydration/compiled/server/track-async-serialization.js +88 -70
  128. package/tests/hydration/compiled/server/try.js +31 -35
  129. package/tests/hydration/components/basic.tsrx +216 -258
  130. package/tests/hydration/components/composite.tsrx +32 -42
  131. package/tests/hydration/components/events.tsrx +81 -101
  132. package/tests/hydration/components/for.tsrx +270 -336
  133. package/tests/hydration/components/head.tsrx +43 -39
  134. package/tests/hydration/components/hmr.tsrx +16 -22
  135. package/tests/hydration/components/html-in-template.tsrx +15 -21
  136. package/tests/hydration/components/html.tsrx +442 -526
  137. package/tests/hydration/components/if-children.tsrx +107 -125
  138. package/tests/hydration/components/if.tsrx +68 -90
  139. package/tests/hydration/components/mixed-control-flow.tsrx +65 -72
  140. package/tests/hydration/components/nested-control-flow.tsrx +202 -216
  141. package/tests/hydration/components/portal.tsrx +33 -41
  142. package/tests/hydration/components/reactivity.tsrx +26 -34
  143. package/tests/hydration/components/return.tsrx +4 -6
  144. package/tests/hydration/components/switch.tsrx +73 -78
  145. package/tests/hydration/components/track-async-serialization.tsrx +83 -93
  146. package/tests/hydration/components/try.tsrx +37 -51
  147. package/tests/hydration/switch.test.js +8 -8
  148. package/tests/server/await.test.tsrx +3 -3
  149. package/tests/server/basic.attributes.test.tsrx +117 -162
  150. package/tests/server/basic.components.test.tsrx +164 -194
  151. package/tests/server/basic.test.tsrx +299 -199
  152. package/tests/server/compiler.test.tsrx +142 -72
  153. package/tests/server/composite.props.test.tsrx +54 -58
  154. package/tests/server/composite.test.tsrx +165 -167
  155. package/tests/server/context.test.tsrx +13 -17
  156. package/tests/server/dynamic-elements.test.tsrx +147 -148
  157. package/tests/server/for.test.tsrx +115 -84
  158. package/tests/server/head.test.tsrx +54 -31
  159. package/tests/server/html-nesting-validation.test.tsrx +16 -8
  160. package/tests/server/if.test.tsrx +49 -59
  161. package/tests/server/lazy-destructuring.test.tsrx +288 -366
  162. package/tests/server/return.test.tsrx +58 -36
  163. package/tests/server/streaming-ssr.test.tsrx +4 -4
  164. package/tests/server/style-identifier.test.tsrx +61 -69
  165. package/tests/server/switch.test.tsrx +89 -97
  166. package/tests/server/track-async-serialization.test.tsrx +85 -103
  167. package/tests/server/try.test.tsrx +275 -360
  168. package/tests/utils/ref-types.test.js +72 -0
  169. package/tests/utils/vite-plugin-config.test.js +41 -74
  170. package/types/index.d.ts +29 -4
  171. package/src/runtime/internal/client/compat.js +0 -40
  172. 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
  }