ripple 0.2.208 → 0.2.211

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 (112) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/README.md +2 -1
  3. package/package.json +2 -6
  4. package/shims/rollup-estree-types.d.ts +1 -1
  5. package/src/compiler/index.d.ts +1 -0
  6. package/src/compiler/index.js +7 -1
  7. package/src/compiler/phases/1-parse/index.js +24 -7
  8. package/src/compiler/phases/2-analyze/css-analyze.js +100 -104
  9. package/src/compiler/phases/2-analyze/index.js +215 -2
  10. package/src/compiler/phases/3-transform/client/index.js +388 -50
  11. package/src/compiler/phases/3-transform/segments.js +123 -39
  12. package/src/compiler/phases/3-transform/server/index.js +266 -13
  13. package/src/compiler/types/index.d.ts +15 -3
  14. package/src/compiler/utils.js +1 -15
  15. package/src/constants.js +0 -2
  16. package/src/helpers.d.ts +4 -0
  17. package/src/html-tree-validation.js +211 -0
  18. package/src/jsx-runtime.d.ts +260 -259
  19. package/src/jsx-runtime.js +12 -12
  20. package/src/runtime/array.js +17 -17
  21. package/src/runtime/create-subscriber.js +1 -1
  22. package/src/runtime/index-client.js +1 -5
  23. package/src/runtime/index-server.js +15 -0
  24. package/src/runtime/internal/client/compat.js +3 -3
  25. package/src/runtime/internal/client/composite.js +6 -1
  26. package/src/runtime/internal/client/head.js +50 -4
  27. package/src/runtime/internal/client/html.js +73 -12
  28. package/src/runtime/internal/client/hydration.js +12 -0
  29. package/src/runtime/internal/client/index.js +1 -1
  30. package/src/runtime/internal/client/portal.js +54 -29
  31. package/src/runtime/internal/client/rpc.js +3 -1
  32. package/src/runtime/internal/client/switch.js +5 -0
  33. package/src/runtime/internal/client/template.js +119 -12
  34. package/src/runtime/internal/client/try.js +1 -0
  35. package/src/runtime/internal/server/index.js +113 -1
  36. package/src/runtime/internal/server/rpc.js +4 -4
  37. package/src/runtime/map.js +2 -2
  38. package/src/runtime/object.js +6 -6
  39. package/src/runtime/proxy.js +12 -11
  40. package/src/runtime/reactive-value.js +9 -1
  41. package/src/runtime/set.js +12 -7
  42. package/src/runtime/url-search-params.js +0 -1
  43. package/src/server/index.js +4 -0
  44. package/src/utils/hashing.js +15 -0
  45. package/src/utils/normalize_css_property_name.js +1 -1
  46. package/tests/client/array/array.mutations.test.ripple +8 -8
  47. package/tests/client/basic/basic.errors.test.ripple +28 -0
  48. package/tests/client/basic/basic.events.test.ripple +6 -3
  49. package/tests/client/basic/basic.utilities.test.ripple +1 -1
  50. package/tests/client/compiler/compiler.regex.test.ripple +10 -8
  51. package/tests/client/composite/composite.generics.test.ripple +5 -2
  52. package/tests/client/dynamic-elements.test.ripple +30 -1
  53. package/tests/client/function-overload-import.ripple +6 -7
  54. package/tests/client/html.test.ripple +0 -1
  55. package/tests/client/object.test.ripple +2 -2
  56. package/tests/client/portal.test.ripple +3 -3
  57. package/tests/client/return.test.ripple +2500 -0
  58. package/tests/client/try.test.ripple +69 -0
  59. package/tests/client/typescript-generics.test.ripple +1 -1
  60. package/tests/client/url/url.derived.test.ripple +1 -1
  61. package/tests/client/url/url.parsing.test.ripple +3 -3
  62. package/tests/client/url/url.partial-removal.test.ripple +7 -7
  63. package/tests/client/url/url.reactivity.test.ripple +15 -15
  64. package/tests/client/url/url.serialization.test.ripple +2 -2
  65. package/tests/hydration/basic.test.js +23 -0
  66. package/tests/hydration/build-components.js +10 -4
  67. package/tests/hydration/compiled/client/basic.js +165 -3
  68. package/tests/hydration/compiled/client/composite.js +139 -0
  69. package/tests/hydration/compiled/client/for.js +1140 -23
  70. package/tests/hydration/compiled/client/head.js +234 -0
  71. package/tests/hydration/compiled/client/html.js +135 -0
  72. package/tests/hydration/compiled/client/portal.js +172 -0
  73. package/tests/hydration/compiled/client/reactivity.js +3 -1
  74. package/tests/hydration/compiled/client/return.js +1976 -0
  75. package/tests/hydration/compiled/client/switch.js +162 -0
  76. package/tests/hydration/compiled/server/basic.js +249 -0
  77. package/tests/hydration/compiled/server/composite.js +176 -0
  78. package/tests/hydration/compiled/server/events.js +1 -1
  79. package/tests/hydration/compiled/server/for.js +891 -1
  80. package/tests/hydration/compiled/server/head.js +291 -0
  81. package/tests/hydration/compiled/server/html.js +133 -0
  82. package/tests/hydration/compiled/server/if.js +1 -1
  83. package/tests/hydration/compiled/server/portal.js +250 -0
  84. package/tests/hydration/compiled/server/reactivity.js +1 -1
  85. package/tests/hydration/compiled/server/return.js +1969 -0
  86. package/tests/hydration/compiled/server/switch.js +130 -0
  87. package/tests/hydration/components/basic.ripple +55 -0
  88. package/tests/hydration/components/composite.ripple +37 -0
  89. package/tests/hydration/components/for.ripple +403 -0
  90. package/tests/hydration/components/head.ripple +111 -0
  91. package/tests/hydration/components/html.ripple +38 -0
  92. package/tests/hydration/components/portal.ripple +49 -0
  93. package/tests/hydration/components/return.ripple +564 -0
  94. package/tests/hydration/components/switch.ripple +51 -0
  95. package/tests/hydration/composite.test.js +42 -0
  96. package/tests/hydration/for.test.js +363 -0
  97. package/tests/hydration/head.test.js +105 -0
  98. package/tests/hydration/html.test.js +46 -0
  99. package/tests/hydration/portal.test.js +71 -0
  100. package/tests/hydration/return.test.js +544 -0
  101. package/tests/hydration/switch.test.js +42 -0
  102. package/tests/server/basic.attributes.test.ripple +1 -1
  103. package/tests/server/compiler.test.ripple +22 -0
  104. package/tests/server/composite.test.ripple +5 -2
  105. package/tests/server/html-nesting-validation.test.ripple +237 -0
  106. package/tests/server/return.test.ripple +1379 -0
  107. package/tests/setup-hydration.js +6 -1
  108. package/tests/utils/escaping.test.js +3 -1
  109. package/tests/utils/normalize_css_property_name.test.js +0 -1
  110. package/tests/utils/patterns.test.js +6 -2
  111. package/tests/utils/sanitize_template_string.test.js +3 -2
  112. package/types/server.d.ts +16 -0
