ripple 0.2.0 → 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.0",
+  "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/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;
-// }