ডকুমেন্টেশন/ফ্রেমওয়ার্ক পার্থক্য

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__/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>  );}

দ্বীপপুঞ্জ

সার্ভার মোডে, একটি .nexy ফাইলে আমদানি করা একটি Solid উপাদান হল একটি দ্বীপ।

আমদানি করা হচ্ছে

.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-এ সম্পাদনা করুন