Support signals in Preact islands

Shared signals
2022-09-14 18:33:31 -04:00 · 2022-09-12 08:55:58 -04:00
19 changed files with 191 additions and 40 deletions
--- a/examples/framework-preact/package.json
+++ b/examples/framework-preact/package.json
@ -11,7 +11,8 @@
  },
  "dependencies": {
    "astro": "^1.2.1",
-    "preact": "^10.7.3",
+    "preact": "^10.10.6",
-    "@astrojs/preact": "^1.1.0"
+    "@astrojs/preact": "workspace:*",
    "@preact/signals": "1.0.3"
  }
 }
--- a/examples/framework-preact/src/components/Counter.tsx
+++ b/examples/framework-preact/src/components/Counter.tsx
@ -1,11 +1,9 @@
 import { h, Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 import './Counter.css';
-export default function Counter({ children }) {
+export default function Counter({ children, count }) {
-	const [count, setCount] = useState(0);
+	const add = () => count.value++
-	const add = () => setCount((i) => i + 1);
+	const subtract = () => count.value--;
 	const subtract = () => setCount((i) => i - 1);
 	return (
 		<>
--- a/examples/framework-preact/src/pages/index.astro
+++ b/examples/framework-preact/src/pages/index.astro
@ -2,8 +2,12 @@
 // Component Imports
 import Counter from '../components/Counter';
 import { signal } from '@preact/signals';
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 const count = signal(0);
 ---
 <html lang="en">
@ -25,8 +29,12 @@ import Counter from '../components/Counter';
 	</head>
 	<body>
 		<main>
-			<Counter client:visible>
+			<Counter count={count} client:visible>
-				<h1>Hello, Preact!</h1>
+				<h1>Hello, Preact 1!</h1>
 			</Counter>
 			<Counter count={count} client:visible>
 				<h1>Hello, Preact 2!</h1>
 			</Counter>
 		</main>
 	</body>
--- 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);
 		}
 	}
--- 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"
  }
 }
--- a/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx
+++ 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>
 }
--- a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro
+++ 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>
--- 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>
--- 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,16 @@ 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 sigs1 = JSON.parse($($('astro-island')[0]).attr('data-preact-signals'));
 		const sigs2 = JSON.parse($($('astro-island')[1]).attr('data-preact-signals'));
 		expect(sigs1.count).to.not.be.undefined;
 		expect(sigs1.count).to.equal(sigs2.count);
 	});
 });
