دستاویزات/فریم ورک کے اختلافات

Svelte

Nexy سرور پر Svelte 5 اجزاء پیش کرتا ہے، پھر Svelte انہیں براؤزر میں لے جاتا ہے۔ صفحات، ترتیب، جزیرے اور اعمال ہر فریم ورک میں ایک جیسے ہیں: یہ صفحہ سیٹ اپ کا احاطہ کرتا ہے، پھر وہ حصے جو مشترکہ معاہدوں سے مختلف ہوتے ہیں۔

ایک پروجیکٹ شروع کریں۔

nx new my-app --template web-fbr-svelte

nx new my-app --template web-modular-svelte

ٹیمپلیٹ ایک سرور موڈ پروجیکٹ ہے جس میں Svelte جزائر ہیں۔ اس کے بجائے اشارے کا جواب دینے کے لیے بغیر کسی ٹیمپلیٹ کے nx new my-app چلائیں: روٹر، پروجیکٹ کی قسم، آیا کلائنٹ سائیڈ روٹنگ استعمال کرنا ہے، پھر فریم ورک۔

موجودہ پروجیکٹ میں Svelte کو فعال کریں۔

from nexy.core.models import NexyConfigModelfrom nexy.frontend import svelte  class NexyConfig(NexyConfigModel):    useFF = svelte()    useAliases = {"@": "src"}

import { defineConfig } from "vite";import { svelte } from "@sveltejs/vite-plugin-svelte";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), svelte()],  customLogger: nexy.log(),});

nx new اس فائل کو لکھتے ہیں۔ Nexy خود __nexy__/vite.ts لکھتا ہے، اس لیے اس میں ترمیم نہ کریں۔

قواعد

• Svelte 5. اجزاء Runes کا استعمال کرتے ہیں: $props()، $state()، اور بچوں کے لیے ٹکڑے۔
• فی پروجیکٹ ایک فریم ورک useFF بالکل ایک فریم ورک لیتا ہے۔ useFF = [svelte(), vue()] شروع ہونے پر سرور کو روکتا ہے۔
• ایک جزو فی فائل آپ جس نام کے تحت .svelte فائل درآمد کرتے ہیں وہ صرف وہی ٹیگ ہے جو آپ لکھتے ہیں۔

<script lang="ts"></script> <h1>Hello</h1>

<script lang="ts">  let { slug }: { slug: string } = $props();</script> <h1>{slug}</h1>

<script lang="ts">  import type { Snippet } from "svelte";  let { children }: { children?: Snippet } = $props();</script> <html>  <body>    <header>My app</header>    <main>{@render children?.()}</main>  </body></html>

جزائر

سرور موڈ میں، .nexy فائل میں درآمد کردہ ایک Svelte جز ایک جزیرہ ہے۔

درآمد کرنا

.nexy فائل کے فرنٹ میٹر میں اجزاء درآمد کریں:

---from "@/components/Counter.svelte" import Counter---<Counter start=3 />

---from "@/components/Counter.svelte" import Counter---<Counter start=3 />

ہائیڈریشن کی ہدایات

جزیرہ ہائیڈریٹ ہونے پر کنٹرول کرنے کے لیے directive سہارے کا استعمال کریں:

• client:load (پہلے سے طے شدہ): فوری طور پر
• client:idle: جب براؤزر بیکار ہو۔
• client:visible: جب یہ منظر میں سکرول کرتا ہے۔
• client:media: جب میڈیا کا سوال مماثل ہو۔

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

کالنگ اعمال

ایکشن کال کی حالت کو منظم کرنے کے لیے useAction ہک کا استعمال کریں۔ Svelte میں، یہ ایک اسٹور لوٹاتا ہے ($ کے ساتھ پڑھیں)۔

<script lang="ts">  import { useAction } from "@nexy/client";  import { add_todo } from "@nexy/actions";   let title = $state("");  const save = useAction(add_todo, { onSuccess: () => (title = "") });</script> <form onsubmit={(e) => { e.preventDefault(); save.run({ title }); }}>  <input bind:value={title} />  <button disabled={$save.pending}>Add</button></form>

نیویگیشن

کلائنٹ سائڈ ٹرانزیشن کے لیے Link جز کا استعمال کریں:

<script lang="ts">  import Link from "@nexy/Link.svelte";</script> <Link href="/about" activeClass="active">About</Link>

پروگرامیٹک نیویگیشن کے لیے، router آبجیکٹ @nexy/client سے استعمال کریں:

import { router } from "@nexy/client"; router.push("/dashboard");

URL تک رسائی

تمام مقام کا ڈیٹا اسٹورز کے طور پر فراہم کیا جاتا ہے:

• $pathname: موجودہ راستہ
• $params: متحرک طبقات
• $searchParams: استفسار کی تار
• $location: مکمل مقام آبجیکٹ

اگلے اقدامات

• آراء: ان فارمیٹس کا موازنہ کریں جو صفحہ استعمال کر سکتا ہے۔
• فرنٹ اینڈ : Vite اور کلائنٹ کی تعمیر

صفحہ Markdown کے طور پر کاپی کریں GitHub پر ترمیم کریں