diff options
| -rw-r--r-- | examples/integrations-playground/astro.config.mjs | 7 | ||||
| -rw-r--r-- | examples/integrations-playground/package.json | 5 | ||||
| -rw-r--r-- | examples/integrations-playground/src/components/Link.jsx | 3 | ||||
| -rw-r--r-- | examples/integrations-playground/src/components/SolidCounter.jsx | 18 | ||||
| -rw-r--r-- | examples/integrations-playground/src/pages/index.astro | 12 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/index.ts | 15 | ||||
| -rw-r--r-- | packages/integrations/solid/server.js | 8 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 6 |
8 files changed, 52 insertions, 22 deletions
diff --git a/examples/integrations-playground/astro.config.mjs b/examples/integrations-playground/astro.config.mjs index a1f21fe0b..2859263ad 100644 --- a/examples/integrations-playground/astro.config.mjs +++ b/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()] +});
\ No newline at end of file diff --git a/examples/integrations-playground/package.json b/examples/integrations-playground/package.json index 023ae1c07..af39d140e 100644 --- a/examples/integrations-playground/package.json +++ b/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" } diff --git a/examples/integrations-playground/src/components/Link.jsx b/examples/integrations-playground/src/components/Link.jsx index 2758df130..040d112c3 100644 --- a/examples/integrations-playground/src/components/Link.jsx +++ b/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>; } diff --git a/examples/integrations-playground/src/components/SolidCounter.jsx b/examples/integrations-playground/src/components/SolidCounter.jsx new file mode 100644 index 000000000..4453b881c --- /dev/null +++ b/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> + </> + ); +} diff --git a/examples/integrations-playground/src/pages/index.astro b/examples/integrations-playground/src/pages/index.astro index 2ee717d6a..06c9aa3d8 100644 --- a/examples/integrations-playground/src/pages/index.astro +++ b/examples/integrations-playground/src/pages/index.astro @@ -1,8 +1,9 @@ --- 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'; +import '../components/Counter.js'; --- <!DOCTYPE html> @@ -14,20 +15,19 @@ import '../components/Counter.js'; <body> <h1 class="px-4 py-4">Test app</h1> <h2 class="partytown-status"> - <strong>Party Mode!</strong> + <strong>Party Mode!</strong> 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 console.log('start partytown blocking script') - const now = Date.now() + const now = Date.now() let count = 1; while (Date.now() - now < 10000) { if (Date.now() - now > count * 1000) { @@ -46,7 +46,7 @@ import '../components/Counter.js'; </script> <style> h1, h2 { - color: blue; + color: blue; } </style> </body> diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index 73c13c139..13d408f97 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -201,13 +201,22 @@ 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) { - if (await r.ssr.check(Component, props, children)) { - renderer = r; - break; + 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)) { const output = renderHTMLElement(result, Component as typeof HTMLElement, _props, slots); diff --git a/packages/integrations/solid/server.js b/packages/integrations/solid/server.js index 636fa50f6..dc4f88227 100644 --- a/packages/integrations/solid/server.js +++ b/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; - } + const { html } = renderToStaticMarkup(Component, props, children); + return typeof html === 'string'; } function renderToStaticMarkup(Component, props, children) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8cc31f697..29b9251f0 100644 --- a/pnpm-lock.yaml +++ b/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: |