ripple 0.2.24 → 0.2.26

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

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

@@ -34,7 +34,7 @@ function visit_function(node, context) {
 					if (binding !== null && is_tracked_name(name)) {
 						const id = context.state.scope.generate('arg');
 						node.params[i] = b.id(id);
-						binding.kind = 'prop';
+						binding.kind = path.has_default_value ? 'prop_fallback' : 'prop';
 
 						binding.transform = {
 							read: (_) => b.call('$.get_property', b.id(id), b.literal(name)),
@@ -315,30 +315,57 @@ const visitors = {
 					const binding = context.state.scope.get(name);
 
 					if (binding !== null && is_tracked_name(name)) {
-						binding.kind = 'prop';
+						binding.kind = path.has_default_value ? 'prop_fallback' : 'prop';
 
-						binding.transform = {
-							read: (_) => b.call('$.get_property', b.id('__props'), b.literal(name)),
-							assign: (node, value) => {
-								return b.call(
-									'$.set_property',
-									b.id('__props'),
-									b.literal(name),
-									value,
-									b.id('__block'),
-								);
-							},
-							update: (_) =>
-								b.call(
-									node.prefix ? '$.update_property_pre' : '$.update_property',
-									b.id('__props'),
-									b.literal(name),
-									b.id('__block'),
-									node.operator === '--' && b.literal(-1),
-								),
-						};
+						if (path.has_default_value) {
+							binding.transform = {
+								read: (_) => b.call('$.get_computed', path.node),
+								assign: (node, value) => {
+									return b.call(
+										'$.set',
+										path.node,
+										value,
+										b.id('__block'),
+									);
+								},
+								update: (_) =>
+									b.call(
+										node.prefix ? '$.update_pre' : '$.update',
+										path.node,
+										b.id('__block'),
+										node.operator === '--' && b.literal(-1),
+									),
+							};
+						} else {
+							binding.transform = {
+								read: (_) => b.call('$.get_property', b.id('__props'), b.literal(name)),
+								assign: (node, value) => {
+									return b.call(
+										'$.set_property',
+										b.id('__props'),
+										b.literal(name),
+										value,
+										b.id('__block'),
+									);
+								},
+								update: (_) =>
+									b.call(
+										node.prefix ? '$.update_property_pre' : '$.update_property',
+										b.id('__props'),
+										b.literal(name),
+										b.id('__block'),
+										node.operator === '--' && b.literal(-1),
+									),
+							};
+						}
 					}
 				}
+			} else if (props.type === 'AssignmentPattern') {
+				error(
+					'Props are always an object, use destructured props with default values instead',
+					context.state.analysis.module.filename,
+					props,
+				);
 			}
 		}
 		const elements = [];

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

@@ -724,13 +724,16 @@ const visitors = {
 			return b.function(node.id, node.params, b.block(body_statements));
 		}
 
+		let props = b.id('__props');
+
 		if (node.params.length > 0) {
-			let props = node.params[0];
+			let props_param = node.params[0];
 
-			if (props.type === 'Identifier') {
-				delete props.typeAnnotation;
-			} else if (props.type === 'ObjectPattern') {
-				const paths = extract_paths(props);
+			if (props_param.type === 'Identifier') {
+				delete props_param.typeAnnotation;
+				props = props_param;
+			} else if (props_param.type === 'ObjectPattern') {
+				const paths = extract_paths(props_param);
 
 				for (const path of paths) {
 					const name = path.node.name;
@@ -742,6 +745,15 @@ const visitors = {
 							prop_statements = [];
 						}
 						prop_statements.push(b.var(name, b.member(b.id('__props'), key)));
+					} else if (binding !== null && path.has_default_value) {
+						if (prop_statements === undefined) {
+							prop_statements = [];
+						}
+						const fallback = path.expression(b.id('__props'));
+
+						prop_statements.push(
+							b.var(name, b.call('$.computed', b.thunk(context.visit(fallback)), b.id('__block'))),
+						);
 					}
 				}
 			}
@@ -763,11 +775,7 @@ const visitors = {
 		return b.function(
 			node.id,
 			node.params.length > 0
-				? [
-						b.id('__anchor'),
-						node.params[0].type === 'Identifier' ? node.params[0] : b.id('__props'),
-						b.id('__block'),
-					]
+				? [b.id('__anchor'), props, b.id('__block')]
 				: [b.id('__anchor'), b.id('_'), b.id('__block')],
 			b.block([
 				...(prop_statements ?? []),

package/src/compiler/utils.js

@@ -291,6 +291,8 @@ function get_hoisted_params(node, context) {
 		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
 			if (binding.kind === 'prop') {
 				push_unique(b.id('__props'));
+			} else if (binding.kind === 'prop_fallback') {
+				push_unique(b.id(binding.node.name));
 			} else if (
 				// imports don't need to be hoisted
 				binding.declaration_kind !== 'import'

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

@@ -41,6 +41,7 @@ export {
 	pop_component,
 	untrack,
 	use_prop,
+	fallback,
 } from './runtime.js';
 
 export { for_block as for } from './for.js';

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

@@ -1053,3 +1053,7 @@ export function pop_component() {
 export function use_prop() {
 	return Symbol(USE_PROP);
 }
+
+export function fallback(value, fallback) {
+	return value === undefined ? fallback : value;
+}

package/src/utils/ast.js

@@ -201,6 +201,10 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 	return assignments;
 }
 
+export function build_fallback(expression, fallback) {
+	return b.call('$.fallback', expression, fallback);
+}
+
 /**
  * @param {ESTree.AssignmentOperator} operator
  * @param {ESTree.Identifier | ESTree.MemberExpression} left

package/tests/composite.test.ripple

@@ -241,5 +241,59 @@ describe('composite components', () => {
 		render(App);
 
 		expect(container).toMatchSnapshot();
-	})
+	});
+
+	it('correctly handles default prop values', () => {
+		component Child({ $foo = 456 }) {
+			<div>{$foo}</div>
+		}
+
+		component App(props) {
+			let $foo = 123;
+
+			<Child />
+			<Child {$foo} />
+		}
+
+		render(App);
+
+		expect(container.querySelectorAll('div')[0].textContent).toBe('456');
+		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
+	});
+
+	it('correctly handles no props', () => {
+		component Child(props) {
+			<div>{props.$foo}</div>
+		}
+
+		component App(props) {
+			let $foo = 123;
+
+			<Child />
+			<Child {$foo} />
+		}
+
+		render(App);
+
+		expect(container.querySelectorAll('div')[0].textContent).toBe('');
+		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
+	});
+
+	it('correctly handles no props #2', () => {
+		component Child({ $foo }) {
+			<div>{$foo}</div>
+		}
+
+		component App(props) {
+			let $foo = 123;
+
+			<Child />
+			<Child {$foo} />
+		}
+
+		render(App);
+
+		expect(container.querySelectorAll('div')[0].textContent).toBe('');
+		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
+	});
 });