ripple 0.2.1 → 0.2.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",
@@ -48,7 +48,6 @@
     }
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^2.0.5",
     "@jridgewell/sourcemap-codec": "^1.5.5",
     "@types/estree": "^1.0.8",
     "acorn": "^8.15.0",

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

@@ -4,6 +4,17 @@ import { parse_style } from './style.js';
 
 const parser = acorn.Parser.extend(tsPlugin({ allowSatisfies: true }), RipplePlugin());
 
+function convert_from_jsx(node) {
+	if (node.type === 'JSXIdentifier') {
+		node.type = 'Identifier';
+	} else if (node.type === 'JSXMemberExpression') {
+		node.type = 'MemberExpression';
+		node.object = convert_from_jsx(node.object)
+		node.property = convert_from_jsx(node.property)
+	}
+	return node;
+}
+
 function RipplePlugin(config) {
 	return (Parser) => {
 		const original = acorn.Parser.prototype;
@@ -17,7 +28,7 @@ function RipplePlugin(config) {
 				if (super.shouldParseExportStatement()) {
 					return true;
 				}
-				if (this.value === 'component' || this.value === 'fragment') {
+				if (this.value === 'component') {
 					return true;
 				}
 				return this.type.keyword === 'var';
@@ -28,17 +39,6 @@ function RipplePlugin(config) {
 				let node = this.startNode();
 				this.next();
 
-				if (this.type === tok.at) {
-					this.next();
-
-					if (this.value === 'fragment') {
-						node.decorator = 'fragment';
-						this.next();
-					} else {
-						throw new Error(`Invalid syntax @` + this.value);
-					}
-				}
-
 				node.expression =
 					this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
 				this.expect(tt.braceR);
@@ -59,7 +59,12 @@ function RipplePlugin(config) {
 			jsx_parseAttribute() {
 				let node = this.startNode();
 				if (this.eat(tt.braceL)) {
-					if (this.lookahead().type === tt.ellipsis) {
+					if (this.type === tt.ellipsis) {
+						this.expect(tt.ellipsis);
+						node.argument = this.parseMaybeAssign();
+						this.expect(tt.braceR);
+						return this.finishNode(node, 'SpreadAttribute');
+					} else if (this.lookahead().type === tt.ellipsis) {
 						this.expect(tt.ellipsis);
 						node.argument = this.parseMaybeAssign();
 						this.expect(tt.braceR);
@@ -250,7 +255,7 @@ function RipplePlugin(config) {
 							// '}'
 							if (
 								ch === 125 &&
-								(this.#path.at(-1).type === 'Component' || this.#path.at(-1).type === 'Fragment')
+								(this.#path.at(-1).type === 'Component')
 							) {
 								return original.readToken.call(this, ch);
 							}
@@ -313,8 +318,8 @@ function RipplePlugin(config) {
 				if (open.name.type === 'JSXIdentifier') {
 					open.name.type = 'Identifier';
 				}
-				element.id = open.name;
-				element.id.type = 'Identifier';
+				
+				element.id = convert_from_jsx(open.name);
 				element.attributes = open.attributes;
 				element.selfClosing = open.selfClosing;
 				element.metadata = {};
@@ -377,10 +382,7 @@ function RipplePlugin(config) {
 
 				if (this.type.label === '{') {
 					const node = this.jsx_parseExpressionContainer();
-					node.type = node.decorator === 'fragment' ? 'RenderFragment' : 'Text';
-					if (node.decorator === 'fragment' && node.expression.type !== 'CallExpression') {
-						throw new Error('{@fragment} must be a function call');
-					}
+					node.type = 'Text';
 					body.push(node);
 				} else if (this.type.label === '}') {
 					return;
@@ -448,29 +450,6 @@ function RipplePlugin(config) {
 					return node;
 				}
 
-				if (this.value === 'fragment') {
-					const node = this.startNode();
-					node.type = 'Fragment';
-					this.next();
-					this.enterScope(0);
-					node.id = this.parseIdent();
-					this.parseFunctionParams(node);
-					this.eat(tt.braceL);
-					node.body = [];
-					this.#path.push(node);
-
-					this.parseTemplateBody(node.body);
-
-					this.#path.pop();
-					this.exitScope();
-
-					this.finishNode(node, 'Fragment');
-					this.next();
-					this.awaitPos = 0;
-
-					return node;
-				}
-
 				return super.parseStatement(context, topLevel, exports);
 			}
 
@@ -479,7 +458,6 @@ function RipplePlugin(config) {
 
 				if (
 					parent?.type === 'Component' ||
-					parent?.type === 'Fragment' ||
 					parent?.type === 'Element'
 				) {
 					if (createNewLexicalScope === void 0) createNewLexicalScope = true;

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

@@ -348,8 +348,10 @@ const visitors = {
 	},
 
 	Element(node, { state, visit }) {
-		const type = node.id.name;
-		const is_dom_element = type[0].toLowerCase() === type[0];
+		const is_dom_element =
+			node.id.type === 'Identifier' &&
+			node.id.name[0].toLowerCase() === node.id.name[0] &&
+			node.id.name[0] !== '$';
 		const attribute_names = new Set();
 
 		if (is_dom_element) {
@@ -396,7 +398,7 @@ const visitors = {
 			let explicit_children = false;
 
 			for (const child of node.children) {
-				if (child.type === 'Fragment') {
+				if (child.type === 'Component') {
 					if (child.id.name === '$children') {
 						explicit_children = true;
 						if (implicit_children) {

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

@@ -328,25 +328,35 @@ const visitors = {
 	Element(node, context) {
 		const { state, visit } = context;
 
-		const type = node.id.name;
-		const is_dom_element = type[0].toLowerCase() === type[0];
+		const is_dom_element =
+			node.id.type === 'Identifier' &&
+			node.id.name[0].toLowerCase() === node.id.name[0] &&
+			node.id.name[0] !== '$';
+		const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
+		const spread_attributes = is_spreading ? [] : null;
 
 		const handle_static_attr = (name, value) => {
-			state.template.push(
-				b.literal(
-					` ${name}${
-						is_boolean_attribute(name) && value === true
-							? ''
-							: `="${value === true ? '' : escape_html(value, true)}"`
-					}`
-				)
+			const attr_value = b.literal(
+				` ${name}${
+					is_boolean_attribute(name) && value === true
+						? ''
+						: `="${value === true ? '' : escape_html(value, true)}"`
+				}`
 			);
+
+			if (is_spreading) {
+				if (spread_attributes.length === 0) {
+					state.template.push(attr_value);
+				} else {
+					spread_attributes.push(b.prop('init', b.literal(name), attr_value));
+				}
+			}
 		};
 
 		if (is_dom_element) {
 			let class_attribute = null;
 
-			state.template.push(`<${type}`);
+			state.template.push(`<${node.id.name}`);
 
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {
@@ -493,6 +503,8 @@ const visitors = {
 							}
 						}
 					}
+				} else if (attr.type === 'SpreadAttribute') {
+					spread_attributes.push(b.spread(b.call('$.spread_object', visit(attr.argument, state))));
 				}
 			}
 
@@ -527,13 +539,17 @@ const visitors = {
 
 			state.template.push('>');
 
+			if (spread_attributes !== null && spread_attributes.length > 0) {
+				const id = state.flush_node();
+				state.init.push(
+					b.stmt(b.call('$.render_spread', id, b.thunk(b.object(spread_attributes))))
+				);
+			}
+
 			transform_children(node.children, { visit, state, root: false });
 
-			state.template.push(`</${type}>`);
+			state.template.push(`</${node.id.name}>`);
 		} else {
-			if (node.id.type !== 'Identifier') {
-				throw new Error('TODO');
-			}
 			const id = state.flush_node();
 
 			state.template.push('<!>');
@@ -571,7 +587,7 @@ const visitors = {
 			if (node.children.length > 0) {
 				const component_scope = context.state.scopes.get(node);
 				const children = b.arrow(
-					[b.id('__anchor')],
+					[b.id('__anchor'), b.id('__props'), b.id('__block')],
 					b.block(
 						transform_body(node.children, {
 							...context,
@@ -598,7 +614,9 @@ const visitors = {
 					)
 				);
 			} else {
-				state.init.push(b.stmt(b.call(node.id, id, b.object(props), b.id('$.active_block'))));
+				state.init.push(
+					b.stmt(b.call(visit(node.id, state), id, b.object(props), b.id('$.active_block')))
+				);
 			}
 		}
 	},
@@ -1007,69 +1025,10 @@ const visitors = {
 		return b.call(b.await(b.call('$.resume_context', context.visit(node.argument))));
 	},
 
-	JSXText(node) {
-		const text = node.value;
-		if (text.trim() === '') {
-			return b.empty;
-		}
-		return b.literal(text);
-	},
-
-	JSXExpressionContainer(node, context) {
-		const expression = context.visit(node.expression);
-		if (expression.type === b.empty) {
-			return b.empty;
-		}
-		return expression;
-	},
-
-	JSXIdentifier(node, context) {
-		return context.visit(b.id(node.name));
-	},
-
-	JSXMemberExpression(node, context) {
-		return b.member(context.visit(node.object), context.visit(node.property));
-	},
-
 	BinaryExpression(node, context) {
 		return b.binary(node.operator, context.visit(node.left), context.visit(node.right));
 	},
 
-	JSXElement(node, context) {
-		if (
-			!context.state.imports.has(`import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'`)
-		) {
-			context.state.imports.add(`import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'`);
-		}
-
-		const openingElement = node.openingElement;
-		const name = openingElement.name;
-		const props = b.object([]);
-		const children = node.children
-			.map((child) => context.visit(child, context.state))
-			.filter((child) => child !== b.empty);
-
-		if (children.length > 0) {
-			props.properties.push(b.prop('init', b.id('children'), b.array(children)));
-		}
-
-		for (const attr of openingElement.attributes) {
-			if (attr.type === 'JSXAttribute') {
-				props.properties.push(
-					b.prop('init', b.id(attr.name.name), context.visit(attr.value, context.state))
-				);
-			}
-		}
-
-		return b.call(
-			children.length > 0 ? '_jsxs' : '_jsx',
-			name.type === 'JSXIdentifier' && name.name[0] === name.name[0].toLowerCase()
-				? b.literal(name.name)
-				: context.visit(name),
-			props
-		);
-	},
-
 	RenderFragment(node, context) {
 		const identifer = node.expression.callee;
 
@@ -1231,7 +1190,7 @@ function transform_ts_child(node, context) {
 		});
 
 		if (!node.selfClosing && !has_children_props && node.children.length > 0) {
-			const is_dom_element = type[0].toLowerCase() === type[0];
+			const is_dom_element = type[0].toLowerCase() === type[0] && type[0] !== '$';
 
 			const component_scope = context.state.scopes.get(node);
 			const thunk = b.thunk(
@@ -1246,7 +1205,7 @@ function transform_ts_child(node, context) {
 			if (is_dom_element) {
 				children.push(b.jsx_expression_container(b.call(thunk)));
 			} else {
-				const children_name = context.state.scope.generate('fragment');
+				const children_name = context.state.scope.generate('component');
 				const children_id = b.id(children_name);
 				const jsx_id = b.jsx_id('$children');
 				jsx_id.loc = node.id.loc;
@@ -1343,7 +1302,10 @@ function transform_children(children, { visit, state, root }) {
 				node.type === 'TryStatement' ||
 				node.type === 'ForOfStatement' ||
 				node.type === 'RenderFragment' ||
-				(node.type === 'Element' && node.id.name[0].toLowerCase() !== node.id.name[0])
+				(node.type === 'Element' &&
+					(node.id.type !== 'Identifier' ||
+						node.id.name[0].toLowerCase() !== node.id.name[0] ||
+						node.id.name[0] === '$'))
 		) ||
 		normalized.filter(
 			(node) => node.type !== 'VariableDeclaration' && node.type !== 'EmptyStatement'
@@ -1354,7 +1316,10 @@ function transform_children(children, { visit, state, root }) {
 
 	const get_id = (node) => {
 		return b.id(
-			node.type == 'Element' && node.id.name[0].toLowerCase() === node.id.name[0]
+			node.type == 'Element' &&
+				node.id.type === 'Identifier' &&
+				node.id.name[0].toLowerCase() === node.id.name[0] &&
+				node.id.name[0] !== '$'
 				? state.scope.generate(node.id.name)
 				: node.type == 'Text'
 				? state.scope.generate('text')

package/src/compiler/scope.js

@@ -70,22 +70,10 @@ export function create_scopes(ast, root, parent) {
 			next({ scope });
 		},
 
-		Fragment(node, { state, next }) {
-			const scope = state.scope.child();
-			scopes.set(node, scope);
-
-			if (node.id) scope.declare(node.id, 'normal', 'fragment');
-
-			add_params(scope, node.params);
-			next({ scope });
-		},
-
 		Element(node, { state, next }) {
 			const scope = state.scope.child();
 			scopes.set(node, scope);
 
-			scope.declare(node, 'normal', 'element');
-
 			next({ scope });
 		},
 
@@ -305,7 +293,6 @@ export class Scope {
 			kind,
 			declaration_kind,
 			is_called: false,
-			prop_alias: null,
 			metadata: null
 		};
 

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

@@ -11,6 +11,7 @@ import {
 	TRY_BLOCK
 } from './constants';
 import { next_sibling } from './operations';
+import { apply_element_spread } from './render';
 import {
 	active_block,
 	active_component,
@@ -49,6 +50,10 @@ export function render(fn, flags = 0) {
 	return block(RENDER_BLOCK | flags, fn);
 }
 
+export function render_spread(element, fn, flags = 0) {
+	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
+}
+
 export function branch(fn, flags = 0) {
 	return block(BRANCH_BLOCK | flags, fn);
 }

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

@@ -10,7 +10,7 @@ export {
 	set_ref
 } from './render.js';
 
-export { render, async } from './blocks.js';
+export { render, render_spread, async } from './blocks.js';
 
 export { event, delegate } from './events.js';
 

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

@@ -60,6 +60,18 @@ export function set_attribute(element, attribute, value) {
 	}
 }
 
+export function set_attributes(element, attributes) {
+	for (const key in attributes) {
+		let value = attributes[key];
+
+		if (key === 'class') {
+			set_class(element, value);
+		} else {
+			set_attribute(element, key, value);
+		}
+	}
+}
+
 /**
  * @template V
  * @param {V} value
@@ -154,3 +166,9 @@ export function set_ref(dom, fn) {
 		};
 	});
 }
+
+export function apply_element_spread(element, fn) {
+	return () => {
+		set_attributes(element, fn());
+	};
+}

package/types/index.d.ts

@@ -1,2 +1,12 @@
+export type Component<T> = (props: T) => void;
 
-export type Fragment<T extends any[] = []> = (...args: T) => void;
+export declare function mount(
+	component: () => void,
+	options: { target: HTMLElement; props?: Record<string, any> }
+): () => void;
+
+export declare function untrack<T>(fn: () => T): T;
+
+export declare function flushSync<T>(fn: () => T): T;
+
+export declare function effect(fn: (() => void) | (() => () => void)): void;

package/README.md

@@ -1,286 +0,0 @@
-# Ripple
-
-> Currently, this project is still in early development, and should not be used in production.
-
-Ripple is a TypeScript UI framework for the web.
-
-I wrote Ripple as a love letter for frontend web – and this is largely a project that I built in less than a week, so it's very raw.
-
-Personally, I ([@trueadm](https://github.com/trueadm)) have been involved in some truly amazing frontend frameworks along their journeys – from [Inferno](https://github.com/infernojs/inferno), where it all began, to [React](https://github.com/facebook/react) and the journey of React Hooks, to creating [Lexical](https://github.com/facebook/lexical), to [Svelte 5](https://github.com/sveltejs/svelte) and its new compiler and signal-based reactivity runtime. Along that journey, I collected ideas, and intriguing thoughts that may or may not pay off. Given my time between roles, I decided it was the best opportunity to try them out, and for open source to see what I was cooking.
-
-Ripple was designed to be a JS/TS-first framework, rather than HTML-first. Ripple modules have their own `.ripple` extension and these modules
-fully support TypeScript. By introducing a new extension, it affords Ripple to invent its own superset language, that plays really nicely with
-TypeScript and JSX, but with a few interesting touches. In my experience, this has led to better DX not only for humans, but also for LLMs.
-
-Right now, there will be plenty of bugs, things just won't work either and you'll find TODOs everywhere. At this stage, Ripple is more of an early alpha version of something that _might_ be, rather than something you should try and adopt. If anything, maybe some of the ideas can be shared and incubated back into other frameworks. There's also a lot of similarities with Svelte 5, and that's not by accident, that's because of my recent time working on Svelte 5.
-
-## Features
-
-- **Reactive State Management**: Built-in reactivity with `$` prefixed variables
-- **Component-Based Architecture**: Clean, reusable components with props and children
-- **JSX-like Syntax**: Familiar templating with Ripple-specific enhancements
-- **TypeScript Support**: Full TypeScript integration with type checking
-- **VSCode Integration**: Rich editor support with diagnostics, syntax highlighting, and IntelliSense
-
-## Missing Features
-
-- **SSR**: Ripple is currently an SPA only, this is because I haven't gotten around to it
-- **Testing & Types**: The codebase is very raw with limited types (I've opted for JavaScript only to avoid build problems). There aren't any tests either – I've been using the `playground` directory to manually test things as I go
-
-## Quick Start
-
-### Installation
-
-```bash
-pnpm i --save ripple
-```
-
-## Key Concepts
-
-### Components
-
-Define reusable components with the `component` keyword. These are similar to functions in that they have `props`, but crucially,
-they allow for a JSX-like syntax to be defined alongside standard TypeScript. That means you do not _return JSX_ like in other frameworks,
-but you instead use it like a JavaScript statement, as shown:
-
-```ripple
-component Button(props: {text: string, onClick: () => void}) {
-  <button onClick={props.onClick}>
-    {props.text}
-  </button>
-}
-
-// Usage
-<Button text="Click me" onClick={() => console.log("Clicked!")} />
-```
-
-### Reactive Variables
-
-Variables prefixed with `$` are automatically reactive:
-
-```ripple
-let $name = "World";
-let $count = 0;
-
-// Updates automatically trigger re-renders
-$count++;
-```
-
-Object properties prefixed with `$` are also automatically reactive:
-
-```ripple
-let counter = { $current: 0 };
-
-// Updates automatically trigger re-renders
-counter.$current++;
-```
-
-Derived values are simply `$` variables that combined different parts of state:
-
-```ripple
-let $count = 0;
-let $double = $count * 2;
-let $quadruple = $double * 2;
-```
-
-That means `$count` itself might be derived if it were to reference another reactive property. For example:
-
-```ripple
-component Counter({ $startingCount }) {
-  let $count = $startingCount;
-  let $double = $count * 2;
-  let $quadruple = $double * 2;
-}
-```
-
-Now given `$startingCount` is reactive, it would mean that `$count` might reset each time an incoming change to `$startingCount` occurs. That might not be desirable, so Ripple provides a way to `untrack` reactivity in those cases:
-
-```ripple
-import { untrack } from 'ripple';
-
-component Counter({ $startingCount }) {
-  let $count = untrack(() => $startingCount);
-  let $double = $count * 2;
-  let $quadruple = $double * 2;
-}
-```
-
-Now `$count` will only reactively create its value on initialization.
-
-> Note: you cannot define reactive variables in module/global scope, they have to be created on access from an active component
-
-### Effects
-
-When dealing with reactive state, you might want to be able to create side-effects based upon changes that happen upon updates.
-To do this, you can use `effect`:
-
-```ripple
-import { effect } from 'ripple';
-
-component App() {
-  let $count = 0;
-
-  effect(() => {
-    console.log($count);
-  });
-
-  <button onClick={() => $count++}>Increment</button>
-}
-```
-
-### Template
-
-The JSX-like syntax might take some time to get used to if you're coming from another framework. For one, templating in Ripple
-can only occur _inside_ a `component` or `fragment` body – you can't create JSX inside functions, or assign it to variables as an expression.
-
-Furthermore, Ripple's templating language allows for native JS control flow:
-
-```ripple
-component Truthy({ x }) {
-  <div>
-    if (x) {
-      <span>
-        {"x is truthy"}
-      </span>
-    } else {
-      <span>
-        // you can create variables inside the template!
-        const str = "x is falsy";
-
-        console.log(str); // and function calls too!
-
-        {str}
-      </span>
-    }
-  </div>
-}
-```
-
-You can also use for...of blocks inside Ripple's templating language, and many other blocks too!
-
-Note that strings inside the template need to be inside `{"string"}`, you can't do `<div>hello</div>` as Ripple
-has no idea if `hello` is a string or maybe some JavaScript code that needs evaluating, so just ensure you wrap them
-in curly braces. This shouldn't be an issue in the real-world anyway, as you'll likely use an i18n library that means
-using JavaScript expressions regardless.
-
-### Props
-
-If you want a prop to be reactive, you should also give it a `$` prefix.
-
-```ripple
-component Button(props: {$text: string, onClick: () => void}) {
-  <button onClick={props.onClick}>
-    {props.$text}
-  </button>
-}
-
-// Usage
-<Button $text={some_text} onClick={() => console.log("Clicked!")} />
-```
-
-### Fragments
-
-As mentioned before, you can only create Ripple JSX-like templating in two places – `component` or `fragment`. You can think
-of a `fragment` as a JavaScript function that has arguments and generates output, it does not return anything! They can be used 
-with the `fragment` keyword:
-
-```ripple
-fragment Logo() {
-  <svg>{...}</svg>
-}
-```
-
-You can render the `Logo` fragment using the `{@fragment ...}` directive:
-
-```ripple
-component SomeComponent() {
-  <div>{@fragment Logo()}</div>
-}
-```
-
-### Children
-
-Use `$children` prop and the `{@fragment ...}` directive for component composition.
-
-When you pass in children to a component, it gets implicitly passed as the `$children` prop, in the form of a fragment.
-
-```ripple
-import type {Fragment} from 'ripple';
-
-component Card(props: {$children: Fragment}) {
-  <div class="card">
-    {@fragment props.$children()}
-  </div>
-}
-
-// Usage
-<Card>
-  <p>{"Card content here"}</p>
-</Card>
-```
-
-You could also explicitly write the same code as shown:
-
-```ripple
-import type {Fragment} from 'ripple';
-
-component Card(props: {$children: Fragment}) {
-  <div class="card">
-    {@fragment props.$children()}
-  </div>
-}
-
-// Usage with explicit fragment
-<Card>
-  fragment $children() {
-    <p>{"Card content here"}</p>
-  }
-</Card>
-```
-
-### Styling
-
-Ripple supports native CSS styling that is localized to the given component using the `<style>` element.
-
-```ripple
-component MyComponent() {
-  <div class="container">
-    <h1>{"Hello World"}</h1>
-  </div>
-  
-  <style>
-    .container {
-      background: blue;
-      padding: 1rem;
-    }
-    
-    h1 {
-      color: white;
-      font-size: 2rem;
-    }
-  </style>
-}
-```
-
-> Note: the `<style>` element must be top-level within a `component` and cannot be used inside a `fragment`.
-
-## VSCode Extension
-
-The Ripple VSCode extension provides:
-
-- **Syntax Highlighting** for `.ripple` files
-- **Real-time Diagnostics** for compilation errors
-- **TypeScript Integration** for type checking
-- **IntelliSense** for autocompletion
-
-Clone the repository, and manually install the extension from the `packages/ripple-vscode-plugin/` directory.
-
-## Playground
-
-Feel free to play around with how Ripple works. If you clone the repo, you can then:
-
-```bash
-pnpm i && cd playground && pnpm dev
-```
-
-The playground uses Ripple's Vite plugin, where you can play around with things inside the `playground/src` directory.

package/src/ai.js

@@ -1,292 +0,0 @@
-// import { anthropic } from '@ai-sdk/anthropic';
-// import { generateText } from 'ai';
-
-// const default_prompt = `
-//   Ripple is a web-based JavaScript framework for building user interfaces. It's syntax and design is inspired by React and Svelte 5. 
-//   It uses JSX for templating inside '.ripple' modules. These modules allow for custom syntax that is not JavaScript compliant.
-  
-//   One of the core differences is that it allows for a new type of JavaScript declaration which is a 'component', which is like a 'function' but is only allowed in '.ripple' modules:
-
-//   \`\`\`js
-//     component HelloComponent(props) {
-//         const title = 'Hello ';
-
-//         <div>{title + props.name}</div>;
-//     }
-//   \`\`\`
-
-//   Another difference is that 'component' declaration bodies allow for JSX templating. Except this JSX templating isn't "expression" based, but rather "statement" based. That
-//   means that 'return' is not valid syntax in a component declaration body. Nor is creating a variable that references JSX. Instead, JSX is directly written in the body of the component declaration.
-//   This means that the ordering is important, as JSX that is written first will be rendered first. This is different from React.
-
-//   Another difference from JSX in other frameworks is that JSXText is not allowed here. That's because JSX is now statement based, and not expression based. This means that all JSX must be wrapped in a JSXExpressionContainer.
-
-//   For example, this is invalid Ripple code:
-
-//   \`\`\`js
-//     <button>=</button>
-//   \`\`\`
-
-//   The correct version is:
-
-//   \`\`\`js
-//     <button>{"="}</button>
-//   \`\`\`
-
-//   Another core difference is that Ripple defines reactive variables by their usage of a "$" prefix. If the variable declaration does not have a dollar prefix, it is not reactive.
-
-//   \`\`\`js
-//     component HelloComponent(props) {
-//         let $count = 0;
-
-//         <div>{$count}</div>;
-//         <button onClick={() => $count++}>{"Increment"}</button>;
-//     }
-//   \`\`\`
-
-//   Object properties can also be reactive if the property name starts with a "$" prefix.
-
-//   \`\`\`js
-//     component HelloComponent(props) {
-//         let state = { $count: 0 };
-
-//         <div>{state.$count}</div>;
-//         <button onClick={() => state.$count++}>{"Increment"}</button>;
-//     }
-//   \`\`\`
-
-//   Ripple doesn't allow for inline expressions with JSX for conditionals or for collections such as arrays or objects.
-//   Instead, prefer using normal JavaScript logic where you have a "if" or "for" statement that wraps the JSX.
-
-//   Here is valid Ripple code:
-
-//   \`\`\`js
-//     export component Counter() {
-//         let $count = 0;
-
-//         if ($count > 5) {
-//           <div>{$count}</div>;
-//         }
-
-//         <div>
-//           if ($count > 5) {
-//             <div>{$count}</div>;
-//           }
-//         </div>;
-
-//         for (const item of items) {
-//           <div>{item}</div>;
-//         }
-
-//         <ul>
-//           for (const item of items) {
-//             <li>{item}</li>;
-//           }
-//         </ul>;
-//     }
-//   \`\`\`
-
-//   Ripple allows for shorthand props on components, so '<Child state={state} />' can be written as '<Child {state} />'.
-
-//   Ripple also allows for a singular "<style>" JSX element at the top level of the component declaration body. This is used for styling any JSX elements within the component.
-//   The style element can contain any valid CSS, and can also contain CSS variables. CSS variables are defined with a "--" prefix. This is the preferred way of doing styling over inline styles.
-  
-//   If inline styles are to be used, then they should be done using the HTML style attribute approach rather than the JSX style attribute property approach.
-
-//   In Ripple variables that are created with an identifier that starts with a "$" prefix are considered reactive. If declaration init expression also references reactive variables, or function expressions, then
-//   this type of variable is considered "computed". Computed reactive declarations will re-run when any of the reactive variables they reference change. If this is not desired then the "untrack" function call should
-//   be used to prevent reactivity.
-
-//   \`\`\`js
-//     import { untrack } from 'ripple';
-
-//     component Counter({ $initial }) {
-//         let $count = untrack(() => $initial);
-//     }
-//   \`\`\`
-
-//   An important part of Ripple's reactivity model is that passing reactivity between boundaries can only happen via two ways:
-//   - the usage of closures, where a value is referenced in a function or property getter
-//   - the usage of objects and/or arrays, where the object or array is passed as a property with a "$" prefix so its reactivity is kept
-
-//   For example if you were to create a typical Ripple hook function, then you should pass any reactive values through using objects. Otherwise, the
-//   hook will act as a computed function and re-run every time the reactive value changes – which is likely not the desired behaviour of a "hook" function.
-
-//   \`\`\`js
-//     function useCounter(initial) {
-//       let $count = initial;
-//       const $double = $count * 2;
-
-//       const increment = () => $count++;
-
-//       return { $double, increment };
-//     }
-
-//     component Counter({ $count }) {
-//       const { $double, increment } = useCounter($count);
-
-//       <button onClick={increment}>{"Increment"}</button>;
-//       <div>{$double}</div>;
-//     }
-//   \`\`\`
-
-//   If a value needs to be mutated from within a hook, then it should be referenced by the hook in its object form instead:
-
-//   \`\`\`js
-//     function useCounter(state) {
-//       const $double = state.$count * 2;
-
-//       const increment = () => state.$count++;
-
-//       return { $double, increment };
-//     }
-
-//     component Counter({ $count }) {
-//       let $count = 0;
-
-//       const { $double, increment } = useCounter({ $count });
-
-//       <button onClick={increment}>{"Increment"}</button>;
-//       <div>{$double}</div>;
-//     }
-//   \`\`\`
-
-//   It should be noted that in this example, the "$count" inside the "Counter" component will not be mutated by the "increment" function.
-
-//   If this is desired, then the call to "useCounter" needs to provide a getter and setter for the "$count" value:
-
-//   \`\`\`js
-//     function useCounter(state) {
-//       const $double = state.$count * 2;
-
-//       const increment = () => state.$count++;
-
-//       return { $double, increment };
-//     }
-
-//     component Counter({ $count }) {
-//       let $count = 0;
-
-//       const { $double, increment } = useCounter({ get $count() { return $count }, set $count(value) { $count = value } });
-
-//       <button onClick={increment}>{"Increment"}</button>;
-//       <div>{$double}</div>;
-//     }
-//   \`\`\`
-
-//   Normally, you shouldn't provide getters/setters in the object returned from a hook, especially if the usage site intends to destruct the object.
-
-//   Ripple also provides a way of handling Suspense and asynchronous data fetching. This requires two parts:
-//   - a "try" block, that has an "async" block that shows the fallback pending UI. These blocks can only be used inside Ripple components
-//   - an "await" that must happen at the top-level of the component body
-
-//   Here is an example:
-
-//   \`\`\`js
-//     export component App() {
-//       try {
-//         <Child />;
-//       } async {
-//         <div>{"Loading..."}</div>;
-//       }
-//     }
-
-//     component Child() {
-//       const $pokemons = await fetch('https://pokeapi.co/api/v2/pokemon/').then((res) => res.json());
-
-//       for (const pokemon of $pokemons.results) {
-//         <div>{pokemon.name}</div>;
-//       }
-//     }
-//   \`\`\`
-
-//   It's important that the transformed code never uses an async fetch() call inside an effect function. This is an anti-pattern, instead the "await" expression should be used
-//   directly inside the fragment or component body. Also when using "await" then loading states should be handled using the "try" and "async" blocks, so this isn't required in the
-//   output code.
-
-//   Ripple also supports "fragment" syntax, which is similar to the "component" syntax but allows for multiple arguments:
-
-//   \`\`\`js
-//     fragment foo() {
-//       <div>{"Hello World"}</div>;
-//     }
-
-//     component App() {
-//       {fragment foo()};
-//     }
-//   \`\`\`
-
-//   Fragments can be seen as reactive functions that can take arguments and using the "{@fragment fragment(...args)}" syntax, they can be rendered as if they were JSX elements.
-
-//   Ripple denotes attributes and properties on JSX elements as being reactive when they also have a "$" prefix. This means that if a property is reactive, then the element will re-render when the property changes.
-
-//   Ripple does not support both a non-reactive and reactive version of a prop – so having "$ref" and "ref" is not allowed. If a prop could be possibly reactive, then it should always have a "$" prefix to ensure maximum compatibility.
-
-//   There are also some special attributes that such as "$ref" and "$children" that always start with a "$" prefix.
-
-//   When creating an implicit children fragment from a JSX component, such as:
-
-//   \`\`\`js
-//     <ChildComponent>
-//       {"Hello World"}
-//     </ChildComponent>
-//   \`\`\`
-
-//   This can also be written as:
-
-//   \`\`\`js
-//     fragment $children() {
-//       {"Hello World"};
-//     }
-
-//     <ChildComponent {$children} />;
-//   \`\`\`
-
-//   Which is the same as the previous example.
-
-//   The "Hello world" will be passed as a "$children" prop to the "ChildComponent" and it will be of the type of "Fragment". Which means that it's not a string, or JSX element, but rather a special kind of thing.
-
-//   To render a type of "Fragment" the {@fragment thing()} syntax should be used. This will render the "thing" as if it was a JSX element. Here's an example:
-
-//   \`\`\`js
-//     component Child({ $children }) {
-//       <div>
-//         {@fragment $children()};
-//       </div>;
-//     }
-//   \`\`\`
-
-//   Ripple uses for...of blocks for templating over collections or lists. While loops, standard for loops and while loops are not permitted in Ripple components or fragments.
-
-//   For example, to render a list of items:
-
-//   \`\`\`js
-//     <ul>
-//       for (const num of [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]) {
-//         <li>{num}</li>;
-//       }
-//     </ul>;
-//   \`\`\`
-
-
-// `;
-
-// export async function validate_with_ai(source) {
-// 	const { text } = await generateText({
-// 		model: anthropic('claude-3-7-sonnet-20250219'),
-// 		messages: [
-// 			{
-// 				role: 'user',
-// 				content: default_prompt,
-// 				providerOptions: {
-// 					anthropic: { cacheControl: { type: 'ephemeral' } }
-// 				}
-// 			},
-// 			{
-// 				role: 'user',
-// 				content: `Please validate the following Ripple code and provide feedback on any issues:\n\n${source}`
-// 			}
-// 		]
-// 	});
-// 	return text;
-// }