feat: add playground

.gitignore

@@ -9,3 +9,4 @@ lib-cov
 logs
 node_modules
 temp
+.astro

package.json

@@ -44,7 +44,7 @@
     "fix": "eslint --fix . && prettier --write .",
     "prepublishOnly": "nr build",
     "test": "vitest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --build ."
   },
   "devDependencies": {
     "@antfu/ni": "^0.22.0",

packages/astrobook/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "astrobook",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "description": "",
+  "author": "ocavue <[email protected]>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/ocavue",
+  "homepage": "https://github.com/ocavue/astrobook#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ocavue/astrobook.git"
+  },
+  "bugs": "https://github.com/ocavue/astrobook/issues",
+  "keywords": [],
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {},
+  "devDependencies": {
+    "@types/node": "^20.14.13",
+    "tsup": "^8.2.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
+    "vitest": "^2.0.5"
+  }
+}

playground/astro.config.mjs

@@ -0,0 +1,18 @@
+import preact from '@astrojs/preact'
+import react from '@astrojs/react'
+import solid from '@astrojs/solid-js'
+import svelte from '@astrojs/svelte'
+import vue from '@astrojs/vue'
+import { defineConfig } from 'astro/config'
+
+// https://astro.build/config
+export default defineConfig({
+  // Enable many frameworks to support all different kinds of components.
+  integrations: [
+    preact({ include: ['**/preact/*'] }),
+    solid({ include: ['**/solid/*'] }),
+    react({ include: ['**/react/*'] }),
+    svelte(),
+    vue(),
+  ],
+})

playground/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "astrobook-playground",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/preact": "^3.5.1",
+    "@astrojs/react": "^3.6.1",
+    "@astrojs/solid-js": "^4.4.0",
+    "@astrojs/svelte": "^5.7.0",
+    "@astrojs/vue": "^4.5.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.13.0",
+    "preact": "^10.23.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "solid-js": "^1.8.19",
+    "svelte": "^4.2.18",
+    "vue": "^3.4.35"
+  }
+}

playground/src/components/preact/PreactCounter.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource preact */
+
+import type { ComponentChildren } from 'preact'
+import { useState } from 'preact/hooks'
+
+/** A counter written with Preact */
+export function PreactCounter({ children }: { children?: ComponentChildren }) {
+  const [count, setCount] = useState(0)
+  const add = () => setCount((i) => i + 1)
+  const subtract = () => setCount((i) => i - 1)
+
+  return (
+    <>
+      <div class="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div class="counter-message">{children}</div>
+    </>
+  )
+}

playground/src/components/react/ReactCounter.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource react */
+
+import { useState, type ReactNode } from 'react'
+
+/** A counter written with React */
+export function Counter({ children }: { children?: ReactNode }) {
+  const [count, setCount] = useState(0)
+  const add = () => setCount((i) => i + 1)
+  const subtract = () => setCount((i) => i - 1)
+
+  return (
+    <>
+      <div className="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div className="counter-message">{children}</div>
+    </>
+  )
+}

playground/src/components/solid/SolidCounter.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource solid-js */
+
+import { createSignal, type JSX } from 'solid-js'
+
+/** A counter written with Solid */
+export default function SolidCounter(props: { children?: JSX.Element }) {
+  const [count, setCount] = createSignal(0)
+  const add = () => setCount(count() + 1)
+  const subtract = () => setCount(count() - 1)
+
+  return (
+    <>
+      <div id="solid" class="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count()}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div class="counter-message">{props.children}</div>
+    </>
+  )
+}

playground/src/components/svelte/SvelteCounter.svelte

@@ -0,0 +1,23 @@
+<!-- @component
+A counter written with Svelte
+-->
+<script lang="ts">
+	let count = 0;
+
+	function add() {
+		count += 1;
+	}
+
+	function subtract() {
+		count -= 1;
+	}
+</script>
+
+<div class="counter">
+	<button on:click={subtract}>-</button>
+	<pre>{count}</pre>
+	<button on:click={add}>+</button>
+</div>
+<div class="counter-message">
+	<slot />
+</div>

playground/src/components/vue/VueCounter.vue

@@ -0,0 +1,33 @@
+<template>
+  <!--
+		Seeing type errors on the word `class`?
+		This unfortunately happens because @types/react's JSX definitions leak into every file due to being declared globally.
+		There's currently no way to prevent this when using both Vue and React with TypeScript in the same project.
+		You can read more about this issue here: https://github.com/johnsoncodehk/volar/discussions/592
+	-->
+  <div class="counter">
+    <button @click="subtract()">-</button>
+    <pre>{{ count }}</pre>
+    <button @click="add()">+</button>
+  </div>
+  <div class="counter-message">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+export default {
+  setup() {
+    const count = ref(0)
+    const add = () => (count.value = count.value + 1)
+    const subtract = () => (count.value = count.value - 1)
+
+    return {
+      count,
+      add,
+      subtract,
+    }
+  },
+}
+</script>

playground/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

playground/src/pages/index.astro

@@ -0,0 +1,48 @@
+---
+// Style Imports
+import '../styles/global.css';
+
+// Component Imports
+// For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported!
+import * as react from '../components/react/ReactCounter';
+import { PreactCounter } from '../components/preact/PreactCounter';
+import SolidCounter from '../components/solid/SolidCounter';
+
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/basics/astro-components/
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+	</head>
+	<body>
+		<main>
+			<react.Counter client:visible>
+				<h1>Hello from React!</h1>
+			</react.Counter>
+
+			<PreactCounter client:visible>
+				<h1>Hello from Preact!</h1>
+			</PreactCounter>
+
+			<SolidCounter client:visible>
+				<h1>Hello from Solid!</h1>
+			</SolidCounter>
+
+			<VueCounter client:visible>
+				<h1>Hello from Vue!</h1>
+			</VueCounter>
+
+			<SvelteCounter client:visible>
+				<h1>Hello from Svelte!</h1>
+			</SvelteCounter>
+		</main>
+	</body>
+</html>

playground/src/styles/global.css

@@ -0,0 +1,21 @@
+html,
+body {
+  font-family: system-ui;
+  margin: 0;
+}
+
+body {
+  padding: 2rem;
+}
+
+.counter {
+  display: grid;
+  font-size: 2em;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 2em;
+  place-items: center;
+}
+
+.counter-message {
+  text-align: center;
+}

playground/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true
+  }
+}