feat(site): update examples

.changeset/three-students-grin.md

@@ -0,0 +1,5 @@
+---
+"@dreamkit/site": patch
+---
+
+Update examples

packages/site/src/pages/api/$route/_examples/optional-search-param.tsx

@@ -4,21 +4,16 @@ import { $route, Link, s } from "dreamkit";
 export const homeRoute = $route.path("/").create(() => (
   <>
     {/* @ts-expect-error */}
-    <Link href="/section">section</Link>
+    <Link href="/section">link without params</Link>
+    <br />
     {/* @ts-expect-error */}
     <Link href="/section" params={{ name: "test" }}>
-      section with params
+      link with params
     </Link>
   </>
 ));
 
 export const sectionRoute = $route
   .path("/section")
   .params({ name: s.string().optional() })
-  .create(({ params }) => {
-    return (
-      <ul>
-        <li>name: {params.name}</li>
-      </ul>
-    );
-  });
+  .create(({ params }) => <>name: {params.name}</>);

packages/site/src/pages/api/$route/_examples/path-param.tsx

@@ -4,11 +4,12 @@ import { $route, Link, s } from "dreamkit";
 export const homeRoute = $route.path("/").create(() => (
   <>
     {/* @ts-expect-error */}
-    <Link href="/user" params={{ id: 1 }}>
+    <Link href="/user/:id" params={{ id: 1 }}>
       user 1
     </Link>
+    <br />
     {/* @ts-expect-error */}
-    <Link href="/user" params={{ id: 2 }}>
+    <Link href="/user/:id" params={{ id: 2 }}>
       user 2
     </Link>
   </>

packages/site/src/pages/api/$route/_examples/synced-search-params.tsx

@@ -1,58 +1,34 @@
 // title: Synced search params
-import { type InferObjectProps, Input, $route, s } from "dreamkit";
-import { createResource, For } from "solid-js";
-
-const users = Array.from({ length: 10 }).map((_, i) => ({
-  id: i + 1,
-  name: `User ${i + 1}`,
-  country: { code: ["US", "ES"][i % 2] },
-}));
-
-const params = {
-  id: s.number().optional(),
-  name: s.string().optional(),
-  country: s
-    .object({
-      code: s.string().optional(),
-    })
-    .optional(),
-};
-
-function fetchUsers(input: InferObjectProps<typeof params>) {
-  const name =
-    typeof input.name === "string" ? input.name.toLowerCase() : undefined;
-  return users.filter((user) => {
-    if (input.id !== undefined && user.id !== input.id) return false;
-    if (name && !user.name.toLowerCase().includes(name)) return false;
-    if (
-      input.country?.code !== undefined &&
-      user.country.code !== input.country.code
-    )
-      return false;
-    return true;
-  });
-}
+import { Input, $route, s } from "dreamkit";
 
 export default $route
   .path("/")
-  .params(params)
-  .onParamsError({ value: { id: 1 } })
+  .params(
+    s
+      .object({
+        name: s.string(),
+        country: s.object({
+          code: s.string(),
+        }),
+      })
+      .deepPartial(),
+  )
   .create(({ params, setParams }) => {
-    const [users] = createResource(
-      () => ({ ...params, country: { ...params.country } }),
-      fetchUsers,
-    );
-
     return (
-      <div>
-        <form>
+      <>
+        <i>Look at the address bar of your browser.</i>
+        <p>
           <Input
+            placeholder="name"
             value={params.name ?? ""}
             onChange={(name) =>
               setParams({ ...params, name: name || undefined })
             }
           />
+        </p>
+        <p>
           <Input
+            placeholder="country code"
             value={params.country?.code ?? ""}
             onChange={(code) =>
               setParams({
@@ -61,16 +37,7 @@ export default $route
               })
             }
           />
-        </form>
-        <ul>
-          <For each={users()} fallback={<li>No results</li>}>
-            {(user) => (
-              <li>
-                {user.id}. {user.name} ({user.country.code})
-              </li>
-            )}
-          </For>
-        </ul>
-      </div>
+        </p>
+      </>
     );
   });

packages/site/src/pages/api/create-action/_examples/basic-usage.tsx

@@ -1,19 +1,35 @@
 // title: Basic usage
-import { $route, createAction } from "dreamkit";
+import { $api, $route, createAction } from "dreamkit";
 
-export default $route.path("/").create(() => {
-  const start = createAction(
-    () =>
-      new Promise<number>((resolve) => {
-        setTimeout(() => resolve(Date.now()), 1000);
-      }),
-  );
-  return (
-    <>
-      <p>{start.result}</p>
-      <button onClick={start} disabled={start.running}>
-        Start
-      </button>
-    </>
-  );
+export const start = $api.title("Start").create(async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  const id = Date.now();
+  if (id % 2) throw new Error("Random error");
+  return id;
 });
+
+export default $route
+  .path("/")
+  .api({ start })
+  .create(({ api }) => {
+    const start = createAction(api.start);
+    return (
+      <>
+        <ul>
+          <li>state: {start.state}</li>
+          <li>result: {start.result}</li>
+          <li>error: {start.error?.message}</li>
+        </ul>
+        <button
+          onClick={start}
+          disabled={start.running}
+          children={api.start.title}
+        />
+        <button
+          onClick={start.abort}
+          disabled={!start.running}
+          children="abort"
+        />
+      </>
+    );
+  });

packages/site/src/pages/api/create-action/_examples/predefined-params.tsx

@@ -1,21 +1,42 @@
 // title: Predefined params
-import { createAction, Input } from "dreamkit";
+import { $api, $route, createAction, Input, s } from "dreamkit";
 import { createEffect, createSignal } from "solid-js";
 
-function remove(key: string) {
-  console.log("key removed", key);
-}
+const remove = $api
+  .title("Remove")
+  .params({
+    key: s.title("Key").string(),
+  })
+  .create(({ key }) => {
+    console.log("Received", { key });
+  });
 
-export default function App() {
-  const [id, setKey] = createSignal("");
-  const $remove = createAction(remove).with(() => id());
-  createEffect(() => $remove.state === "success" && $remove.clear());
-  return (
-    <>
-      <Input value={id} onChange={setKey} />
-      <button onClick={$remove} disabled={$remove.running}>
-        Remove
-      </button>
-    </>
-  );
-}
+export default $route
+  .path("/")
+  .api({ remove })
+  .create(({ api }) => {
+    const [key, setKey] = createSignal("");
+    const remove = createAction(api.remove).with(() => ({ key: key() }));
+    createEffect(() => {
+      if (remove.state === "success") {
+        setKey("");
+        remove.clear();
+      }
+    });
+    return (
+      <>
+        <p>
+          <Input
+            placeholder={api.remove.params.key.options.title}
+            value={key}
+            onChange={setKey}
+          />
+        </p>
+        <button
+          onClick={remove}
+          disabled={remove.running}
+          children={api.remove.title}
+        />
+      </>
+    );
+  });

packages/site/src/pages/api/input/_examples/controlled-checkbox.tsx

@@ -1,9 +1,13 @@
-// title: Controlled number
+// title: Controlled checkbox
 import { $route, Input } from "dreamkit";
-import { createEffect, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
 
 export default $route.path("/").create(() => {
   const [bool, setBool] = createSignal(false);
-  createEffect(() => console.log("bool", bool()));
-  return <Input type="checkbox" value={bool} onChange={setBool} />;
+  return (
+    <>
+      <p>value: {JSON.stringify(bool())}</p>
+      <Input type="checkbox" value={bool} onChange={setBool} />
+    </>
+  );
 });

packages/site/src/pages/api/input/_examples/controlled-file.tsx

@@ -5,5 +5,10 @@ import { createEffect, createSignal } from "solid-js";
 export default $route.path("/").create(() => {
   const [file, setFile] = createSignal<File | null>(new File([], "file.txt"));
   createEffect(() => console.log("file", file()));
-  return <Input type="file" value={file} onChange={setFile} />;
+  return (
+    <>
+      <p>value: {file()?.name}</p>
+      <Input type="file" value={file} onChange={setFile} />
+    </>
+  );
 });

packages/site/src/pages/api/input/_examples/controlled-number.tsx

@@ -6,12 +6,15 @@ export default $route.path("/").create(() => {
   const [number, setNumber] = createSignal<number | null>(0);
   createEffect(() => console.log("number", number()));
   return (
-    <Input
-      type="number"
-      value={number}
-      onChange={(value) => {
-        if (value === null || value < 10) setNumber(value);
-      }}
-    />
+    <>
+      <p>value: {JSON.stringify(number())}</p>
+      <Input
+        type="number"
+        value={number}
+        onChange={(value) => {
+          if (value === null || value < 100) setNumber(value);
+        }}
+      />
+    </>
   );
 });

packages/site/src/pages/api/input/_examples/controlled-text.tsx

@@ -5,6 +5,9 @@ import { createSignal } from "solid-js";
 export default $route.path("/").create(() => {
   const [name, setName] = createSignal("");
   return (
-    <Input value={name()} onChange={(value) => setName(value.toUpperCase())} />
+    <>
+      <p>value: {name()}</p>
+      <Input value={name} onChange={(value) => setName(value.toUpperCase())} />
+    </>
   );
 });

packages/site/src/pages/api/ioc/_examples/basic-usage.tsx

@@ -1,33 +1,31 @@
 // title: Basic usage
-import { context, IocClass, ServiceClass } from "dreamkit";
+import { $route, context, IocClass } from "dreamkit";
 
-class Child extends IocClass({}) {
-  process(value: string) {
-    return value;
-  }
+abstract class ThirdModel {
+  abstract fetch(): string;
 }
 
-class CustomChild extends Child {
-  override process(value: string): string {
-    return value.toUpperCase();
+class MyModel extends IocClass({ ThirdModel }) {
+  fetch() {
+    return this.thirdModel.fetch();
   }
 }
 
-class Parent extends IocClass({ Child }) {
-  process(value: string) {
-    return this.child.process(value);
+export default $route.path("/").create(() => {
+  class ThirdModelImpl extends ThirdModel {
+    override fetch() {
+      return "resolved";
+    }
   }
-}
-
-export class TestService extends ServiceClass({ Parent }) {
-  onStart() {
-    const value0 = this.parent.process("hello");
-    const value1 = new Parent({ child: new Child() }).process("hello");
-    const value2 = context
-      .fork()
-      .register(Child, { useClass: CustomChild })
-      .resolve(Parent)
-      .process("world");
-    console.log([value0, value1, value2]); // ["hello", "WORLD"]
-  }
-}
+  const manualModel = new MyModel({ thirdModel: new ThirdModelImpl() });
+  const autoModel = context
+    .fork()
+    .register(ThirdModel, { value: new ThirdModelImpl() })
+    .resolve(MyModel);
+  return (
+    <>
+      <p>{manualModel.fetch()}</p>
+      <p>{autoModel.fetch()}</p>
+    </>
+  );
+});