الوثائق/اختلافات الإطار

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. تستخدم المكونات الأحرف الرونية: $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>

جزر

في وضع الخادم، يكون المكون Svelte المستورد في ملف .nexy عبارة عن جزيرة.

استيراد

قم باستيراد المكونات الموجودة في الجزء الأمامي من الملف .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