ripple 0.2.6 → 0.2.8

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

@@ -4,7 +4,7 @@ export const mapping_data = {
 	verification: true,
 	completion: true,
 	semantic: true,
-	navigation: true
+	navigation: true,
 };
 
 /**
@@ -16,27 +16,27 @@ export const mapping_data = {
  */
 export function convert_source_map_to_mappings(source_map, source, generated_code) {
 	const mappings = [];
-	
+
 	// Decode the VLQ mappings from esrap
 	const decoded_mappings = decode(source_map.mappings);
-	
+
 	let generated_offset = 0;
 	const generated_lines = generated_code.split('\n');
-	
+
 	// Process each line of generated code
 	for (let generated_line = 0; generated_line < generated_lines.length; generated_line++) {
 		const line = generated_lines[generated_line];
 		const line_mappings = decoded_mappings[generated_line] || [];
-		
+
 		// Process mappings for this line
 		for (const mapping of line_mappings) {
 			const [generated_column, source_file_index, source_line, source_column] = mapping;
-			
+
 			// Skip mappings without source information
 			if (source_file_index == null || source_line == null || source_column == null) {
 				continue;
 			}
-			
+
 			// Calculate source offset
 			const source_lines = source.split('\n');
 			let source_offset = 0;
@@ -44,24 +44,29 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 				source_offset += source_lines[i].length + 1; // +1 for newline
 			}
 			source_offset += source_column;
-			
+
 			// Calculate generated offset
 			const current_generated_offset = generated_offset + generated_column;
-			
+
 			// Determine segment length (look ahead to next mapping or end of line)
 			const next_mapping = line_mappings[line_mappings.indexOf(mapping) + 1];
-			let segment_length = next_mapping ? next_mapping[0] - generated_column : Math.max(1, line.length - generated_column);
-			
+			let segment_length = next_mapping
+				? next_mapping[0] - generated_column
+				: Math.max(1, line.length - generated_column);
+
 			// Determine the actual segment content
-			const generated_content = generated_code.substring(current_generated_offset, current_generated_offset + segment_length);
+			const generated_content = generated_code.substring(
+				current_generated_offset,
+				current_generated_offset + segment_length,
+			);
 			const source_content = source.substring(source_offset, source_offset + segment_length);
-			
+
 			// Skip mappings for UseAttribute syntax to avoid overlapping sourcemaps
 			if (source_content.includes('{@use ') || source_content.match(/\{\s*@use\s+/)) {
 				continue;
 			}
-			
-			// Fix for $children mapping: when generated content is "$children", 
+
+			// Fix for $children mapping: when generated content is "$children",
 			// it should only map to the component name in the source, not include attributes
 			if (generated_content === '$children') {
 				// Look for the component name in the source content
@@ -71,24 +76,24 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 					segment_length = component_name.length;
 				}
 			}
-			
+
 			mappings.push({
 				sourceOffsets: [source_offset],
 				generatedOffsets: [current_generated_offset],
 				lengths: [segment_length],
-				data: mapping_data
+				data: mapping_data,
 			});
 		}
-		
+
 		// Add line length + 1 for newline (except for last line)
 		generated_offset += line.length;
 		if (generated_line < generated_lines.length - 1) {
 			generated_offset += 1; // newline character
 		}
 	}
-	
+
 	return {
 		code: generated_code,
-		mappings
+		mappings,
 	};
 }

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

@@ -113,7 +113,7 @@ const visitors = {
 
 		next();
 	},
