10 files changed, 131 insertions, 5 deletions
diff --git a/packages/renderers/renderer-preact/index.js b/packages/renderers/renderer-preact/index.js
index 84d2021d1..5819ab0f2 100644
--- a/packages/renderers/renderer-preact/index.js
+++ b/packages/renderers/renderer-preact/index.js
@@ -2,5 +2,14 @@ export default {
   name: '@astrojs/renderer-preact',
   client: './client',
   server: './server',
-  knownEntrypoints: ['preact', 'preact-render-to-string'],
+  knownEntrypoints: ['preact', 'preact/jsx-runtime', 'preact-render-to-string'],
+  jsxImportSource: 'preact',
+  jsxTransformOptions: async () => {
+    const { default: { default: jsx }} = await import('@babel/plugin-transform-react-jsx');
+    return {
+      plugins: [
+        jsx({}, { runtime: 'automatic', importSource: 'preact' })
+      ]
+    }
+  }
 };
diff --git a/packages/renderers/renderer-preact/package.json b/packages/renderers/renderer-preact/package.json
index f22560afb..a81097011 100644
--- a/packages/renderers/renderer-preact/package.json
+++ b/packages/renderers/renderer-preact/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "preact": "^10.5.13",
-    "preact-render-to-string": "^5.1.18"
+    "preact-render-to-string": "^5.1.18",
+    "@babel/plugin-transform-react-jsx": "^7.14.5"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
diff --git a/packages/renderers/renderer-preact/server.js b/packages/renderers/renderer-preact/server.js
index ac8661a49..441ce8ef0 100644
--- a/packages/renderers/renderer-preact/server.js
+++ b/packages/renderers/renderer-preact/server.js
@@ -10,7 +10,15 @@ function check(Component, props, children) {
   }
 
   const { html } = renderToStaticMarkup(Component, props, children);
-  return typeof html === 'string';
+
+  if (typeof html !== 'string') {
+    return false;
+  }
+
+  // There are edge cases (SolidJS) where Preact *might* render a string,
+  // but components would be <undefined></undefined>
+
+  return !/\<undefined\>/.test(html);
 }
 
 function renderToStaticMarkup(Component, props, children) {
diff --git a/packages/renderers/renderer-react/index.js b/packages/renderers/renderer-react/index.js
index ca9f35ff7..51a2ecba1 100644
--- a/packages/renderers/renderer-react/index.js
+++ b/packages/renderers/renderer-react/index.js
@@ -2,5 +2,14 @@ export default {
   name: '@astrojs/renderer-react',
   client: './client',
   server: './server',
-  knownEntrypoints: ['react', 'react-dom', 'react-dom/server'],
+  knownEntrypoints: ['react', 'react/jsx-runtime', 'react-dom', 'react-dom/server.js'],
+  jsxImportSource: 'react',
+  jsxTransformOptions: async () => {
+    const { default: { default: jsx }} = await import('@babel/plugin-transform-react-jsx');
+    return {
+      plugins: [
+        jsx({}, { runtime: 'automatic', importSource: 'react' })
+      ]
+    }
+  }
 };
diff --git a/packages/renderers/renderer-react/package.json b/packages/renderers/renderer-react/package.json
index 20c7595fe..d57e6cd4f 100644
--- a/packages/renderers/renderer-react/package.json
+++ b/packages/renderers/renderer-react/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "@babel/plugin-transform-react-jsx": "^7.14.5"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
diff --git a/packages/renderers/renderer-solid/client.js b/packages/renderers/renderer-solid/client.js
new file mode 100644
index 000000000..047de819d
--- /dev/null
+++ b/packages/renderers/renderer-solid/client.js
@@ -0,0 +1,17 @@
+import { createComponent } from 'solid-js/web';
+
+export default (element) => (Component, props) => {
+  // Solid `createComponent` just returns a DOM node with all reactivity
+  // already attached. There's no VDOM, so there's no real need to "mount".
+  // Likewise, `children` can just reuse the nearest `astro-fragment` node.
+  const component = createComponent(Component, {
+    ...props,
+    children: element.querySelector('astro-fragment'),
+  });
+
+  const children = Array.isArray(component)
+    ? component
+    : [ component ];
+
+  element.replaceChildren(...children);
+}
diff --git a/packages/renderers/renderer-solid/index.js b/packages/renderers/renderer-solid/index.js
new file mode 100644
index 000000000..5848f78a4
--- /dev/null
+++ b/packages/renderers/renderer-solid/index.js
@@ -0,0 +1,25 @@
+export default {
+  name: '@astrojs/renderer-solid',
+  client: './client',
+  server: './server',
+  knownEntrypoints: ['solid-js', 'solid-js/web'],
+  external: ['solid-js/web/dist/server.js', 'solid-js/dist/server.js', 'babel-preset-solid'],
+  jsxImportSource: 'solid-js',
+  jsxTransformOptions: async ({ isSSR }) => {
+    const [{ default: solid }] = await Promise.all([import('babel-preset-solid')]);
+    const options = {
+      presets: [
+        solid({}, { generate: isSSR ? 'ssr' : 'dom' }),
+      ]
+    }
+
+    if (isSSR) {
+      options.alias = {
+        'solid-js/web': 'solid-js/web/dist/server.js',
+        'solid-js': 'solid-js/dist/server.js',
+      };
+    }
+
+    return options;
+  }
+};
diff --git a/packages/renderers/renderer-solid/package.json b/packages/renderers/renderer-solid/package.json
new file mode 100644
index 000000000..ed92851e1
--- /dev/null
+++ b/packages/renderers/renderer-solid/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@astrojs/renderer-solid",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./server": "./server.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "babel-preset-solid": "^1.0.0",
+    "solid-js": "^1.0.0"
+  },
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  }
+}
diff --git a/packages/renderers/renderer-solid/server.js b/packages/renderers/renderer-solid/server.js
new file mode 100644
index 000000000..8af4d8aab
--- /dev/null
+++ b/packages/renderers/renderer-solid/server.js
@@ -0,0 +1,26 @@
+import { createComponent } from 'solid-js';
+import { renderToStringAsync, ssr } from 'solid-js/web/dist/server.js';
+
+async function check(Component, props, children) {
+  if (typeof Component !== 'function') return false;
+
+  const { html } = await renderToStaticMarkup(Component, props, children);
+  return typeof html === 'string';
+}
+
+async function renderToStaticMarkup(Component, props, children) {
+  const html = await renderToStringAsync(() => (
+    () => 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([`<astro-fragment>${children}</astro-fragment>`]),
+    })
+  ));
+  return { html };
+}
+
+export default {
+  check,
+  renderToStaticMarkup,
+};
diff --git a/packages/renderers/renderer-solid/static-html.js b/packages/renderers/renderer-solid/static-html.js
new file mode 100644
index 000000000..953416c49
--- /dev/null
+++ b/packages/renderers/renderer-solid/static-html.js
@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js';
+
+/**
+ * Astro passes `children` as a string of HTML, so we need
+ * a wrapper `astro-fragment` to render that content as VNodes.
+ */
+const StaticHtml = ({ innerHTML }) => {
+  if (!innerHTML) return null;
+  return () => createComponent('astro-fragment', { innerHTML });
+};
+
+export default StaticHtml;