ripple 0.2.76 → 0.2.78

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

@@ -1,40 +1,125 @@
+/** @import { Derived } from '#client' */
+
+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 = '';
-    body = '';
-    #parent = null;
+	head = '';
+	body = '';
+	#parent = null;
 
-    constructor(parent) {
-        this.#parent = parent;
-    }
+	constructor(parent) {
+		this.#parent = parent;
+	}
 
-    push(str) {
-        this.body += str;
-    }
+	push(str) {
+		this.body += str;
+	}
 }
 
-export async function renderToString(component) {
-    const output = new Output(null);
+export async function render(component) {
+	const output = new Output(null);
 
-    if (component.async) {
-        await component(output, {});
-    } else {
-        component(output, {});
-    }
+	// TODO add expando "async" property to component functions during SSR
+	if (component.async) {
+		await component(output, {});
+	} else {
+		component(output, {});
+	}
 
-    const { head, body } = output;
+	const { head, body } = output;
 
-    return { head, body };
+	return { head, body };
 }
 
 export function push_component() {
-    debugger;
+	var component = {
+		c: null,
+		p: active_component,
+	};
+	active_component = component;
 }
 
 export function pop_component() {
-    debugger;
+	var component = active_component;
+	active_component = component.p;
 }
 
 export async function async(fn) {
-    // TODO
-}
+	// TODO
+}
+
+function get_derived(tracked) {
+	let v = tracked.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;
+}
+
+/**
+ * @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';

package/src/utils/escaping.js

@@ -0,0 +1,26 @@
+const ATTR_REGEX = /[&"<]/g;
+const CONTENT_REGEX = /[&<]/g;
+
+/**
+ * @template V
+ * @param {V} value
+ * @param {boolean} [is_attr]
+ */
+export function escape(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);
+}

package/tests/client/__snapshots__/basic.test.ripple.snap

@@ -111,3 +111,12 @@ exports[`basic > renders simple JS expression logic correctly 1`] = `
   
 </div>
 `;
+
+exports[`basic > should handle lexical scopes correctly 1`] = `
+<div>
+  <section>
+    Nested scope variable
+  </section>
+  
+</div>
+`;

package/tests/client/basic.test.ripple

@@ -1401,4 +1401,17 @@ describe('basic', () => {
 		const pre = container.querySelectorAll('pre')[0];
 		expect(pre.textContent).toBe('true');
 	});
+
+	it('should handle lexical scopes correctly', () => {
+		component App() {
+			<section>
+				let sectionData = 'Nested scope variable';
+
+				{sectionData}
+			</section>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+	});
 });