✨ Add directive to playground to make sure it works

Author: amoutonbrady

playground/index.tsx

@@ -1,7 +1,8 @@
 import { createSignal, lazy } from 'solid-js';
 import { MetaProvider } from 'solid-meta';
 import { createApp } from 'solid-utils';
-import { Router, useRoutes, RouteDefinition, Link } from 'solid-app-router';
+import { Router, useRoutes, Link } from 'solid-app-router';
+import type { RouteDefinition } from 'solid-app-router';
 
 import test from '@@/test.txt?raw';
 import Home from '@/index';

playground/pages/index.tsx

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