package/tests/hydration/components/head.ripple ADDED
@@ -0,0 +1,111 @@
1
+ import { track } from 'ripple';
2
+
3
+ // Static title
4
+ export component StaticTitle() {
5
+ <head>
6
+ <title>{'Static Test Title'}</title>
7
+ </head>
8
+
9
+ <div>{'Content'}</div>
10
+ }
11
+
12
+ // 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>
22
+ }
23
+
24
+ // 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>
33
+ }
34
+
35
+ // 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>
45
+ }
46
+
47
+ // 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>
56
+ }
57
+
58
+ // Empty title
59
+ export component EmptyTitle() {
60
+ <head>
61
+ <title>{''}</title>
62
+ </head>
63
+ <div>{'Empty title test'}</div>
64
+ }
65
+
66
+ // 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>
76
+ }
77
+
78
+ // 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>
89
+ }
90
+
91
+ // 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>
102
+ }
103
+
104
+ // Head with style tag
105
+ export component HeadWithStyle() {
106
+ <head>
107
+ <title>{'Styled Page'}</title>
108
+ </head>
109
+
110
+ <div>{'Styled content'}</div>
111
+ }
package/tests/hydration/components/html.ripple ADDED
@@ -0,0 +1,38 @@
1
+ // HTML tag hydration testing components
2
+ import { track } from 'ripple';
3
+
4
+ export component StaticHtml() {
5
+ const html = '<p><strong>Bold</strong> text</p>';
6
+ <div>{html html}</div>
7
+ }
8
+
9
+ export component DynamicHtml() {
10
+ const content = '<p>Dynamic <span>HTML</span> content</p>';
11
+ <div>{html content}</div>
12
+ }
13
+
14
+ export component EmptyHtml() {
15
+ const html = '';
16
+ <div>{html html}</div>
17
+ }
18
+
19
+ export component ComplexHtml() {
20
+ const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
21
+ <section>{html html}</section>
22
+ }
23
+
24
+ export component MultipleHtml() {
25
+ const html1 = '<p>First paragraph</p>';
26
+ const html2 = '<p>Second paragraph</p>';
27
+ <div>
28
+ {html html1}
29
+ {html html2}
30
+ </div>
31
+ }
32
+
33
+ export component HtmlWithReactivity() {
34
+ <div>
35
+ {html '<p>Count: 0</p>'}
36
+ <button>{'Increment'}</button>
37
+ </div>
38
+ }
package/tests/hydration/components/portal.ripple ADDED
@@ -0,0 +1,49 @@
1
+ // Portal components for hydration testing
2
+ import { Portal } from 'ripple';
3
+
4
+ // Simple portal with static content
5
+ export component SimplePortal() {
6
+ <div class="container">
7
+ <h1>{'Main Content'}</h1>
8
+ <Portal target={typeof document !== 'undefined' ? document.body : null}>
9
+ <div class="portal-content">{'Portal content'}</div>
10
+ </Portal>
11
+ </div>
12
+ }
13
+
14
+ // Portal with conditional rendering
15
+ export component ConditionalPortal() {
16
+ let show = @true;
17
+
18
+ <div class="container">
19
+ <button class="toggle" onClick={() => (@show = !@show)}>{'Toggle'}</button>
20
+ if (@show) {
21
+ <Portal target={typeof document !== 'undefined' ? document.body : null}>
22
+ <div class="portal-content">{'Portal is visible'}</div>
23
+ </Portal>
24
+ }
25
+ </div>
26
+ }
27
+
28
+ // Component with portal that shouldn't break on initial load
29
+ export component PortalWithMainContent() {
30
+ <div>
31
+ <div class="main-content">{'Main page content'}</div>
32
+ <Portal target={typeof document !== 'undefined' ? document.body : null}>
33
+ <div class="portal-content">{'Modal content'}</div>
34
+ </Portal>
35
+ <div class="footer">{'Footer'}</div>
36
+ </div>
37
+ }
38
+
39
+ // Nested portals scenario
40
+ export component NestedContentWithPortal() {
41
+ <div class="outer">
42
+ <div class="inner">
43
+ <span>{'Nested content'}</span>
44
+ </div>
45
+ <Portal target={typeof document !== 'undefined' ? document.body : null}>
46
+ <div class="portal-content">{'Portal content'}</div>
47
+ </Portal>
48
+ </div>
49
+ }