ripple 0.1.1 → 0.2.0

package/src/compiler/utils.js

@@ -0,0 +1,552 @@
+import { build_assignment_value } from '../utils/ast.js';
+import * as b from '../utils/builders.js';
+
+const regex_return_characters = /\r/g;
+
+const RESERVED_WORDS = [
+	'arguments',
+	'await',
+	'break',
+	'case',
+	'catch',
+	'class',
+	'const',
+	'continue',
+	'debugger',
+	'default',
+	'delete',
+	'do',
+	'else',
+	'enum',
+	'eval',
+	'export',
+	'extends',
+	'false',
+	'finally',
+	'for',
+	'function',
+	'if',
+	'implements',
+	'import',
+	'in',
+	'instanceof',
+	'interface',
+	'let',
+	'new',
+	'null',
+	'package',
+	'private',
+	'protected',
+	'public',
+	'return',
+	'static',
+	'super',
+	'switch',
+	'this',
+	'throw',
+	'true',
+	'try',
+	'typeof',
+	'var',
+	'void',
+	'while',
+	'with',
+	'yield'
+];
+
+export function is_reserved(word) {
+	return RESERVED_WORDS.includes(word);
+}
+
+/**
+ * Attributes that are boolean, i.e. they are present or not present.
+ */
+const DOM_BOOLEAN_ATTRIBUTES = [
+	'allowfullscreen',
+	'async',
+	'autofocus',
+	'autoplay',
+	'checked',
+	'controls',
+	'default',
+	'disabled',
+	'formnovalidate',
+	'hidden',
+	'indeterminate',
+	'inert',
+	'ismap',
+	'loop',
+	'multiple',
+	'muted',
+	'nomodule',
+	'novalidate',
+	'open',
+	'playsinline',
+	'readonly',
+	'required',
+	'reversed',
+	'seamless',
+	'selected',
+	'webkitdirectory',
+	'defer',
+	'disablepictureinpicture',
+	'disableremoteplayback'
+];
+
+export function is_boolean_attribute(name) {
+	return DOM_BOOLEAN_ATTRIBUTES.includes(name);
+}
+
+const DOM_PROPERTIES = [
+	...DOM_BOOLEAN_ATTRIBUTES,
+	'formNoValidate',
+	'isMap',
+	'noModule',
+	'playsInline',
+	'readOnly',
+	'value',
+	'volume',
+	'defaultValue',
+	'defaultChecked',
+	'srcObject',
+	'noValidate',
+	'allowFullscreen',
+	'disablePictureInPicture',
+	'disableRemotePlayback'
+];
+
+export function is_dom_property(name) {
+	return DOM_PROPERTIES.includes(name);
+}
+
+/** List of Element events that will be delegated */
+const DELEGATED_EVENTS = [
+	'beforeinput',
+	'click',
+	'change',
+	'dblclick',
+	'contextmenu',
+	'focusin',
+	'focusout',
+	'input',
+	'keydown',
+	'keyup',
+	'mousedown',
+	'mousemove',
+	'mouseout',
+	'mouseover',
+	'mouseup',
+	'pointerdown',
+	'pointermove',
+	'pointerout',
+	'pointerover',
+	'pointerup',
+	'touchend',
+	'touchmove',
+	'touchstart'
+];
+
+export function is_delegated(event_name) {
+	return DELEGATED_EVENTS.includes(event_name);
+}
+
+const PASSIVE_EVENTS = ['touchstart', 'touchmove'];
+
+export function is_passive_event(name) {
+	return PASSIVE_EVENTS.includes(name);
+}
+
+export function is_event_attribute(attr) {
+	return attr.startsWith('on') && attr.length > 2 && attr[2] === attr[2].toUpperCase();
+}
+
+const unhoisted = { hoisted: false };
+
+export function get_delegated_event(event_name, handler, state) {
+	// Handle delegated event handlers. Bail out if not a delegated event.
+	if (!handler || !is_delegated(event_name)) {
+		return null;
+	}
+
+	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
+	let target_function = null;
+	let binding = null;
+
+	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
+		target_function = handler;
+	} else if (handler.type === 'Identifier') {
+		binding = state.scope.get(handler.name);
+
+		if (state.analysis.module.scope.references.has(handler.name)) {
+			// If a binding with the same name is referenced in the module scope (even if not declared there), bail out
+			return unhoisted;
+		}
+
+		if (binding != null) {
+			for (const { path } of binding.references) {
+				const parent = path.at(-1);
+				if (parent === undefined) return unhoisted;
+
+				const grandparent = path.at(-2);
+
+				/** @type {AST.RegularElement | null} */
+				let element = null;
+				/** @type {string | null} */
+				let event_name = null;
+				if (
+					parent.type === 'ExpressionTag' &&
+					grandparent?.type === 'Attribute' &&
+					is_event_attribute(grandparent)
+				) {
+					element = /** @type {AST.RegularElement} */ (path.at(-3));
+					const attribute = /** @type {AST.Attribute} */ (grandparent);
+					event_name = get_attribute_event_name(attribute.name);
+				}
+
+				if (element && event_name) {
+					if (
+						element.type !== 'Element' ||
+						element.metadata.has_spread ||
+						!is_delegated(event_name)
+					) {
+						return unhoisted;
+					}
+				} else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
+					return unhoisted;
+				}
+			}
+		}
+
+		// If the binding is exported, bail out
+		if (state.analysis.exports.find((node) => node.name === handler.name)) {
+			return unhoisted;
+		}
+
+		if (binding !== null && binding.initial !== null && !binding.updated && !binding.is_called) {
+			const binding_type = binding.initial.type;
+
+			if (
+				binding_type === 'ArrowFunctionExpression' ||
+				binding_type === 'FunctionDeclaration' ||
+				binding_type === 'FunctionExpression'
+			) {
+				target_function = binding.initial;
+			}
+		}
+	}
+
+	// If we can't find a function, or the function has multiple parameters, bail out
+	if (target_function == null || target_function.params.length > 1) {
+		return unhoisted;
+	}
+
+	const visited_references = new Set();
+	const scope = target_function.metadata.scope;
+	for (const [reference] of scope.references) {
+		// Bail out if the arguments keyword is used or $host is referenced
+		if (reference === 'arguments') return unhoisted;
+
+		const binding = scope.get(reference);
+		const local_binding = state.scope.get(reference);
+
+		// If we are referencing a binding that is shadowed in another scope then bail out.
+		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
+			return unhoisted;
+		}
+
+		if (
+			binding !== null &&
+			// Bail out if the the binding is a rest param
+			(binding.declaration_kind === 'rest_param' || // or any normal not reactive bindings that are mutated.
+				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
+				(binding.kind === 'normal' && binding.updated))
+		) {
+			return unhoisted;
+		}
+		visited_references.add(reference);
+	}
+
+	return { hoisted: true, function: target_function };
+}
+
+function get_hoisted_params(node, context) {
+	const scope = context.state.scope;
+
+	/** @type {Identifier[]} */
+	const params = [];
+
+	/**
+	 * We only want to push if it's not already present to avoid name clashing
+	 * @param {Identifier} id
+	 */
+	function push_unique(id) {
+		if (!params.find((param) => param.name === id.name)) {
+			params.push(id);
+		}
+	}
+
+	for (const [reference] of scope.references) {
+		let binding = scope.get(reference);
+
+		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
+			if (binding.kind === 'prop') {
+				debugger;
+			} else if (
+				// imports don't need to be hoisted
+				binding.declaration_kind !== 'import'
+			) {
+				// create a copy to remove start/end tags which would mess up source maps
+				push_unique(b.id(binding.node.name));
+			}
+		}
+	}
+	return params;
+}
+
+export function build_hoisted_params(node, context) {
+	const hoisted_params = get_hoisted_params(node, context);
+	node.metadata.hoisted_params = hoisted_params;
+
+	/** @type {Pattern[]} */
+	const params = [];
+
+	if (node.params.length === 0) {
+		if (hoisted_params.length > 0) {
+			// For the event object
+			params.push(b.id(context.state.scope.generate('_')));
+		}
+	} else {
+		for (const param of node.params) {
+			params.push(/** @type {Pattern} */ (context.visit(param)));
+		}
+	}
+
+	params.push(...hoisted_params, b.id('__block'));
+	return params;
+}
+
+export function is_inside_component(context) {
+	for (let i = context.path.length - 1; i >= 0; i -= 1) {
+		const context_node = context.path[i];
+		const type = context_node.type;
+
+		if (
+			type === 'FunctionExpression' ||
+			type === 'ArrowFunctionExpression' ||
+			type === 'FunctionDeclaration'
+		) {
+			return false;
+		}
+		if (type === 'Component') {
+			return true;
+		}
+	}
+	return false;
+}
+
+export function is_inside_call_expression(context) {
+	for (let i = context.path.length - 1; i >= 0; i -= 1) {
+		const context_node = context.path[i];
+		const type = context_node.type;
+
+		if (
+			type === 'FunctionExpression' ||
+			type === 'ArrowFunctionExpression' ||
+			type === 'FunctionDeclaration'
+		) {
+			return false;
+		}
+		if (type === 'CallExpression') {
+			return true;
+		}
+	}
+	return false;
+}
+
+export function is_tracked_name(name) {
+	return (
+		typeof name === 'string' &&
+		name.startsWith('$') &&
+		name.length > 1 &&
+		name[1] !== '$' &&
+		name !== '$length'
+	);
+}
+
+export function is_svelte_import(callee, context) {
+	if (callee.type === 'Identifier') {
+		const binding = context.state.scope.get(callee.name);
+
+		return (
+			binding?.declaration_kind === 'import' &&
+			binding.initial.source.type === 'Literal' &&
+			binding.initial.source.value === 'ripple'
+		);
+	}
+
+	return false;
+}
+
+export function is_declared_within_component(node, context) {
+	const component = context.path.find((n) => n.type === 'Component');
+
+	if (node.type === 'Identifier' && component) {
+		const binding = context.state.scope.get(node.name);
+		const component_scope = context.state.scopes.get(component);
+
+		if (binding !== null && component_scope !== null) {
+			let scope = binding.scope;
+
+			while (scope !== null) {
+				if (scope === component_scope) {
+					return true;
+				}
+				scope = scope.parent;
+			}
+		}
+	}
+
+	return false;
+}
+
+function is_non_coercive_operator(operator) {
+	return ['=', '||=', '&&=', '??='].includes(operator);
+}
+
+export function visit_assignment_expression(node, context, build_assignment) {
+	if (
+		node.left.type === 'ArrayPattern' ||
+		node.left.type === 'ObjectPattern' ||
+		node.left.type === 'RestElement'
+	) {
+		const value = /** @type {Expression} */ (context.visit(node.right));
+		const should_cache = value.type !== 'Identifier';
+		const rhs = should_cache ? b.id('$$value') : value;
+
+		let changed = false;
+
+		const assignments = extract_paths(node.left).map((path) => {
+			const value = path.expression?.(rhs);
+
+			let assignment = build_assignment('=', path.node, value, context);
+			if (assignment !== null) changed = true;
+
+			return (
+				assignment ??
+				b.assignment(
+					'=',
+					/** @type {Pattern} */ (context.visit(path.node)),
+					/** @type {Expression} */ (context.visit(value))
+				)
+			);
+		});
+
+		if (!changed) {
+			// No change to output -> nothing to transform -> we can keep the original assignment
+			return null;
+		}
+
+		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
+		const sequence = b.sequence(assignments);
+
+		if (!is_standalone) {
+			// this is part of an expression, we need the sequence to end with the value
+			sequence.expressions.push(rhs);
+		}
+
+		if (should_cache) {
+			// the right hand side is a complex expression, wrap in an IIFE to cache it
+			const iife = b.arrow([rhs], sequence);
+
+			const iife_is_async =
+				is_expression_async(value) ||
+				assignments.some((assignment) => is_expression_async(assignment));
+
+			return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
+		}
+
+		return sequence;
+	}
+
+	if (node.left.type !== 'Identifier' && node.left.type !== 'MemberExpression') {
+		throw new Error(`Unexpected assignment type ${node.left.type}`);
+	}
+
+	return build_assignment(node.operator, node.left, node.right, context);
+}
+
+export function build_assignment(operator, left, right, context) {
+	let object = left;
+
+	while (object.type === 'MemberExpression') {
+		// @ts-expect-error
+		object = object.object;
+	}
+
+	if (object.type !== 'Identifier') {
+		return null;
+	}
+
+	const binding = context.state.scope.get(object.name);
+	if (!binding) return null;
+
+	const transform = binding.transform;
+
+	const path = context.path.map((node) => node.type);
+
+	// reassignment
+	if (object === left && transform?.assign) {
+		let value = /** @type {Expression} */ (
+			context.visit(build_assignment_value(operator, left, right))
+		);
+
+		return transform.assign(object, value);
+	}
+
+	// mutation
+	if (transform?.mutate) {
+		return transform.mutate(
+			object,
+			b.assignment(
+				operator,
+				/** @type {Pattern} */ (context.visit(left)),
+				/** @type {Expression} */ (context.visit(right))
+			)
+		);
+	}
+
+	return null;
+}
+
+const ATTR_REGEX = /[&"<]/g;
+const CONTENT_REGEX = /[&<]/g;
+
+export function escape_html(value, is_attr) {
+	const str = String(value ?? '');
+
+	const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX;
+	pattern.lastIndex = 0;
+
+	let escaped = '';
+	let last = 0;
+
+	while (pattern.test(str)) {
+		const i = pattern.lastIndex - 1;
+		const ch = str[i];
+		escaped += str.substring(last, i) + (ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : '&lt;');
+		last = i + 1;
+	}
+
+	return escaped + str.substring(last);
+}
+
+export function hash(str) {
+	str = str.replace(regex_return_characters, '');
+	let hash = 5381;
+	let i = str.length;
+
+	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+	return (hash >>> 0).toString(36);
+}
+
+

package/src/constants.js

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

package/src/jsx-runtime.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Ripple JSX Runtime Type Definitions
+ * Ripple components are imperative and don't return JSX elements
+ */
+
+// Ripple components don't return JSX elements - they're imperative
+export type ComponentType<P = {}> = (props: P) => void;
+
+/**
+ * Create a JSX element (for elements with children)
+ * In Ripple, this doesn't return anything - components are imperative
+ */
+export function jsx(
+  type: string | ComponentType<any>,
+  props?: any,
+  key?: string | number | null
+): void;
+
+/**
+ * Create a JSX element with static children (optimization for multiple children)
+ * In Ripple, this doesn't return anything - components are imperative
+ */
+export function jsxs(
+  type: string | ComponentType<any>,
+  props?: any,
+  key?: string | number | null
+): void;
+
+/**
+ * JSX Fragment component
+ * In Ripple, fragments are imperative and don't return anything
+ */
+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;
+}
+
+// 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: {};
+    }
+  }
+}

package/src/jsx-runtime.js

@@ -0,0 +1,46 @@
+/**
+ * Ripple JSX Runtime
+ * This module provides the JSX runtime functions that TypeScript will automatically import
+ * when using jsxImportSource: "ripple/jsx-runtime"
+ */
+
+/**
+ * Create a JSX element (for elements with children)
+ * In Ripple, components don't return values - they imperatively render to the DOM
+ * @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 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);
+  }
+}
+
+/**
+ * Create a JSX element with static children (optimization for multiple children)
+ * @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);
+}
+
+/**
+ * JSX Fragment component
+ * @param {object} props - Fragment props (should contain children)
+ * @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);
+}