ripple 0.2.64 → 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.64",
+  "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

@@ -259,11 +259,12 @@ const visitors = {
       context.state.metadata.tracking = true;
     }
 
-    if (!is_inside_component(context, true) || is_inside_call_expression(context)) {
-      return context.next();
-    }
-
-    if (is_value_static(node)) {
+    if (
+      context.state.to_ts ||
+      !is_inside_component(context, true) ||
+      is_inside_call_expression(context) ||
+      is_value_static(node)
+    ) {
       return context.next();
     }
 
@@ -628,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('>');
@@ -1472,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);

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

@@ -2,6 +2,11 @@ import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.
 import { first_child, is_firefox } from './operations.js';
 import { active_block } from './runtime.js';
 
+/**
+ * Assigns start and end nodes to the active block's state.
+ * @param {Node} start - The start node.
+ * @param {Node} end - The end node.
+ */
 export function assign_nodes(start, end) {
   var block = /** @type {Effect} */ (active_block);
   if (block.s === null) {
@@ -12,12 +17,23 @@ export function assign_nodes(start, end) {
   }
 }
 
+/**
+ * Creates a DocumentFragment from an HTML string.
+ * @param {string} html - The HTML string.
+ * @returns {DocumentFragment}
+ */
 function create_fragment_from_html(html) {
   var elem = document.createElement('template');
   elem.innerHTML = html;
   return elem.content;
 }
 
+/**
+ * Creates a template node or fragment from content and flags.
+ * @param {string} content - The template content.
+ * @param {number} flags - Flags for template type.
+ * @returns {Node}
+ */
 export function template(content, flags) {
   var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
   var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
@@ -46,6 +62,11 @@ export function template(content, flags) {
   };
 }
 
+/**
+ * Appends a DOM node before the anchor node.
+ * @param {Node} anchor - The anchor node.
+ * @param {Node} dom - The DOM node to append.
+ */
 export function append(anchor, dom) {
   anchor.before(/** @type {Node} */ (dom));
 }

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

@@ -24,6 +24,11 @@ export function is_positive_integer(value) {
   return Number.isInteger(value) && /**@type {number} */ (value) >= 0;
 }
 
+/**
+ * Checks if an object is a tracked object (has a numeric 'f' property).
+ * @param {object} v - The object to check.
+ * @returns {boolean}
+ */
 export function is_tracked_object(v) {
   return typeof v === 'object' && v !== null && typeof v.f === 'number';
 }

package/src/utils/events.js

@@ -34,6 +34,11 @@ export function is_delegated(event_name) {
   return DELEGATED_EVENTS.includes(event_name);
 }
 
+/**
+ * Determines if an attribute is an event attribute (e.g., 'onClick').
+ * @param {string} attr - The attribute name.
+ * @returns {boolean}
+ */
 export function is_event_attribute(attr) {
   return attr.startsWith('on') && attr.length > 2 && attr[2] === attr[2].toUpperCase();
 }
@@ -62,6 +67,11 @@ export function get_attribute_event_name(event_name) {
 
 const PASSIVE_EVENTS = ['touchstart', 'touchmove'];
 
+/**
+ * Checks if an event is passive (e.g., 'touchstart', 'touchmove').
+ * @param {string} name - The event name.
+ * @returns {boolean}
+ */
 export function is_passive_event(name) {
   return PASSIVE_EVENTS.includes(name);
 }