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
This commit is contained in:
Jonas Luebbers
GitHub
parent
380acd23de
commit
abc5b219bb
8 changed files with 52 additions and 22 deletions
|
|
@ -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()]
|
||||
});
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
/* jsxImportSource: react */
|
||||
import React from 'react';
|
||||
|
||||
export default function Link({ to, text }) {
|
||||
return <a href={to}>{text}</a>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Reference in a new issue