ripple 0.2.77 → 0.2.79

package/package.json

@@ -3,10 +3,10 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.77",
+  "version": "0.2.79",
   "type": "module",
-  "module": "src/runtime/index.js",
-  "main": "src/runtime/index.js",
+  "module": "src/runtime/index-client.js",
+  "main": "src/runtime/index-client.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/trueadm/ripple.git",
@@ -24,9 +24,9 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "worker": "./src/runtime/index.js",
-      "browser": "./src/runtime/index.js",
-      "default": "./src/runtime/index.js"
+      "worker": "./src/runtime/index-server.js",
+      "browser": "./src/runtime/index-client.js",
+      "default": "./src/runtime/index-server.js"
     },
     "./package.json": "./package.json",
     "./server": {

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

@@ -478,18 +478,18 @@ const visitors = {
 							continue;
 						}
 
-						if (name === 'class' || name === '$class') {
+						if (name === 'class') {
 							class_attribute = attr;
 
 							continue;
 						}
 
-						if (name === 'value' || name === '$value') {
+						if (name === 'value') {
 							const id = state.flush_node();
 							const metadata = { tracking: false, await: false };
 							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$value' || metadata.tracking) {
+							if (metadata.tracking) {
 								local_updates.push(b.stmt(b.call('_$_.set_value', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_value', id, expression)));
@@ -498,7 +498,7 @@ const visitors = {
 							continue;
 						}
 
-						if (name === 'checked' || name === '$checked') {
+						if (name === 'checked') {
 							const id = state.flush_node();
 							const metadata = { tracking: false, await: false };
 							const expression = visit(attr.value, { ...state, metadata });
@@ -511,12 +511,12 @@ const visitors = {
 							continue;
 						}
 
-						if (name === 'selected' || name === '$selected') {
+						if (name === 'selected') {
 							const id = state.flush_node();
 							const metadata = { tracking: false, await: false };
 							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$selected' || metadata.tracking) {
+							if (metadata.tracking) {
 								local_updates.push(b.stmt(b.call('_$_.set_selected', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_selected', id, expression)));
@@ -635,11 +635,11 @@ const visitors = {
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
 					if (node.metadata.scoped && state.component.css) {
-						expression = b.binary('+', b.literal(state.component.css.hash + ' '), expression);
+						expression = b.binary('+', expression, b.literal(' ' + state.component.css.hash));
 					}
 					const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
 
-					if (class_attribute.name.name === '$class' || metadata.tracking) {
+					if (metadata.tracking) {
 						local_updates.push(
 							b.stmt(b.call('_$_.set_class', id, expression, undefined, b.literal(is_html))),
 						);

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

@@ -5,6 +5,8 @@ import path from 'node:path';
 import { print } from 'esrap';
 import {
 	build_getter,
+	escape_html,
+	is_boolean_attribute,
 	is_element_dom_element,
 	is_inside_component,
 	is_void_element,
@@ -12,6 +14,7 @@ import {
 } from '../../../utils.js';
 import is_reference from 'is-reference';
 import { escape } from '../../../../utils/escaping.js';
+import { is_event_attribute } from '../../../../utils/events.js';
 
 function add_ripple_internal_import(context) {
 	if (!context.state.to_ts) {
@@ -106,6 +109,8 @@ const visitors = {
 		const { state, visit } = context;
 
 		const is_dom_element = is_element_dom_element(node);
+		const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
+		const spread_attributes = is_spreading ? [] : null;
 
 		if (is_dom_element) {
 			const is_void = is_void_element(node.id.name);
@@ -115,13 +120,117 @@ const visitors = {
 			);
 			let class_attribute = null;
 
+			const handle_static_attr = (name, value) => {
+				const attr_value = b.literal(
+					` ${name}${
+						is_boolean_attribute(name) && value === true
+							? ''
+							: `="${value === true ? '' : escape_html(value, true)}"`
+					}`,
+				);
+
+				if (is_spreading) {
+					// For spread attributes, store just the actual value, not the full attribute string
+					const actual_value =
+						is_boolean_attribute(name) && value === true
+							? b.literal(true)
+							: b.literal(value === true ? '' : value);
+					spread_attributes.push(b.prop('init', b.literal(name), actual_value));
+				} else {
+					state.init.push(
+						b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(String(attr_value)))),
+					);
+				}
+			};
+
 			for (const attr of node.attributes) {
+				if (attr.type === 'Attribute') {
+					if (attr.name.type === 'Identifier') {
+						const name = attr.name.name;
+
+						if (attr.value === null) {
+							handle_static_attr(name, true);
+							continue;
+						}
+
+						if (attr.value.type === 'Literal' && name !== 'class') {
+							handle_static_attr(name, attr.value.value);
+							continue;
+						}
+
+						if (name === 'class') {
+							class_attribute = attr;
+
+							continue;
+						}
+
+						if (is_event_attribute(name)) {
+							continue;
+						}
+						const metadata = { tracking: false, await: false };
+						const expression = visit(attr.value, { ...state, metadata });
+
+						state.init.push(
+							b.stmt(
+								b.call(
+									b.member(b.id('__output'), b.id('push')),
+									b.call('_$_.attr', b.literal(name), expression),
+								),
+							),
+						);
+					}
+				} else if (attr.type === 'SpreadAttribute') {
+					spread_attributes.push(b.spread(visit(attr.argument, state)));
+				}
 			}
 
 			if (class_attribute !== null) {
-				debugger;
+				if (class_attribute.value.type === 'Literal') {
+					let value = class_attribute.value.value;
+
+					if (node.metadata.scoped && state.component.css) {
+						value = `${state.component.css.hash} ${value}`;
+					}
+
+					handle_static_attr(class_attribute.name.name, value);
+				} else {
+					const metadata = { tracking: false, await: false };
+					let expression = visit(class_attribute.value, { ...state, metadata });
+
+					if (node.metadata.scoped && state.component.css) {
+						expression = b.binary('+', b.literal(state.component.css.hash + ' '), expression);
+					}
+
+					state.init.push(
+						b.stmt(
+							b.call(
+								b.member(b.id('__output'), b.id('push')),
+								b.call('_$_.attr', b.literal('class'), expression),
+							),
+						),
+					);
+				}
 			} else if (node.metadata.scoped && state.component.css) {
-				debugger;
+				const value = state.component.css.hash;
+
+				// TOOO
+			}
+
+			if (spread_attributes !== null && spread_attributes.length > 0) {
+				state.init.push(
+					b.stmt(
+						b.call(
+							b.member(b.id('__output'), b.id('push')),
+							b.call(
+								'_$_.spread_attrs',
+								b.object(spread_attributes),
+								node.metadata.scoped && state.component.css
+									? b.literal(state.component.css.hash)
+									: undefined,
+							),
+						),
+					),
+				);
 			}
 
 			state.init.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`>`))));
@@ -134,8 +243,26 @@ const visitors = {
 				);
 			}
 		} else {
-      const props = [];
-			state.init.push(b.stmt(b.call(node.id.name, b.call('__output.component'), b.object(props))));
+			const props = [];
+
+			for (const attr of node.attributes) {
+				if (attr.type === 'Attribute') {
+					if (attr.name.type === 'Identifier') {
+						const metadata = { tracking: false, await: false };
+						let property = visit(attr.value, { ...state, metadata });
+
+						props.push(b.prop('init', attr.name, property));
+					} else if (attr.type === 'SpreadAttribute') {
+						props.push(
+							b.spread(
+								visit(attr.argument, { ...state, metadata: { ...state.metadata, spread: true } }),
+							),
+						);
+					}
+				}
+			}
+
+			state.init.push(b.stmt(b.call(node.id.name, b.id('__output'), b.object(props))));
 		}
 	},
 
@@ -146,17 +273,18 @@ const visitors = {
 		}
 		const body_scope = context.state.scopes.get(node.body);
 
+		const body = transform_body(node.body.body, {
+			...context,
+			state: { ...context.state, scope: body_scope },
+		});
+
+		if (node.index) {
+			context.state.init.push(b.var(node.index, b.literal(0)));
+			body.push(b.update('++', node.index));
+		}
+
 		context.state.init.push(
-			b.for_of(
-				context.visit(node.left),
-				context.visit(node.right),
-				b.block(
-					transform_body(node.body.body, {
-						...context,
-						state: { ...context.state, scope: body_scope },
-					}),
-				),
-			),
+			b.for_of(context.visit(node.left), context.visit(node.right), b.block(body)),
 		);
 	},
 
@@ -184,7 +312,7 @@ const visitors = {
 		const parent = /** @type {Node} */ (context.path.at(-1));
 
 		if (is_reference(node, parent) && node.tracked) {
-      add_ripple_internal_import(context);
+			add_ripple_internal_import(context);
 			return b.call('_$_.get', build_getter(node, context));
 		}
 	},

package/src/runtime/index-server.js

@@ -0,0 +1,32 @@
+import { DERIVED, TRACKED, UNINITIALIZED } from './internal/client/constants';
+import { is_tracked_object } from './internal/client/utils';
+
+export { create_context as createContext } from './internal/server/context.js';
+
+export function effect() {
+	// NO-OP
+}
+
+export const TrackedArray = Array;
+
+export function track(v, o) {
+	var is_tracked = is_tracked_object(v);
+
+	if (is_tracked) {
+		return v;
+	}
+
+	if (typeof v === 'function') {
+		return {
+			f: TRACKED | DERIVED,
+			fn: v,
+			v: UNINITIALIZED,
+		};
+	}
+
+	return {
+		f: TRACKED,
+		v,
+	};
+}
+

package/src/runtime/internal/server/context.js

@@ -0,0 +1,67 @@
+import { active_component } from './index.js';
+
+/**
+ * @template T
+ */
+export class Context {
+  /**
+   * @param {T} initial_value
+   */
+  constructor(initial_value) {
+    /** @type {T} */
+    this._v = initial_value;
+  }
+
+  get() {
+    const component = active_component;
+    const context = this;
+
+    if (component === null) {
+      throw new Error('No active component found, cannot get context');
+    }
+    /** @type {Component | null} */
+    let current_component = component;
+
+    while (current_component !== null) {
+      const context_map = current_component.c;
+
+      if (context_map?.has(context)) {
+        return context_map.get(context);
+      }
+
+      current_component = current_component.p;
+    }
+
+    return context._v;
+  }
+
+  /**
+   * @template T
+   * @param {T} value
+   */
+  set(value) {
+    const component = active_component;
+    const context = this;
+
+    if (component === null) {
+      throw new Error('No active component found, cannot set context');
+    }
+
+    let current_context = component.c;
+
+    if (current_context === null) {
+      current_context = component.c = new Map();
+    }
+
+    current_context.set(context, value);
+  }
+}
+
+/**
+ * @template T
+ * @param {T} initial_value
+ * @returns {Context<T>}
+ */
+export function create_context(initial_value) {
+  return new Context(initial_value);
+}

package/src/runtime/internal/server/index.js

@@ -1,7 +1,27 @@
-import { DERIVED, UNINITIALIZED } from "../client/constants";
-import { is_tracked_object } from "../client/utils";
+/** @import { Derived } from '#client' */
 
-export { escape } from '../../../utils/escaping.js';
+import { DERIVED, UNINITIALIZED } from '../client/constants';
+import { is_tracked_object } from '../client/utils';
+
+import { escape } from '../../../utils/escaping.js';
+import { is_boolean_attribute } from '../../../compiler/utils';
+
+export { escape };
+
+export let active_component = null;
+
+/**
+ * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
+ * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
+ * may be other odd cases that need to be added to this list in future
+ * @type {Record<string, Map<any, string>>}
+ */
+const replacements = {
+	translate: new Map([
+		[true, 'yes'],
+		[false, 'no'],
+	]),
+};
 
 class Output {
 	head = '';
@@ -12,16 +32,12 @@ class Output {
 		this.#parent = parent;
 	}
 
-  component() {
-    return new Output(this);
-  }
-
 	push(str) {
 		this.body += str;
 	}
 }
 
-export async function renderToString(component) {
+export async function render(component) {
 	const output = new Output(null);
 
 	// TODO add expando "async" property to component functions during SSR
@@ -37,11 +53,16 @@ export async function renderToString(component) {
 }
 
 export function push_component() {
-	// TODO
+	var component = {
+		c: null,
+		p: active_component,
+	};
+	active_component = component;
 }
 
 export function pop_component() {
-	// TODO
+	var component = active_component;
+	active_component = component.p;
 }
 
 export async function async(fn) {
@@ -49,22 +70,56 @@ export async function async(fn) {
 }
 
 function get_derived(tracked) {
-  let v = tracked.v;
+	let v = tracked.v;
 
-  if (v === UNINITIALIZED) {
-    v = tracked.fn();
-    tracked.v = v;
-  }
-  return v;
+	if (v === UNINITIALIZED) {
+		v = tracked.fn();
+		tracked.v = v;
+	}
+	return v;
 }
 
 export function get(tracked) {
-  // reflect back the value if it's not boxed
-  if (!is_tracked_object(tracked)) {
-    return tracked;
-  }
-
-  return (tracked.f & DERIVED) !== 0
-    ? get_derived(/** @type {Derived} */ (tracked))
-    : tracked.v;
+	// reflect back the value if it's not boxed
+	if (!is_tracked_object(tracked)) {
+		return tracked;
+	}
+
+	return (tracked.f & DERIVED) !== 0 ? get_derived(/** @type {Derived} */ (tracked)) : tracked.v;
+}
+
+/**
+ * @template V
+ * @param {string} name
+ * @param {V} value
+ * @param {boolean} [is_boolean]
+ * @returns {string}
+ */
+export function attr(name, value, is_boolean = false) {
+	if (name === 'hidden' && value !== 'until-found') {
+		is_boolean = true;
+	}
+	if (value == null || (!value && is_boolean)) return '';
+	const normalized = (name in replacements && replacements[name].get(value)) || value;
+	const assignment = is_boolean ? '' : `="${escape(normalized, true)}"`;
+	return ` ${name}${assignment}`;
+}
+
+export function spread_attrs(attrs, css_hash) {
+	let attr_str = '';
+	let name;
+
+	for (name in attrs) {
+		var value = attrs[name];
+
+		if (typeof value === 'function') continue;
+
+    if (name === 'class' && css_hash) {
+      value = (value == null ? '' : value) + ' ' + css_hash;
+    }
+
+		attr_str += attr(name, value, is_boolean_attribute(name));
+	}
+
+	return attr_str;
 }

package/src/server/index.js

@@ -1 +1 @@
-export { renderToString } from '../runtime/internal/server/index.js';
+export { render } from '../runtime/internal/server/index.js';