ripple 0.2.6 → 0.2.8

package/README.md

@@ -7,4 +7,4 @@
 
 > Currently, this project is still in early development, and should not be used in production.
 
-Ripple is a TypeScript UI framework for the web. To find out more, view [Ripple's Github README](https://github.com/trueadm/ripple).
+Ripple is a TypeScript UI framework for the web. To find out more, view [Ripple's Github README](https://github.com/trueadm/ripple).

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/errors.js

@@ -1,26 +1,24 @@
-
-
 /**
- * 
- * @param {string} message 
+ *
+ * @param {string} message
  * @param {string} filename
- * @param {any} node  
+ * @param {any} node
  */
 export function error(message, filename, node) {
-  let errorMessage = message;
-  
-  if (node && node.loc) {
-    // Use GitHub-style range format: filename#L39C24-L39C32
-    const startLine = node.loc.start.line;
-    const startColumn = node.loc.start.column;
-    const endLine = node.loc.end.line;
-    const endColumn = node.loc.end.column;
-    
-    const rangeInfo = `${filename}#L${startLine}C${startColumn}-L${endLine}C${endColumn}`;
-    errorMessage += ` (${rangeInfo})`;
-  } else {
-    errorMessage += ` (${filename})`;
-  }
-  
-  throw new Error(errorMessage);
-}
+	let errorMessage = message;
+
+	if (node && node.loc) {
+		// Use GitHub-style range format: filename#L39C24-L39C32
+		const startLine = node.loc.start.line;
+		const startColumn = node.loc.start.column;
+		const endLine = node.loc.end.line;
+		const endColumn = node.loc.end.column;
+
+		const rangeInfo = `${filename}#L${startLine}C${startColumn}-L${endLine}C${endColumn}`;
+		errorMessage += ` (${rangeInfo})`;
+	} else {
+		errorMessage += ` (${filename})`;
+	}
+
+	throw new Error(errorMessage);
+}

package/src/compiler/phases/1-parse/index.js

@@ -67,7 +67,6 @@ function RipplePlugin(config) {
 			}
 
 			jsx_parseExpressionContainer() {
-				const tok = this.acornTypeScript.tokTypes;
 				let node = this.startNode();
 				this.next();
 
@@ -136,13 +135,6 @@ function RipplePlugin(config) {
 								this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
 							t
 						);
-					// case tt.bracketL:
-					// 	var t = this.jsx_parseTupleContainer();
-					// 	return (
-					// 		'JSXEmptyExpression' === t.expression.type &&
-					// 			this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
-					// 		t
-					// 	);
 					case tok.jsxTagStart:
 					case tt.string:
 						return this.parseExprAtom();
@@ -236,7 +228,7 @@ function RipplePlugin(config) {
 										commentStart,
 										commentEnd,
 										startLoc,
-										endLoc
+										endLoc,
 									);
 								}
 
@@ -273,7 +265,7 @@ function RipplePlugin(config) {
 										commentStart,
 										commentEnd,
 										startLoc,
-										endLoc
+										endLoc,
 									);
 								}
 
