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

Support shared signals in Preact islands (#4763)

Browse source 
* Support signals in Preact islands

* Add a changeset

* Only add signals if we need them

* Refactor signal logic into its own module

* Keep track of the signals used
This commit is contained in:
Matthew Phillips 2022-09-21 15:21:21 -04:00 committed by GitHub
parent baae1b3fd1
commit 5e46be5468
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 272 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
.changeset/itchy-tigers-help.md Normal file
View file

@ -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);
---
<Count count={count} />
<Count count={count} />
```

3
examples/framework-preact/package.json
View file

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

8
examples/framework-preact/src/components/Counter.tsx
View file

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

12
examples/framework-preact/src/pages/index.astro
View file

@ -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);
---
<html lang="en">
@ -25,8 +29,12 @@ import Counter from '../components/Counter';
</head>
<body>
<main>
<Counter client:visible>
<h1>Hello, Preact!</h1>
<Counter count={count} client:visible>
<h1>Hello, Preact 1!</h1>
</Counter>
<Counter count={count} client:visible>
<h1>Hello, Preact 2!</h1>
</Counter>
</main>
</body>

2
packages/astro/src/runtime/server/hydration.ts
View file

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

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>

1
packages/astro/test/fixtures/ssr-response/src/pages/some-header.astro vendored
View file

@ -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`);
---
<html>
<head>

20
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,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);
});
});

1
packages/astro/test/ssr-response.test.js
View file

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

14
packages/integrations/preact/client.js
View file

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

9
packages/integrations/preact/package.json
View file

@ -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:*",

1
packages/integrations/preact/client-dev.js → packages/integrations/preact/src/client-dev.ts
View file

@ -1,3 +1,4 @@
// @ts-ignore
import 'preact/debug';
import clientFn from './client.js';

29
packages/integrations/preact/src/client.ts Normal file
View file

@ -0,0 +1,29 @@
import type { SignalLike } from './types';
import { h, render } from 'preact';
import StaticHtml from './static-html.js';
const sharedSignalMap: Map<string, SignalLike> = new Map();
export default (element: HTMLElement) =>
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)) {
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
);
};

32
packages/integrations/preact/src/context.ts Normal file
View file

@ -0,0 +1,32 @@
import type { RendererContext, SignalLike, PropNameToSignalMap } from './types';
export type Context = {
id: string;
c: number;
signals: Map<SignalLike, string>;
propsToSignals: Map<Record<string, any>, PropNameToSignalMap>;
};
const contexts = new WeakMap<RendererContext['result'], Context>();
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;
}

34
packages/integrations/preact/server.js → packages/integrations/preact/src/server.ts
View file

@ -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<string, any>, 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<string, any>, { default: children, ...slotted }: Record<string, any>) {
const ctx = getContext(this.result);
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
// 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

48
packages/integrations/preact/src/signals.ts Normal file
View file

@ -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<string, any>) {
// 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<string, any>, attrs: AstroPreactAttrs, map: PropNameToSignalMap){
// 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
// 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);
}
}

2
packages/integrations/preact/static-html.js → packages/integrations/preact/src/static-html.ts
View file

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

14
packages/integrations/preact/src/types.ts Normal file
View file

@ -0,0 +1,14 @@
import type { SSRResult } from 'astro';
export type RendererContext = {
result: SSRResult;
};
export type SignalLike = {
peek(): any;
};
export type PropNameToSignalMap = Map<string, SignalLike>;
export type AstroPreactAttrs = {
['data-preact-signals']?: string
};

36
pnpm-lock.yaml
View file

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