Support shared signals in Preact islands (#4763)

* Support signals in Preact islands * Add a changeset * Only add signals if we need them * Refactor signal logic into its own module * Keep track of the signals used
author: Matthew Phillips <matthew@skypack.dev> 2022-09-21 15:21:21 -0400
committer: GitHub <noreply@github.com> 2022-09-21 15:21:21 -0400
commit: 5e46be54683592773e6dfc2d33825493886114b0 (patch)
tree: 6a9ed635e986ae12037f13c47afe47c260f3bdf2 /packages
parent: baae1b3fd10cf0a74e880c0e0552ba8d58f24453 (diff)
download: astro-5e46be54683592773e6dfc2d33825493886114b0.tar.gz
astro-5e46be54683592773e6dfc2d33825493886114b0.tar.zst
astro-5e46be54683592773e6dfc2d33825493886114b0.zip
16 files changed, 200 insertions, 30 deletions
diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts
index 436e19f3c..359e3768e 100644
--- a/packages/astro/src/runtime/server/hydration.ts
+++ b/packages/astro/src/runtime/server/hydration.ts
@@ -135,7 +135,7 @@ export async function generateHydrateScript(
 	// Attach renderer-provided attributes
 	if (attrs) {
 		for (const [key, value] of Object.entries(attrs)) {
-			island.props[key] = value;
+			island.props[key] = escapeHTML(value);
 		}
 	}
 
diff --git a/packages/astro/test/fixtures/preact-component/package.json b/packages/astro/test/fixtures/preact-component/package.json
index a95de2de8..8e900c473 100644
--- a/packages/astro/test/fixtures/preact-component/package.json
+++ b/packages/astro/test/fixtures/preact-component/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@astrojs/preact": "workspace:*",
-    "astro": "workspace:*"
+    "astro": "workspace:*",
+    "@preact/signals": "1.0.3",
+    "preact": "^10.7.3"
   }
 }
diff --git a/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx b/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx
new file mode 100644
index 000000000..d0a03c1f3
--- /dev/null
+++ b/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx
@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default ({ count }) => {
+  return <div class="preact-signal">{ count }</div>
+}
diff --git a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro
new file mode 100644
index 000000000..bfe4a1020
--- /dev/null
+++ b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro
@@ -0,0 +1,14 @@
+---
+import Signals from '../components/Signals';
+import { signal } from '@preact/signals';
+const count = signal(1);
+---
+<html>
+	<head>
+		<title>Testing</title>
+	</head>
+	<body>
+		<Signals client:load count={count} />
+		<Signals client:load count={count} />
+	</body>
+</html>
diff --git a/packages/astro/test/fixtures/ssr-response/src/pages/some-header.astro b/packages/astro/test/fixtures/ssr-response/src/pages/some-header.astro
index ea62dfd54..4f6eb6b0c 100644
--- a/packages/astro/test/fixtures/ssr-response/src/pages/some-header.astro
+++ b/packages/astro/test/fixtures/ssr-response/src/pages/some-header.astro
@@ -1,6 +1,7 @@
 ---
 Astro.response.headers.set('One-Two', 'three');
 Astro.response.headers.set('Four-Five', 'six');
+Astro.response.headers.set("Cache-Control", `max-age=0, s-maxage=86400`);
 ---
 <html>
 	<head>
diff --git a/packages/astro/test/preact-component.test.js b/packages/astro/test/preact-component.test.js
index c2814ebca..68822d10e 100644
--- a/packages/astro/test/preact-component.test.js
+++ b/packages/astro/test/preact-component.test.js
@@ -3,6 +3,7 @@ import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('Preact component', () => {
+	/** @type {import('./test-utils').Fixture} */
 	let fixture;
 
 	before(async () => {
@@ -80,4 +81,23 @@ describe('Preact component', () => {
 		// test 1: preact/jsx-runtime is used for the component
 		expect(jsxRuntime).to.be.ok;
 	});
+
+	it('Can use shared signals between islands', async () => {
+		const html = await fixture.readFile('/signals/index.html');
+		const $ = cheerio.load(html);
+		expect($('.preact-signal')).to.have.a.lengthOf(2);
+
+		const sigs1Raw = $($('astro-island')[0]).attr('data-preact-signals');
+		const sigs2Raw = $($('astro-island')[1]).attr('data-preact-signals');
+
+		expect(sigs1Raw).to.not.be.undefined;
+		expect(sigs2Raw).to.not.be.undefined;
+
+
+		const sigs1 = JSON.parse(sigs1Raw);
+		const sigs2 = JSON.parse(sigs2Raw);
+
+		expect(sigs1.count).to.not.be.undefined;
+		expect(sigs1.count).to.equal(sigs2.count);
+	});
 });
diff --git a/packages/astro/test/ssr-response.test.js b/packages/astro/test/ssr-response.test.js
index 2044c513c..d0dbdbff3 100644
--- a/packages/astro/test/ssr-response.test.js
+++ b/packages/astro/test/ssr-response.test.js
@@ -36,5 +36,6 @@ describe('Using Astro.response in SSR', () => {
 		const headers = response.headers;
 		expect(headers.get('one-two')).to.equal('three');
 		expect(headers.get('four-five')).to.equal('six');
+		expect(headers.get('Cache-Control')).to.equal(`max-age=0, s-maxage=86400`)
 	});
 });
diff --git a/packages/integrations/preact/client.js b/packages/integrations/preact/client.js
deleted file mode 100644
index 78d8720f0..000000000
--- a/packages/integrations/preact/client.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { h, render } from 'preact';
-import StaticHtml from './static-html.js';
-
-export default (element) =>
-	(Component, props, { default: children, ...slotted }) => {
-		if (!element.hasAttribute('ssr')) return;
-		for (const [key, value] of Object.entries(slotted)) {
-			props[key] = h(StaticHtml, { value, name: key });
-		}
-		render(
-			h(Component, props, children != null ? h(StaticHtml, { value: children }) : children),
-			element
-		);
-	};
diff --git a/packages/integrations/preact/package.json b/packages/integrations/preact/package.json
index 2aa24cac9..346fa74fe 100644
--- a/packages/integrations/preact/package.json
+++ b/packages/integrations/preact/package.json
@@ -21,9 +21,9 @@
   "homepage": "https://docs.astro.build/en/guides/integrations-guide/preact/",
   "exports": {
     ".": "./dist/index.js",
-    "./client.js": "./client.js",
-    "./client-dev.js": "./client-dev.js",
-    "./server.js": "./server.js",
+    "./client.js": "./dist/client.js",
+    "./client-dev.js": "./dist/client-dev.js",
+    "./server.js": "./dist/server.js",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -35,7 +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-render-to-string": "^5.2.4",
+    "@preact/signals": "^1.1.0"
   },
   "devDependencies": {
     "astro": "workspace:*",
diff --git a/packages/integrations/preact/client-dev.js b/packages/integrations/preact/src/client-dev.ts
index d37e6e0af..9a9edcb3b 100644
--- a/packages/integrations/preact/client-dev.js
+++ b/packages/integrations/preact/src/client-dev.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import 'preact/debug';
 import clientFn from './client.js';
 
diff --git a/packages/integrations/preact/src/client.ts b/packages/integrations/preact/src/client.ts
new file mode 100644
index 000000000..c7a31d60c
--- /dev/null
+++ b/packages/integrations/preact/src/client.ts
@@ -0,0 +1,29 @@
+import type { SignalLike } from './types';
+import { h, render } from 'preact';
+import StaticHtml from './static-html.js';
+
+const sharedSignalMap: Map<string, SignalLike> = new Map();
+
+export default (element: HTMLElement) =>
+	async (Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>) => {
+		if (!element.hasAttribute('ssr')) return;
+		for (const [key, value] of Object.entries(slotted)) {
+			props[key] = h(StaticHtml, { value, name: key });
+		}
+		let signalsRaw = element.dataset.preactSignals;
+		if(signalsRaw) {
+			const { signal } = await import('@preact/signals');
+			let signals: Record<string, string> = JSON.parse(element.dataset.preactSignals as string);
+			for(const [propName, signalId] of Object.entries(signals)) {
+				if(!sharedSignalMap.has(signalId)) {
+					const signalValue = signal(props[propName]);
+					sharedSignalMap.set(signalId, signalValue);
+				}
+				props[propName] = sharedSignalMap.get(signalId);
+			}
+		}
+		render(
+			h(Component, props, children != null ? h(StaticHtml, { value: children }) : children),
+			element
+		);
+	};
diff --git a/packages/integrations/preact/src/context.ts b/packages/integrations/preact/src/context.ts
new file mode 100644
index 000000000..73c4402b0
--- /dev/null
+++ b/packages/integrations/preact/src/context.ts
@@ -0,0 +1,32 @@
+import type { RendererContext, SignalLike, PropNameToSignalMap } from './types';
+
+export type Context = {
+	id: string;
+	c: number;
+	signals: Map<SignalLike, string>;
+	propsToSignals: Map<Record<string, any>, PropNameToSignalMap>;
+};
+
+const contexts = new WeakMap<RendererContext['result'], Context>();
+
+export function getContext(result: RendererContext['result']): Context {
+	if (contexts.has(result)) {
+		return contexts.get(result)!;
+	}
+	let ctx = {
+		c: 0,
+		get id() {
+			return 'p' + this.c.toString();
+		},
+		signals: new Map(),
+		propsToSignals: new Map()
+	};
+	contexts.set(result, ctx);
+	return ctx;
+}
+
+export function incrementId(ctx: Context): string {
+	let id = ctx.id;
+	ctx.c++;
+	return id;
+}
diff --git a/packages/integrations/preact/server.js b/packages/integrations/preact/src/server.ts
index f5b1a34e5..2c1ac738a 100644
--- a/packages/integrations/preact/server.js
+++ b/packages/integrations/preact/src/server.ts
@@ -1,13 +1,16 @@
+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 } from './context.js';
+import { restoreSignalsOnProps, serializeSignals } from './signals.js';
 
