ripple 0.2.40 → 0.2.42

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.40",
+  "version": "0.2.42",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -2,6 +2,7 @@ import * as acorn from 'acorn';
 import { tsPlugin } from 'acorn-typescript';
 import { parse_style } from './style.js';
 import { walk } from 'zimmerframe';
+import { regex_newline_characters } from '../../../utils/patterns.js';
 
 const parser = acorn.Parser.extend(tsPlugin({ allowSatisfies: true }), RipplePlugin());
 
@@ -412,7 +413,9 @@ function RipplePlugin(config) {
 					}
 				} else {
 					if (open.name.name === 'style') {
-						const start = this.start;
+						// jsx_parseOpeningElementAt treats ID selectors (ie. #myid) or type selectors (ie. div) as identifier and read it
+						// So backtrack to the end of the <style> tag to make sure everything is included
+						const start = open.end;
 						const input = this.input.slice(start);
 						const end = input.indexOf('</style>');
 						const content = input.slice(0, end);
@@ -423,7 +426,13 @@ function RipplePlugin(config) {
 						}
 						component.css = parse_style(content);
 
-						this.pos = start + end + 1;
+						const newLines = content.match(regex_newline_characters)?.length;
+						if (newLines) {
+							this.curLine = open.loc.end.line + newLines;
+							this.lineStart = start + content.lastIndexOf('\n') + 1;
+						}
+						this.pos = start + content.length + 1;
+
 						this.type = tok.jsxTagStart;
 						this.next();
 						if (this.value === '/') {

package/src/compiler/phases/3-transform/index.js

@@ -199,6 +199,20 @@ const visitors = {
 		);
 	},
 
+	TSTypeAliasDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
+	TSInterfaceDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
 	NewExpression(node, context) {
 		const callee = node.callee;
 		const parent = context.path.at(-1);

package/src/utils/patterns.js

@@ -12,6 +12,7 @@ export const regex_whitespaces_strict = /[ \t\n\r\f]+/g;
 
 export const regex_only_whitespaces = /^[ \t\n\r\f]+$/;
 
+export const regex_newline_characters = /\n/g;
 export const regex_not_newline_characters = /[^\n]/g;
 
 export const regex_is_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;

package/tests/compiler.test.ripple

@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, RippleArray } from 'ripple';
+import { parse } from 'ripple/compiler'
 
 describe('compiler success tests', () => {
   let container;
@@ -20,6 +21,30 @@ describe('compiler success tests', () => {
 		container = null;
 	});
 
+	
+	it('Parses style content correctly', () => {
+		const source = `export component App() {
+  <div id="myid" class="myclass">{"Hello World"}</div>
+  
+  <style>#style</style>
+}`;
+		const style1 = '.myid {color: green }';
+		const style2 = '#myid {color: green }';
+		const style3 = 'div {color: green }';
+		
+		let input = source.replace('#style', style1);
+		let ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style1);
+
+		input = source.replace('#style', style2);
+		ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style2);
+
+		input = source.replace('#style', style3);
+		ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style3);
+	});
+
   it('renders without crashing', () => {
 		component App() {
 			let foo;