Upgrade to the latest react-spa template using @servicestack/razor

Author: mythz

LICENSE

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --open",
-    "dtos": "x ts",
+    "dtos": "npx get-dtos ts",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
@@ -15,6 +15,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-slot": "^1.2.2",
     "@servicestack/client": "^2.1.11",
+    "@servicestack/react": "^2.0.13",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",

MyApp.Client/package.json

@@ -173,7 +173,7 @@ export default ({ value }:Props) => {
     }, [name])
 
     return (<div className="my-8 max-w-fit mx-auto">
-      <TextInput value={name} onChange={e => setName(e.target.value)} />
+      <TextInput value={name} onChange={setName} />
       <b className="my-2 block text-center text-lg">{result}</b>
     </div>)
 }

MyApp.Client/src/_posts/2023-02-01_javascript.mdx

@@ -174,7 +174,7 @@ export default ({ value }:Props) => {
     }, [name])
 
     return (<div className="my-8 max-w-fit mx-auto">
-      <TextInput value={name} onChange={(e) => setName(e.target.value)}/>
+      <TextInput value={name} onChange={setName}/>
       <b className="my-2 block text-center text-lg">{result}</b>
     </div>)
 }

MyApp.Client/src/_posts/2024-02-28_markdown-components-in-react.mdx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState, useEffect } from "react"
+import { useState, useEffect } from "react"
 import { JsonServiceClient } from "@servicestack/client"
 import { TextInput } from "@servicestack/react"
 import { Hello } from "@/dtos"
@@ -19,7 +19,7 @@ export default ({ value }:Props) => {
     }, [name])
 
     return (<div className="my-8 max-w-fit mx-auto">
-        <TextInput value={name} onChange={(value: string | number) => setName(String(value))} />
+        <TextInput id="name" value={name} onChange={setName} />
         <b className="my-2 block text-center text-lg">{result}</b>
     </div>)
 }