astro-typst playground

#let jsx = s => html.elem("script", attrs: ("data-jsx": s))

// you can customize the syntax as you like, just make sure it's in the above format
// for example, as code block
#let jsx2 = cb => html.elem("script", attrs: ("data-jsx": cb.text))

#import "_lib.typ": typst

=== JSX from Typst!

#jsx("import Counter from '../components/Counter.astro'")

#jsx2[```jsx
<Counter initialCount={10} message='typst' />
```]

---
export type Props = {
  initialCount: number;
  message: string;
};

const { initialCount, message } = Astro.props;

let count = initialCount;
---

<div>
  <p>Counter: <span id="count">{count}</span></p>
  <button id="increment">Increment</button>
  <button id="msg">Alert</button>
</div>

<script is:inline define:vars={{ message }}>
  const button = document.querySelector("button#increment");
  const p = document.querySelector("#count");
  button?.addEventListener("click", () => {
    p.textContent = (parseInt(p.textContent) + 1).toString();
  });
  const msgBtn = document.querySelector("button#msg");
  msgBtn?.addEventListener("click", () => {
    alert(`Message from ${message}!`);
  });
</script>

---
import ConfettiBtn from "../components/ConfettiBtn.tsx";
---
<ConfettiBtn client:only />

import React, { useState } from "react";
import Confetti from "react-confetti-explosion";

export default () => {
  const [isConfettiRunning, setIsConfettiRunning] = useState(false);
  return (
    <div>
      <button
        disabled={isConfettiRunning}
        onClick={() => {
          setIsConfettiRunning(!isConfettiRunning)
        }}
      >
        Click to trigger Confetti!
      </button>
      {isConfettiRunning && (
        <Confetti onComplete={() => setIsConfettiRunning(false)} />
      )}
    </div>
  );
};