ripple 0.1.1 → 0.2.0

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

@@ -0,0 +1,543 @@
+import * as acorn from 'acorn';
+import { tsPlugin } from 'acorn-typescript';
+import { parse_style } from './style.js';
+
+const parser = acorn.Parser.extend(tsPlugin({ allowSatisfies: true }), RipplePlugin());
+
+function RipplePlugin(config) {
+	return (Parser) => {
+		const original = acorn.Parser.prototype;
+		const tt = Parser.tokTypes || acorn.tokTypes;
+		const tc = Parser.tokContexts || acorn.tokContexts;
+
+		class RippleParser extends Parser {
+			#path = [];
+
+			shouldParseExportStatement() {
+				if (super.shouldParseExportStatement()) {
+					return true;
+				}
+				if (this.value === 'component' || this.value === 'fragment') {
+					return true;
+				}
+				return this.type.keyword === 'var';
+			}
+
+			jsx_parseExpressionContainer() {
+				const tok = this.acornTypeScript.tokTypes;
+				let node = this.startNode();
+				this.next();
+
+				if (this.type === tok.at) {
+					this.next();
+
+					if (this.value === 'fragment') {
+						node.decorator = 'fragment';
+						this.next();
+					} else {
+						throw new Error(`Invalid syntax @` + this.value);
+					}
+				}
+
+				node.expression =
+					this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
+				this.expect(tt.braceR);
+				return this.finishNode(node, 'JSXExpressionContainer');
+			}
+
+			jsx_parseTupleContainer() {
+				var t = this.startNode();
+				return (
+					this.next(),
+					(t.expression =
+						this.type === tt.bracketR ? this.jsx_parseEmptyExpression() : this.parseExpression()),
+					this.expect(tt.bracketR),
+					this.finishNode(t, 'JSXExpressionContainer')
+				);
+			}
+
+			jsx_parseAttribute() {
+				let node = this.startNode();
+				if (this.eat(tt.braceL)) {
+					if (this.lookahead().type === tt.ellipsis) {
+						this.expect(tt.ellipsis);
+						node.argument = this.parseMaybeAssign();
+						this.expect(tt.braceR);
+						return this.finishNode(node, 'SpreadAttribute');
+					} else {
+						const id = this.parseIdentNode();
+						this.finishNode(id, 'Identifier');
+						node.name = id;
+						node.value = id;
+						this.next();
+						this.expect(tt.braceR);
+						return this.finishNode(node, 'Attribute');
+					}
+				}
+				node.name = this.jsx_parseNamespacedName();
+				node.value = this.eat(tt.eq) ? this.jsx_parseAttributeValue() : null;
+				return this.finishNode(node, 'JSXAttribute');
+			}
+
+			jsx_parseAttributeValue() {
+				const tok = this.acornTypeScript.tokTypes;
+
+				switch (this.type) {
+					case tt.braceL:
+						var t = this.jsx_parseExpressionContainer();
+						return (
+							'JSXEmptyExpression' === t.expression.type &&
+								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();
+					default:
+						this.raise(this.start, 'value should be either an expression or a quoted text');
+				}
+			}
+
+			parseTryStatement(node) {
+				this.next();
+				node.block = this.parseBlock();
+				node.handler = null;
+				if (this.type === tt._catch) {
+					var clause = this.startNode();
+					this.next();
+					if (this.eat(tt.parenL)) {
+						clause.param = this.parseCatchClauseParam();
+					} else {
+						if (this.options.ecmaVersion < 10) {
+							this.unexpected();
+						}
+						clause.param = null;
+						this.enterScope(0);
+					}
+					clause.body = this.parseBlock(false);
+					this.exitScope();
+					node.handler = this.finishNode(clause, 'CatchClause');
+				}
+				node.finalizer = this.eat(tt._finally) ? this.parseBlock() : null;
+
+				if (this.value === 'async') {
+					this.next();
+					node.async = this.parseBlock();
+				} else {
+					node.async = null;
+				}
+
+				if (!node.handler && !node.finalizer && !node.async) {
+					this.raise(node.start, 'Missing catch or finally clause');
+				}
+				return this.finishNode(node, 'TryStatement');
+			}
+
+			jsx_readToken() {
+				let out = '',
+					chunkStart = this.pos;
+				const tok = this.acornTypeScript.tokTypes;
+
+				for (;;) {
+					if (this.pos >= this.input.length) this.raise(this.start, 'Unterminated JSX contents');
+					let ch = this.input.charCodeAt(this.pos);
+
+					switch (ch) {
+						case 60: // '<'
+						case 123: // '{'
+							if (ch === 60 && this.exprAllowed) {
+								++this.pos;
+								return this.finishToken(tok.jsxTagStart);
+							}
+							if (ch === 123 && this.exprAllowed) {
+								return this.getTokenFromCode(ch);
+							}
+							debugger;
+							throw new Error('TODO: Invalid syntax');
+
+						case 47: // '/'
+							// Check if this is a comment (// or /*)
+							if (this.input.charCodeAt(this.pos + 1) === 47) {
+								// '//'
+								// Line comment - handle it properly
+								const commentStart = this.pos;
+								const startLoc = this.curPosition();
+								this.pos += 2;
+
+								let commentText = '';
+								while (this.pos < this.input.length) {
+									const nextCh = this.input.charCodeAt(this.pos);
+									if (acorn.isNewLine(nextCh)) break;
+									commentText += this.input[this.pos];
+									this.pos++;
+								}
+
+								const commentEnd = this.pos;
+								const endLoc = this.curPosition();
+
+								// Call onComment if it exists
+								if (this.options.onComment) {
+									this.options.onComment(
+										false,
+										commentText,
+										commentStart,
+										commentEnd,
+										startLoc,
+										endLoc
+									);
+								}
+
+								// Continue processing from current position
+								break;
+							} else if (this.input.charCodeAt(this.pos + 1) === 42) {
+								// '/*'
+								// Block comment - handle it properly
+								const commentStart = this.pos;
+								const startLoc = this.curPosition();
+								this.pos += 2;
+
+								let commentText = '';
+								while (this.pos < this.input.length - 1) {
+									if (
+										this.input.charCodeAt(this.pos) === 42 &&
+										this.input.charCodeAt(this.pos + 1) === 47
+									) {
+										this.pos += 2;
+										break;
+									}
+									commentText += this.input[this.pos];
+									this.pos++;
+								}
+
+								const commentEnd = this.pos;
+								const endLoc = this.curPosition();
+
+								// Call onComment if it exists
+								if (this.options.onComment) {
+									this.options.onComment(
+										true,
+										commentText,
+										commentStart,
+										commentEnd,
+										startLoc,
+										endLoc
+									);
+								}
+
+								// Continue processing from current position
+								break;
+							}
+							// If not a comment, fall through to default case
+							this.context.push(tc.b_stat);
+							this.exprAllowed = true;
+							return original.readToken.call(this, ch);
+
+						case 38: // '&'
+							out += this.input.slice(chunkStart, this.pos);
+							out += this.jsx_readEntity();
+							chunkStart = this.pos;
+							break;
+
+						case 62: // '>'
+						case 125: {
+							// '}'
+							if (
+								ch === 125 &&
+								(this.#path.at(-1).type === 'Component' || this.#path.at(-1).type === 'Fragment')
+							) {
+								return original.readToken.call(this, ch);
+							}
+							this.raise(
+								this.pos,
+								'Unexpected token `' +
+									this.input[this.pos] +
+									'`. Did you mean `' +
+									(ch === 62 ? '&gt;' : '&rbrace;') +
+									'` or ' +
+									'`{"' +
+									this.input[this.pos] +
+									'"}' +
+									'`?'
+							);
+						}
+
+						default:
+							if (acorn.isNewLine(ch)) {
+								out += this.input.slice(chunkStart, this.pos);
+								out += this.jsx_readNewLine(true);
+								chunkStart = this.pos;
+							} else if (ch === 32) {
+								++this.pos;
+							} else {
+								this.context.push(tc.b_stat);
+								this.exprAllowed = true;
+								return original.readToken.call(this, ch);
+							}
+					}
+				}
+			}
+
+			parseElement() {
+				const tok = this.acornTypeScript.tokTypes;
+				// Adjust the start so we capture the `<` as part of the element
+				const prev_pos = this.pos;
+				this.pos = this.start - 1;
+				const position = this.curPosition();
+				this.pos = prev_pos;
+
+				const element = this.startNode();
+				element.start = position.index;
+				element.loc.start = position;
+				element.type = 'Element';
+				this.#path.push(element);
+				element.children = [];
+				const open = this.jsx_parseOpeningElementAt();
+				for (const attr of open.attributes) {
+					if (attr.type === 'JSXAttribute') {
+						attr.type = 'Attribute';
+						if (attr.name.type === 'JSXIdentifier') {
+							attr.name.type = 'Identifier';
+						}
+						if (attr.value.type === 'JSXExpressionContainer') {
+							attr.value = attr.value.expression;
+						}
+					}
+				}
+				if (open.name.type === 'JSXIdentifier') {
+					open.name.type = 'Identifier';
+				}
+				element.id = open.name;
+				element.id.type = 'Identifier';
+				element.attributes = open.attributes;
+				element.selfClosing = open.selfClosing;
+				element.metadata = {};
+
+				if (element.selfClosing) {
+					this.#path.pop();
+					if (this.type !== tok.jsxTagStart) {
+						// Eat the closing `/>`
+						this.pos--;
+						this.next();
+					}
+				} else {
+					if (open.name.name === 'style') {
+						const start = this.start;
+						const input = this.input.slice(start);
+						const end = input.indexOf('</style>');
+						const content = input.slice(0, end);
+
+						const component = this.#path.findLast((n) => n.type === 'Component');
+						if (component.css !== null) {
+							throw new Error('Components can only have one style tag');
+						}
+						component.css = parse_style(content);
+
+						this.pos = start + end + 1;
+						this.type = tok.jsxTagStart;
+						this.next();
+						if (this.value === '/') {
+							this.next();
+							this.jsx_parseElementName();
+							this.exprAllowed = true;
+							this.#path.pop();
+							this.next();
+						}
+						return null;
+					} else {
+						this.parseTemplateBody(element.children);
+					}
+				}
+
+				this.finishNode(element, 'Element');
+				return element;
+			}
+
+			parseTemplateBody(body) {
+				var inside_func =
+					this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
+
+				if (!inside_func) {
+					if (this.type.label === 'return') {
+						throw new Error('`return` statements are not allowed in components');
+					}
+					if (this.type.label === 'continue') {
+						throw new Error('`continue` statements are not allowed in components');
+					}
+					if (this.type.label === 'break') {
+						throw new Error('`break` statements are not allowed in components');
+					}
+				}
+
+				if (this.type.label === '{') {
+					const node = this.jsx_parseExpressionContainer();
+					node.type = node.decorator === 'fragment' ? 'RenderFragment' : 'Text';
+					if (node.decorator === 'fragment' && node.expression.type !== 'CallExpression') {
+						throw new Error('{@fragment} must be a function call');
+					}
+					body.push(node);
+				} else if (this.type.label === '}') {
+					return;
+				} else if (this.type.label === 'jsxTagStart') {
+					this.next();
+					if (this.value === '/') {
+						this.next();
+						this.jsx_parseElementName();
+						this.exprAllowed = true;
+						this.#path.pop();
+						this.next();
+						return;
+					}
+					const node = this.parseElement();
+					if (node !== null) {
+						body.push(node);
+					}
+				} else {
+					const node = this.parseStatement(null);
+					body.push(node);
+				}
+				this.parseTemplateBody(body);
+			}
+
+			parseStatement(context, topLevel, exports) {
+				const tok = this.acornTypeScript.tokContexts;
+
+				if (
+					context !== 'for' &&
+					context !== 'if' &&
+					this.context.at(-1) === tc.b_stat &&
+					this.type === tt.braceL &&
+					this.context.some((c) => c === tok.tc_expr)
+				) {
+					this.next();
+					const node = this.jsx_parseExpressionContainer();
+					node.type = 'Text';
+					this.next();
+					this.context.pop();
+					this.context.pop();
+					return node;
+				}
+
+				if (this.value === 'component') {
+					const node = this.startNode();
+					node.type = 'Component';
+					node.css = null;
+					this.next();
+					this.enterScope(0);
+					node.id = this.parseIdent();
+					this.parseFunctionParams(node);
+					this.eat(tt.braceL);
+					node.body = [];
+					this.#path.push(node);
+
+					this.parseTemplateBody(node.body);
+
+					this.#path.pop();
+					this.exitScope();
+
+					this.next();
+					this.finishNode(node, 'Component');
+					this.awaitPos = 0;
+
+					return node;
+				}
+
+				if (this.value === 'fragment') {
+					const node = this.startNode();
+					node.type = 'Fragment';
+					this.next();
+					this.enterScope(0);
+					node.id = this.parseIdent();
+					this.parseFunctionParams(node);
+					this.eat(tt.braceL);
+					node.body = [];
+					this.#path.push(node);
+
+					this.parseTemplateBody(node.body);
+
+					this.#path.pop();
+					this.exitScope();
+
+					this.finishNode(node, 'Fragment');
+					this.next();
+					this.awaitPos = 0;
+
+					return node;
+				}
+
+				return super.parseStatement(context, topLevel, exports);
+			}
+
+			parseBlock(createNewLexicalScope, node, exitStrict) {
+				const parent = this.#path.at(-1);
+
+				if (
+					parent?.type === 'Component' ||
+					parent?.type === 'Fragment' ||
+					parent?.type === 'Element'
+				) {
+					if (createNewLexicalScope === void 0) createNewLexicalScope = true;
+					if (node === void 0) node = this.startNode();
+
+					node.body = [];
+					this.expect(tt.braceL);
+					if (createNewLexicalScope) {
+						this.enterScope(0);
+					}
+					this.parseTemplateBody(node.body);
+
+					if (exitStrict) {
+						this.strict = false;
+					}
+					this.exprAllowed = true;
+
+					this.next();
+					if (createNewLexicalScope) {
+						this.exitScope();
+					}
+					return this.finishNode(node, 'BlockStatement');
+				}
+
+				return super.parseBlock(createNewLexicalScope, node, exitStrict);
+			}
+		}
+
+		return RippleParser;
+	};
+}
+
+export function parse(source) {
+	const comments = [];
+	let ast;
+
+	try {
+		ast = parser.parse(source, {
+			sourceType: 'module',
+			ecmaVersion: 13,
+			locations: true,
+			onComment: (block, text, start, end, startLoc, endLoc) => {
+				comments.push({
+					type: block ? 'Block' : 'Line',
+					value: text,
+					start,
+					end,
+					loc: {
+						start: startLoc,
+						end: endLoc
+					}
+				});
+			}
+		});
+	} catch (e) {
+		throw e;
+	}
+
+	ast.comments = comments;
+	return ast;
+}