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

Shared signals

Browse source
This commit is contained in:
Matthew Phillips 2022-09-12 08:55:58 -04:00
parent b0ee81d0a7
commit 36645926cf
15 changed files with 154 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,8 @@
},
"dependencies": {
"astro": "^1.2.1",
"preact": "^10.7.3",
"@astrojs/preact": "^1.1.0"
"preact": "^10.10.6",
"@astrojs/preact": "workspace:*",
"@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);
}
}

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>

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.0",
"@preact/signals": "1.0.3"
},
"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';

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

@ -0,0 +1,31 @@
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")
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) {
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
);
};

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

@ -0,0 +1,30 @@
import type { RendererContext, SignalLike } from './types';
type Context = {
id: string;
c: number;
signals: Map<SignalLike, string>;
};
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()
};
contexts.set(result, ctx);
return ctx;
}
export function incrementId(ctx: Context): string {
let id = ctx.id;
ctx.c++;
return id;
}

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

@ -1,13 +1,15 @@
import type { RendererContext, SignalLike } from './types';
import { h, Component as BaseComponent } from 'preact';
import render from 'preact-render-to-string';
import StaticHtml from './static-html.js';
import { getContext, incrementId } from './context.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 +20,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,8 +37,33 @@ function check(Component, props, children) {
}
}
function renderToStaticMarkup(Component, props, { default: children, ...slotted }) {
const slots = {};
function isSignal(x: any): x is SignalLike {
return x != null && typeof x === 'object' && typeof x.peek === 'function' && 'value' in x;
}
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> = {};
// Check for signals
for(const [key, value] of Object.entries(props)) {
if(isSignal(value)) {
// Set the value to the current signal value
props[key] = value.peek();
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;
}
}
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 });
@ -46,7 +73,12 @@ function renderToStaticMarkup(Component, props, { default: children, ...slotted
const html = render(
h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
);
return { html };
return {
attrs: {
'data-preact-signals': JSON.stringify(signals),
},
html
};
}
/**
@ -91,7 +123,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

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

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

@ -0,0 +1,8 @@
import type { SSRResult } from 'astro';
export type RendererContext = {
result: SSRResult;
};
export type SignalLike = {
peek(): any;
}

21
pnpm-lock.yaml
View file

@ -160,11 +160,13 @@ importers:
examples/framework-preact:
specifiers:
'@astrojs/preact': ^1.1.0
'@astrojs/preact': workspace:*
'@preact/signals': 1.0.3
astro: ^1.2.1
preact: ^10.7.3
preact: ^10.10.6
dependencies:
'@astrojs/preact': link:../../packages/integrations/preact
'@preact/signals': 1.0.3_preact@10.10.6
astro: link:../../packages/astro
preact: 10.10.6
@ -2514,6 +2516,7 @@ importers:
specifiers:
'@babel/core': '>=7.0.0-0 <8.0.0'
'@babel/plugin-transform-react-jsx': ^7.17.12
'@preact/signals': 1.0.3
astro: workspace:*
astro-scripts: workspace:*
babel-plugin-module-resolver: ^4.1.0
@ -2522,6 +2525,7 @@ importers:
dependencies:
'@babel/core': 7.19.0
'@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.19.0
'@preact/signals': 1.0.3_preact@10.10.6
babel-plugin-module-resolver: 4.1.0
preact-render-to-string: 5.2.3_preact@10.10.6
devDependencies:
@ -5768,6 +5772,19 @@ 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/1.0.3_preact@10.10.6:
resolution: {integrity: sha512-aBUYPBzdw+UD99t3n2v+OKecjaA2SnvImLDKH7jZtgwPE6E4Jr+B+H3P1tYty+bRsIKnHuFcvYUIZJAP1armFw==}
peerDependencies:
preact: 10.x
dependencies:
'@preact/signals-core': 1.0.1
preact: 10.10.6
dev: false
/@proload/core/0.3.3:
resolution: {integrity: sha512-7dAFWsIK84C90AMl24+N/ProHKm4iw0akcnoKjRvbfHifJZBLhaDsDus1QJmhG12lXj4e/uB/8mB/0aduCW+NQ==}
dependencies: