chore: update playground to current Solid packages

Refresh the playground to use the current Solid beta stack and modern TypeScript/Vite settings so it matches the repo's next-branch direction.

Made-with: Cursor

Author: ryansolid

playground/hello.mdx

@@ -1,13 +1,10 @@
-import { createSignal, lazy } from 'solid-js';
-import { MetaProvider } from 'solid-meta';
-import { createApp } from 'solid-utils';
-import { Router, useRoutes, Link } from 'solid-app-router';
-import type { RouteDefinition } from 'solid-app-router';
+import { createSignal, type ParentComponent, lazy } from 'solid-js';
+import { render } from '@solidjs/web';
+import { MetaProvider } from '@solidjs/meta';
+import { Router, type RouteDefinition } from '@solidjs/router';
 
 import test from '@@/test.txt?raw';
 import Home from '@/index';
-// @ts-ignore
-import Hello from './hello.mdx';
 
 const json = await fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>
   response.json(),
@@ -29,20 +26,25 @@ const routes: RouteDefinition[] = [
   },
 ];
 
-const App = () => {
+const App: ParentComponent = (props) => {
   const [count, setCount] = createSignal(0);
-  const Route = useRoutes(routes);
 
   return (
     <>
-      <Link href="/">Home</Link>
-      <Link href="/about">About</Link>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
       <hr />
-      <Route />
+      {props.children}
       <button onClick={() => setCount(count() + 1)}>{count()}</button>
-      <Hello />
     </>
   );
 };
 
-createApp(App).use(MetaProvider).use(Router).mount('#app');
+render(
+  () => (
+    <MetaProvider>
+      <Router root={App}>{routes}</Router>
+    </MetaProvider>
+  ),
+  document.getElementById('app') as HTMLElement,
+);

playground/index.tsx

@@ -10,15 +10,13 @@
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
-    "@mdx-js/mdx": "^2.1.2",
-    "vite": "^3.0.0",
+    "vite": "7.0.6",
     "vite-plugin-solid": "link:.."
   },
   "dependencies": {
-    "solid-app-router": "^0.4.1",
-    "solid-js": "^1.6.11",
-    "solid-mdx": "^0.0.6",
-    "solid-meta": "^0.27.5",
-    "solid-utils": "^0.8.1"
+    "@solidjs/meta": "0.30.0-next.0",
+    "@solidjs/router": "0.17.0-next.1",
+    "@solidjs/web": "2.0.0-beta.4",
+    "solid-js": "2.0.0-beta.4"
   }
 }

playground/package.json

@@ -1,30 +1,27 @@
-import { Accessor, createRenderEffect, createSignal } from 'solid-js';
+import { type Accessor, createEffect, createSignal, onSettled } from 'solid-js';
 
 function model(
-  element: HTMLInputElement,
-  value: Accessor<[Accessor<string>, (value: string) => void]>,
+  value: [Accessor<string>, (value: string) => void],
 ) {
-  const [field, setField] = value();
-  createRenderEffect(() => (element.value = field()));
-  element.addEventListener('input', (e: Event & { currentTarget: HTMLInputElement }) =>
-    setField(e.currentTarget.value),
-  );
+  let element: HTMLInputElement;
+  const [field, setField] = value;
+  createEffect(field, (field) => {
+    element.value = field;
+  });
+  onSettled(() => {
+    element.addEventListener('input', (e: Event & { currentTarget: HTMLInputElement }) =>
+      setField(e.currentTarget.value),
+    );
+  })
+  return (el: HTMLInputElement) => element = el;
 }
 
 export default function Home() {
   const [name, setName] = createSignal('');
   return (
     <>
-      <input type="text" use:model={[name, setName]} />
+      <input type="text" ref={model([name, setName])} />
       <h1>Hello {name()}</h1>
     </>
   );
 }
-
-declare module 'solid-js' {
-  namespace JSX {
-    interface Directives {
-      model: [() => any, (v: any) => any];
-    }
-  }
-}