chore: implementation to test basic islands

Author: barelyhuman

playground/.gitignore

@@ -25,3 +25,5 @@ dist-ssr
 
 .env*
 !.env.example
+
+/.islands

playground/package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.9.1",
+    "@tailwindcss/forms": "^0.5.9",
     "@types/node": "^20.16.10",
     "adex": "workspace:*",
     "autoprefixer": "^10.4.20",

playground/src/components/FormIsland.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export function ListIsland() {
+  const [data, setData] = useState([])
+
+  useEffect(() => {
+    setData([1, 2, 3])
+  }, [])
+
+  return (
+    <div>
+      <ul>
+        {data.map(d => (
+          <li>{d}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}

playground/src/components/ListIsland.tsx

@@ -0,0 +1,14 @@
+export function FormIsland() {
+  const onSubmit = e => {
+    e.preventDefault()
+    alert('sumbitted')
+  }
+  return (
+    <div class="flex">
+      <form class="flex-col gap-2" onSubmit={onSubmit}>
+        <input name="name" />
+        <button>Save</button>
+      </form>
+    </div>
+  )
+}

playground/src/pages/islands-test.tsx

@@ -0,0 +1,11 @@
+import { ListIsland } from '../components/FormIsland'
+import { FormIsland } from '../components/ListIsland'
+
+export default function IslandsTest() {
+  return (
+    <>
+      <FormIsland />
+      <ListIsland />
+    </>
+  )
+}

playground/tailwind.config.js

@@ -1,3 +1,4 @@
+import forms from '@tailwindcss/forms'
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
@@ -7,5 +8,5 @@ export default {
       sans: 'Inter',
     },
   },
-  plugins: [],
+  plugins: [forms],
 }

playground/tsconfig.json

@@ -2,6 +2,8 @@
   "compilerOptions": {
     "allowJs": true,
     "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "moduleResolution": "Node",
     "paths": {
       "adex": ["../adex/vite.js"],

playground/vite.config.js

@@ -7,7 +7,7 @@ import { providers } from 'adex/fonts'
 export default defineConfig({
   plugins: [
     adex({
-      islands: false,
+      islands: true,
       fonts: {
         providers: [providers.google()],
         families: [