ripple 0.2.3 → 0.2.4

package/README.md

@@ -1,4 +1,9 @@
-# Ripple
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/ripple-dark.png">
+  <img src="assets/ripple-light.png" alt="Ripple - the elegant UI framework for the web" />
+</picture>
+
+# What is Ripple?
 
 > Currently, this project is still in early development, and should not be used in production.
 
@@ -14,6 +19,8 @@ TypeScript and JSX, but with a few interesting touches. In my experience, this h
 
 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.
 
+If you'd like to know more, join the [Ripple Discord](https://discord.gg/JBF2ySrh2W).
+
 ## Features
 
 - **Reactive State Management**: Built-in reactivity with `$` prefixed variables
@@ -29,20 +36,19 @@ Right now, there will be plenty of bugs, things just won't work either and you'l
 
 ## Quick Start
 
-### Installation
+### Try Ripple
 
-```bash
-pnpm i --save ripple
-```
+> We're working hard on getting an online playgroud available. Watch this space!
 
-You'll also need Vite and Ripple's Vite plugin to compile Ripple:
+You can try Ripple now by using our basic Vite template by running these commands in your terminal:
 
 ```bash
-pnpm i --save-dev vite-plugin-ripple
+npx degit trueadm/ripple/templates/basic my-app
+cd my-app
+npm i # or yarn or pnpm
+npm run dev # or yarn or pnpm
 ```
 
-You can see a working example in the [playground demo app](https://github.com/trueadm/ripple/tree/main/playground).
-
 ### Mounting your app
 
 You can use the `mount` API from the `ripple` package to render your Ripple component, using the `target`
@@ -77,14 +83,31 @@ component Button(props: { text: string, onClick: () => void }) {
 }
 
 // Usage
-<Button text="Click me" onClick={() => console.log("Clicked!")} />
+component App() {
+  <Button text="Click me" onClick={() => console.log("Clicked!")} />
+}
+```
+
+![iamge for the sourcecode above](assets/readme-1.png)
+
+Ripple's templating language also supports shorthands and object spreads too:
+
+```svelte
+// you can do a normal prop
+<div onClick={onClick}>{text}</div>
+
+// or using the shorthand prop
+<div {onClick}>{text}</div>
+
+// and you can spread props
+<div {...properties}>{text}</div>
 ```
 
 ### Reactive Variables
 
 Variables prefixed with `$` are automatically reactive:
 
-```ripple
+```ts
 let $name = "World";
 let $count = 0;
 
@@ -94,7 +117,7 @@ $count++;
 
 Object properties prefixed with `$` are also automatically reactive:
 
-```ripple
+```ts
 let counter = { $current: 0 };
 
 // Updates automatically trigger re-renders
@@ -103,7 +126,7 @@ counter.$current++;
 
 Derived values are simply `$` variables that combined different parts of state:
 
-```ripple
+```ts
 let $count = 0;
 let $double = $count * 2;
 let $quadruple = $double * 2;
@@ -172,6 +195,8 @@ can only occur _inside_ a `component` body – you can't create JSX inside funct
 </div>
 ```
 
+![iamge for the sourcecode above](assets/readme-5.png)
+
 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
@@ -191,13 +216,15 @@ component Truthy({ x }) {
       </span>
     } else {
       <span>
-        {"x is truthy"}
+        {"x is falsy"}
       </span>
     }
   </div>
 }
 ```
 
+![iamge for the sourcecode above](assets/readme-2.png)
+
 ### For statements
 
 You can render collections using a `for...of` block, and you don't need to specify a `key` prop like
@@ -214,6 +241,8 @@ component ListView({ title, items }) {
 }
 ```
 
+![iamge for the sourcecode above](assets/readme-3.png)
+
 ### Try statements
 
 Try blocks work to building the foundation for **error boundaries**, when the runtime encounters
