michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Support signals in Preact islands

Browse source
This commit is contained in:
Matthew Phillips 2022-09-14 18:33:31 -04:00
parent 36645926cf
commit ce24ca2ea2
7 changed files with 51 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/astro/test/fixtures/preact-component/package.json vendored
View file

@ -4,6 +4,8 @@
"private": true,
"dependencies": {
"@astrojs/preact": "workspace:*",
"astro": "workspace:*"
"astro": "workspace:*",
"@preact/signals": "1.0.3",
"preact": "^10.7.3"
}
}

5
packages/astro/test/fixtures/preact-component/src/components/Signals.jsx vendored Normal file
View file

@ -0,0 +1,5 @@
import { h } from 'preact';
export default ({ count }) => {
return <div class="preact-signal">{ count }</div>
}

14
packages/astro/test/fixtures/preact-component/src/pages/signals.astro vendored Normal file
View file

@ -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>

13
packages/astro/test/preact-component.test.js
View file

@ -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);
});
});

6
packages/integrations/preact/src/client.ts
View file

@ -1,20 +1,18 @@
import type { SignalLike } from './types';
import { h, render } from 'preact';
import StaticHtml from './static-html.js';
// TODO change this
import { signal } from '@preact/signals';
const sharedSignalMap: Map<string, SignalLike> = new Map();
export default (element: HTMLElement) =>
(Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>) => {
console.log("HERE I AM 2")
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)) {

20
packages/integrations/preact/src/server.ts
View file

@ -43,13 +43,21 @@ function isSignal(x: any): x is SignalLike {
function renderToStaticMarkup(this: RendererContext, Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>) {
const ctx = getContext(this.result);
const signals: Record<string, string> = {};
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
props[key] = value.peek();
newProps[key] = value.peek();
let id: string;
if(ctx.signals.has(value)) {
@ -62,14 +70,6 @@ function renderToStaticMarkup(this: RendererContext, Component: any, props: Reco
}
}
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 };
const html = render(
h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
);

4
pnpm-lock.yaml
View file

@ -1731,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: