दस्तावेज़/ढाँचे में अंतर

Solid

नेक्सी सर्वर पर 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__/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(), जेएसएक्स के अंदर, इसके ऊपर किसी वेरिएबल में नहीं।
• प्रॉप्स को props.start के रूप में पढ़ें। डिस्ट्रक्चरिंग { 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");

यूआरएल पहुंच

सभी स्थान हुक रिटर्न एक्सेसर्स:

• usePathname(): वर्तमान पथ
• useParams(): गतिशील खंड
• useSearchParams(): क्वेरी स्ट्रिंग
• useLocation(): पूर्ण स्थान वस्तु

अगले चरण

• दृश्य: उन स्वरूपों की तुलना करें जिनका उपयोग पृष्ठ कर सकता है
• फ्रंटएंड: Vite और क्लाइंट बिल्ड

पृष्ठ को Markdown के रूप में कॉपी करें GitHub पर संपादित करें