@@ -294,7 +286,10 @@ function RipplePlugin(config) {
 						case 62: // '>'
 						case 125: {
 							// '}'
-							if (ch === 125 && this.#path.at(-1).type === 'Component') {
+							if (
+								ch === 125 &&
+								(this.#path.length === 0 || this.#path.at(-1)?.type === 'Component')
+							) {
 								return original.readToken.call(this, ch);
 							}
 							this.raise(
@@ -307,7 +302,7 @@ function RipplePlugin(config) {
 									'`{"' +
 									this.input[this.pos] +
 									'"}' +
-									'`?'
+									'`?',
 							);
 						}
 
@@ -316,7 +311,7 @@ function RipplePlugin(config) {
 								out += this.input.slice(chunkStart, this.pos);
 								out += this.jsx_readNewLine(true);
 								chunkStart = this.pos;
-							} else if (ch === 32) {
+							} else if (ch === 32 || ch === 9) {
 								++this.pos;
 							} else {
 								this.context.push(tc.b_stat);
@@ -364,8 +359,8 @@ function RipplePlugin(config) {
 
 				if (element.selfClosing) {
 					this.#path.pop();
-					if (this.type !== tok.jsxTagStart) {
-						// Eat the closing `/>`
+
+					if (this.type.label === '</>/<=/>=') {
 						this.pos--;
 						this.next();
 					}
@@ -396,6 +391,13 @@ function RipplePlugin(config) {
 					} else {
 						this.parseTemplateBody(element.children);
 					}
+					const tok = this.acornTypeScript.tokContexts;
+
+					const curContext = this.curContext();
+
+					if (curContext === tok.tc_expr) {
+						this.context.pop();
+					}
 				}
 
 				this.finishNode(element, 'Element');
@@ -429,7 +431,7 @@ function RipplePlugin(config) {
 					noCalls,
 					maybeAsyncArrow,
 					optionalChained,
-					forInit
+					forInit,
 				);
 			}
 
@@ -573,10 +575,10 @@ export function parse(source) {
 					end,
 					loc: {
 						start: startLoc,
-						end: endLoc
-					}
+						end: endLoc,
+					},
 				});
-			}
+			},
 		});
 	} catch (e) {
 		throw e;

package/src/compiler/phases/1-parse/style.js

@@ -1,4 +1,4 @@
-import { hash } from "../../utils.js";
+import { hash } from '../../utils.js';
 
 const REGEX_COMMENT_CLOSE = /\*\//;
 const REGEX_HTML_COMMENT_CLOSE = /-->/;
@@ -90,10 +90,10 @@ export function parse_style(content) {
 	const parser = new Parser(content, false);
 
 	return {
-        source: content,
-        hash: `ripple-${hash(content)}`,
+		source: content,
+		hash: `ripple-${hash(content)}`,
 		type: 'StyleSheet',
-		body: read_body(parser)
+		body: read_body(parser),
 	};
 }
 
@@ -146,8 +146,8 @@ function read_rule(parser) {
 		metadata: {
 			parent_rule: null,
 			has_local_selectors: false,
-			is_global_block: false
-		}
+			is_global_block: false,
+		},
 	};
 }
 
@@ -175,7 +175,7 @@ function read_block(parser) {
 		type: 'Block',
 		start,
 		end: parser.index,
-		children
+		children,
 	};
 }
 
@@ -220,7 +220,7 @@ function read_declaration(parser) {
 		start,
 		end,
 		property,
-		value
+		value,
 	};
 }
 
@@ -280,7 +280,7 @@ function read_selector_list(parser, inside_pseudo_class = false) {
 				type: 'SelectorList',
 				start,
 				end,
-				children
+				children,
 			};
 		} else {
 			parser.eat(',', true);
@@ -306,7 +306,7 @@ function read_combinator(parser) {
 			type: 'Combinator',
 			name,
 			start: index,
-			end
+			end,
 		};
 	}
 
@@ -315,7 +315,7 @@ function read_combinator(parser) {
 			type: 'Combinator',
 			name: ' ',
 			start,
-			end: parser.index
+			end: parser.index,
 		};
 	}
 
@@ -343,8 +343,8 @@ function read_selector(parser, inside_pseudo_class = false) {
 			metadata: {
 				is_global: false,
 				is_global_like: false,
-				scoped: false
-			}
+				scoped: false,
+			},
 		};
 	}
 
