ripple 0.2.193 → 0.2.194

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.193",
+  "version": "0.2.194",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -92,6 +92,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.193"
+    "ripple": "0.2.194"
   }
 }

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

@@ -126,11 +126,11 @@ const visitors = {
 	ServerBlock(node, context) {
 		node.metadata = {
 			...node.metadata,
-			exports: [],
+			exports: new Set(),
 		};
 		context.visit(node.body, {
 			...context.state,
-			inside_server_block: true,
+			ancestor_server_block: node,
 		});
 	},
 
@@ -141,7 +141,7 @@ const visitors = {
 		if (
 			is_reference(node, /** @type {AST.Node} */ (parent)) &&
 			binding &&
-			context.state.inside_server_block &&
+			context.state.ancestor_server_block &&
 			binding.node !== node // Don't check the declaration itself
 		) {
 			/** @type {ScopeInterface | null} */
@@ -607,20 +607,17 @@ const visitors = {
 	},
 
 	ExportNamedDeclaration(node, context) {
-		if (!context.state.inside_server_block) {
+		const server_block = context.state.ancestor_server_block;
+
+		if (!server_block) {
 			return context.next();
 		}
 
-		const server_block = /** @type {AST.ServerBlock} */ (
-			context.path.find((n) => n.type === 'ServerBlock')
-		);
 		const exports = server_block.metadata.exports;
 		const declaration = /** @type {AST.RippleExportNamedDeclaration} */ (node).declaration;
 
 		if (declaration && declaration.type === 'FunctionDeclaration') {
-			if (!exports.includes(declaration.id.name)) {
-				exports.push(declaration.id.name);
-			}
+			exports.add(declaration.id.name);
 		} else if (declaration && declaration.type === 'Component') {
 			error(
 				'Not implemented: Exported component declaration not supported in server blocks.',
@@ -631,14 +628,48 @@ const visitors = {
 			// TODO: the client and server rendering doesn't currently support components
 			// If we're going to support this, we need to account also for anonymous object declaration
 			// and specifiers
-			// if (!exports.includes(/** @type {AST.Identifier} */ (declaration.id).name)) {
-			// 	exports.push(/** @type {AST.Identifier} */ (declaration.id).name);
-			// }
+			// 	exports.add(/** @type {AST.Identifier} */ (declaration.id).name);
 		} else if (declaration && declaration.type === 'VariableDeclaration') {
-			// TODO: allow exporting consts when hydration is supported
 			for (const decl of declaration.declarations) {
+				if (decl.init !== undefined && decl.init !== null) {
+					if (decl.id.type === 'Identifier') {
+						if (
+							decl.init.type === 'FunctionExpression' ||
+							decl.init.type === 'ArrowFunctionExpression'
+						) {
+							exports.add(decl.id.name);
+							continue;
+						} else if (decl.init.type === 'Identifier') {
+							const name = decl.init.name;
+							const binding = context.state.scope.get(name);
+							if (binding && is_binding_function(binding, context.state.scope)) {
+								exports.add(decl.id.name);
+								continue;
+							}
+						} else if (decl.init.type === 'MemberExpression') {
+							error(
+								'Not implemented: Exported member expressions are not supported in server blocks.',
+								context.state.analysis.module.filename,
+								decl.init,
+								context.state.loose ? context.state.analysis.errors : undefined,
+							);
+							continue;
+						}
+					} else if (decl.id.type === 'ObjectPattern' || decl.id.type === 'ArrayPattern') {
+						const paths = extract_paths(decl.id);
+						for (const path of paths) {
+							error(
+								'Not implemented: Exported object or array patterns are not supported in server blocks.',
+								context.state.analysis.module.filename,
+								path.node,
+								context.state.loose ? context.state.analysis.errors : undefined,
+							);
+						}
+					}
+				}
+				// TODO: allow exporting consts when hydration is supported
 				error(
-					'Not implemented: Exported variable declaration not supported in server blocks.',
+					`Not implemented: Exported '${decl.id.type}' type is not supported in server blocks.`,
 					context.state.analysis.module.filename,
 					decl,
 					context.state.loose ? context.state.analysis.errors : undefined,
@@ -651,9 +682,7 @@ const visitors = {
 				const is_function = binding && is_binding_function(binding, context.state.scope);
 
 				if (is_function) {
-					if (!exports.includes(name)) {
-						exports.push(name);
-					}
+					exports.add(name);
 					continue;
 				}
 
@@ -1007,7 +1036,7 @@ const visitors = {
 			}
 
 			if (parent_block !== null && parent_block.type !== 'Component') {
-				if (context.state.inside_server_block === false) {
+				if (!context.state.ancestor_server_block) {
 					// we want the error to live on the `await` keyword vs the whole expression
 					const adjusted_node /** @type {AST.AwaitExpression} */ = {
 						...node,
@@ -1066,7 +1095,7 @@ export function analyze(ast, filename, options = {}) {
 			scopes,
 			analysis,
 			inside_head: false,
-			inside_server_block: false,
+			ancestor_server_block: undefined,
 			to_ts: options.to_ts ?? false,
 			loose: options.loose ?? false,
 			metadata: {},

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

@@ -402,15 +402,13 @@ const visitors = {
 	ServerIdentifier(node, context) {
 		const id = b.id(SERVER_IDENTIFIER);
 		id.metadata.source_name = '#server';
-		id.loc = node.loc;
-		return id;
+		return {...node, ...id};
 	},
 
 	StyleIdentifier(node, context) {
 		const id = b.id(STYLE_IDENTIFIER);
 		id.metadata.source_name = '#style';
-		id.loc = node.loc;
-		return id;
+		return {...node, ...id};
 	},
 
 	ImportDeclaration(node, context) {
@@ -420,7 +418,7 @@ const visitors = {
 			return b.empty;
 		}
 
-		if (state.to_ts && state.inside_server_block) {
+		if (state.to_ts && state.ancestor_server_block) {
 			/** @type {AST.VariableDeclaration[]} */
 			const locals = state.server_block_locals;
 			for (const spec of node.specifiers) {
@@ -2082,7 +2080,7 @@ const visitors = {
 			return b.empty;
 		}
 
-		if (context.state.to_ts && context.state.inside_server_block) {
+		if (context.state.to_ts && context.state.ancestor_server_block) {
 			// All validation errors will be handled in the analysis phase
 			// So we can safely print these
 			if (node.declaration) {
@@ -2230,7 +2228,7 @@ const visitors = {
 			const block = /** @type {AST.BlockStatement} */ (
 				context.visit(node.body, {
 					...context.state,
-					inside_server_block: true,
+					ancestor_server_block: node,
 					server_block_locals,
 				})
 			);
@@ -2258,35 +2256,31 @@ const visitors = {
 			return server_const;
 		}
 
-		const exports = node.metadata.exports;
-
 		if (!context.state.serverIdentifierPresent) {
 			// no point printing the client-side block if #server.func is not used
 			return b.empty;
 		}
 
 		const file_path = context.state.filename;
-
-		return b.var(
-			SERVER_IDENTIFIER,
-			b.object(
-				/** @type {AST.ServerBlock['metadata']['exports']} */ (exports).map((name) => {
-					const func_path = file_path + '#' + name;
-					// needs to be a sha256 hash of func_path, to avoid leaking file structure
-					const hash = createHash('sha256').update(func_path).digest('hex').slice(0, 8);
-
-					return b.prop(
-						'init',
-						b.id(name),
-						b.function(
-							null,
-							[b.rest(b.id('args'))],
-							b.block([b.return(b.call('_$_.rpc', b.literal(hash), b.id('args')))]),
-						),
-					);
-				}),
-			),
-		);
+		/** @type {AST.Property[]} */
+		const props = [];
+		for (const name of node.metadata.exports) {
+			const func_path = file_path + '#' + name;
+			// needs to be a sha256 hash of func_path, to avoid leaking file structure
+			const hash = createHash('sha256').update(func_path).digest('hex').slice(0, 8);
+			props.push(
+				b.prop(
+					'init',
+					b.id(name),
+					b.function(
+						null,
+						[b.rest(b.id('args'))],
+						b.block([b.return(b.call('_$_.rpc', b.literal(hash), b.id('args')))]),
+					),
+				),
+			);
+		}
+		return b.var(SERVER_IDENTIFIER, b.object(props));
 	},
 
 	Program(node, context) {
@@ -3699,7 +3693,7 @@ export function transform_client(filename, source, analysis, to_ts, minify_css)
 		flush_node: null,
 		scope: analysis.scope,
 		scopes: analysis.scopes,
-		inside_server_block: false,
+		ancestor_server_block: undefined,
 		serverIdentifierPresent: analysis.metadata.serverIdentifierPresent,
 		server_block_locals: [],
 		stylesheets: [],

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

@@ -348,10 +348,12 @@ const visitors = {
 		if (!context.state.to_ts && node.exportKind === 'type') {
 			return b.empty;
 		}
-		if (!context.state.inside_server_block) {
+		if (!context.state.ancestor_server_block) {
 			return context.next();
 		}
 		const declaration = node.declaration;
+		/** @type {AST.Statement[]} */
+		const statements = [];
 
 		if (declaration && declaration.type === 'FunctionDeclaration') {
 			const name = declaration.id.name;
@@ -367,9 +369,59 @@ const visitors = {
 					(context.visit(declaration)),
 				),
 			);
+		} else if (declaration && declaration.type === 'VariableDeclaration') {
+			for (const decl of declaration.declarations) {
+				if (decl.init !== undefined && decl.init !== null) {
+					if (decl.id.type === 'Identifier') {
+						const name = decl.id.name;
+						if (
+							decl.init.type === 'FunctionExpression' ||
+							decl.init.type === 'ArrowFunctionExpression'
+						) {
+							if (context.state.server_exported_names.includes(name)) {
+								continue;
+							}
+							context.state.server_exported_names.push(name);
+							statements.push(
+								b.stmt(
+									b.assignment(
+										'=',
+										b.member(b.id('_$_server_$_'), b.id(name)),
+										/** @type {AST.Expression} */
+										(context.visit(decl.init)),
+									),
+								),
+							);
+						} else if (decl.init.type === 'Identifier') {
+							if (context.state.server_exported_names.includes(name)) {
+								continue;
+							}
+							context.state.server_exported_names.push(name);
+
+							statements.push(
+								b.stmt(
+									b.assignment(
+										'=',
+										b.member(b.id('_$_server_$_'), b.id(name)),
+										b.id(decl.init.name),
+									),
+								),
+							);
+						} else {
+							// TODO allow exporting variables that are not functions
+							throw new Error('Not implemented');
+						}
+					} else {
+						// TODO allow exporting variables that are not functions
+						throw new Error('Not implemented');
+					}
+				} else {
+					// TODO allow exporting uninitialized variables
+					throw new Error('Not implemented');
+				}
+				// TODO: allow exporting consts when hydration is supported
+			}
 		} else if (node.specifiers) {
-			/** @type {AST.Statement[]} */
-			const statements = [];
 			for (const specifier of node.specifiers) {
 				const name = /** @type {AST.Identifier} */ (specifier.local).name;
 				if (context.state.server_exported_names.includes(name)) {
@@ -387,12 +439,12 @@ const visitors = {
 					b.stmt(b.assignment('=', b.member(b.id('_$_server_$_'), b.id(name)), specifier.local)),
 				);
 			}
-
-			return statements.length ? b.block(statements) : b.empty;
 		} else {
 			// TODO
 			throw new Error('Not implemented');
 		}
+
+		return statements.length ? b.block(statements) : b.empty;
 	},
 
 	VariableDeclaration(node, context) {
@@ -882,7 +934,7 @@ const visitors = {
 			return b.empty;
 		}
 
-		if (state.inside_server_block) {
+		if (state.ancestor_server_block) {
 			if (!node.specifiers.length) {
 				return b.empty;
 			}
@@ -1096,13 +1148,13 @@ const visitors = {
 		const block = /** @type {AST.BlockStatement} */ (
 			context.visit(node.body, {
 				...context.state,
-				inside_server_block: true,
+				ancestor_server_block: node,
 				server_block_locals,
 				server_exported_names: [],
 			})
 		);
 
-		if (exports.length === 0) {
+		if (exports.size === 0) {
 			return {
 				...block,
 				body: [...server_block_locals, ...block.body],
@@ -1159,7 +1211,7 @@ export function transform_server(filename, source, analysis, minify_css) {
 		serverIdentifierPresent: analysis.metadata.serverIdentifierPresent,
 		stylesheets: [],
 		component_metadata,
-		inside_server_block: false,
+		ancestor_server_block: undefined,
 		server_block_locals: [],
 		server_exported_names: [],
 		filename,

package/src/compiler/types/index.d.ts

@@ -278,7 +278,7 @@ declare module 'estree' {
 		type: 'ServerBlock';
 		body: ServerBlockStatement;
 		metadata: BaseNodeMetaData & {
-			exports: string[];
+			exports: Set<string>;
 		};
 	}
 
@@ -1123,7 +1123,7 @@ export interface BaseState {
 	scope: ScopeInterface;
 	scopes: Map<AST.Node | AST.Node[], ScopeInterface>;
 	serverIdentifierPresent: boolean;
-	inside_server_block: boolean;
+	ancestor_server_block: AST.ServerBlock | undefined;
 	inside_head?: boolean;
 
 	/** Common For All */

package/src/compiler/utils.js

@@ -766,9 +766,9 @@ export function is_binding_function(binding, scope, visited = new Set()) {
 
 	// Follow identifier references (e.g., const alias = myFunc)
 	if (initial.type === 'Identifier') {
-		const nextBinding = scope.get(initial.name);
-		if (nextBinding) {
-			return is_binding_function(nextBinding, scope, visited);
+		const next_binding = scope.get(initial.name);
+		if (next_binding) {
+			return is_binding_function(next_binding, scope, visited);
 		}
 	}
 

package/tests/server/__snapshots__/compiler.test.ripple.snap

@@ -1,7 +1,58 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler success tests > compiles TSInstantiationExpression 1`] = `
-"import * as _$_ from 'ripple/internal/client';
+exports[`compiler server block tests > compiles server block with with only supported types 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+export const _$_server_$_ = (() => {
+	var _$_server_$_ = {};
+
+	function something() {
+		return 'unexported function';
+	}
+
+	_$_server_$_.fetchUser = async function fetchUser(id) {
+		const response = await fetch(\`/api/user/\${id}\`);
+		const data = await response.json();
+
+		return data;
+	};
+
+	const fetchUserAlias = fetchUser;
+	const AliasForFetchUserAlias = fetchUserAlias;
+
+	{
+		_$_server_$_.AnotherAlias = AliasForFetchUserAlias;
+	}
+
+	{
+		_$_server_$_.func = function test() {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.func2 = function () {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.func3 = () => {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.fetchUserAlias = fetchUserAlias;
+		_$_server_$_.AliasForFetchUserAlias = AliasForFetchUserAlias;
+	}
+
+	return _$_server_$_;
+})();"
+`;
+
+exports[`compiler typescript tests > compiles TSInstantiationExpression 1`] = `
+"import * as _$_ from 'ripple/internal/server';
 
 function makeBox(value) {
 	return { value };
@@ -13,7 +64,7 @@ const ErrorMap = (Map);
 const errorMap = new ErrorMap();"
 `;
 
-exports[`compiler success tests > compiles imported component with conditional async in SSR 1`] = `
+exports[`compiler typescript tests > compiles imported component with conditional async in SSR 1`] = `
 "import * as _$_ from 'ripple/internal/server';
 
 import { ChildComponent } from './Child.ripple';
@@ -36,8 +87,8 @@ export async function App(__output) {
 }"
 `;
 
-exports[`compiler success tests > removes type assertions from function parameters and leaves default values 1`] = `
-"import * as _$_ from 'ripple/internal/client';
+exports[`compiler typescript tests > removes type assertions from function parameters and leaves default values 1`] = `
+"import * as _$_ from 'ripple/internal/server';
 
 function getString(e = 'test') {
 	return e;

package/tests/server/compiler.test.ripple

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { compile } from 'ripple/compiler';
 
-describe('compiler success tests', () => {
+describe('compiler typescript tests', () => {
 	it('compiles TSInstantiationExpression', () => {
 		const source = `function makeBox<T,>(value: T) {
 	return { value };
@@ -11,7 +11,7 @@ const stringBox = makeStringBox('abc');
 const ErrorMap = Map<string, Error>;
 const errorMap = new ErrorMap();`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.ripple', { mode: 'server' });
 
 		expect(result.js.code).toMatchSnapshot();
 	});
@@ -39,8 +39,92 @@ function getString(e: string = 'test') {
 	return e;
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.ripple', { mode: 'server' });
 
 		expect(result.js.code).toMatchSnapshot();
 	});
 });
+
+describe('compiler server block tests', () => {
+	it('compiles server block with with only supported types', () => {
+		const source = `
+#server {
+	function something() {
+		return 'unexported function';
+	}
+
+	export async function fetchUser(id) {
+		const response = await fetch(\`/api/user/\${id}\`);
+		const data = await response.json();
+		return data;
+	}
+
+	const fetchUserAlias = fetchUser;
+
+	const AliasForFetchUserAlias = fetchUserAlias;
+
+	export const AnotherAlias = AliasForFetchUserAlias;
+
+	export const func = function test() {
+		return 'test';
+	};
+
+	export const func2 = function () {
+		return 'test';
+	};
+
+	export const func3 = () => {
+		return 'test';
+	};
+
+	export { fetchUserAlias, AliasForFetchUserAlias };
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'server' });
+		expect(result.js.code).toMatchSnapshot();
+	});
+
+	it('throws error for unsupported exported object pattern in server block', () => {
+		const source = `
+#server {
+		const obj = { fn1: () => {}, fn2: () => {} };
+
+		export const { fn1, fn2 } = obj;
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+	});
+
+	it('throws error for unsupported exported array pattern in server block', () => {
+		const source = `
+#server {
+		const arr = [() => {}, () => {}];
+
+		export const [fnarr1, fnarr2] = arr;
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+	});
+
+	it('throws error for unsupported exported member expression via object in server block', () => {
+		const source = `
+#server {
+		const obj = { fn1: () => {}, fn2: () => {} };
+
+		export const objProp = obj.fn1;
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+	});
+
+	it('throws error for unsupported exported member expression via array in server block', () => {
+		const source = `
+#server {
+		const arr = [() => {}, () => {}];
+
+		export const arrIndex0 = arr[0];
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+	});
+});