ripple 0.2.75 → 0.2.77

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

@@ -0,0 +1,240 @@
+import * as b from '../../../../utils/builders.js';
+import { walk } from 'zimmerframe';
+import ts from 'esrap/languages/ts';
+import path from 'node:path';
+import { print } from 'esrap';
+import {
+	build_getter,
+	is_element_dom_element,
+	is_inside_component,
+	is_void_element,
+	normalize_children,
+} from '../../../utils.js';
+import is_reference from 'is-reference';
+import { escape } from '../../../../utils/escaping.js';
+
+function add_ripple_internal_import(context) {
+	if (!context.state.to_ts) {
+		if (!context.state.imports.has(`import * as _$_ from 'ripple/internal/server'`)) {
+			context.state.imports.add(`import * as _$_ from 'ripple/internal/server'`);
+		}
+	}
+}
+
+function transform_children(children, context) {
+	const { visit, state, root } = context;
+	const normalized = normalize_children(children);
+
+	for (const node of normalized) {
+		if (
+			node.type === 'VariableDeclaration' ||
+			node.type === 'ExpressionStatement' ||
+			node.type === 'ThrowStatement' ||
+			node.type === 'FunctionDeclaration' ||
+			node.type === 'DebuggerStatement' ||
+			node.type === 'ClassDeclaration' ||
+			node.type === 'TSTypeAliasDeclaration' ||
+			node.type === 'TSInterfaceDeclaration' ||
+			node.type === 'Component'
+		) {
+			const metadata = { await: false };
+			state.init.push(visit(node, { ...state, metadata }));
+			if (metadata.await) {
+				state.init.push(b.if(b.call('_$_.aborted'), b.return(null)));
+				if (state.metadata?.await === false) {
+					state.metadata.await = true;
+				}
+			}
+		} else {
+			visit(node, { ...state, root: false });
+		}
+	}
+}
+
+function transform_body(body, { visit, state }) {
+	const body_state = {
+		...state,
+		init: [],
+		metadata: state.metadata,
+	};
+
+	transform_children(body, { visit, state: body_state, root: true });
+
+	return body_state.init;
+}
+
+const visitors = {
+	_: function set_scope(node, { next, state }) {
+		const scope = state.scopes.get(node);
+
+		if (scope && scope !== state.scope) {
+			return next({ ...state, scope });
+		} else {
+			return next();
+		}
+	},
+
+	Component(node, context) {
+		add_ripple_internal_import(context);
+
+		const metadata = { await: false };
+		const body_statements = [
+			b.stmt(b.call('_$_.push_component')),
+			...transform_body(node.body, {
+				...context,
+				state: { ...context.state, component: node, metadata },
+			}),
+			b.stmt(b.call('_$_.pop_component')),
+		];
+
+		if (node.css !== null && node.css) {
+			context.state.stylesheets.push(node.css);
+		}
+
+		return b.function(
+			node.id,
+			node.params.length > 0 ? [b.id('__output'), node.params[0]] : [b.id('__output')],
+			b.block([
+				...(metadata.await
+					? [b.stmt(b.call('_$_.async', b.thunk(b.block(body_statements), true)))]
+					: body_statements),
+			]),
+		);
+	},
+
+	Element(node, context) {
+		const { state, visit } = context;
+
+		const is_dom_element = is_element_dom_element(node);
+
+		if (is_dom_element) {
+			const is_void = is_void_element(node.id.name);
+
+			state.init.push(
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`<${node.id.name}`))),
+			);
+			let class_attribute = null;
+
+			for (const attr of node.attributes) {
+			}
+
+			if (class_attribute !== null) {
+				debugger;
+			} else if (node.metadata.scoped && state.component.css) {
+				debugger;
+			}
+
+			state.init.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`>`))));
+
+			if (!is_void) {
+				transform_children(node.children, { visit, state: { ...state, root: false } });
+
+				state.init.push(
+					b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`</${node.id.name}>`))),
+				);
+			}
+		} else {
+      const props = [];
+			state.init.push(b.stmt(b.call(node.id.name, b.call('__output.component'), b.object(props))));
+		}
+	},
+
+	ForOfStatement(node, context) {
+		if (!is_inside_component(context)) {
+			context.next();
+			return;
+		}
+		const body_scope = context.state.scopes.get(node.body);
+
+		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 },
+					}),
+				),
+			),
+		);
+	},
+
+	IfStatement(node, context) {
+		if (!is_inside_component(context)) {
+			context.next();
+			return;
+		}
+
+		// TODO: alternative (else if / else)
+		context.state.init.push(
+			b.if(
+				context.visit(node.test),
+				b.block(
+					transform_body(node.consequent.body, {
+						...context,
+						state: { ...context.state, scope: context.state.scopes.get(node.consequent) },
+					}),
+				),
+			),
+		);
+	},
+
+	Identifier(node, context) {
+		const parent = /** @type {Node} */ (context.path.at(-1));
+
+		if (is_reference(node, parent) && node.tracked) {
+      add_ripple_internal_import(context);
+			return b.call('_$_.get', build_getter(node, context));
+		}
+	},
+
+	Text(node, { visit, state }) {
+		const metadata = { await: false };
+		const expression = visit(node.expression, { ...state, metadata });
+
+		if (expression.type === 'Literal') {
+			state.init.push(
+				b.stmt(
+					b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value))),
+				),
+			);
+		} else {
+			state.init.push(
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.call('_$_.escape', expression))),
+			);
+		}
+	},
+};
+
+export function transform_server(filename, source, analysis) {
+	const state = {
+		imports: new Set(),
+		init: null,
+		scope: analysis.scope,
+		scopes: analysis.scopes,
+		stylesheets: [],
+	};
+
+	const program = /** @type {ESTree.Program} */ (
+		walk(analysis.ast, { ...state, namespace: 'html' }, visitors)
+	);
+
+	for (const import_node of state.imports) {
+		program.body.unshift(b.stmt(b.id(import_node)));
+	}
+
+	const js = print(program, ts(), {
+		sourceMapContent: source,
+		sourceMapSource: path.basename(filename),
+	});
+
+	// TODO: extract css
+	const css = '';
+
+	return {
+		ast: program,
+		js,
+		css,
+	};
+}

package/src/compiler/utils.js

@@ -647,3 +647,63 @@ export function is_element_dom_element(node) {
     !node.id.tracked
   );
 }
+
+export function normalize_children(children) {
+  const normalized = [];
+
+  for (const node of children) {
+    normalize_child(node, normalized);
+  }
+
+  for (let i = normalized.length - 1; i >= 0; i--) {
+    const child = normalized[i];
+    const prev_child = normalized[i - 1];
+
+    if (child.type === 'Text' && prev_child?.type === 'Text') {
+      if (child.expression.type === 'Literal' && prev_child.expression.type === 'Literal') {
+        prev_child.expression = b.literal(
+          prev_child.expression.value + String(child.expression.value),
+        );
+      } else {
+        prev_child.expression = b.binary(
+          '+',
+          prev_child.expression,
+          b.call('String', child.expression),
+        );
+      }
+      normalized.splice(i, 1);
+    }
+  }
+
+  return normalized;
+}
+
+function normalize_child(node, normalized) {
+  if (node.type === 'EmptyStatement') {
+    return;
+  } else if (node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'style') {
+    return;
+  } else {
+    normalized.push(node);
+  }
+}
+
+export function build_getter(node, context) {
+  const state = context.state;
+
+  for (let i = context.path.length - 1; i >= 0; i -= 1) {
+    const binding = state.scope.get(node.name);
+    const transform = binding?.transform;
+
+    // don't transform the declaration itself
+    if (node !== binding?.node) {
+      const read_fn = transform?.read;
+
+      if (read_fn) {
+        return read_fn(node, context.state?.metadata?.spread, context.visit);
+      }
+    }
+  }
+
+  return node;
+}

package/src/runtime/index.js

@@ -20,6 +20,12 @@ export function mount(component, options) {
   const props = options.props || {};
   const target = options.target;
   const anchor = create_anchor();
+
+  // Clear target content in case of SSR
+  if (target.firstChild) {
+    target.textContent = '';
+  }
+  
   target.append(anchor);
 
   const cleanup_events = handle_root_events(target);

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

@@ -210,10 +210,9 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
               sources[j - b_start] = i + 1;
               if (fast_path_removal) {
                 fast_path_removal = false;
-                // while (a_start < i) {
-                //     debugger
-                //     destroy_block(a_blocks[a_start++]);
-                // }
+                while (a_start < i) {
+                  destroy_block(a_blocks[a_start++]);
+                }
               }
               if (pos > j) {
                 moved = true;

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

@@ -762,6 +762,10 @@ export function set(tracked, value, block) {
   if (value !== old_value) {
     var tracked_block = tracked.b;
 
+      if (!tracked_block) {
+        debugger;
+      }
+
     if ((block.f & CONTAINS_TEARDOWN) !== 0) {
       if (teardown) {
         old_values.set(tracked, value);

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

@@ -0,0 +1,70 @@
+import { DERIVED, UNINITIALIZED } from "../client/constants";
+import { is_tracked_object } from "../client/utils";
+
+export { escape } from '../../../utils/escaping.js';
+
+class Output {
+	head = '';
+	body = '';
+	#parent = null;
+
+	constructor(parent) {
+		this.#parent = parent;
+	}
+
+  component() {
+    return new Output(this);
+  }
+
+	push(str) {
+		this.body += str;
+	}
+}
+
+export async function renderToString(component) {
+	const output = new Output(null);
+
+	// TODO add expando "async" property to component functions during SSR
+	if (component.async) {
+		await component(output, {});
+	} else {
+		component(output, {});
+	}
+
+	const { head, body } = output;
+
+	return { head, body };
+}
+
+export function push_component() {
+	// TODO
+}
+
+export function pop_component() {
+	// TODO
+}
+
+export async function async(fn) {
+	// 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;
+}

package/src/server/index.js

@@ -0,0 +1 @@
+export { renderToString } 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/{__snapshots__ → 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/{array.test.ripple → client/array.test.ripple}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, effect, untrack, TrackedArray, track } from 'ripple';
-import { MAX_ARRAY_LENGTH } from '../src/runtime/internal/client/constants.js';
+import { MAX_ARRAY_LENGTH } from '../../src/runtime/internal/client/constants.js';
 
 describe('TrackedArray', () => {
 	let container;

package/tests/{basic.test.ripple → 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();
+	});
 });