Refactor signal logic into its own module

Author: matthewp

packages/integrations/preact/package.json

@@ -35,8 +35,8 @@
     "@babel/core": ">=7.0.0-0 <8.0.0",
     "@babel/plugin-transform-react-jsx": "^7.17.12",
     "babel-plugin-module-resolver": "^4.1.0",
-    "preact-render-to-string": "^5.2.0",
-    "@preact/signals": "1.0.3"
+    "preact-render-to-string": "^5.2.4",
+    "@preact/signals": "^1.1.0"
   },
   "devDependencies": {
     "astro": "workspace:*",

packages/integrations/preact/src/context.ts

@@ -1,9 +1,10 @@
-import type { RendererContext, SignalLike } from './types';
+import type { RendererContext, SignalLike, PropNameToSignalMap } from './types';
 
-type Context = {
+export type Context = {
 	id: string;
 	c: number;
 	signals: Map<SignalLike, string>;
+	propsToSignals: Map<Record<string, any>, PropNameToSignalMap>;
 };
 
 const contexts = new WeakMap<RendererContext['result'], Context>();
@@ -17,7 +18,8 @@ export function getContext(result: RendererContext['result']): Context {
 		get id() {
 			return 'p' + this.c.toString();
 		},
-		signals: new Map()
+		signals: new Map(),
+		propsToSignals: new Map()
 	};
 	contexts.set(result, ctx);
 	return ctx;

packages/integrations/preact/src/server.ts

@@ -1,8 +1,9 @@
-import type { RendererContext, SignalLike } from './types';
+import type { AstroPreactAttrs, RendererContext } from './types';
 import { h, Component as BaseComponent } from 'preact';
 import render from 'preact-render-to-string';
 import StaticHtml from './static-html.js';
-import { getContext, incrementId } from './context.js';
+import { getContext } from './context.js';
+import { restoreSignalsOnProps, serializeSignals } from './signals.js';
 
 const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
 
@@ -37,10 +38,6 @@ function check(this: RendererContext, Component: any, props: Record<string, any>
 	}
 }
 
-function isSignal(x: any): x is SignalLike {
-	return x != null && typeof x === 'object' && typeof x.peek === 'function' && 'value' in x;
-}
-
 function renderToStaticMarkup(this: RendererContext, Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>) {
 	const ctx = getContext(this.result);
 
@@ -49,30 +46,14 @@ function renderToStaticMarkup(this: RendererContext, Component: any, props: Reco
 		const name = slotName(key);
 		slots[name] = h(StaticHtml, { value, name });
 	}
-	// Note: create newProps to avoid mutating `props` before they are serialized
+
+	// Restore signals back onto props so that they will be passed as-is to components
+	restoreSignalsOnProps(ctx, props);
+
 	const newProps = { ...props, ...slots };
 
-	// Check for signals
-	const signals: Record<string, string> = {};
-	for(const [key, value] of Object.entries(props)) {
-		if(isSignal(value)) {
-			// Set the value to the current signal value
-			newProps[key] = value.peek();
-
-			let id: string;
-			if(ctx.signals.has(value)) {
-				id = ctx.signals.get(value)!;
-			} else {
-				id = incrementId(ctx);
-				ctx.signals.set(value, id);
-			}
-			signals[key] = id;
-		}
-	}
-	const attrs: { ['data-preact-signals']?: string } = {};
-	if(Object.keys(signals).length) {
-		attrs['data-preact-signals'] = JSON.stringify(signals);
-	}
+	const attrs: AstroPreactAttrs = {};
+	serializeSignals(ctx, props, attrs);
 
 	const html = render(
 		h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
@@ -83,6 +64,7 @@ function renderToStaticMarkup(this: RendererContext, Component: any, props: Reco
 	};
 }
 
+
 /**
  * Reduces console noise by filtering known non-problematic errors.
  *

packages/integrations/preact/src/signals.ts

@@ -0,0 +1,46 @@
+import type { AstroPreactAttrs, PropNameToSignalMap, SignalLike } from './types';
+import type { Context } from './context';
+import { incrementId } from './context.js';
+
+function isSignal(x: any): x is SignalLike {
+	return x != null && typeof x === 'object' && typeof x.peek === 'function' && 'value' in x;
+}
+
+export function restoreSignalsOnProps(ctx: Context, props: Record<string, any>) {
+	// Restore signal props that were mutated for serialization
+	let propMap: PropNameToSignalMap;
+	if(ctx.propsToSignals.has(props)) {
+		propMap = ctx.propsToSignals.get(props)!
+	} else {
+		propMap = new Map();
+		ctx.propsToSignals.set(props, propMap);
+	}
+	for(const [key, signal] of propMap) {
+		props[key] = signal;
+	}
+}
+
+export function serializeSignals(ctx: Context, props: Record<string, any>, attrs: AstroPreactAttrs){ 
+		// Check for signals
+		const signals: Record<string, string> = {};
+		for(const [key, value] of Object.entries(props)) {
+			if(isSignal(value)) {
+				// Set the value to the current signal value
+				// This mutates the props on purpose, so that it will be serialized correct.
+				props[key] = value.peek();
+	
+				let id: string;
+				if(ctx.signals.has(value)) {
+					id = ctx.signals.get(value)!;
+				} else {
+					id = incrementId(ctx);
+					ctx.signals.set(value, id);
+				}
+				signals[key] = id;
+			}
+		}
+
+		if(Object.keys(signals).length) {
+			attrs['data-preact-signals'] = JSON.stringify(signals);
+		}
+}

packages/integrations/preact/src/types.ts

@@ -5,4 +5,10 @@ export type RendererContext = {
 
 export type SignalLike = {
 	peek(): any;
-}
+};
+
+export type PropNameToSignalMap = Map<string, SignalLike>;
+
+export type AstroPreactAttrs = {
+	['data-preact-signals']?: string
+};