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

Solid

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

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

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

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

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

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

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

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

کلائنٹ موڈ میں لکھیں solid({ ssr: true }): Solid سرور اور براؤزر کے لیے ایک جزو کو مختلف طریقے سے مرتب کرتا ہے، اور کلائنٹ موڈ کو دونوں کی ضرورت ہوتی ہے۔ nx new اس فائل کو لکھتے ہیں۔ Nexy خود __nexy__/vite.ts لکھتا ہے، اس لیے اس میں ترمیم نہ کریں۔

اشاروں میں سوچیں۔

ایک Solid جزو کا فنکشن ایک بار چلتا ہے۔ بعد میں جو تبدیلیاں ہوتی ہیں اسے سگنل کے ذریعے پڑھا جاتا ہے، اور صرف وہ تاثرات جو اسے پڑھتے ہیں اپ ڈیٹ ہوتے ہیں:

import { createSignal } from "solid-js"; export default function Counter(props: { start?: number }) {  const [count, setCount] = createSignal(props.start ?? 0);  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;}

• سگنل کو کال کریں، count()، JSX کے اندر، اس کے اوپر متغیر میں نہیں۔
• پروپس کو بطور props.start پڑھیں۔ Destructuring { start } قدر کو ایک بار پڑھتا ہے اور اپ ڈیٹس کو کھو دیتا ہے۔
• Solid HTML اوصاف لکھتا ہے: class، for، charset، className نہیں۔

قواعد

• فی پروجیکٹ ایک فریم ورک useFF بالکل ایک فریم ورک لیتا ہے۔ useFF = [solid(), react()] شروع ہونے پر سرور کو روکتا ہے۔ useFF = solid() کے ساتھ، ہر .tsx فائل Solid ہے۔

• کوئی .mdx Solid کے ساتھ MDX React یا Preact میں مرتب کرتا ہے؛ .md صفحات کام کرتے ہیں۔

export default function Home() {  return <h1>Hello</h1>;}

import { useParams } from "@nexy/client"; export default function Post() {  const params = useParams<{ slug: string }>();  return <h1>{params().slug}</h1>;}

import type { JSX } from "solid-js"; export default function RootLayout(props: { children: JSX.Element }) {  return (    <html>      <body>        <header>My app</header>        <main>{props.children}</main>      </body>    </html>  );}

جزائر

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

درآمد کرنا

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

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

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

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

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

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

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

کالنگ اعمال

ایکشن کال کی حالت کو منظم کرنے کے لیے useAction ہک کا استعمال کریں۔ Solid میں، یہ ایکسیسرز کو واپس کرتا ہے (انہیں فنکشن کہتے ہیں)۔

import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const save = useAction(add_todo);// ...<button disabled={save.pending()}>Add</button>

نیویگیشن

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

import { Link } from "@nexy/client"; <Link href="/about">About</Link>

پروگرامیٹک نیویگیشن کے لیے، useRouter ہک استعمال کریں:

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

URL تک رسائی

تمام لوکیشن ہکس واپس آنے والے ایکسیسرز:

• usePathname(): موجودہ راستہ
• useParams(): متحرک طبقات
• useSearchParams(): استفسار کی تار
• useLocation(): مکمل مقام آبجیکٹ

اگلے اقدامات

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

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