-const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
 
-let originalConsoleError;
+let originalConsoleError: typeof console.error;
 let consoleFilterRefs = 0;
 
-function check(Component, props, children) {
+function check(this: RendererContext, Component: any, props: Record<string, any>, children: any) {
 	if (typeof Component !== 'function') return false;
 
 	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
@@ -18,7 +21,7 @@ function check(Component, props, children) {
 
 	try {
 		try {
-			const { html } = renderToStaticMarkup(Component, props, children);
+			const { html } = renderToStaticMarkup.call(this, Component, props, children);
 			if (typeof html !== 'string') {
 				return false;
 			}
@@ -35,20 +38,33 @@ function check(Component, props, children) {
 	}
 }
 
-function renderToStaticMarkup(Component, props, { default: children, ...slotted }) {
-	const slots = {};
+function renderToStaticMarkup(this: RendererContext, Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>) {
+	const ctx = getContext(this.result);
+
+	const slots: Record<string, ReturnType<typeof h>> = {};
 	for (const [key, value] of Object.entries(slotted)) {
 		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
+	let propsMap = restoreSignalsOnProps(ctx, props);
+
 	const newProps = { ...props, ...slots };
+
+	const attrs: AstroPreactAttrs = {};
+	serializeSignals(ctx, props, attrs, propsMap);
+
 	const html = render(
 		h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
 	);
-	return { html };
+	return {
+		attrs,
+		html
+	};
 }
 
+
 /**
  * Reduces console noise by filtering known non-problematic errors.
  *
@@ -91,7 +107,7 @@ function finishUsingConsoleFilter() {
  * Ignores known non-problematic errors while any code is using the console filter.
  * Otherwise, simply forwards all arguments to the original function.
  */
-function filteredConsoleError(msg, ...rest) {
+function filteredConsoleError(msg: string, ...rest: any[]) {
 	if (consoleFilterRefs > 0 && typeof msg === 'string') {
 		// In `check`, we attempt to render JSX components through Preact.
 		// When attempting this on a React component, React may output
diff --git a/packages/integrations/preact/src/signals.ts b/packages/integrations/preact/src/signals.ts
new file mode 100644
index 000000000..db62961aa
--- /dev/null
+++ b/packages/integrations/preact/src/signals.ts
@@ -0,0 +1,48 @@
+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;
+	}
+	return propMap;
+}
+
+export function serializeSignals(ctx: Context, props: Record<string, any>, attrs: AstroPreactAttrs, map: PropNameToSignalMap){ 
+		// 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();
+				map.set(key, value);
+	
+				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);
+		}
+}
diff --git a/packages/integrations/preact/static-html.js b/packages/integrations/preact/src/static-html.ts
index 7e964ef06..e474caa5a 100644
--- a/packages/integrations/preact/static-html.js
+++ b/packages/integrations/preact/src/static-html.ts
@@ -7,7 +7,7 @@ import { h } from 'preact';
  * As a bonus, we can signal to Preact that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value, name }) => {
+const StaticHtml = ({ value, name }: { value: string; name?: string; }) => {
 	if (!value) return null;
 	return h('astro-slot', { name, dangerouslySetInnerHTML: { __html: value } });
 };
diff --git a/packages/integrations/preact/src/types.ts b/packages/integrations/preact/src/types.ts
new file mode 100644
index 000000000..e5058f5f3
--- /dev/null
+++ b/packages/integrations/preact/src/types.ts
@@ -0,0 +1,14 @@
+import type { SSRResult } from 'astro';
+export type RendererContext = {
+	result: SSRResult;
+};
+
+export type SignalLike = {
+	peek(): any;
+};
+
+export type PropNameToSignalMap = Map<string, SignalLike>;
+
+export type AstroPreactAttrs = {
+	['data-preact-signals']?: string
+};
author	Matthew Phillips <matthew@skypack.dev>	2022-09-21 15:21:21 -0400
committer	GitHub <noreply@github.com>	2022-09-21 15:21:21 -0400
commit	5e46be54683592773e6dfc2d33825493886114b0 (patch)
tree	6a9ed635e986ae12037f13c47afe47c260f3bdf2 /packages
parent	baae1b3fd10cf0a74e880c0e0552ba8d58f24453 (diff)
download	astro-5e46be54683592773e6dfc2d33825493886114b0.tar.gz astro-5e46be54683592773e6dfc2d33825493886114b0.tar.zst astro-5e46be54683592773e6dfc2d33825493886114b0.zip