-    Declaration(node, { state }) {
+	Declaration(node, { state }) {
 		const property = node.property && remove_css_prefix(node.property.toLowerCase());
 		if (property === 'animation' || property === 'animation-name') {
 			let index = node.start + node.property.length + 1;
@@ -140,19 +140,19 @@ const visitors = {
 			}
 		}
 	},
-    Rule(node, { state, next, visit, path }) {
+	Rule(node, { state, next, visit, path }) {
 		if (is_empty(node, is_in_global_block(path))) {
 			state.code.prependRight(node.start, '/* (empty) ');
-            state.code.appendLeft(node.end, '*/');
-            escape_comment_close(node, state.code);
+			state.code.appendLeft(node.end, '*/');
+			escape_comment_close(node, state.code);
 
 			return;
 		}
 
 		if (!is_used(node) && !is_in_global_block(path)) {
 			state.code.prependRight(node.start, '/* (unused) ');
-            state.code.appendLeft(node.end, '*/');
-            escape_comment_close(node, state.code);
+			state.code.appendLeft(node.end, '*/');
+			escape_comment_close(node, state.code);
 
 			return;
 		}
@@ -181,7 +181,7 @@ const visitors = {
 
 		next();
 	},
-    SelectorList(node, { state, next, path }) {
+	SelectorList(node, { state, next, path }) {
 		// Only add comments if we're not inside a complex selector that itself is unused or a global block
 		if (
 			!is_in_global_block(path) &&
@@ -264,7 +264,7 @@ const visitors = {
 
 		next({ ...state, specificity });
 	},
-    ComplexSelector(node, context) {
+	ComplexSelector(node, context) {
 		const before_bumped = context.state.specificity.bumped;
 
 		for (const relative_selector of node.children) {
@@ -347,26 +347,26 @@ const visitors = {
 		if (node.name === 'is' || node.name === 'where' || node.name === 'has' || node.name === 'not') {
 			context.next();
 		}
-	}
+	},
 };
 
 export function render_stylesheets(stylesheets) {
-    let css = '';
-    
-    for (const stylesheet of stylesheets) {
-        const code = new MagicString(stylesheet.source);
-        const state = {
-            code,
-            hash: stylesheet.hash,
-            selector: `.${stylesheet.hash}`,
-            specificity: {
-                bumped: false
-            }
-        };
-        
-        walk(stylesheet, state, visitors);
-        css += code.toString();
-    }
-
-    return css;
-}
+	let css = '';
+
+	for (const stylesheet of stylesheets) {
+		const code = new MagicString(stylesheet.source);
+		const state = {
+			code,
+			hash: stylesheet.hash,
+			selector: `.${stylesheet.hash}`,
+			specificity: {
+				bumped: false,
+			},
+		};
+
+		walk(stylesheet, state, visitors);
+		css += code.toString();
+	}
+
+	return css;
+}

package/src/compiler/scope.js

@@ -167,7 +167,7 @@ export function create_scopes(ast, root, parent) {
 			} else {
 				next();
 			}
-		}
+		},
 	});
 
 	for (const [scope, { node, path }] of references) {
@@ -193,7 +193,7 @@ export function create_scopes(ast, root, parent) {
 
 	return {
 		scope,
-		scopes
+		scopes,
 	};
 }
 
@@ -293,7 +293,7 @@ export class Scope {
 			kind,
 			declaration_kind,
 			is_called: false,
-			metadata: null
+			metadata: null,
 		};
 
 		this.declarations.set(node.name, binding);

package/src/compiler/utils.js

@@ -51,7 +51,7 @@ const RESERVED_WORDS = [
 	'void',
 	'while',
 	'with',
-	'yield'
+	'yield',
 ];
 
 export function is_reserved(word) {
@@ -90,7 +90,7 @@ const DOM_BOOLEAN_ATTRIBUTES = [
 	'webkitdirectory',
 	'defer',
 	'disablepictureinpicture',
-	'disableremoteplayback'
+	'disableremoteplayback',
 ];
 
 export function is_boolean_attribute(name) {
@@ -112,7 +112,7 @@ const DOM_PROPERTIES = [
 	'noValidate',
 	'allowFullscreen',
 	'disablePictureInPicture',
-	'disableRemotePlayback'
+	'disableRemotePlayback',
 ];
 
 export function is_dom_property(name) {
@@ -143,7 +143,7 @@ const DELEGATED_EVENTS = [
 	'pointerup',
 	'touchend',
 	'touchmove',
-	'touchstart'
+	'touchstart',
 ];
 
 export function is_delegated(event_name) {
@@ -436,7 +436,7 @@ export function visit_assignment_expression(node, context, build_assignment) {
 				b.assignment(
 					'=',
 					/** @type {Pattern} */ (context.visit(path.node)),
-					/** @type {Expression} */ (context.visit(value))
+					/** @type {Expression} */ (context.visit(value)),
 				)
 			);
 		});
@@ -510,8 +510,8 @@ export function build_assignment(operator, left, right, context) {
 			b.assignment(
 				operator,
 				/** @type {Pattern} */ (context.visit(left)),
-				/** @type {Expression} */ (context.visit(right))
-			)
+				/** @type {Expression} */ (context.visit(right)),
+			),
 		);
 	}
 
@@ -548,5 +548,3 @@ export function hash(str) {
 	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
 	return (hash >>> 0).toString(36);
 }
-
-

package/src/constants.js

@@ -1,4 +1,3 @@
-
 export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
-export const IS_CONTROLLED = 1 << 2;
+export const IS_CONTROLLED = 1 << 2;

package/src/jsx-runtime.d.ts

@@ -11,9 +11,9 @@ export type ComponentType<P = {}> = (props: P) => void;
  * In Ripple, this doesn't return anything - components are imperative
  */
 export function jsx(
-  type: string | ComponentType<any>,
-  props?: any,
-  key?: string | number | null
+	type: string | ComponentType<any>,
+	props?: any,
+	key?: string | number | null,
 ): void;
 
 /**
@@ -21,9 +21,9 @@ export function jsx(
  * In Ripple, this doesn't return anything - components are imperative
  */
 export function jsxs(
-  type: string | ComponentType<any>,
-  props?: any,
-  key?: string | number | null
+	type: string | ComponentType<any>,
+	props?: any,
+	key?: string | number | null,
 ): void;
 
 /**
@@ -34,61 +34,61 @@ export function Fragment(props: { $children?: any }): void;
 
 // Base HTML attributes
 interface HTMLAttributes {
-  class?: string;
-  className?: string;
-  id?: string;
-  style?: string | Record<string, string | number>;
-  onClick?: (event: MouseEvent) => void;
-  onInput?: (event: InputEvent) => void;
-  onChange?: (event: Event) => void;
-  $children?: any;
-  [key: string]: any;
+	class?: string;
+	className?: string;
+	id?: string;
+	style?: string | Record<string, string | number>;
+	onClick?: (event: MouseEvent) => void;
+	onInput?: (event: InputEvent) => void;
+	onChange?: (event: Event) => void;
+	$children?: any;
+	[key: string]: any;
 }
 
 // Global JSX namespace for TypeScript
 declare global {
-  namespace JSX {
-    // In Ripple, JSX expressions don't return elements - they're imperative
-    type Element = void;
-    
-    interface IntrinsicElements {
-      // HTML elements with basic attributes
-      div: HTMLAttributes;
-      span: HTMLAttributes;
-      p: HTMLAttributes;
-      h1: HTMLAttributes;
-      h2: HTMLAttributes;
-      h3: HTMLAttributes;
-      h4: HTMLAttributes;
-      h5: HTMLAttributes;
-      h6: HTMLAttributes;
-      button: HTMLAttributes & {
-        type?: 'button' | 'submit' | 'reset';
-        disabled?: boolean;
-      };
-      input: HTMLAttributes & {
-        type?: string;
-        value?: string | number;
-        placeholder?: string;
-        disabled?: boolean;
-      };
-      form: HTMLAttributes;
-      a: HTMLAttributes & {
-        href?: string;
-        target?: string;
-      };
-      img: HTMLAttributes & {
-        src?: string;
-        alt?: string;
-        width?: string | number;
-        height?: string | number;
-      };
-      // Add more as needed...
-      [elemName: string]: HTMLAttributes;
-    }
-    
-    interface ElementChildrenAttribute {
-      $children: {};
-    }
-  }
+	namespace JSX {
+		// In Ripple, JSX expressions don't return elements - they're imperative
+		type Element = void;
+
+		interface IntrinsicElements {
+			// HTML elements with basic attributes
+			div: HTMLAttributes;
+			span: HTMLAttributes;
+			p: HTMLAttributes;
+			h1: HTMLAttributes;
+			h2: HTMLAttributes;
+			h3: HTMLAttributes;
+			h4: HTMLAttributes;
+			h5: HTMLAttributes;
+			h6: HTMLAttributes;
+			button: HTMLAttributes & {
+				type?: 'button' | 'submit' | 'reset';
+				disabled?: boolean;
+			};
+			input: HTMLAttributes & {
+				type?: string;
+				value?: string | number;
+				placeholder?: string;
+				disabled?: boolean;
+			};
+			form: HTMLAttributes;
+			a: HTMLAttributes & {
+				href?: string;
+				target?: string;
+			};
+			img: HTMLAttributes & {
+				src?: string;
+				alt?: string;
+				width?: string | number;
+				height?: string | number;
+			};
+			// Add more as needed...
+			[elemName: string]: HTMLAttributes;
+		}
+
+		interface ElementChildrenAttribute {
+			$children: {};
+		}
+	}
 }

package/src/jsx-runtime.js

@@ -13,26 +13,26 @@
  * @returns {void} Ripple components don't return anything
  */
 export function jsx(type, props, key) {
-  // Ripple components are imperative - they don't return JSX elements
-  // This is a placeholder for the actual Ripple rendering logic
-  if (typeof type === 'function') {
-    // Call the Ripple component function
-    type(props);
-  } else {
-    // Handle DOM elements
-    console.warn('DOM element rendering not implemented in jsx runtime:', type, props);
-  }
+	// Ripple components are imperative - they don't return JSX elements
+	// This is a placeholder for the actual Ripple rendering logic
+	if (typeof type === 'function') {
+		// Call the Ripple component function
+		type(props);
+	} else {
+		// Handle DOM elements
+		console.warn('DOM element rendering not implemented in jsx runtime:', type, props);
+	}
 }
 
 /**
  * Create a JSX element with static children (optimization for multiple children)
- * @param {string | Function} type - Element type (tag name or component function) 
+ * @param {string | Function} type - Element type (tag name or component function)
  * @param {object} props - Element properties
  * @param {string} key - Element key (optional)
  * @returns {void} Ripple components don't return anything
  */
 export function jsxs(type, props, key) {
-  return jsx(type, props, key);
+	return jsx(type, props, key);
 }
 
 /**
@@ -41,6 +41,6 @@ export function jsxs(type, props, key) {
  * @returns {void} Ripple fragments don't return anything
  */
 export function Fragment(props) {
-  // Ripple fragments are imperative
-  console.warn('Fragment rendering not implemented in jsx runtime:', props);
+	// Ripple fragments are imperative
+	console.warn('Fragment rendering not implemented in jsx runtime:', props);
 }

package/src/runtime/array.js

@@ -30,7 +30,7 @@ const introspect_methods = [
 	'toString',
 	symbol_iterator,
 	'values',
-	'with'
+	'with',
 ];
 
 let init = false;
@@ -172,25 +172,25 @@ class RippleArray extends Array {
 		return get(this.#tracked_index);
 	}
 
-    set $length(length) {
-        var block = scope();
-        var tracked_elements = this.#tracked_elements;
+	set $length(length) {
+		var block = scope();
+		var tracked_elements = this.#tracked_elements;
 
-        if (length !== this.$length) {
-            for (var i = 0; i < tracked_elements.length; i++) {
-                increment(tracked_elements[i], block);
-            }
-            this.length = length;
-            tracked_elements.length = length;
+		if (length !== this.$length) {
+			for (var i = 0; i < tracked_elements.length; i++) {
+				increment(tracked_elements[i], block);
+			}
+			this.length = length;
+			tracked_elements.length = length;
 
-            return true;
-        }
+			return true;
+		}
 		return false;
 	}
 
-    set length(_) {
-        throw new Error('Cannot set length on RippleArray, use $length instead');
-    }
+	set length(_) {
+		throw new Error('Cannot set length on RippleArray, use $length instead');
+	}
 
 	toJSON() {
 		this.$length;

package/src/runtime/index.js

@@ -37,3 +37,5 @@ export { keyed } from './internal/client/for.js';
 export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
+
+export { ref } from './internal/client/runtime.js';

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

@@ -19,13 +19,14 @@ import {
 	run_block,
 	run_teardown,
 	schedule_update,
+	set_property,
 } from './runtime';
 import { suspend } from './try';
 
 export function user_effect(fn) {
 	if (active_block === null) {
 		throw new Error(
-			'effect() must be called within an active context, such as a component or effect'
+			'effect() must be called within an active context, such as a component or effect',
 		);
 	}
 
@@ -69,19 +70,29 @@ export function async(fn) {
 }
 
 export function use(element, get_fn) {
-	var fn = undefined;
+	var use_obj = undefined;
 	var e;
+	var current_block = active_block;
 
 	return block(RENDER_BLOCK, () => {
-		if (fn !== (fn = get_fn())) {
+		if (use_obj !== (use_obj = get_fn())) {
 			if (e) {
 				destroy_block(e);
 				e = null;
 			}
 
-			if (fn) {
+			if (use_obj) {
 				e = branch(() => {
-					effect(() => fn(element));
+					effect(() => {
+						if (typeof use_obj === 'function') {
+							return use_obj(element);
+						} else {
+							set_property(use_obj, '$current', element, current_block);
+							return () => {
+								set_property(use_obj, '$current', null, current_block);
+							};
+						}
+					});
 				});
 			}
 		}

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

@@ -22,4 +22,4 @@ export var UNINITIALIZED = Symbol();
 export var TRACKED_OBJECT = Symbol();
 export var SPREAD_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();
-export var USE_PROP = '@use';
+export var USE_PROP = '@use';

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

@@ -5,7 +5,7 @@ import {
 	set_active_block,
 	set_active_reaction,
 	set_tracking,
-	tracking
+	tracking,
 } from './runtime';
 import { array_from, define_property, is_array } from './utils';
 
@@ -73,7 +73,7 @@ export function handle_event_propagation(event) {
 		configurable: true,
 		get() {
 			return current_target || owner_document;
-		}
+		},
 	});
 
 	var previous_block = active_block;

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

@@ -42,12 +42,11 @@ export function for_block(node, get_collection, render_fn, flags) {
 		var array = is_array(collection)
 			? collection
 			: collection == null
-			? []
-			: array_from(collection);
+				? []
+				: array_from(collection);
 
 		if (array[TRACKED_OBJECT] !== undefined) {
-			// TODO we previously assigned array to this, but why?
-			get_all_elements(collection);
+			array = get_all_elements(collection);
 			collection.$length;
 		}
 
@@ -71,7 +70,7 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
 	if (state === null) {
 		state = block.s = {
 			array: [],
-			blocks: []
+			blocks: [],
 		};
 	}
 
@@ -365,8 +364,8 @@ export function keyed(collection, key_fn) {
 	var b_array = is_array(collection)
 		? collection
 		: collection == null
-		? []
-		: array_from(collection);
+			? []
+			: array_from(collection);
 	var b_keys = b_array.map(key_fn);
 
 	// We only need to do this in DEV

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

@@ -48,7 +48,7 @@ export function first_child(node) {
 	return first_child_getter.call(node);
 }
 
-export function child_frag(node)  {
+export function child_frag(node) {
 	var child = first_child(node);
 
 	if (child.nodeType === 8 && child.data === '') {