diff --git a/.changeset/itchy-tigers-help.md b/.changeset/itchy-tigers-help.md new file mode 100644 index 000000000..7ca2646f5 --- /dev/null +++ b/.changeset/itchy-tigers-help.md @@ -0,0 +1,22 @@ +--- +'@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 135102a12..b3b35374a 100644 --- a/examples/framework-preact/package.json +++ b/examples/framework-preact/package.json @@ -13,6 +13,7 @@ "dependencies": { "astro": "^1.2.8", "preact": "^10.7.3", - "@astrojs/preact": "^1.1.0" + "@astrojs/preact": "^1.1.0", + "@preact/signals": "1.0.3" } } diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx index 61a9f9d5a..c2b065e3c 100644 --- 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 }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); +export default function Counter({ children, count }) { + const add = () => count.value++ + const subtract = () => count.value--; return ( <> diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro index a6565f6c1..b37295d7b 100644 --- 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); --- @@ -25,8 +29,12 @@ import Counter from '../components/Counter';
- -

Hello, Preact!

+ +

Hello, Preact 1!

+ + + +

Hello, Preact 2!
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
{ 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 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); +--- + + + 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 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`); --- 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 similarity index 85% rename from packages/integrations/preact/client-dev.js rename to 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 = 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 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; + 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/server.js b/packages/integrations/preact/src/server.ts similarity index 72% rename from packages/integrations/preact/server.js rename to 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, 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, { default: children, ...slotted }: Record) { + const ctx = getContext(this.result); + + const slots: Record> = {}; 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) { + // 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/static-html.js b/packages/integrations/preact/src/static-html.ts similarity index 90% rename from packages/integrations/preact/static-html.js rename to 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; + +export type AstroPreactAttrs = { + ['data-preact-signals']?: string +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f91e81cb0..0eb9602f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -170,10 +170,12 @@ importers: examples/framework-preact: specifiers: '@astrojs/preact': ^1.1.0 + '@preact/signals': 1.0.3 astro: ^1.2.8 preact: ^10.7.3 dependencies: '@astrojs/preact': link:../../packages/integrations/preact + '@preact/signals': 1.0.3_preact@10.11.0 astro: link:../../packages/astro preact: 10.11.0 @@ -1756,10 +1758,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.11.0 astro: link:../../.. + preact: 10.11.0 packages/astro/test/fixtures/public-base-404: specifiers: @@ -2551,14 +2557,16 @@ 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.0 + preact-render-to-string: ^5.2.4 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: @@ -5826,6 +5834,32 @@ 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: