ripple 0.2.86 → 0.2.88
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.
- package/package.json +3 -1
- package/src/compiler/phases/1-parse/index.js +30 -1
- package/src/compiler/phases/2-analyze/index.js +3 -1
- package/src/compiler/phases/3-transform/client/index.js +23 -10
- package/src/compiler/scope.js +2 -0
- package/src/compiler/types/index.d.ts +5 -0
- package/src/runtime/array.js +12 -5
- package/src/runtime/index-client.js +0 -1
- package/src/runtime/index-server.js +18 -3
- package/src/runtime/internal/client/blocks.js +209 -205
- package/src/runtime/internal/client/composite.js +9 -0
- package/src/runtime/internal/client/events.js +219 -189
- package/src/runtime/internal/client/for.js +467 -383
- package/src/runtime/internal/client/if.js +36 -25
- package/src/runtime/internal/client/index.js +2 -0
- package/src/runtime/internal/client/operations.js +7 -2
- package/src/runtime/internal/client/portal.js +15 -4
- package/src/runtime/internal/client/render.js +48 -6
- package/src/runtime/internal/client/runtime.js +98 -83
- package/src/runtime/internal/client/script.js +16 -0
- package/src/runtime/internal/client/template.js +8 -5
- package/src/runtime/internal/client/try.js +42 -4
- package/src/runtime/internal/client/utils.js +18 -3
- package/src/runtime/internal/server/context.js +2 -0
- package/src/runtime/internal/server/index.js +39 -3
- package/src/runtime/internal/server/types.d.ts +21 -0
- package/src/runtime/map.js +37 -2
- package/src/runtime/set.js +22 -9
- package/src/utils/builders.js +1 -0
- package/tests/client/__snapshots__/basic.test.ripple.snap +13 -0
- package/tests/client/basic.test.ripple +15 -0
- package/tests/client/ref.test.ripple +33 -2
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Ripple is an elegant TypeScript UI framework",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Dominic Gannaway",
|
|
6
|
-
"version": "0.2.
|
|
6
|
+
"version": "0.2.88",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"module": "src/runtime/index-client.js",
|
|
9
9
|
"main": "src/runtime/index-client.js",
|
|
@@ -58,6 +58,8 @@
|
|
|
58
58
|
"imports": {
|
|
59
59
|
"#client": "./src/runtime/internal/client/types.d.ts",
|
|
60
60
|
"#client/constants": "./src/internal/client/constants.js",
|
|
61
|
+
"#server": "./src/runtime/internal/server/types.d.ts",
|
|
62
|
+
"#compiler": "./src/compiler/types/index.d.ts",
|
|
61
63
|
"#public": "./types/index.d.ts"
|
|
62
64
|
},
|
|
63
65
|
"dependencies": {
|
|
@@ -793,7 +793,36 @@ function RipplePlugin(config) {
|
|
|
793
793
|
this.next();
|
|
794
794
|
}
|
|
795
795
|
} else {
|
|
796
|
-
if (open.name.name === '
|
|
796
|
+
if (open.name.name === 'script') {
|
|
797
|
+
let content = '';
|
|
798
|
+
|
|
799
|
+
// TODO implement this where we get a string for content of the content of the script tag
|
|
800
|
+
// This is a temporary workaround to get the content of the script tag
|
|
801
|
+
const start = open.end;
|
|
802
|
+
const input = this.input.slice(start);
|
|
803
|
+
const end = input.indexOf('</script>');
|
|
804
|
+
content = input.slice(0, end);
|
|
805
|
+
|
|
806
|
+
const newLines = content.match(regex_newline_characters)?.length;
|
|
807
|
+
if (newLines) {
|
|
808
|
+
this.curLine = open.loc.end.line + newLines;
|
|
809
|
+
this.lineStart = start + content.lastIndexOf('\n') + 1;
|
|
810
|
+
}
|
|
811
|
+
this.pos = start + content.length + 1;
|
|
812
|
+
|
|
813
|
+
this.type = tok.jsxTagStart;
|
|
814
|
+
this.next();
|
|
815
|
+
if (this.value === '/') {
|
|
816
|
+
this.next();
|
|
817
|
+
this.jsx_parseElementName();
|
|
818
|
+
this.exprAllowed = true;
|
|
819
|
+
this.#path.pop();
|
|
820
|
+
this.next();
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
element.content = content;
|
|
824
|
+
this.finishNode(element, 'Element');
|
|
825
|
+
} else if (open.name.name === 'style') {
|
|
797
826
|
// jsx_parseOpeningElementAt treats ID selectors (ie. #myid) or type selectors (ie. div) as identifier and read it
|
|
798
827
|
// So backtrack to the end of the <style> tag to make sure everything is included
|
|
799
828
|
const start = open.end;
|
|
@@ -488,7 +488,9 @@ const visitors = {
|
|
|
488
488
|
if (attr.name.type === 'Identifier') {
|
|
489
489
|
attribute_names.add(attr.name);
|
|
490
490
|
}
|
|
491
|
-
|
|
491
|
+
if (attr.value !== null) {
|
|
492
|
+
visit(attr.value, state);
|
|
493
|
+
}
|
|
492
494
|
} else if (attr.type === 'SpreadAttribute') {
|
|
493
495
|
visit(attr.argument, state);
|
|
494
496
|
} else if (attr.type === 'RefAttribute') {
|
|
@@ -137,12 +137,6 @@ function visit_title_element(node, context) {
|
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
function visit_style_element(node, context) {
|
|
141
|
-
context.state.template.push(
|
|
142
|
-
b.literal(`<style>${sanitize_template_string(node.css)}</style>`),
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
140
|
const visitors = {
|
|
147
141
|
_: function set_scope(node, { next, state }) {
|
|
148
142
|
const scope = state.scopes.get(node);
|
|
@@ -487,9 +481,19 @@ const visitors = {
|
|
|
487
481
|
Element(node, context) {
|
|
488
482
|
const { state, visit } = context;
|
|
489
483
|
|
|
490
|
-
if (context.state.inside_head
|
|
491
|
-
|
|
492
|
-
|
|
484
|
+
if (context.state.inside_head) {
|
|
485
|
+
if (node.id.type === 'Identifier' && node.id.name === 'style') {
|
|
486
|
+
state.template.push(`<style>${sanitize_template_string(node.css)}</style>`);
|
|
487
|
+
return;
|
|
488
|
+
}
|
|
489
|
+
if (node.id.type === 'Identifier' && node.id.name === 'script') {
|
|
490
|
+
const id = state.flush_node();
|
|
491
|
+
state.template.push('<!>');
|
|
492
|
+
context.state.init.push(
|
|
493
|
+
b.stmt(b.call('_$_.script', id, b.literal(sanitize_template_string(node.content)))),
|
|
494
|
+
);
|
|
495
|
+
return;
|
|
496
|
+
}
|
|
493
497
|
}
|
|
494
498
|
|
|
495
499
|
const is_dom_element = is_element_dom_element(node);
|
|
@@ -766,7 +770,8 @@ const visitors = {
|
|
|
766
770
|
if (attr.type === 'Attribute') {
|
|
767
771
|
if (attr.name.type === 'Identifier') {
|
|
768
772
|
const metadata = { tracking: false, await: false };
|
|
769
|
-
let property =
|
|
773
|
+
let property =
|
|
774
|
+
attr.value === null ? b.literal(true) : visit(attr.value, { ...state, metadata });
|
|
770
775
|
|
|
771
776
|
if (metadata.tracking || attr.name.tracked) {
|
|
772
777
|
if (attr.name.name === 'children') {
|
|
@@ -1139,6 +1144,14 @@ const visitors = {
|
|
|
1139
1144
|
return context.next();
|
|
1140
1145
|
},
|
|
1141
1146
|
|
|
1147
|
+
ExportNamedDeclaration(node, context) {
|
|
1148
|
+
if (!context.state.to_ts && node.exportKind === 'type') {
|
|
1149
|
+
return b.empty;
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
return context.next();
|
|
1153
|
+
},
|
|
1154
|
+
|
|
1142
1155
|
TryStatement(node, context) {
|
|
1143
1156
|
if (!is_inside_component(context)) {
|
|
1144
1157
|
context.next();
|
package/src/compiler/scope.js
CHANGED
package/src/runtime/array.js
CHANGED
|
@@ -69,6 +69,7 @@ TrackedArray.fromAsync = async function (arrayLike, mapFn, thisArg) {
|
|
|
69
69
|
* @returns {TrackedArray<T>}
|
|
70
70
|
*/
|
|
71
71
|
function proxy({ elements, block, from_static = false, use_array = false }) {
|
|
72
|
+
/** @type {T[]} */
|
|
72
73
|
var arr;
|
|
73
74
|
var first;
|
|
74
75
|
|
|
@@ -77,9 +78,9 @@ function proxy({ elements, block, from_static = false, use_array = false }) {
|
|
|
77
78
|
(first = get_first_if_length(/** @type {Array<T>} */ (elements))) !== undefined
|
|
78
79
|
) {
|
|
79
80
|
arr = new Array();
|
|
80
|
-
arr[0] = first;
|
|
81
|
+
arr[0] = /** @type {T} */ (/** @type {unknown} */ (first));
|
|
81
82
|
} else if (use_array) {
|
|
82
|
-
arr = elements;
|
|
83
|
+
arr = /** @type {T[]} */ (elements);
|
|
83
84
|
} else {
|
|
84
85
|
arr = new Array(...elements);
|
|
85
86
|
}
|
|
@@ -94,7 +95,7 @@ function proxy({ elements, block, from_static = false, use_array = false }) {
|
|
|
94
95
|
var exists = prop in target;
|
|
95
96
|
|
|
96
97
|
if (t === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
|
|
97
|
-
t = tracked(exists ? target[prop] : UNINITIALIZED, block);
|
|
98
|
+
t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
|
|
98
99
|
tracked_elements.set(prop, t);
|
|
99
100
|
}
|
|
100
101
|
|
|
@@ -106,7 +107,7 @@ function proxy({ elements, block, from_static = false, use_array = false }) {
|
|
|
106
107
|
var result = Reflect.get(target, prop, receiver);
|
|
107
108
|
|
|
108
109
|
if (typeof result === 'function') {
|
|
109
|
-
if (methods_returning_arrays.has(prop)) {
|
|
110
|
+
if (methods_returning_arrays.has(/** @type {string} */ (prop))) {
|
|
110
111
|
/** @type {(this: any, ...args: any[]) => any} */
|
|
111
112
|
return function (...args) {
|
|
112
113
|
var output = Reflect.apply(result, receiver, args);
|
|
@@ -211,7 +212,7 @@ function proxy({ elements, block, from_static = false, use_array = false }) {
|
|
|
211
212
|
|
|
212
213
|
if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
|
|
213
214
|
if (t === undefined) {
|
|
214
|
-
t = tracked(exists ? target[prop] : UNINITIALIZED, block);
|
|
215
|
+
t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
|
|
215
216
|
|
|
216
217
|
tracked_elements.set(prop, t);
|
|
217
218
|
}
|
|
@@ -288,6 +289,12 @@ const methods_returning_arrays = new Set([
|
|
|
288
289
|
'with',
|
|
289
290
|
]);
|
|
290
291
|
|
|
292
|
+
/**
|
|
293
|
+
* @template T
|
|
294
|
+
* @param {Iterable<T>} elements
|
|
295
|
+
* @param {Block} block
|
|
296
|
+
* @returns {TrackedArray<T>}
|
|
297
|
+
*/
|
|
291
298
|
export function tracked_array(elements, block) {
|
|
292
299
|
return proxy({ elements, block, from_static: true });
|
|
293
300
|
}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
/** @import { Component, Derived, Tracked } from '#server' */
|
|
2
|
+
|
|
3
|
+
import { DERIVED, TRACKED, UNINITIALIZED } from './internal/client/constants.js';
|
|
4
|
+
import { is_tracked_object } from './internal/client/utils.js';
|
|
5
|
+
import { active_component } from './internal/server/index.js';
|
|
3
6
|
|
|
4
7
|
export { create_context as createContext } from './internal/server/context.js';
|
|
5
8
|
|
|
@@ -9,7 +12,16 @@ export function effect() {
|
|
|
9
12
|
|
|
10
13
|
export const TrackedArray = Array;
|
|
11
14
|
|
|
12
|
-
|
|
15
|
+
var empty_get_set = { get: undefined, set: undefined };
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
*
|
|
19
|
+
* @param {any} v
|
|
20
|
+
* @param {Function} [get]
|
|
21
|
+
* @param {Function} [set]
|
|
22
|
+
* @returns {Tracked | Derived}
|
|
23
|
+
*/
|
|
24
|
+
export function track(v, get, set) {
|
|
13
25
|
var is_tracked = is_tracked_object(v);
|
|
14
26
|
|
|
15
27
|
if (is_tracked) {
|
|
@@ -18,6 +30,8 @@ export function track(v, o) {
|
|
|
18
30
|
|
|
19
31
|
if (typeof v === 'function') {
|
|
20
32
|
return {
|
|
33
|
+
a: get || set ? { get, set } : empty_get_set,
|
|
34
|
+
co: active_component,
|
|
21
35
|
f: TRACKED | DERIVED,
|
|
22
36
|
fn: v,
|
|
23
37
|
v: UNINITIALIZED,
|
|
@@ -25,6 +39,7 @@ export function track(v, o) {
|
|
|
25
39
|
}
|
|
26
40
|
|
|
27
41
|
return {
|
|
42
|
+
a: get || set ? { get, set } : empty_get_set,
|
|
28
43
|
f: TRACKED,
|
|
29
44
|
v,
|
|
30
45
|
};
|