@@ -235,6 +264,8 @@ component ErrorBoundary() {
 }
 ```
 
+![iamge for the sourcecode above](assets/readme-4.png)
+
 ### Props
 
 If you want a prop to be reactive, you should also give it a `$` prefix.
@@ -252,7 +283,7 @@ component Button(props: { $text: string, onClick: () => void }) {
 
 ### Children
 
-Use `$children` prop and the `<$component />` directive for component composition.
+Use `$children` prop and then use it in the form of `<$children />` for component composition.
 
 When you pass in children to a component, it gets implicitly passed as the `$children` prop, in the form of a component.
 
@@ -261,7 +292,7 @@ import type { Component } from 'ripple';
 
 component Card(props: { $children: Component }) {
   <div class="card">
-    <$component />
+    <$children />
   </div>
 }
 
@@ -278,7 +309,7 @@ import type { Component } from 'ripple';
 
 component Card(props: { $children: Component }) {
   <div class="card">
-    <$component />
+    <$children />
   </div>
 }
 
@@ -336,14 +367,14 @@ component MyComponent() {
 
 ## VSCode Extension
 
-The Ripple VSCode extension provides:
+The [Ripple VSCode extension](https://marketplace.visualstudio.com/items?itemName=ripplejs.ripple-vscode-plugin) 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.
+You can find the extension on the VS Code Marketplace as [`Ripple for VS Code`](https://marketplace.visualstudio.com/items?itemName=ripplejs.ripple-vscode-plugin).
 
 ## Playground
 
@@ -353,4 +384,4 @@ Feel free to play around with how Ripple works. If you clone the repo, you can t
 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.
+The playground uses Ripple's Vite plugin, where you can play around with things inside the `playground/src` directory.

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.3",
+  "version": "0.2.4",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -9,8 +9,8 @@ function convert_from_jsx(node) {
 		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)
+		node.object = convert_from_jsx(node.object);
+		node.property = convert_from_jsx(node.property);
 	}
 	return node;
 }
@@ -24,6 +24,38 @@ function RipplePlugin(config) {
 		class RippleParser extends Parser {
 			#path = [];
 
+			parseExportDefaultDeclaration() {
+				// Check if this is "export default component"
+				if (this.value === 'component') {
+					const node = this.startNode();
+					node.type = 'Component';
+					node.css = null;
+					node.default = true;
+					this.next();
+					this.enterScope(0);
+					
+					node.id = this.type.label === 'name' ? this.parseIdent() : null;
+					
+					this.parseFunctionParams(node);
+					this.eat(tt.braceL);
+					node.body = [];
+					this.#path.push(node);
+
+					this.parseTemplateBody(node.body);
+
+					this.#path.pop();
+					this.exitScope();
+
+					this.next();
+					this.finishNode(node, 'Component');
+					this.awaitPos = 0;
+
+					return node;
+				}
+				
+				return super.parseExportDefaultDeclaration();
+			}
+
 			shouldParseExportStatement() {
 				if (super.shouldParseExportStatement()) {
 					return true;
@@ -253,10 +285,7 @@ function RipplePlugin(config) {
 						case 62: // '>'
 						case 125: {
 							// '}'
-							if (
-								ch === 125 &&
-								(this.#path.at(-1).type === 'Component')
-							) {
+							if (ch === 125 && this.#path.at(-1).type === 'Component') {
 								return original.readToken.call(this, ch);
 							}
 							this.raise(
@@ -318,7 +347,7 @@ function RipplePlugin(config) {
 				if (open.name.type === 'JSXIdentifier') {
 					open.name.type = 'Identifier';
 				}
-				
+
 				element.id = convert_from_jsx(open.name);
 				element.attributes = open.attributes;
 				element.selfClosing = open.selfClosing;
@@ -364,6 +393,37 @@ function RipplePlugin(config) {
 				return element;
 			}
 
+			parseSubscript(base, startPos, startLoc, noCalls, maybeAsyncArrow, optionalChained, forInit) {
+				if (this.value === '<' && this.#path.findLast((n) => n.type === 'Component')) {
+					// Check if this looks like JSX by looking ahead
+					const ahead = this.lookahead();
+					if (ahead.type.label === 'name' || ahead.value === '/' || ahead.value === '>') {
+						// This is JSX, rewind to the end of the object expression
+						// and let ASI handle the semicolon insertion naturally
+						this.pos = base.end;
+						this.type = tt.braceR;
+						this.value = '}';
+						this.start = base.end - 1;
+						this.end = base.end;
+						const position = this.curPosition();
+						this.startLoc = position;
+						this.endLoc = position;
+						this.next();
+
+						return base;
+					}
+				}
+				return super.parseSubscript(
+					base,
+					startPos,
+					startLoc,
+					noCalls,
+					maybeAsyncArrow,
+					optionalChained,
+					forInit
+				);
+			}
+
 			parseTemplateBody(body) {
 				var inside_func =
 					this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
@@ -456,10 +516,7 @@ function RipplePlugin(config) {
 			parseBlock(createNewLexicalScope, node, exitStrict) {
 				const parent = this.#path.at(-1);
 
-				if (
-					parent?.type === 'Component' ||
-					parent?.type === 'Element'
-				) {
+				if (parent?.type === 'Component' || parent?.type === 'Element') {
 					if (createNewLexicalScope === void 0) createNewLexicalScope = true;
 					if (node === void 0) node = this.startNode();
 

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

@@ -439,20 +439,6 @@ const visitors = {
 						attribute
 					);
 				}
-			} else if (name === 'ref') {
-				if (is_dom_element) {
-					error(
-						'Cannot have a `ref` prop on an element, did you mean `$ref`?',
-						state.analysis.module.filename,
-						attribute
-					);
-				} else {
-					error(
-						'Cannot have a `ref` prop on a component, did you mean `$ref`?',
-						state.analysis.module.filename,
-						attribute
-					);
-				}
 			}
 
 			if (is_tracked_name(name)) {

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

@@ -44,7 +44,7 @@ function visit_function(node, context) {
 
 	let body = context.visit(node.body, state);
 
-	if (metadata.tracked === true) {
+	if (metadata?.tracked === true) {
 		return /** @type {FunctionExpression} */ ({
 			...node,
 			params: node.params.map((param) => context.visit(param, state)),
@@ -66,7 +66,7 @@ function build_getter(node, context) {
 
 		// don't transform the declaration itself
 		if (node !== binding?.node && binding?.transform) {
-			return binding.transform.read(node);
+			return binding.transform.read(node, context.state?.metadata?.spread);
 		}
 	}
 
@@ -409,18 +409,12 @@ const visitors = {
 							continue;
 						}
 
-						if (name === '$ref') {
-							const id = state.flush_node();
-							const value = attr.value;
-
-							state.init.push(b.stmt(b.call('$.set_ref', id, visit(value, state))));
-							continue;
-						}
-
 						if (is_event_attribute(name)) {
-							const event_name = name.slice(2).toLowerCase();
+							let capture = name.endsWith('Capture');
+							let event_name = capture
+								? name.slice(2, -7).toLowerCase()
+								: name.slice(2).toLowerCase();
 							let handler = visit(attr.value, state);
-							let capture = false; // TODO
 
 							if (attr.metadata?.delegated) {
 								let delegated_assignment;
@@ -552,8 +546,9 @@ const visitors = {
 
 			state.template.push('<!>');
 
+			const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
 			const tracked = [];
-			let props = [];
+			const props = [];
 			let children_prop = null;
 
 			for (const attr of node.attributes) {
@@ -577,6 +572,15 @@ const visitors = {
 					} else {
 						props.push(b.prop('init', attr.name, visit(attr.value, state)));
 					}
+				} else if (attr.type === 'SpreadAttribute') {
+					props.push(
+						b.spread(
+							b.call(
+								'$.spread_object',
+								visit(attr.argument, { ...state, metadata: { ...state.metadata, spread: true } })
+							)
+						)
+					);
 				} else {
 					throw new Error('TODO');
 				}
@@ -600,7 +604,18 @@ const visitors = {
 				}
 			}
 
-			if (tracked.length > 0) {
+			if (is_spreading) {
+				state.init.push(
+					b.stmt(
+						b.call(
+							node.id,
+							id,
+							b.call('$.tracked_spread_object', b.thunk(b.object(props))),
+							b.id('$.active_block')
+						)
+					)
+				);
+			} else if (tracked.length > 0) {
 				state.init.push(
 					b.stmt(
 						b.call(

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

@@ -20,4 +20,5 @@ export var LOGIC_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK;
 
 export var UNINITIALIZED = Symbol();
 export var TRACKED_OBJECT = Symbol();
+export var SPREAD_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();

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

@@ -7,7 +7,6 @@ export {
 	set_value,
 	set_checked,
 	set_selected,
-	set_ref
 } from './render.js';
 
 export { render, render_spread, async } from './blocks.js';
@@ -25,6 +24,7 @@ export {
 	async_computed,
 	tracked,
 	tracked_object,
+	tracked_spread_object,
 	computed_property,
 	get_property,
 	set_property,

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

@@ -157,16 +157,6 @@ export function set_selected(element, selected) {
 	}
 }
 
-export function set_ref(dom, fn) {
-	effect(() => {
-		fn(dom);
-
-		return () => {
-			fn(null);
-		};
-	});
-}
-
 export function apply_element_spread(element, fn) {
 	return () => {
 		set_attributes(element, fn());

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

@@ -18,6 +18,7 @@ import {
 	EFFECT_BLOCK,
 	PAUSED,
 	ROOT_BLOCK,
+	SPREAD_OBJECT,
 	TRACKED,
 	TRACKED_OBJECT,
 	TRY_BLOCK,
@@ -217,9 +218,9 @@ export function tracked(v, b) {
 	};
 }
 
-export function computed(fn, b) {
+export function computed(fn, block) {
 	return {
-		b,
+		b: block,
 		blocks: null,
 		c: 0,
 		d: null,
@@ -644,7 +645,7 @@ export function flush_sync(fn) {
 	var previous_queued_root_blocks = queued_root_blocks;
 
 	try {
-		const root_blocks = [];
+		var root_blocks = [];
 
 		scheduler_mode = FLUSH_SYNC;
 		queued_root_blocks = root_blocks;
@@ -667,6 +668,17 @@ export function flush_sync(fn) {
 	}
 }
 
+export function tracked_spread_object(fn) {
+	var obj = fn();
+
+	define_property(obj, SPREAD_OBJECT, {
+		value: fn,
+		enumerable: false
+	});
+
+	return obj;
+}
+
 export function tracked_object(obj, properties, block) {
 	var tracked_properties = obj[TRACKED_OBJECT];
 
@@ -719,6 +731,10 @@ export function get_property(obj, property, chain = false) {
 
 	if (tracked_property !== undefined) {
 		value = obj[property] = get(tracked_property);
+	} else if (SPREAD_OBJECT in obj) {
+		var spread_fn = obj[SPREAD_OBJECT];
+		var properties = spread_fn();
+		return get_property(properties, property, chain);
 	}
 
 	return value;
@@ -851,11 +867,11 @@ export function spread_object(obj) {
 		return { ...obj };
 	}
 	var keys = original_object_keys(obj);
-	const values = {};
+	var values = {};
 
 	for (var i = 0; i < keys.length; i++) {
 		var key = keys[i];
-		values[key] = get_property_computed(obj, key);
+		values[key] = get_property(obj, key);
 	}
 
 	return values;

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

@@ -109,13 +109,13 @@ export function capture() {
 	var previous_tracking = tracking;
 	var previous_block = active_block;
 	var previous_reaction = active_reaction;
-    var previous_component = active_component;
+	var previous_component = active_component;
 
 	return () => {
 		set_tracking(previous_tracking);
 		set_active_block(previous_block);
 		set_active_reaction(previous_reaction);
-        set_active_component(previous_component);
+		set_active_component(previous_component);
 
 		queue_microtask(exit);
 	};

package/types/index.d.ts

@@ -1,4 +1,4 @@
-export type Component<T> = (props: T) => void;
+export type Component<T = Record<string, any>> = (props: T) => void;
 
 export declare function mount(
 	component: () => void,