diff --git a/.changeset/eleven-cameras-sing.md b/.changeset/eleven-cameras-sing.md new file mode 100644 index 000000000000..450ffdc68b97 --- /dev/null +++ b/.changeset/eleven-cameras-sing.md @@ -0,0 +1,5 @@ +--- +'@astrojs/preact': major +--- + +Preact signals are now serialized correctly in arrays when they are given to components. diff --git a/packages/astro/test/fixtures/preact-component/src/components/SignalsInArray.jsx b/packages/astro/test/fixtures/preact-component/src/components/SignalsInArray.jsx new file mode 100644 index 000000000000..07ee24adaafc --- /dev/null +++ b/packages/astro/test/fixtures/preact-component/src/components/SignalsInArray.jsx @@ -0,0 +1,8 @@ +import { h } from 'preact'; + +export default ({ signalsArray }) => { + return
+

{signalsArray[0]} {signalsArray[3]}

+

{signalsArray[1].value}{signalsArray[2].value}{signalsArray[4].value}

+
+} diff --git a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro index b68fde36d633..16d2efbe0c6e 100644 --- a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro +++ b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro @@ -1,7 +1,9 @@ --- import { signal } from '@preact/signals'; import Signals from '../components/Signals'; +import SignalsInArray from '../components/SignalsInArray'; const count = signal(1); +const secondCount = signal(2); --- @@ -10,5 +12,6 @@ const count = signal(1); + diff --git a/packages/astro/test/preact-component.test.js b/packages/astro/test/preact-component.test.js index e8c89d5bf40c..8c84bf8e6c27 100644 --- a/packages/astro/test/preact-component.test.js +++ b/packages/astro/test/preact-component.test.js @@ -100,4 +100,26 @@ describe('Preact component', () => { assert.notEqual(sigs1.count, undefined); assert.equal(sigs1.count, sigs2.count); }); + + it('Can use signals in array', async () => { + const html = await fixture.readFile('/signals/index.html'); + const $ = cheerio.load(html); + const element = $('.preact-signal-array'); + assert.equal(element.length, 1); + + const sigs1Raw = $($('astro-island')[2]).attr('data-preact-signals'); + + const sigs1 = JSON.parse(sigs1Raw); + + assert.deepEqual(sigs1, { + signalsArray: [ + ['p0', 1], + ['p0', 2], + ['p1', 4], + ], + }); + + assert.equal($('.preact-signal-array h1').text(), "I'm not a signal 12345"); + assert.equal($('.preact-signal-array p').text(), '112'); + }); }); diff --git a/packages/integrations/preact/src/client.ts b/packages/integrations/preact/src/client.ts index 3fb36d22a197..fdf615659ea5 100644 --- a/packages/integrations/preact/src/client.ts +++ b/packages/integrations/preact/src/client.ts @@ -18,13 +18,26 @@ export default (element: HTMLElement) => let signalsRaw = element.dataset.preactSignals; if (signalsRaw) { const { signal } = await import('@preact/signals'); - let signals: Record = JSON.parse(element.dataset.preactSignals!); + let signals: Record = JSON.parse( + element.dataset.preactSignals!, + ); for (const [propName, signalId] of Object.entries(signals)) { - if (!sharedSignalMap.has(signalId)) { - const signalValue = signal(props[propName]); - sharedSignalMap.set(signalId, signalValue); + if (Array.isArray(signalId)) { + signalId.forEach(({ id, i }) => { + const [valueOfSignal, indexInProps] = props[propName][i]; + if (!sharedSignalMap.has(id)) { + const signalValue = signal(valueOfSignal); + sharedSignalMap.set(id, signalValue); + } + props[propName][indexInProps] = sharedSignalMap.get(id); + }); + } else { + if (!sharedSignalMap.has(signalId)) { + const signalValue = signal(props[propName]); + sharedSignalMap.set(signalId, signalValue); + } + props[propName] = sharedSignalMap.get(signalId); } - props[propName] = sharedSignalMap.get(signalId); } } diff --git a/packages/integrations/preact/src/signals.ts b/packages/integrations/preact/src/signals.ts index ea022b42225c..ad04ac9ce0cf 100644 --- a/packages/integrations/preact/src/signals.ts +++ b/packages/integrations/preact/src/signals.ts @@ -28,22 +28,27 @@ export function serializeSignals( map: PropNameToSignalMap, ) { // Check for signals - const signals: Record = {}; + const signals: Record = {}; for (const [key, value] of Object.entries(props)) { - if (isSignal(value)) { + if (Array.isArray(value)) { + value.forEach((signal, index) => { + // find signals in array. The index is important! + if (isSignal(signal)) { + props[key] = props[key].map((v: SignalLike, i: number) => + i === index ? [signal.peek(), i] : v, + ); + + map.set(key, [...((map.get(key) || []) as []), [signal, index]]); + signals[key] = [...((signals[key] || []) as []), [getSignalId(ctx, signal), index]]; + } + }); + } else 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; + signals[key] = getSignalId(ctx, value); } } @@ -51,3 +56,13 @@ export function serializeSignals( attrs['data-preact-signals'] = JSON.stringify(signals); } } + +function getSignalId(ctx: Context, item: SignalLike) { + let id = ctx.signals.get(item); + if (!id) { + id = incrementId(ctx); + ctx.signals.set(item, id); + } + + return id; +} diff --git a/packages/integrations/preact/src/types.ts b/packages/integrations/preact/src/types.ts index 93f65bbc20ea..03f09cb4538e 100644 --- a/packages/integrations/preact/src/types.ts +++ b/packages/integrations/preact/src/types.ts @@ -7,7 +7,7 @@ export type SignalLike = { peek(): any; }; -export type PropNameToSignalMap = Map; +export type PropNameToSignalMap = Map; export type AstroPreactAttrs = { ['data-preact-signals']?: string;