diff --git a/.changeset/itchy-tigers-help.md b/.changeset/itchy-tigers-help.md deleted file mode 100644 index 7ca2646f5..000000000 --- a/.changeset/itchy-tigers-help.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -'@astrojs/preact': minor -'astro': patch ---- - -Shared state in Preact components with signals - -This makes it possible to share client state between Preact islands via signals. - -For example, you can create a signals in an Astro component and then pass it to multiple islands: - -```astro ---- -// Component Imports -import Counter from '../components/Counter'; -import { signal } from '@preact/signals'; -const count = signal(0); ---- - - - -``` diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json index b024dd491..135102a12 100644 --- 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 index 5d702fb42..61a9f9d5a 100644 --- 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 index b37295d7b..a6565f6c1 100644 --- 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); --- @@ -29,12 +25,8 @@ const count = signal(0);
- -

Hello, Preact 1!

- - - -

Hello, Preact 2!

+ +

Hello, Preact!
diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index 359e3768e..436e19f3c 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] = 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 index 8e900c473..a95de2de8 100644 --- 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 deleted file mode 100644 index d0a03c1f3..000000000 --- a/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import { h } from 'preact'; - -export default ({ count }) => { - return
{ count }
-} diff --git a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro deleted file mode 100644 index bfe4a1020..000000000 --- a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro +++ /dev/null @@ -1,14 +0,0 @@ ---- -import Signals from '../components/Signals'; -import { signal } from '@preact/signals'; -const count = signal(1); ---- - - - Testing - - - - - - 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 4f6eb6b0c..ea62dfd54 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,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`); --- diff --git a/packages/astro/test/preact-component.test.js b/packages/astro/test/preact-component.test.js index a18d3c97a..c2814ebca 100644 --- 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 index ffbc41aa5..2044c513c 100644 --- 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/packages/integrations/preact/src/client-dev.ts b/packages/integrations/preact/client-dev.js similarity index 85% rename from packages/integrations/preact/src/client-dev.ts rename to packages/integrations/preact/client-dev.js index 9a9edcb3b..d37e6e0af 100644 --- a/packages/integrations/preact/src/client-dev.ts +++ b/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 new file mode 100644 index 000000000..78d8720f0 --- /dev/null +++ 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 index 346fa74fe..2aa24cac9 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": "./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 b/packages/integrations/preact/server.js similarity index 70% rename from packages/integrations/preact/src/server.ts rename to packages/integrations/preact/server.js index 212e183cf..f5b1a34e5 100644 --- a/packages/integrations/preact/src/server.ts +++ b/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, 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 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 } } -function renderToStaticMarkup( - this: RendererContext, - Component: any, - props: Record, - { default: children, ...slotted }: Record -) { - const ctx = getContext(this.result); - - const slots: Record> = {}; +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 deleted file mode 100644 index 4549e79f4..000000000 --- a/packages/integrations/preact/src/client.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { h, render } from 'preact'; -import StaticHtml from './static-html.js'; -import type { SignalLike } from './types'; - -const sharedSignalMap: Map = new Map(); - -export default (element: HTMLElement) => - async ( - Component: any, - props: Record, - { default: children, ...slotted }: Record - ) => { - 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 = 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 deleted file mode 100644 index c711017c4..000000000 --- a/packages/integrations/preact/src/context.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { PropNameToSignalMap, RendererContext, SignalLike } from './types'; - -export type Context = { - id: string; - c: number; - signals: Map; - propsToSignals: Map, PropNameToSignalMap>; -}; - -const contexts = new WeakMap(); - -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/src/signals.ts b/packages/integrations/preact/src/signals.ts deleted file mode 100644 index 3fa1529f4..000000000 --- a/packages/integrations/preact/src/signals.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { Context } from './context'; -import { incrementId } from './context.js'; -import type { AstroPreactAttrs, PropNameToSignalMap, SignalLike } from './types'; - -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) { - // 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, - attrs: AstroPreactAttrs, - map: PropNameToSignalMap -) { - // Check for signals - const signals: Record = {}; - 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/src/types.ts b/packages/integrations/preact/src/types.ts deleted file mode 100644 index 93f65bbc2..000000000 --- a/packages/integrations/preact/src/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { SSRResult } from 'astro'; -export type RendererContext = { - result: SSRResult; -}; - -export type SignalLike = { - peek(): any; -}; - -export type PropNameToSignalMap = Map; - -export type AstroPreactAttrs = { - ['data-preact-signals']?: string; -}; diff --git a/packages/integrations/preact/src/static-html.ts b/packages/integrations/preact/static-html.js similarity index 90% rename from packages/integrations/preact/src/static-html.ts rename to packages/integrations/preact/static-html.js index e1127d226..7e964ef06 100644 --- a/packages/integrations/preact/src/static-html.ts +++ b/packages/integrations/preact/static-html.js @@ -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 }: { value: string; name?: string }) => { +const StaticHtml = ({ value, name }) => { if (!value) return null; return h('astro-slot', { name, dangerouslySetInnerHTML: { __html: value } }); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d077ef93..e1185ceb6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -170,12 +170,10 @@ importers: examples/framework-preact: specifiers: '@astrojs/preact': ^1.1.0 - '@preact/signals': ^1.1.0 astro: ^1.2.8 preact: ^10.7.3 dependencies: '@astrojs/preact': link:../../packages/integrations/preact - '@preact/signals': 1.1.0_preact@10.11.0 astro: link:../../packages/astro preact: 10.11.0 @@ -1758,14 +1756,10 @@ 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.11.0 astro: link:../../.. - preact: 10.11.0 packages/astro/test/fixtures/public-base-404: specifiers: @@ -2576,16 +2570,14 @@ importers: specifiers: '@babel/core': '>=7.0.0-0 <8.0.0' '@babel/plugin-transform-react-jsx': ^7.17.12 - '@preact/signals': ^1.1.0 astro: workspace:* astro-scripts: workspace:* babel-plugin-module-resolver: ^4.1.0 preact: ^10.7.3 - preact-render-to-string: ^5.2.4 + preact-render-to-string: ^5.2.0 dependencies: '@babel/core': 7.19.1 '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.19.1 - '@preact/signals': 1.1.0_preact@10.11.0 babel-plugin-module-resolver: 4.1.0 preact-render-to-string: 5.2.4_preact@10.11.0 devDependencies: @@ -5853,32 +5845,6 @@ 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-core/1.2.0: - resolution: {integrity: sha512-GBjq/8WJkh/aenrEMvWIOr1lRfu6nb25er0m6r+4qVqKC85mXAYIbGHnoHTooNXCKxn2KEMUrATvN54MdMHE1A==} - dev: false - - /@preact/signals/1.0.3_preact@10.11.0: - resolution: {integrity: sha512-aBUYPBzdw+UD99t3n2v+OKecjaA2SnvImLDKH7jZtgwPE6E4Jr+B+H3P1tYty+bRsIKnHuFcvYUIZJAP1armFw==} - peerDependencies: - preact: 10.x - dependencies: - '@preact/signals-core': 1.0.1 - preact: 10.11.0 - dev: false - - /@preact/signals/1.1.0_preact@10.11.0: - resolution: {integrity: sha512-lW00Ny4q65o0BiymwbhPtIo9Fne8DUflvKVJBNwI6UeN8pZXWLdeZEr3YjMV5aXEP65Eh6yLhKQnn1jCSfzYug==} - peerDependencies: - preact: 10.x - dependencies: - '@preact/signals-core': 1.2.0 - preact: 10.11.0 - dev: false - /@proload/core/0.3.3: resolution: {integrity: sha512-7dAFWsIK84C90AMl24+N/ProHKm4iw0akcnoKjRvbfHifJZBLhaDsDus1QJmhG12lXj4e/uB/8mB/0aduCW+NQ==} dependencies: