diff options
| author |  Jonas Luebbers <jonas@jonasluebbers.com>
| 2022-05-11 12:23:34 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-05-11 10:23:34 -0600 |
| commit | abc5b219bb58c22b680da0486bc2b779e6661dd8 (patch) | |
| tree | 8a6415ce274b919de53a85501e138ae125a55b3a /examples/integrations-playground | |
| parent | 380acd23de6c0ccd1237d5a99a0af8641d17f4fa (diff) | |
| download | astro-abc5b219bb58c22b680da0486bc2b779e6661dd8.tar.gz astro-abc5b219bb58c22b680da0486bc2b779e6661dd8.tar.zst astro-abc5b219bb58c22b680da0486bc2b779e6661dd8.zip | |
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
Diffstat (limited to 'examples/integrations-playground')
5 files changed, 34 insertions, 11 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> |