@@ -359,7 +359,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 				type: 'NestingSelector',
 				name: '&',
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		} else if (parser.eat('*')) {
 			let name = '*';
@@ -373,28 +373,28 @@ function read_selector(parser, inside_pseudo_class = false) {
 				type: 'TypeSelector',
 				name,
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		} else if (parser.eat('#')) {
 			relative_selector.selectors.push({
 				type: 'IdSelector',
 				name: read_identifier(parser),
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		} else if (parser.eat('.')) {
 			relative_selector.selectors.push({
 				type: 'ClassSelector',
 				name: read_identifier(parser),
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		} else if (parser.eat('::')) {
 			relative_selector.selectors.push({
 				type: 'PseudoElementSelector',
 				name: read_identifier(parser),
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 			// We read the inner selectors of a pseudo element to ensure it parses correctly,
 			// but we don't do anything with the result.
@@ -418,7 +418,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 				name,
 				args,
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		} else if (parser.eat('[')) {
 			parser.allow_whitespace();
@@ -449,7 +449,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 				name,
 				matcher,
 				value,
-				flags
+				flags,
 			});
 		} else if (inside_pseudo_class && parser.match_regex(REGEX_NTH_OF)) {
 			// nth of matcher must come before combinator matcher to prevent collision else the '+' in '+2n-1' would be parsed as a combinator
@@ -458,14 +458,14 @@ function read_selector(parser, inside_pseudo_class = false) {
 				type: 'Nth',
 				value: /**@type {string} */ (parser.read(REGEX_NTH_OF)),
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		} else if (parser.match_regex(REGEX_PERCENTAGE)) {
 			relative_selector.selectors.push({
 				type: 'Percentage',
 				value: /** @type {string} */ (parser.read(REGEX_PERCENTAGE)),
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		} else if (!parser.match_regex(REGEX_COMBINATOR)) {
 			let name = read_identifier(parser);
@@ -479,7 +479,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 				type: 'TypeSelector',
 				name,
 				start,
-				end: parser.index
+				end: parser.index,
 			});
 		}
 
@@ -500,8 +500,8 @@ function read_selector(parser, inside_pseudo_class = false) {
 				children,
 				metadata: {
 					rule: null,
-					used: false
-				}
+					used: false,
+				},
 			};
 		}
 
@@ -539,7 +539,7 @@ function read_identifier(parser) {
 
 	let escaped = false;
 
-    while (parser.index < parser.template.length) {
+	while (parser.index < parser.template.length) {
 		const char = parser.template[parser.index];
 		if (escaped) {
 			identifier += '\\' + char;
@@ -559,7 +559,7 @@ function read_identifier(parser) {
 	}
 
 	if (identifier === '') {
-        throw new Error('Expected identifier');
+		throw new Error('Expected identifier');
 	}
 
 	return identifier;

package/src/compiler/phases/2-analyze/index.js

@@ -6,7 +6,7 @@ import {
 	is_event_attribute,
 	is_inside_component,
 	is_svelte_import,
-	is_tracked_name
+	is_tracked_name,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
 import is_reference from 'is-reference';
@@ -18,7 +18,7 @@ function visit_function(node, context) {
 		hoisted: false,
 		hoisted_params: [],
 		scope: context.state.scope,
-		tracked: false
+		tracked: false,
 	};
 
 	if (node.params.length > 0) {
@@ -37,7 +37,7 @@ function visit_function(node, context) {
 						binding.kind = 'prop';
 
 						binding.transform = {
-							read: (_) => b.call('$.get_property', b.id(id), b.literal(name))
+							read: (_) => b.call('$.get_property', b.id(id), b.literal(name)),
 						};
 					}
 				}
@@ -48,7 +48,7 @@ function visit_function(node, context) {
 	context.next({
 		...context.state,
 		function_depth: context.state.function_depth + 1,
-		expression: null
+		expression: null,
 	});
 }
 
@@ -192,9 +192,9 @@ const visitors = {
 								node.prefix ? '$.update_pre' : '$.update',
 								node.argument,
 								b.id('__block'),
-								node.operator === '--' && b.literal(-1)
+								node.operator === '--' && b.literal(-1),
 							);
-						}
+						},
 					};
 				} else {
 					visit(declarator, state);
@@ -202,7 +202,7 @@ const visitors = {
 			} else {
 				const paths = extract_paths(declarator.id);
 				const has_tracked = paths.some(
-					(path) => path.node.type === 'Identifier' && is_tracked_name(path.node.name)
+					(path) => path.node.type === 'Identifier' && is_tracked_name(path.node.name),
 				);
 
 				if (has_tracked) {
@@ -234,7 +234,7 @@ const visitors = {
 											b.call('$.get_computed', value.object),
 											value.property.type === 'Identifier'
 												? b.literal(value.property.name)
-												: value.property
+												: value.property,
 										);
 									}
 
@@ -246,7 +246,7 @@ const visitors = {
 									return b.member(
 										b.call('$.get_computed', value.object),
 										key,
-										key.type === 'Literal'
+										key.type === 'Literal',
 									);
 								}
 
@@ -256,12 +256,12 @@ const visitors = {
 										value.object,
 										value.property.type === 'Identifier'
 											? b.literal(value.property.name)
-											: value.property
+											: value.property,
 									);
 								}
 
 								return value;
-							}
+							},
 						};
 					}
 				} else {
@@ -300,7 +300,7 @@ const visitors = {
 						binding.kind = 'prop';
 
 						binding.transform = {
-							read: (_) => b.call('$.get_property', b.id('__props'), b.literal(name))
+							read: (_) => b.call('$.get_property', b.id('__props'), b.literal(name)),
 						};
 					}
 				}
@@ -324,7 +324,7 @@ const visitors = {
 			error(
 				'For loops are not supported in components. Use for...of instead.',
 				context.state.analysis.module.filename,
-				node
+				node,
 			);
 		}
 
@@ -336,7 +336,7 @@ const visitors = {
 			error(
 				'For...in loops are not supported in components. Use for...of instead.',
 				context.state.analysis.module.filename,
-				node
+				node,
 			);
 		}
 
@@ -348,7 +348,7 @@ const visitors = {
 			error(
 				'Elements cannot be used as generic expressions, only as statements within a component',
 				context.state.analysis.module.filename,
-				node
+				node,
 			);
 		}
 	},
@@ -411,7 +411,7 @@ const visitors = {
 							error(
 								'Cannot have both implicit and explicit children',
 								context.state.analysis.module.filename,
-								node
+								node,
 							);
 						}
 					}
@@ -421,7 +421,7 @@ const visitors = {
 						error(
 							'Cannot have both implicit and explicit children',
 							context.state.analysis.module.filename,
-							node
+							node,
 						);
 					}
 				}
@@ -436,13 +436,13 @@ const visitors = {
 					error(
 						'Cannot have a `children` prop on an element',
 						state.analysis.module.filename,
-						attribute
+						attribute,
 					);
 				} else {
 					error(
 						'Cannot have a `children` prop on a component, did you mean `$children`?',
 						state.analysis.module.filename,
-						attribute
+						attribute,
 					);
 				}
 			}
@@ -453,7 +453,7 @@ const visitors = {
 						error(
 							`Cannot have both ${name} and ${name.slice(1)} on the same element`,
 							state.analysis.module.filename,
-							n
+							n,
 						);
 					}
 				});
@@ -462,7 +462,7 @@ const visitors = {
 
 		return {
 			...node,
-			children: node.children.map((child) => visit(child))
+			children: node.children.map((child) => visit(child)),
 		};
 	},
 
@@ -474,7 +474,7 @@ const visitors = {
 		}
 
 		context.next();
-	}
+	},
 };
 
 export function analyze(ast, filename) {
@@ -486,7 +486,7 @@ export function analyze(ast, filename) {
 		module: { ast, scope, scopes, filename },
 		ast,
 		scope,
-		scopes
+		scopes,
 	};
 
 	walk(
@@ -494,9 +494,9 @@ export function analyze(ast, filename) {
 		{
 			scope,
 			scopes,
-			analysis
+			analysis,
 		},
-		visitors
+		visitors,
 	);
 
 	return analysis;