diff --git a/packages/renderers/renderer-solid/client.js b/packages/renderers/renderer-solid/client.js index 815f3d8e5..f4cdb4ead 100644 --- a/packages/renderers/renderer-solid/client.js +++ b/packages/renderers/renderer-solid/client.js @@ -1,16 +1,11 @@ -import { createComponent } from 'solid-js'; -import { render } from 'solid-js/web'; +import { hydrate, createComponent } from 'solid-js/web'; export default (element) => (Component, props, childHTML) => { - // Solid's `render` does not replace the element's children. - // Deleting the root's children is necessary before calling `render`. - element.replaceChildren(); - const children = document.createElement('astro-fragment'); children.innerHTML = childHTML; - // Using Solid's `render` method ensures that a `root` is created + // Using Solid's `hydrate` method ensures that a `root` is created // in order to properly handle reactivity. It also handles // components that are not native HTML elements. - render(() => createComponent(Component, { ...props, children }), element); + hydrate(() => createComponent(Component, { ...props, children }), element); }; diff --git a/packages/renderers/renderer-solid/index.js b/packages/renderers/renderer-solid/index.js index 477da0298..3a3b64f6c 100644 --- a/packages/renderers/renderer-solid/index.js +++ b/packages/renderers/renderer-solid/index.js @@ -3,7 +3,7 @@ export default { client: './client', server: './server', knownEntrypoints: ['solid-js', 'solid-js/web', 'solid-js/store', 'solid-js/html', 'solid-js/h'], - external: ['solid-js/web/dist/server.cjs', 'solid-js/dist/server.cjs', 'babel-preset-solid'], + external: ['solid-js/web/dist/server.cjs', 'solid-js/store/dist/server.cjs', 'solid-js/dist/server.cjs', 'babel-preset-solid'], jsxImportSource: 'solid-js', jsxTransformOptions: async ({ isSSR }) => { const [{ default: solid }] = await Promise.all([import('babel-preset-solid')]); @@ -18,6 +18,7 @@ export default { { cwd: process.cwd(), alias: { + 'solid-js/store': 'solid-js/store/dist/server.cjs', 'solid-js/web': 'solid-js/web/dist/server.cjs', 'solid-js': 'solid-js/dist/server.cjs', }, diff --git a/packages/renderers/renderer-solid/server.js b/packages/renderers/renderer-solid/server.js index 207ac798f..956e90e88 100644 --- a/packages/renderers/renderer-solid/server.js +++ b/packages/renderers/renderer-solid/server.js @@ -1,24 +1,23 @@ -import { createComponent } from 'solid-js'; -import { renderToStringAsync, ssr } from 'solid-js/web/dist/server.cjs'; +import { renderToString, ssr, createComponent } from 'solid-js/web/dist/server.cjs'; -async function check(Component, props, children) { +function check(Component, props, children) { if (typeof Component !== 'function') return false; - const { html } = await renderToStaticMarkup(Component, props, children); + const { html } = renderToStaticMarkup(Component, props, children); return typeof html === 'string'; } -async function renderToStaticMarkup(Component, props, children) { - const html = await renderToStringAsync( - () => () => +function renderToStaticMarkup(Component, props, children) { + const html = renderToString( + () => createComponent(Component, { ...props, // In Solid SSR mode, `ssr` creates the expected structure for `children`. // In Solid client mode, `ssr` is just a stub. - children: ssr([`${children}`]), + children: ssr(`${children}`), }) ); - return { html }; + return { html: html + `` }; } export default { diff --git a/packages/renderers/renderer-solid/static-html.js b/packages/renderers/renderer-solid/static-html.js index 953416c49..fdbd56250 100644 --- a/packages/renderers/renderer-solid/static-html.js +++ b/packages/renderers/renderer-solid/static-html.js @@ -1,4 +1,4 @@ -import { createComponent } from 'solid-js'; +import { ssr } from 'solid-js/web/dist/server.js'; /** * Astro passes `children` as a string of HTML, so we need @@ -6,7 +6,7 @@ import { createComponent } from 'solid-js'; */ const StaticHtml = ({ innerHTML }) => { if (!innerHTML) return null; - return () => createComponent('astro-fragment', { innerHTML }); + return ssr(`${innerHTML }`); }; export default StaticHtml;