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;