--- 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`)
 	});
 });
--- a/packages/integrations/preact/client.js
+++ b/packages/integrations/preact/client.js
@ -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
 		);
 	};
--- 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.js": "./dist/client.js",
-    "./client-dev.js": "./client-dev.js",
+    "./client-dev.js": "./dist/client-dev.js",
-    "./server.js": "./server.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.0",
    "@preact/signals": "1.0.3"
  },
  "devDependencies": {
    "astro": "workspace:*",
--- a/packages/integrations/preact/src/client-dev.ts
+++ b/packages/integrations/preact/src/client-dev.ts
@ -1,3 +1,4 @@
 // @ts-ignore
 import 'preact/debug';
 import clientFn from './client.js';
--- a/packages/integrations/preact/src/client.ts
+++ 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
 		);
 	};
--- a/packages/integrations/preact/src/context.ts
+++ b/packages/integrations/preact/src/context.ts
@ -0,0 +1,30 @@
 import type { RendererContext, SignalLike } from './types';
 type Context = {
 	id: string;
 	c: number;
 	signals: Map<SignalLike, string>;
 };
 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()
 	};
 	contexts.set(result, ctx);
 	return ctx;
 }
 export function incrementId(ctx: Context): string {
 	let id = ctx.id;
 	ctx.c++;
 	return id;
 }
--- a/packages/integrations/preact/src/server.ts
+++ b/packages/integrations/preact/src/server.ts
@ -1,13 +1,15 @@
 import type { RendererContext, SignalLike } 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';
-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 +20,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,18 +37,48 @@ function check(Component, props, children) {
 	}
 }
-function renderToStaticMarkup(Component, props, { default: children, ...slotted }) {
+function isSignal(x: any): x is SignalLike {
-	const slots = {};
+	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);
 	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
 	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 html = render(
 		h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
 	);
-	return { html };
+	return {
 		attrs: {
 			'data-preact-signals': JSON.stringify(signals),
 		},
 		html
 	};
 }
 /**
@ -91,7 +123,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
--- a/packages/integrations/preact/src/static-html.ts
+++ 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 } });
 };
--- a/packages/integrations/preact/src/types.ts
+++ b/packages/integrations/preact/src/types.ts
@ -0,0 +1,8 @@
 import type { SSRResult } from 'astro';
 export type RendererContext = {
 	result: SSRResult;
 };
 export type SignalLike = {
 	peek(): any;
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -160,11 +160,13 @@ importers:
  examples/framework-preact:
    specifiers:
-      '@astrojs/preact': ^1.1.0
+      '@astrojs/preact': workspace:*
      '@preact/signals': 1.0.3
      astro: ^1.2.1
-      preact: ^10.7.3
+      preact: ^10.10.6
    dependencies:
      '@astrojs/preact': link:../../packages/integrations/preact
      '@preact/signals': 1.0.3_preact@10.10.6
      astro: link:../../packages/astro
      preact: 10.10.6
@ -1729,10 +1731,14 @@ importers:
  packages/astro/test/fixtures/preact-component:
    specifiers:
      '@astrojs/preact': workspace:*
      '@preact/signals': 1.0.3
      astro: workspace:*
      preact: ^10.7.3
    dependencies:
      '@astrojs/preact': link:../../../../integrations/preact
      '@preact/signals': 1.0.3_preact@10.10.6
      astro: link:../../..
      preact: 10.10.6
  packages/astro/test/fixtures/public-base-404:
    specifiers:
@ -2514,6 +2520,7 @@ importers:
    specifiers:
      '@babel/core': '>=7.0.0-0 <8.0.0'
      '@babel/plugin-transform-react-jsx': ^7.17.12
      '@preact/signals': 1.0.3
      astro: workspace:*
      astro-scripts: workspace:*
      babel-plugin-module-resolver: ^4.1.0
@ -2522,6 +2529,7 @@ importers:
    dependencies:
      '@babel/core': 7.19.0
      '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.19.0
      '@preact/signals': 1.0.3_preact@10.10.6
      babel-plugin-module-resolver: 4.1.0
      preact-render-to-string: 5.2.3_preact@10.10.6
    devDependencies:
@ -5768,6 +5776,19 @@ packages:
    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
    dev: false
  /@preact/signals-core/1.0.1:
    resolution: {integrity: sha512-1yBu72jd80QWdp8WvNFBg7K+0REv+NqJg1CGIwAl5kJ+qE7I06Lm2+K3z2qVZmABiDjQgjU2vKA9yEjniWv5uA==}
    dev: false
  /@preact/signals/1.0.3_preact@10.10.6:
    resolution: {integrity: sha512-aBUYPBzdw+UD99t3n2v+OKecjaA2SnvImLDKH7jZtgwPE6E4Jr+B+H3P1tYty+bRsIKnHuFcvYUIZJAP1armFw==}
    peerDependencies:
      preact: 10.x
    dependencies:
      '@preact/signals-core': 1.0.1
      preact: 10.10.6
    dev: false
  /@proload/core/0.3.3:
    resolution: {integrity: sha512-7dAFWsIK84C90AMl24+N/ProHKm4iw0akcnoKjRvbfHifJZBLhaDsDus1QJmhG12lXj4e/uB/8mB/0aduCW+NQ==}
    dependencies:
Author	SHA1	Message	Date
Matthew Phillips	ce24ca2ea2	Support signals in Preact islands	2022-09-14 18:33:31 -04:00
Matthew Phillips	36645926cf	Shared signals	2022-09-12 08:55:58 -04:00