diff options
Diffstat (limited to 'packages')
16 files changed, 31 insertions, 213 deletions
diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index 359e3768e..436e19f3c 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] = escapeHTML(value); + island.props[key] = value; } } diff --git a/packages/astro/test/fixtures/preact-component/package.json b/packages/astro/test/fixtures/preact-component/package.json index 8e900c473..a95de2de8 100644 --- a/packages/astro/test/fixtures/preact-component/package.json +++ b/packages/astro/test/fixtures/preact-component/package.json @@ -4,8 +4,6 @@ "private": true, "dependencies": { "@astrojs/preact": "workspace:*", - "astro": "workspace:*", - "@preact/signals": "1.0.3", - "preact": "^10.7.3" + "astro": "workspace:*" } } diff --git a/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx b/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx deleted file mode 100644 index d0a03c1f3..000000000 --- a/packages/astro/test/fixtures/preact-component/src/components/Signals.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import { h } from 'preact'; - -export default ({ count }) => { - return <div class="preact-signal">{ count }</div> -} diff --git a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro deleted file mode 100644 index bfe4a1020..000000000 --- a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro +++ /dev/null @@ -1,14 +0,0 @@ ---- -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> 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 4f6eb6b0c..ea62dfd54 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,7 +1,6 @@ --- 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> diff --git a/packages/astro/test/preact-component.test.js b/packages/astro/test/preact-component.test.js index a18d3c97a..c2814ebca 100644 --- a/packages/astro/test/preact-component.test.js +++ b/packages/astro/test/preact-component.test.js @@ -3,7 +3,6 @@ import * as cheerio from 'cheerio'; import { loadFixture } from './test-utils.js'; describe('Preact component', () => { - /** @type {import('./test-utils').Fixture} */ let fixture; before(async () => { @@ -81,22 +80,4 @@ 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 ffbc41aa5..2044c513c 100644 --- a/packages/astro/test/ssr-response.test.js +++ b/packages/astro/test/ssr-response.test.js @@ -36,6 +36,5 @@ 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/src/client-dev.ts b/packages/integrations/preact/client-dev.js index 9a9edcb3b..d37e6e0af 100644 --- a/packages/integrations/preact/src/client-dev.ts +++ b/packages/integrations/preact/client-dev.js @@ -1,4 +1,3 @@ -// @ts-ignore import 'preact/debug'; import clientFn from './client.js'; diff --git a/packages/integrations/preact/client.js b/packages/integrations/preact/client.js new file mode 100644 index 000000000..78d8720f0 --- /dev/null +++ b/packages/integrations/preact/client.js @@ -0,0 +1,14 @@ +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 346fa74fe..2aa24cac9 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": "./dist/client.js", - "./client-dev.js": "./dist/client-dev.js", - "./server.js": "./dist/server.js", + "./client.js": "./client.js", + "./client-dev.js": "./client-dev.js", + "./server.js": "./server.js", "./package.json": "./package.json" }, "scripts": { @@ -35,8 +35,7 @@ "@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.4", - "@preact/signals": "^1.1.0" + "preact-render-to-string": "^5.2.0" }, "devDependencies": { "astro": "workspace:*", diff --git a/packages/integrations/preact/src/server.ts b/packages/integrations/preact/server.js index 212e183cf..f5b1a34e5 100644 --- a/packages/integrations/preact/src/server.ts +++ b/packages/integrations/preact/server.js @@ -1,16 +1,13 @@ -import { Component as BaseComponent, h } from 'preact'; +import { h, Component as BaseComponent } from 'preact'; import render from 'preact-render-to-string'; -import { getContext } from './context.js'; -import { restoreSignalsOnProps, serializeSignals } from './signals.js'; import StaticHtml from './static-html.js'; -import type { AstroPreactAttrs, RendererContext } from './types'; -const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase()); +const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase()); -let originalConsoleError: typeof console.error; +let originalConsoleError; let consoleFilterRefs = 0; -function check(this: RendererContext, Component: any, props: Record<string, any>, children: any) { +function check(Component, props, children) { if (typeof Component !== 'function') return false; if (Component.prototype != null && typeof Component.prototype.render === 'function') { @@ -21,7 +18,7 @@ function check(this: RendererContext, Component: any, props: Record<string, any> try { try { - const { html } = renderToStaticMarkup.call(this, Component, props, children); + const { html } = renderToStaticMarkup(Component, props, children); if (typeof html !== 'string') { return false; } @@ -38,35 +35,18 @@ function check(this: RendererContext, Component: any, props: Record<string, any> } } -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>> = {}; +function renderToStaticMarkup(Component, props, { default: children, ...slotted }) { + const slots = {}; for (const [key, value] of Object.entries(slotted)) { const name = slotName(key); slots[name] = h(StaticHtml, { value, name }); } - - // Restore signals back onto props so that they will be passed as-is to components - let propsMap = restoreSignalsOnProps(ctx, props); - + // Note: create newProps to avoid mutating `props` before they are serialized 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 { - attrs, - html, - }; + return { html }; } /** @@ -111,7 +91,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: string, ...rest: any[]) { +function filteredConsoleError(msg, ...rest) { 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/client.ts b/packages/integrations/preact/src/client.ts deleted file mode 100644 index 4549e79f4..000000000 --- a/packages/integrations/preact/src/client.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { h, render } from 'preact'; -import StaticHtml from './static-html.js'; -import type { SignalLike } from './types'; - -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 - ); - }; diff --git a/packages/integrations/preact/src/context.ts b/packages/integrations/preact/src/context.ts deleted file mode 100644 index c711017c4..000000000 --- a/packages/integrations/preact/src/context.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { PropNameToSignalMap, RendererContext, SignalLike } 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; -} diff --git a/packages/integrations/preact/src/signals.ts b/packages/integrations/preact/src/signals.ts deleted file mode 100644 index 3fa1529f4..000000000 --- a/packages/integrations/preact/src/signals.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { Context } from './context'; -import { incrementId } from './context.js'; -import type { AstroPreactAttrs, PropNameToSignalMap, SignalLike } from './types'; - -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); - } -} diff --git a/packages/integrations/preact/src/types.ts b/packages/integrations/preact/src/types.ts deleted file mode 100644 index 93f65bbc2..000000000 --- a/packages/integrations/preact/src/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -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; -}; diff --git a/packages/integrations/preact/src/static-html.ts b/packages/integrations/preact/static-html.js index e1127d226..7e964ef06 100644 --- a/packages/integrations/preact/src/static-html.ts +++ b/packages/integrations/preact/static-html.js @@ -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 }: { value: string; name?: string }) => { +const StaticHtml = ({ value, name }) => { if (!value) return null; return h('astro-slot', { name, dangerouslySetInnerHTML: { __html: value } }); }; |