ripple 0.2.132 → 0.2.134

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.132",
+  "version": "0.2.134",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.132"
+    "ripple": "0.2.134"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /** @import { Program } from 'estree' */
 /** @import {
  *   CommentWithLocation,
@@ -28,6 +29,14 @@ function convert_from_jsx(node) {
 	return node;
 }
 
+function isWhitespaceTextNode(node) {
+	if (!node || node.type !== 'Text') {
+		return false;
+	}
+	const value = typeof node.value === 'string' ? node.value : typeof node.raw === 'string' ? node.raw : '';
+	return /^\s*$/.test(value);
+}
+
 /**
  * Acorn parser plugin for Ripple syntax extensions
  * @param {RipplePluginConfig} [config] - Plugin configuration
@@ -42,6 +51,37 @@ function RipplePlugin(config) {
 		class RippleParser extends Parser {
 			/** @type {any[]} */
 			#path = [];
+			#commentContextId = 0;
+
+			#createCommentMetadata() {
+				if (this.#path.length === 0) {
+					return null;
+				}
+
+				const container = this.#path[this.#path.length - 1];
+				if (!container || container.type !== 'Element') {
+					return null;
+				}
+
+				const children = Array.isArray(container.children) ? container.children : [];
+				const hasMeaningfulChildren = children.some((child) => child && !isWhitespaceTextNode(child));
+
+				if (hasMeaningfulChildren) {
+					return null;
+				}
+
+				container.metadata ??= {};
+				if (container.metadata.commentContainerId === undefined) {
+					container.metadata.commentContainerId = ++this.#commentContextId;
+				}
+
+				return {
+					containerId: container.metadata.commentContainerId,
+					containerType: container.type,
+					childIndex: children.length,
+					beforeMeaningfulChild: !hasMeaningfulChildren,
+				};
+			}
 
 			/**
 			 * Helper method to get the element name from a JSX identifier or member expression
@@ -1083,6 +1123,7 @@ function RipplePlugin(config) {
 
 								// Call onComment if it exists
 								if (this.options.onComment) {
+									const metadata = this.#createCommentMetadata();
 									this.options.onComment(
 										false,
 										commentText,
@@ -1090,6 +1131,7 @@ function RipplePlugin(config) {
 										commentEnd,
 										startLoc,
 										endLoc,
+										metadata,
 									);
 								}
 
@@ -1120,6 +1162,7 @@ function RipplePlugin(config) {
 
 								// Call onComment if it exists
 								if (this.options.onComment) {
+									const metadata = this.#createCommentMetadata();
 									this.options.onComment(
 										true,
 										commentText,
@@ -1127,6 +1170,7 @@ function RipplePlugin(config) {
 										commentEnd,
 										startLoc,
 										endLoc,
+										metadata,
 									);
 								}
 
@@ -1246,7 +1290,8 @@ function RipplePlugin(config) {
 				}
 
 				element.attributes = open.attributes;
-				element.metadata = {};
+				element.metadata ??= {};
+				element.metadata.commentContainerId = ++this.#commentContextId;
 
 				if (element.selfClosing) {
 					this.#path.pop();
@@ -1643,7 +1688,7 @@ function RipplePlugin(config) {
  */
 function get_comment_handlers(source, comments, index = 0) {
 	return {
-		onComment: (block, value, start, end, start_loc, end_loc) => {
+		onComment: (block, value, start, end, start_loc, end_loc, metadata) => {
 			if (block && /\n/.test(value)) {
 				let a = start;
 				while (a > 0 && source[a - 1] !== '\n') a -= 1;
@@ -1664,6 +1709,7 @@ function get_comment_handlers(source, comments, index = 0) {
 					start: /** @type {import('acorn').Position} */ (start_loc),
 					end: /** @type {import('acorn').Position} */ (end_loc),
 				},
+				context: metadata ?? null,
 			});
 		},
 		add_comments: (ast) => {
@@ -1671,40 +1717,85 @@ function get_comment_handlers(source, comments, index = 0) {
 
 			comments = comments
 				.filter((comment) => comment.start >= index)
-				.map(({ type, value, start, end, loc }) => ({ type, value, start, end, loc }));
+				.map(({ type, value, start, end, loc, context }) => ({ type, value, start, end, loc, context }));
 
 			walk(ast, null, {
 				_(node, { next, path }) {
 					let comment;
 
+						const metadata = /** @type {{ commentContainerId?: number, elementLeadingComments?: CommentWithLocation[] }} */ (node?.metadata);
+
+						if (metadata && metadata.commentContainerId !== undefined) {
+							while (
+								comments[0] &&
+								comments[0].context &&
+								comments[0].context.containerId === metadata.commentContainerId &&
+								comments[0].context.beforeMeaningfulChild
+							) {
+								const elementComment = /** @type {CommentWithLocation & { context?: any }} */ (comments.shift());
+								(metadata.elementLeadingComments ||= []).push(elementComment);
+							}
+						}
+
 					while (comments[0] && comments[0].start < node.start) {
 						comment = /** @type {CommentWithLocation} */ (comments.shift());
-						(node.leadingComments ||= []).push(comment);
-					}
+						if (comment.loc) {
+							const ancestorElements = path
+								.filter((ancestor) => ancestor && ancestor.type === 'Element' && ancestor.loc)
+								.sort((a, b) => a.loc.start.line - b.loc.start.line);
 
-					next();
+							const targetAncestor = ancestorElements.find((ancestor) => comment.loc.start.line < ancestor.loc.start.line);
 
-					if (comments[0]) {
-						if (node.type === 'BlockStatement' && node.body.length === 0) {
-							if (comments[0].start < node.end && comments[0].end < node.end) {
-								comment = /** @type {CommentWithLocation} */ (comments.shift());
-								(node.innerComments ||= []).push(comment);
-								return;
+							if (targetAncestor) {
+								targetAncestor.metadata ??= {};
+								(targetAncestor.metadata.elementLeadingComments ||= []).push(comment);
+								continue;
 							}
 						}
-						const parent = /** @type {any} */ (path.at(-1));
+						(node.leadingComments ||= []).push(comment);
+					}
+
+			next();
 
-						if (parent === undefined || node.end !== parent.end) {
+			if (comments[0]) {
+				if (node.type === 'BlockStatement' && node.body.length === 0) {
+					// Collect all comments that fall within this empty block
+					while (comments[0] && comments[0].start < node.end && comments[0].end < node.end) {
+						comment = /** @type {CommentWithLocation} */ (comments.shift());
+						(node.innerComments ||= []).push(comment);
+					}
+					if (node.innerComments && node.innerComments.length > 0) {
+						return;
+					}
+				}
+				// Handle empty Element nodes the same way as empty BlockStatements
+				if (node.type === 'Element' && (!node.children || node.children.length === 0)) {
+					if (comments[0].start < node.end && comments[0].end < node.end) {
+						comment = /** @type {CommentWithLocation} */ (comments.shift());
+						(node.innerComments ||= []).push(comment);
+						return;
+					}
+				}
+				const parent = /** @type {any} */ (path.at(-1));						if (parent === undefined || node.end !== parent.end) {
 							const slice = source.slice(node.end, comments[0].start);
-							const is_last_in_body =
-								((parent?.type === 'BlockStatement' || parent?.type === 'Program') &&
-									parent.body.indexOf(node) === parent.body.length - 1) ||
-								(parent?.type === 'ArrayExpression' &&
-									parent.elements.indexOf(node) === parent.elements.length - 1) ||
-								(parent?.type === 'ObjectExpression' &&
-									parent.properties.indexOf(node) === parent.properties.length - 1);
-
-							if (is_last_in_body) {
+
+							// Check if this node is the last item in an array-like structure
+							let is_last_in_array = false;
+							let array_prop = null;
+
+							if (parent?.type === 'BlockStatement' || parent?.type === 'Program' || parent?.type === 'Component') {
+								array_prop = 'body';
+							} else if (parent?.type === 'ArrayExpression') {
+								array_prop = 'elements';
+							} else if (parent?.type === 'ObjectExpression') {
+								array_prop = 'properties';
+							}
+
+							if (array_prop && Array.isArray(parent[array_prop])) {
+								is_last_in_array = parent[array_prop].indexOf(node) === parent[array_prop].length - 1;
+							}
+
+							if (is_last_in_array) {
 								// Special case: There can be multiple trailing comments after the last node in a block,
 								// and they can be separated by newlines
 								let end = node.end;

package/src/compiler/phases/2-analyze/index.js

@@ -177,7 +177,30 @@ const visitors = {
 		if (node.object.type === 'Identifier' && !node.object.tracked) {
 			const binding = context.state.scope.get(node.object.name);
 
-			if (binding !== null && binding.initial?.type === 'CallExpression' && is_ripple_track_call(binding.initial.callee, context)) {
+			if (binding && binding.metadata?.is_tracked_object) {
+				const internalProperties = new Set(['__v', 'a', 'b', 'c', 'f']);
+
+				let propertyName = null;
+				if (node.property.type === 'Identifier' && !node.computed) {
+					propertyName = node.property.name;
+				} else if (node.property.type === 'Literal' && typeof node.property.value === 'string') {
+					propertyName = node.property.value;
+				}
+
+				if (propertyName && internalProperties.has(propertyName)) {
+					error(
+						`Directly accessing internal property "${propertyName}" of a tracked object is not allowed. Use \`get(${node.object.name})\` or \`@${node.object.name}\` instead.`,
+						context.state.analysis.module.filename,
+						node.property
+					);
+				}
+			}
+
+			if (
+				binding !== null &&
+				binding.initial?.type === 'CallExpression' &&
+				is_ripple_track_call(binding.initial.callee, context)
+			) {
 				error(
 					`Accessing a tracked object directly is not allowed, use the \`@\` prefix to read the value inside a tracked object - for example \`@${node.object.name}${node.property.type === 'Identifier' ? `.${node.property.name}` : ''}\``,
 					context.state.analysis.module.filename,
@@ -231,6 +254,17 @@ const visitors = {
 			const metadata = { tracking: false, await: false };
 
 			if (declarator.id.type === 'Identifier') {
+				const binding = state.scope.get(declarator.id.name);
+				if (binding && declarator.init && declarator.init.type === 'CallExpression') {
+					const callee = declarator.init.callee;
+					// Check if it's a call to `track` or `tracked`
+					if (
+						(callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'tracked')) ||
+						(callee.type === 'MemberExpression' && callee.property.type === 'Identifier' && (callee.property.name === 'track' || callee.property.name === 'tracked'))
+					) {
+						binding.metadata = { ...binding.metadata, is_tracked_object: true };
+					}
+				}
 				visit(declarator, state);
 			} else {
 				const paths = extract_paths(declarator.id);

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

@@ -556,6 +556,10 @@ const visitors = {
 		return b.id(node.name);
 	},
 
+	JSXExpressionContainer(node, context) {
+		return context.visit(node.expression);
+	},
+
 	JSXElement(node, context) {
 		const name = node.openingElement.name;
 		const attributes = node.openingElement.attributes;
@@ -586,7 +590,7 @@ const visitors = {
 		}
 
 		return b.call(
-			'_$_jsx',
+			'__compat.jsx',
 			name.type === 'JSXIdentifier' && name.name[0].toLowerCase() === name.name[0]
 				? b.literal(name.name)
 				: context.visit(name),
@@ -2064,9 +2068,16 @@ function transform_body(body, { visit, state }) {
 function create_tsx_with_typescript_support() {
 	const base_tsx = tsx();
 
-	// Override the ArrowFunctionExpression handler to support TypeScript return types
+	// Add custom TypeScript node handlers that aren't in tsx
 	return {
 		...base_tsx,
+		// Custom handler for TSParenthesizedType: (Type)
+		TSParenthesizedType(node, context) {
+			context.write('(');
+			context.visit(node.typeAnnotation);
+			context.write(')');
+		},
+		// Override the ArrowFunctionExpression handler to support TypeScript return types
 		ArrowFunctionExpression(node, context) {
 			if (node.async) context.write('async ');
 

package/src/runtime/index-client.js

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { Block, CompatOptions } from '#client' */
 
 import { destroy_block, root } from './internal/client/blocks.js';
 import { handle_root_events } from './internal/client/events.js';
@@ -12,7 +12,7 @@ export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
 
 /**
  * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
- * @param {{ props?: Record<string, any>, target: HTMLElement }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement, compat?: CompatOptions }} options
  * @returns {() => void}
  */
 export function mount(component, options) {
@@ -34,7 +34,7 @@ export function mount(component, options) {
 
 	const _root = root(() => {
 		component(anchor, props, active_block);
-	});
+	}, options.compat);
 
 	return () => {
 		cleanup_events();

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

@@ -1,4 +1,4 @@
-/** @import { Block, Derived } from '#client' */
+/** @import { Block, Derived, CompatOptions } from '#client' */
 
 import {
 	BLOCK_HAS_RUN,
@@ -125,10 +125,17 @@ export function ref(element, get_fn) {
 
 /**
  * @param {() => void} fn
+ * @param {CompatOptions} [compat]
  * @returns {Block}
  */
-export function root(fn) {
-	return block(ROOT_BLOCK, fn);
+export function root(fn, compat) {
+	if (compat != null) {
+		for (var key in compat) {
+			var api = compat[key];
+			api.createRoot();
+		}
+	}
+	return block(ROOT_BLOCK, fn, { compat });
 }
 
 /**

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

@@ -1,8 +1,40 @@
+/** @import { CompatApi } from '#client' */
+
+import { ROOT_BLOCK } from "./constants";
+import { active_block } from "./runtime";
+
 /**
- * @param {string} kind 
- * @param {Node} node 
- * @param {() => JSX.Element[]} children_fn 
+ * @param {string} kind
+ * @returns {CompatApi | null}
+ */
+function get_compat_from_root(kind)  {
+	var current = active_block;
+
+	while (current !== null) {
+		if ((current.f & ROOT_BLOCK) !== 0) {
+			var api = current.s.compat[kind];
+
+			if (api != null) {
+				return api;
+			}
+		}
+		current = current.p;
+	}
+
+	return null;
+}
+
+/**
+ * @param {string} kind
+ * @param {Node} node
+ * @param {() => JSX.Element[]} children_fn
  */
 export function tsx_compat(kind, node, children_fn) {
-  throw new Error("Not implemented yet");
-}
+	var compat = get_compat_from_root(kind);
+
+	if (compat == null) {
+		throw new Error(`No compat API found for kind "${kind}"`);
+	}
+
+	compat.createComponent(node, children_fn);
+}

package/src/runtime/internal/client/types.d.ts

@@ -53,3 +53,13 @@ export type Block = {
 	// teardown function
 	t: (() => {}) | null;
 };
+
+export type CompatApi = {
+	createRoot: () => void;
+	createComponent: (node: any, children_fn: () => any) => void;
+	jsx: (type: any, props: any) => any;
+}
+
+export type CompatOptions = {
+	[key: string]: CompatApi;
+}

package/tests/client/compiler/compiler.tracked-access.test.ripple

@@ -0,0 +1,108 @@
+import { compile } from 'ripple/compiler';
+import { track } from 'ripple';
+
+describe('Compiler: Tracked Object Direct Access Checks', () => {
+
+    it('should error on direct access to __v of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let count = track(0);
+                console.log(count.__v);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "__v" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "a" (get/set config) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.a);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "a" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "b" (block) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.b);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "b" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "c" (clock) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.c);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "c" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "f" (flags) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.f);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "f" of a tracked object is not allowed/);
+    });
+
+    it('should compile successfully with correct @ syntax access', () => {
+        const code = `
+            export default component App() {
+                let count = track(0);
+                console.log(@count);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should compile successfully with correct get() function access', () => {
+        const code = `
+            import { get, track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                console.log(get(count));
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should not error on accessing __v of a non-tracked object', () => {
+        const code = `
+            export default component App() {
+                let obj = { __v: 123 };
+                console.log(obj.__v);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should not error on accessing __v of a non-tracked object (member expression)', () => {
+        const code = `
+            export default component App() {
+                let data = { value: { __v: 456 } };
+                console.log(data.value.__v);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should not error on accessing a property named like an internal one on a non-tracked object', () => {
+        const code = `
+            export default component App() {
+                let config = { a: 'some_value', b: 'another_value' };
+                console.log(config.a);
+                console.log(config.b);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+});