Remove try/catch from solid component check (#3282)

* Remove try/catch from solid component check

* Move try/catch to renderComponent

* Add solid to integrations-playground example

examples/integrations-playground/astro.config.mjs

@@ -1,12 +1,13 @@
 import { defineConfig } from 'astro/config';
-
 import lit from '@astrojs/lit';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
 import turbolinks from '@astrojs/turbolinks';
 import sitemap from '@astrojs/sitemap';
 import partytown from '@astrojs/partytown';
+import solid from "@astrojs/solid-js";
 
+// https://astro.build/config
 export default defineConfig({
-	integrations: [lit(), react(), tailwind(), turbolinks(), partytown(), sitemap()],
+  integrations: [lit(), react(), tailwind(), turbolinks(), partytown(), sitemap(), solid()]
 });

examples/integrations-playground/package.json

@@ -13,9 +13,11 @@
     "@astrojs/partytown": "^0.1.2",
     "@astrojs/react": "^0.1.1",
     "@astrojs/sitemap": "^0.1.0",
+    "@astrojs/solid-js": "0.1.2",
     "@astrojs/tailwind": "^0.2.1",
     "@astrojs/turbolinks": "^0.1.2",
-    "astro": "^1.0.0-beta.27"
+    "astro": "^1.0.0-beta.27",
+    "solid-js": "^1.3.6"
   },
   "dependencies": {
     "@webcomponents/template-shadowroot": "^0.1.0",
@@ -23,7 +25,6 @@
     "preact": "^10.7.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "solid-js": "^1.3.16",
     "svelte": "^3.47.0",
     "vue": "^3.2.33"
   }

examples/integrations-playground/src/components/Link.jsx

@@ -1,3 +1,6 @@
+/* jsxImportSource: react */
+import React from 'react';
+
 export default function Link({ to, text }) {
 	return <a href={to}>{text}</a>;
 }

examples/integrations-playground/src/components/SolidCounter.jsx

@@ -0,0 +1,18 @@
+import { createSignal } from 'solid-js';
+
+export default function Counter(props) {
+	const [count, setCount] = createSignal(0);
+	const add = () => setCount(count() + 1);
+	const subtract = () => setCount(count() - 1);
+
+	return (
+		<>
+			<div class="counter">
+				<button onClick={subtract}>-</button>
+				<pre>{count()}</pre>
+				<button onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{props.children}</div>
+		</>
+	);
+}

examples/integrations-playground/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Lorem from '../components/Lorem.astro';
 import Link from '../components/Link.jsx';
+import SolidCounter from '../components/SolidCounter.jsx';
 import '../components/Test.js';
 import '../components/Counter.js';
 ---
@@ -18,11 +19,10 @@ import '../components/Counter.js';
       Colors changing = partytown is enabled
     </h2>
 		<my-counter client:load></my-counter>
+    <SolidCounter client:load></SolidCounter>
     <Link to="/foo" text="Go to Page 2" />
 		<Lorem />
 		<calc-add num={33}></calc-add>
-
-
     <script type="text/partytown">
       // Remove `type="text/partytown"` to see this block the page
       // and cause the page to become unresponsive

packages/astro/src/runtime/server/index.ts

@@ -201,11 +201,20 @@ Did you mean to add ${formatList(probableRendererNames.map((r) => '`' + r + '`')
 	// Call the renderers `check` hook to see if any claim this component.
 	let renderer: SSRLoadedRenderer | undefined;
 	if (metadata.hydrate !== 'only') {
+		let error;
 		for (const r of renderers) {
+			try {
 				if (await r.ssr.check(Component, props, children)) {
 					renderer = r;
 					break;
 				}
+			} catch (e) {
+				error ??= e;
+			}
+		}
+
+		if (error) {
+			throw error;
 		}
 
 		if (!renderer && typeof HTMLElement === 'function' && componentIsHTMLElement(Component)) {

packages/integrations/solid/server.js

@@ -2,12 +2,8 @@ import { renderToString, ssr, createComponent } from 'solid-js/web';
 
 function check(Component, props, children) {
 	if (typeof Component !== 'function') return false;
-	try {
 	const { html } = renderToStaticMarkup(Component, props, children);
 	return typeof html === 'string';
-	} catch (err) {
-		return false;
-	}
 }
 
 function renderToStaticMarkup(Component, props, children) {

pnpm-lock.yaml

@@ -245,6 +245,7 @@ importers:
       '@astrojs/partytown': ^0.1.2
       '@astrojs/react': ^0.1.1
       '@astrojs/sitemap': ^0.1.0
+      '@astrojs/solid-js': 0.1.2
       '@astrojs/tailwind': ^0.2.1
       '@astrojs/turbolinks': ^0.1.2
       '@webcomponents/template-shadowroot': ^0.1.0
@@ -253,7 +254,7 @@ importers:
       preact: ^10.7.1
       react: ^18.0.0
       react-dom: ^18.0.0
-      solid-js: ^1.3.16
+      solid-js: ^1.3.6
       svelte: ^3.47.0
       vue: ^3.2.33
     dependencies:
@@ -262,7 +263,6 @@ importers:
       preact: 10.7.1
       react: 18.0.0
       react-dom: 18.0.0_react@18.0.0
-      solid-js: 1.3.16
       svelte: 3.47.0
       vue: 3.2.33
     devDependencies:
@@ -270,9 +270,11 @@ importers:
       '@astrojs/partytown': link:../../packages/integrations/partytown
       '@astrojs/react': link:../../packages/integrations/react
       '@astrojs/sitemap': link:../../packages/integrations/sitemap
+      '@astrojs/solid-js': link:../../packages/integrations/solid
       '@astrojs/tailwind': link:../../packages/integrations/tailwind
       '@astrojs/turbolinks': link:../../packages/integrations/turbolinks
       astro: link:../../packages/astro
+      solid-js: 1.3.16
 
   examples/minimal:
     specifiers: