ripple 0.2.65 → 0.2.67

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.65",
+  "version": "0.2.67",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -486,12 +486,6 @@ const visitors = {
             state.analysis.module.filename,
             attribute,
           );
-        } else {
-          error(
-            'Cannot have a `children` prop on a component, did you mean `$children`?',
-            state.analysis.module.filename,
-            attribute,
-          );
         }
       }
     }

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

@@ -324,6 +324,13 @@ const visitors = {
     }
   },
 
+  PropertyDefinition(node, context) {
+    if (!context.state.to_ts) {
+      delete node.typeAnnotation;
+    }
+    return context.next();
+  },
+
   VariableDeclaration(node, context) {
     const declarations = [];
 
@@ -629,7 +636,7 @@ const visitors = {
       } else if (node.metadata.scoped && state.component.css) {
         const value = state.component.css.hash;
 
-        handle_static_attr('class', value);
+        handle_static_attr(is_spreading ? '#class' : 'class', value);
       }
 
       state.template.push('>');
@@ -1152,7 +1159,9 @@ const visitors = {
   },
 
   TemplateLiteral(node, context) {
-    if (node.expressions.length === 0) {
+    const parent = context.path.at(-1);
+
+    if (node.expressions.length === 0 && parent?.type !== 'TaggedTemplateExpression') {
       return b.literal(node.quasis[0].value.cooked);
     }
 
@@ -1473,6 +1482,8 @@ function transform_children(children, context) {
       node.type === 'FunctionDeclaration' ||
       node.type === 'DebuggerStatement' ||
       node.type === 'ClassDeclaration' ||
+      node.type === 'TSTypeAliasDeclaration' ||
+      node.type === 'TSInterfaceDeclaration' ||
       node.type === 'Component'
     ) {
       const metadata = { await: false };

package/src/jsx-runtime.d.ts

@@ -30,7 +30,7 @@ export function jsxs(
  * JSX Fragment component
  * In Ripple, fragments are imperative and don't return anything
  */
-export function Fragment(props: { $children?: any }): void;
+export function Fragment(props: { children?: any }): void;
 
 // Base HTML attributes
 interface HTMLAttributes {
@@ -41,7 +41,7 @@ interface HTMLAttributes {
 	onClick?: (event: MouseEvent) => void;
 	onInput?: (event: InputEvent) => void;
 	onChange?: (event: Event) => void;
-	$children?: any;
+	children?: any;
 	[key: string]: any;
 }
 
@@ -88,7 +88,7 @@ declare global {
 		}
 
 		interface ElementChildrenAttribute {
-			$children: {};
+			children: {};
 		}
 	}
 }

package/src/runtime/internal/client/render.js

@@ -7,7 +7,11 @@ import {
   is_tracked_object,
 } from './utils.js';
 import { delegate, event } from './events.js';
-import { get_attribute_event_name, is_delegated, is_event_attribute } from '../../../utils/events.js';
+import {
+  get_attribute_event_name,
+  is_delegated,
+  is_event_attribute,
+} from '../../../utils/events.js';
 import { get } from './runtime.js';
 
 export function set_text(text, value) {
@@ -81,6 +85,9 @@ export function set_attributes(element, attributes) {
 
     if (key === 'class') {
       set_class(element, value);
+    } else if (key === '#class') {
+      // Special case for static class when spreading props
+      element.classList.add(value);
     } else if (is_event_attribute(key)) {
       // Handle event handlers in spread props
       const event_name = get_attribute_event_name(key);

package/tests/compiler.test.ripple

@@ -65,7 +65,7 @@ describe('compiler success tests', () => {
 	});
 
 
-  /*it('renders without crashing using < character', () => {
+  	it('renders without crashing using < character', () => {
 		component App() {
 			function bar() {
         for (let i = 0; i < 10; i++) {
@@ -80,7 +80,7 @@ describe('compiler success tests', () => {
 		}
 
 		render(App);
-	});*/
+	});
 
 	it('render lexical blocks without crashing', () => {
 		component App() {
@@ -240,4 +240,44 @@ describe('compiler success tests', () => {
 
 		render(App);
 	});
+
+	it('should not fail with random TS syntax', () => {
+		function tagFn() {
+			return null;
+		}
+
+		function Wrapper() {
+		return {
+				unwrap: function<T>() {
+				return null as unknown as T;
+				}
+			}
+		}
+
+		component App() {
+			let x: number[] = [] as number[];
+
+			const n = new Wrapper<number>().unwrap<string>();
+
+			const tagResult = tagFn`value`;
+
+			interface Node<T> {
+				value: T;
+			}
+
+			class Box<T> {
+				value: T;
+
+				method<T>(): T {
+				return this.value;
+				}
+			}
+
+			let flag = true;
+
+			const s = flag ? new Box<number>() : new Box<string>();
+		}
+
+		render(App);
+	});
 });