دستاویزاتمشترکہ معاہدے

اعمال اور نیویگیشن

Nexy میں تعامل کو Actions اور نیویگیشن کے متحد نظام کے ذریعے سنبھالا جاتا ہے، اس بات کو یقینی بناتے ہوئے کہ فرنٹ اینڈ اور بیک اینڈ دستی API گلو کوڈ کے بغیر مطابقت پذیر رہیں۔

ایکشن معاہدہ

ایک ایکشن ایک سرور سائیڈ فنکشن ہے جو ایک میوٹیشن کو ہینڈل کرتا ہے (جیسے، ڈیٹا بیس کو اپ ڈیٹ کرنا)۔

ٹائپ شدہ ان پٹ: ایکشنز کو ٹائپ اشارے کے ساتھ Python میں بیان کیا گیا ہے۔ Nexy ایک مماثل TypeScript کلائنٹ تیار کرتا ہے، لہذا آپ کو اپنے IDE میں خودکار تکمیل اور توثیق مل جاتی ہے۔
ایٹمی عمل: ایک عمل ایک واحد POST درخواست ہے۔
رزلٹ ہینڈلنگ: ایکشن ایک ٹائپ شدہ نتیجہ لوٹاتا ہے جسے کلائنٹ UI کو اپ ڈیٹ کرنے کے لیے استعمال کر سکتا ہے۔

src/actions/todos.py

from pydantic import BaseModelfrom nexy.decorators import Action  class Todo(BaseModel):    title: str    done: bool = False  @Actionasync def add_todo(title: str) -> Todo:    return Todo(title=title)

صفحہ اسے اعلان کردہ ان پٹ Python کے ساتھ کال کرتا ہے، اور ایک ٹائپ شدہ Todo واپس ملتا ہے:

src/routes/todos.tsx

import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; export default function Todos() {  const { run, pending, data } = useAction(add_todo);  return (    <button disabled={pending} onClick={() => run({ title: "Write the docs" })}>      {data ? `Added ${data.title}` : "Add"}    </button>  );}

جز ایک منظر کا جزیرہ ہے، اور ایک کنٹرولر منظر کو واپس کرتا ہے:

src/components/Todos.tsx

import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; export function Todos() {  const { run, pending, data } = useAction(add_todo);  return (    <button disabled={pending} onClick={() => run({ title: "Write the docs" })}>      {data ? `Added ${data.title}` : "Add"}    </button>  );}

src/apps/todos_view.nexy

---from "@/components/Todos.tsx" import Todos---<Todos directive="client:load" />

کلائنٹ سائیڈ نیویگیشن

Nexy میں نیویگیشن "ذہین" ہے۔ مکمل براؤزر کو دوبارہ لوڈ کرنے کے بجائے، Nexy موجودہ صفحہ کے مواد کو تبدیل کرتا ہے جبکہ فعال لے آؤٹ کو نصب رکھتا ہے۔

Link اجزاء: کلائنٹ سائیڈ ٹرانزیشن کو انجام دینے کے لیے فریم ورک کے لیے مخصوص Link جزو کا استعمال کریں۔
پروگرامیٹک نیویگیشن: @nexy/client سے useRouter() کا استعمال کریں اور منطق کے جواب میں صفحات کو تبدیل کرنے کے لیے push() کو کال کریں (جیسے، کامیاب لاگ ان کے بعد)۔

src/components/Nav.tsx

import { Link } from "@nexy/client"; export function Nav() {  return (    <nav>      <Link href="/">Home</Link>      <Link href="/about" activeClassName="active">About</Link>    </nav>  );}

src/components/Done.tsx

import { useRouter } from "@nexy/client"; export function Done() {  const router = useRouter();  return <button onClick={() => router.push("/dashboard")}>Continue</button>;}

کوآرڈینیشن: ایکشن → نیویگیشن

سب سے عام نمونہ یہ ہے کہ کوئی عمل انجام دیا جائے اور پھر صارف کو نئے صفحہ پر لے جائیں۔

بحالی کا بہاؤ:

کلائنٹ ایک ایکشن کو کال کرتا ہے۔
ایکشن سرور پر عمل کرتا ہے اور کال کرتا ہے revalidate("/path")۔
سرور ایک x-nexy-revalidate ہیڈر کے ساتھ نتیجہ واپس کرتا ہے جس میں باسی راستوں کا نام ہوتا ہے۔
کلائنٹ نئی حالت کی عکاسی کرنے کے لیے صفحہ کے مواد کو اپ ڈیٹ کرتا ہے۔

src/actions/session.py

from nexy.decorators import Action, revalidate  @Actionasync def sign_in(email: str, password: str) -> bool:    ok = check_password(email, password)    revalidate("/dashboard")    return ok

src/routes/login.tsx

import { useAction, useRouter } from "@nexy/client";import { sign_in } from "@nexy/actions"; export default function Login() {  const router = useRouter();  const { run } = useAction(sign_in, {    onSuccess: (ok) => {      if (ok) router.push("/dashboard");    },  });  return <button onClick={() => run({ email: "ada@example.com", password: "..." })}>Sign in</button>;}

src/components/Login.tsx

import { useAction } from "@nexy/client";import { sign_in } from "@nexy/actions"; export function Login() {  const { run } = useAction(sign_in, {    onSuccess: (ok) => {      if (ok) window.location.assign("/dashboard/");    },  });  return <button onClick={() => run({ email: "ada@example.com", password: "..." })}>Sign in</button>;}

check_password کا مطلب ہے آپ کی اپنی جانچ۔ غلطیوں کے لیے ایکشنز دیکھیں، بغیر JavaScript کے فارم اور سیکیورٹی۔

فریم ورک کا نفاذ

کالنگ ایکشنز اور نیویگیٹ کرنے کا API فریم ورک کے لحاظ سے مختلف ہوتا ہے۔ اپنی منتخب ٹیکنالوجی کے لیے اختلافات گائیڈ دیکھیں:

GitHub پر ترمیم کریں