ripple 0.2.65 → 0.2.66

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.66",
   "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

@@ -629,7 +629,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('>');
@@ -1473,6 +1473,7 @@ function transform_children(children, context) {
       node.type === 'FunctionDeclaration' ||
       node.type === 'DebuggerStatement' ||
       node.type === 'ClassDeclaration' ||
+      node.type === 'TSTypeAliasDeclaration' ||
       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);