Revert preact signals support (#4843)

* Revert "Update preact example to match @astrojs/preact ranges (#4840)" This reverts commit d650a11. * Revert "[ci] format" This reverts commit e3c78c5. * Revert "Support shared signals in Preact islands (#4763)" This reverts commit 5e46be5.
withastro · Sep 22, 2022 · 25a5b9a · 25a5b9a
1 parent d650a11
commit 25a5b9a
Show file tree

Hide file tree

Showing 21 changed files with 40 additions and 285 deletions.
diff --git a/.changeset/itchy-tigers-help.md b/.changeset/itchy-tigers-help.md
diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "astro": "^1.2.8",
     "preact": "^10.7.3",
-    "@astrojs/preact": "^1.1.0",
-    "@preact/signals": "^1.1.0"
+    "@astrojs/preact": "^1.1.0"
   }
 }
diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx
@@ -1,9 +1,11 @@
 import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
 import './Counter.css';
 
-export default function Counter({ children, count }) {
-	const add = () => count.value++;
-	const subtract = () => count.value--;
+export default function Counter({ children }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
 
 	return (
 		<>

diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro
@@ -2,12 +2,8 @@
 // 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">
@@ -29,12 +25,8 @@ const count = signal(0);
 	</head>
 	<body>
 		<main>
-			<Counter count={count} client:visible>
-				<h1>Hello, Preact 1!</h1>
-			</Counter>
-
-			<Counter count={count} client:visible>
-				<h1>Hello, Preact 2!</h1>
+			<Counter client:visible>
+				<h1>Hello, Preact!</h1>
 			</Counter>
 		</main>
 	</body>

diff --git 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] = escapeHTML(value);
+			island.props[key] = value;
 		}
 	}
 

diff --git a/packages/astro/test/fixtures/preact-component/package.json b/packages/astro/test/fixtures/preact-component/package.json
@@ -4,8 +4,6 @@
   "private": true,
   "dependencies": {
     "@astrojs/preact": "workspace:*",
-    "astro": "workspace:*",
-    "@preact/signals": "1.0.3",
-    "preact": "^10.7.3"
+    "astro": "workspace:*"
   }
 }
diff --git a/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx b/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx
diff --git a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro
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
@@ -1,7 +1,6 @@
 ---
 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
@@ -3,7 +3,6 @@ import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('Preact component', () => {
-	/** @type {import('./test-utils').Fixture} */
 	let fixture;
 
 	before(async () => {
@@ -81,22 +80,4 @@ 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
@@ -36,6 +36,5 @@ 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/...ges/integrations/preact/src/client-dev.ts → packages/integrations/preact/client-dev.js b/...ges/integrations/preact/src/client-dev.ts → packages/integrations/preact/client-dev.js
@@ -1,4 +1,3 @@
-// @ts-ignore
 import 'preact/debug';
 import clientFn from './client.js';
 

diff --git a/packages/integrations/preact/client.js b/packages/integrations/preact/client.js
@@ -0,0 +1,14 @@
+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
@@ -21,9 +21,9 @@
   "homepage": "https://docs.astro.build/en/guides/integrations-guide/preact/",
   "exports": {
     ".": "./dist/index.js",
-    "./client.js": "./dist/client.js",
-    "./client-dev.js": "./dist/client-dev.js",
-    "./server.js": "./dist/server.js",
+    "./client.js": "./client.js",
+    "./client-dev.js": "./client-dev.js",
+    "./server.js": "./server.js",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -35,8 +35,7 @@
     "@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.4",
-    "@preact/signals": "^1.1.0"
+    "preact-render-to-string": "^5.2.0"
   },
   "devDependencies": {
     "astro": "workspace:*",

diff --git a/packages/integrations/preact/src/server.ts → packages/integrations/preact/server.js b/packages/integrations/preact/src/server.ts → packages/integrations/preact/server.js
@@ -1,16 +1,13 @@
-import { Component as BaseComponent, h } from 'preact';
+import { h, Component as BaseComponent } from 'preact';
 import render from 'preact-render-to-string';
-import { getContext } from './context.js';
-import { restoreSignalsOnProps, serializeSignals } from './signals.js';
 import StaticHtml from './static-html.js';
-import type { AstroPreactAttrs, RendererContext } from './types';
 
-const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
 
-let originalConsoleError: typeof console.error;
+let originalConsoleError;
 let consoleFilterRefs = 0;
 
-function check(this: RendererContext, Component: any, props: Record<string, any>, children: any) {
+function check(Component, props, children) {
 	if (typeof Component !== 'function') return false;
 
 	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
@@ -21,7 +18,7 @@ function check(this: RendererContext, Component: any, props: Record<string, any>
 
 	try {
 		try {
-			const { html } = renderToStaticMarkup.call(this, Component, props, children);
+			const { html } = renderToStaticMarkup(Component, props, children);
 			if (typeof html !== 'string') {
 				return false;
 			}
@@ -38,35 +35,18 @@ function check(this: RendererContext, Component: any, props: Record<string, any>
 	}
 }
 
-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>> = {};
+function renderToStaticMarkup(Component, props, { default: children, ...slotted }) {
+	const slots = {};
 	for (const [key, value] of Object.entries(slotted)) {
 		const name = slotName(key);
 		slots[name] = h(StaticHtml, { value, name });
 	}
-
-	// Restore signals back onto props so that they will be passed as-is to components
-	let propsMap = restoreSignalsOnProps(ctx, props);
-
+	// Note: create newProps to avoid mutating `props` before they are serialized
 	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 {
-		attrs,
-		html,
-	};
+	return { html };
 }
 
 /**
@@ -111,7 +91,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: string, ...rest: any[]) {
+function filteredConsoleError(msg, ...rest) {
 	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/client.ts b/packages/integrations/preact/src/client.ts
diff --git a/packages/integrations/preact/src/context.ts b/packages/integrations/preact/src/context.ts