diff options
Diffstat (limited to 'examples/integrations-playground/src')
3 files changed, 27 insertions, 6 deletions
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> |