SvelteKit اس میں سے تازہ ترین ہے جسے میں اگلی نسل کے ایپلیکیشن فریم ورک کہوں گا۔ یقیناً، یہ آپ کے لیے فائل پر مبنی روٹنگ، تعیناتی، اور سرور سائیڈ رینڈرنگ کے ساتھ ایک ایپلیکیشن کا سہارا دیتا ہے جو نیکسٹ نے ہمیشہ کے لیے کیا ہے۔ لیکن SvelteKit نیسٹڈ لے آؤٹس، سرور میوٹیشنز کو بھی سپورٹ کرتا ہے جو آپ کے صفحہ پر ڈیٹا کو ہم آہنگ کرتے ہیں، اور کچھ دوسری خوبیاں جن میں ہم شامل ہوں گے۔
اس پوسٹ کا مقصد ایک اعلیٰ سطحی تعارف ہے امید ہے کہ کسی ایسے شخص کے لیے جوش پیدا کرے جس نے کبھی SvelteKit کا استعمال نہیں کیا۔ یہ ایک آرام دہ دورہ ہوگا۔ اگر آپ کو پسند ہے کہ آپ کیا دیکھتے ہیں، مکمل دستاویزات یہاں ہیں۔.
کچھ طریقوں سے یہ لکھنا ایک چیلنجنگ پوسٹ ہے۔ SvelteKit ایک ہے۔ درخواست کے فریم ورک. یہ آپ کی تعمیر میں مدد کرنے کے لیے موجود ہے… ٹھیک ہے، ایپلی کیشنز۔ اس سے ڈیمو کرنا مشکل ہو جاتا ہے۔ ایک بلاگ پوسٹ میں پوری ایپلیکیشن بنانا ممکن نہیں ہے۔ تو اس کے بجائے، ہم اپنے تخیلات کو تھوڑا سا استعمال کریں گے۔ ہم ایک ایپلیکیشن کا ڈھانچہ بنائیں گے، کچھ خالی UI پلیس ہولڈرز، اور سخت کوڈ شدہ جامد ڈیٹا رکھیں گے۔ مقصد ایک حقیقی ایپلی کیشن بنانا نہیں ہے، بلکہ اس کے بجائے آپ کو یہ بتانا ہے کہ SvelteKit کے حرکت پذیر ٹکڑے کیسے کام کرتے ہیں تاکہ آپ خود اپنی ایپلی کیشن بنا سکیں۔
اس مقصد کے لیے، ہم ایک مثال کے طور پر آزمائشی اور سچی ٹو-ڈو ایپلیکیشن بنائیں گے۔ لیکن پریشان نہ ہوں، یہ ایک اور ٹو-ڈو ایپ بنانے کے بجائے SvelteKit کے کام کرنے کے طریقہ کار کو دیکھنے کے بارے میں بہت زیادہ ہوگا۔
اس پوسٹ میں ہر چیز کا کوڈ ہے۔ GitHub پر دستیاب ہے۔. یہ منصوبہ بھی ہے۔ Vercel پر تعینات لائیو ڈیمو کے لیے۔
آپ کے منصوبے کی تشکیل
ایک نئے SvelteKit پروجیکٹ کو اسپن کرنا کافی آسان ہے۔ رن npm create your-app-name
ٹرمینل میں اور سوال کا جواب دیں۔ "Skeleton Project" کو چننا یقینی بنائیں لیکن دوسری صورت میں TypeScript، ESLint، وغیرہ کے لیے جو بھی انتخاب کرنا چاہتے ہیں۔
ایک بار جب پروجیکٹ بن جائے تو چلائیں۔ npm i
اور npm run dev
اور ایک دیو سرور کو چلنا شروع کر دینا چاہیے۔ آگ لگاو localhost:5173
براؤزر میں اور آپ کو سکیلیٹن ایپ کے لیے پلیس ہولڈر کا صفحہ ملے گا۔
بنیادی روٹنگ
نوٹس routes
فولڈر کے تحت src
. یہ ہمارے تمام راستوں کا کوڈ رکھتا ہے۔ پہلے سے ہی ایک ہے۔ +page.svelte
جڑ کے مواد کے ساتھ وہاں فائل کریں۔ /
راسته. اس سے کوئی فرق نہیں پڑتا ہے کہ آپ فائل کے درجہ بندی میں کہاں ہیں، اس راستے کے اصل صفحہ کا ہمیشہ نام ہوتا ہے۔ +page.svelte
. اس کو ذہن میں رکھتے ہوئے، آئیے اس کے لیے صفحات بناتے ہیں۔ /list
, /details
, /admin/user-settings
اور admin/paid-status
اور ہر صفحہ کے لیے کچھ ٹیکسٹ پلیس ہولڈرز بھی شامل کریں۔
آپ کی فائل لے آؤٹ کچھ اس طرح نظر آنا چاہئے:
آپ کو براؤزر ایڈریس بار میں یو آر ایل کے راستے تبدیل کرکے ارد گرد نیویگیٹ کرنے کے قابل ہونا چاہیے۔
بندی
ہم اپنی ایپ میں نیویگیشن لنکس چاہیں گے، لیکن ہم یقینی طور پر اپنے بنائے ہوئے ہر صفحے پر ان کے لیے مارک اپ کاپی نہیں کرنا چاہتے۔ تو، چلو ایک بنائیں +layout.svelte
ہماری جڑ میں فائل routes
فولڈر، جسے SvelteKit تمام صفحات کے لیے عالمی ٹیمپلیٹ کے طور پر پیش کرے گا۔ آئیے اور اس میں کچھ مواد شامل کریں:
<nav> <ul> <li> <a href="/ur/">Home</a> </li> <li> <a href="/ur/list">To-Do list</a> </li> <li> <a href="/ur/admin/paid-status">Account status</a> </li> <li> <a href="/ur/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
کچھ بنیادی طرز کے ساتھ کچھ ابتدائی نیویگیشن۔ خاص اہمیت کی بات ہے۔ <slot />
ٹیگ یہ وہ جگہ ہے نوٹ وہ سلاٹ جسے آپ ویب اجزاء اور شیڈو DOM کے ساتھ استعمال کرتے ہیں۔، بلکہ ایک Svelte خصوصیت یہ بتاتی ہے کہ ہمارا مواد کہاں رکھنا ہے۔ جب کوئی صفحہ رینڈر ہوتا ہے، تو صفحہ کا مواد اس جگہ پر پھسل جائے گا جہاں سلاٹ ہے۔
اور اب ہمارے پاس کچھ نیویگیشن ہے! ہم کوئی ڈیزائن مقابلہ نہیں جیتیں گے، لیکن ہم کوشش نہیں کر رہے ہیں۔
نیسٹڈ لے آؤٹ
کیا ہوگا اگر ہم چاہتے ہیں کہ ہمارے تمام ایڈمن پیجز اس نارمل لے آؤٹ کو حاصل کریں جو ہم نے ابھی بنایا ہے لیکن ساتھ ہی کچھ چیزیں مشترکہ ہیں جو تمام ایڈمن پیجز (لیکن صرف ایڈمن پیجز) میں مشترک ہیں؟ کوئی مسئلہ نہیں، ہم ایک اور شامل کرتے ہیں۔ +layout.svelte
ہماری جڑ میں فائل admin
ڈائریکٹری، جو اس کے نیچے موجود ہر چیز سے وراثت میں ملے گی۔ آئیے ایسا کریں اور اس مواد کو شامل کریں:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
ہم ایک سرخ بینر شامل کرتے ہیں جس سے یہ ظاہر ہوتا ہے کہ یہ ایک ایڈمن صفحہ ہے اور پھر، پہلے کی طرح، a <slot />
یہ بتانا کہ ہم اپنے صفحہ کا مواد کہاں جانا چاہتے ہیں۔
رینڈرز سے پہلے کا ہمارا روٹ لے آؤٹ۔ جڑ لے آؤٹ کے اندر ہے a <slot />
ٹیگ نیسٹڈ لے آؤٹ کا مواد روٹ لے آؤٹ میں جاتا ہے۔ <slot />
. اور آخر میں، نیسٹڈ لے آؤٹ اپنی وضاحت کرتا ہے۔ <slot />
جس میں صفحہ کا مواد رینڈر ہوتا ہے۔
اگر آپ ایڈمن کے صفحات پر جاتے ہیں، تو آپ کو نیا سرخ بینر نظر آنا چاہیے:
ہمارے ڈیٹا کی وضاحت کرنا
ٹھیک ہے، آئیے کچھ اصل ڈیٹا رینڈر کریں — یا کم از کم، دیکھیں کہ ہم کچھ اصل ڈیٹا کیسے رینڈر کر سکتے ہیں۔ ڈیٹا بیس بنانے اور اس سے جڑنے کے سو طریقے ہیں۔ اگرچہ یہ پوسٹ SvelteKit کے بارے میں ہے، DynamoDB کا انتظام نہیں کر رہی، لہذا ہم اس کے بجائے کچھ جامد ڈیٹا "لوڈ" کریں گے۔ لیکن، ہم اسے پڑھنے اور اپ ڈیٹ کرنے کے لیے وہی تمام مشینری استعمال کریں گے جو آپ حقیقی ڈیٹا کے لیے استعمال کریں گے۔ ایک حقیقی ویب ایپ کے لیے، آپ جو بھی ڈیٹا بیس استعمال کرتے ہیں اس سے جڑنے اور استفسار کرنے والے فنکشنز کے ساتھ جامد ڈیٹا واپس کرنے والے فنکشنز کو تبدیل کریں۔
آئیے ایک گندگی سے متعلق سادہ ماڈیول بنائیں lib/data/todoData.ts
جو حقیقی سوالات کی نقل کرنے کے لیے مصنوعی تاخیر کے ساتھ کچھ جامد ڈیٹا واپس کرتا ہے۔ آپ یہ دیکھیں گے۔ lib
فولڈر کے ذریعے کہیں اور درآمد کیا گیا۔ $lib
. یہ اس مخصوص فولڈر کے لیے SvelteKit کی خصوصیت ہے، اور آپ بھی کر سکتے ہیں۔ اپنے اپنے عرفی نام شامل کریں۔.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
ہمارے کام کرنے والے آئٹمز کی فلیٹ صف کو واپس کرنے کے لیے ایک فنکشن، ہمارے ٹیگز کی تلاش، اور ایک فنکشن کو ایک ہی کام کو حاصل کرنے کے لیے (ہم اس آخری کو اپنے تفصیلات کے صفحہ میں استعمال کریں گے)۔
ہمارا ڈیٹا لوڈ ہو رہا ہے۔
ہم اس ڈیٹا کو اپنے Svelte صفحات میں کیسے حاصل کرتے ہیں؟ بہت سے طریقے ہیں، لیکن ابھی کے لیے، آئیے ایک بناتے ہیں۔ +page.server.js
ہماری فائل میں list
فولڈر، اور اس میں یہ مواد ڈالیں:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
ہم نے ایک کی وضاحت کی ہے۔ load()
فنکشن جو صفحہ کے لیے درکار ڈیٹا کو کھینچتا ہے۔ نوٹ کریں کہ ہم ہیں۔ نوٹ await
-ing ہماری کال کرتا ہے۔ getTodos
اور getTags
async افعال ایسا کرنے سے ڈیٹا لوڈنگ آبشار پیدا ہو جائے گا کیونکہ ہم اپنے ٹیگز لوڈ کرنے سے پہلے اپنے کام کی اشیاء کے آنے کا انتظار کرتے ہیں۔ اس کے بجائے، ہم سے خام وعدے واپس load
، اور SvelteKit ضروری کام کرتا ہے۔ await
ان.
تو، ہم اپنے صفحہ کے اجزاء سے اس ڈیٹا تک کیسے رسائی حاصل کرتے ہیں؟ SvelteKit فراہم کرتا ہے a data
اس پر ڈیٹا کے ساتھ ہمارے جزو کے لیے سہارا دیں۔ ہم اس سے اپنے کام کی اشیاء اور ٹیگز تک رسائی حاصل کریں گے۔ رد عمل کی تفویض.
ہمارا لسٹ پیج کا جزو اب ایسا لگتا ہے۔
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
اور اس سے ہمارے کام کی اشیاء کو پیش کرنا چاہئے!
لے آؤٹ گروپس
اس سے پہلے کہ ہم تفصیلات کے صفحہ پر جائیں اور ڈیٹا کو تبدیل کریں، آئیے واقعی ایک صاف ستھرا SvelteKit خصوصیت پر ایک جھانکیں: لے آؤٹ گروپس. ہم نے پہلے ہی تمام ایڈمن پیجز کے لیے نیسٹڈ لے آؤٹ دیکھے ہیں، لیکن اگر ہم اپنے فائل سسٹم کی ایک ہی سطح پر صوابدیدی صفحات کے درمیان لے آؤٹ کا اشتراک کرنا چاہتے ہیں تو کیا ہوگا؟ خاص طور پر، اگر ہم صرف اپنے فہرست والے صفحہ اور اپنے تفصیلات کے صفحہ کے درمیان ایک ترتیب کا اشتراک کرنا چاہتے ہیں تو کیا ہوگا؟ اس سطح پر ہمارے پاس پہلے سے ہی ایک عالمی ترتیب موجود ہے۔ اس کے بجائے، ہم ایک نئی ڈائریکٹری بنا سکتے ہیں، لیکن اس نام کے ساتھ جو قوسین میں ہے، اس طرح:
اب ہمارے پاس ایک لے آؤٹ گروپ ہے جو ہماری فہرست اور تفصیلات کے صفحات کا احاطہ کرتا ہے۔ میں نے اس کا نام رکھا (todo-management)
لیکن آپ اسے اپنی پسند کا نام دے سکتے ہیں۔ واضح طور پر، یہ نام کرے گا نوٹ لے آؤٹ گروپ کے اندر موجود صفحات کے یو آر ایل کو متاثر کرتا ہے۔ URLs وہی رہیں گے؛ لے آؤٹ گروپس آپ کو صفحات میں مشترکہ لے آؤٹس شامل کرنے کی اجازت دیتے ہیں بغیر ان سب میں ایک ڈائرکٹری کی مکمل routes
.
We سکتا ہے شامل کریں a +layout.svelte
فائل اور کچھ بیوقوف <div>
بینر جس میں لکھا ہوا ہے، "ارے ہم کام کا انتظام کر رہے ہیں"۔ لیکن آئیے کچھ اور دلچسپ کرتے ہیں۔ لے آؤٹ وضاحت کر سکتے ہیں load()
ان کے نیچے تمام راستوں کے لیے ڈیٹا فراہم کرنے کے لیے کام کرتا ہے۔ آئیے اس فعالیت کو اپنے ٹیگز لوڈ کرنے کے لیے استعمال کریں - چونکہ ہم اپنے ٹیگز کو اپنے ٹیگز میں استعمال کریں گے۔ details
صفحہ - اس کے علاوہ list
صفحہ ہمارے پاس پہلے ہی موجود ہے۔
حقیقت میں، کسی لے آؤٹ گروپ کو صرف ڈیٹا کا ایک ٹکڑا فراہم کرنے پر مجبور کرنا یقیناً اس کے قابل نہیں ہے۔ اس ڈیٹا کو میں نقل کرنا بہتر ہے۔ load()
ہر صفحے کے لیے فنکشن۔ لیکن اس پوسٹ کے لیے، یہ وہ عذر فراہم کرے گا جس کی ہمیں ایک نئی SvelteKit خصوصیت دیکھنے کی ضرورت ہے!
سب سے پہلے، آئیے اپنے اندر چلتے ہیں۔ list
صفحہ +page.server.js
فائل کریں اور اس سے ٹیگز کو ہٹا دیں۔
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
ہمارے فہرست کے صفحے کو اب ایک غلطی پیدا کرنی چاہئے کیونکہ وہاں نہیں ہے۔ tags
چیز. آئیے ایک شامل کرکے اسے ٹھیک کریں۔ +layout.server.js
ہمارے لے آؤٹ گروپ میں فائل، پھر وضاحت کریں a load()
فنکشن جو ہمارے ٹیگز کو لوڈ کرتا ہے۔
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
اور، بالکل اسی طرح، ہمارا فہرست صفحہ دوبارہ پیش کر رہا ہے!
ہم متعدد مقامات سے ڈیٹا لوڈ کر رہے ہیں۔
آئیے یہاں کیا ہو رہا ہے اس پر ایک عمدہ نکتہ ڈالیں:
- ہم نے ایک
load()
ہمارے لے آؤٹ گروپ کے لیے فنکشن، جسے ہم نے ڈالا ہے۔+layout.server.js
. - یہ ڈیٹا فراہم کرتا ہے۔ تمام ان صفحات میں سے جو لے آؤٹ کام کرتا ہے — جس کا مطلب اس صورت میں ہماری فہرست اور تفصیلات کے صفحات ہیں۔
- ہماری فہرست کا صفحہ بھی a کی وضاحت کرتا ہے۔
load()
فنکشن جو اس میں جاتا ہے۔+page.server.js
فائل. - SvelteKit ان اعداد و شمار کے ذرائع کے نتائج لینے، انہیں ایک ساتھ ضم کرنے، اور دونوں کو
data
.
ہمارا تفصیلات کا صفحہ
ہم اپنے تفصیلات کا صفحہ استعمال کریں گے تاکہ کسی کام کی چیز میں ترمیم کی جا سکے۔ سب سے پہلے، آئیے اپنے لسٹ پیج میں ٹیبل میں ایک کالم شامل کریں جو کہ استفسار کے سٹرنگ میں ٹو ڈو آئٹم کی ID کے ساتھ تفصیلات والے صفحہ سے لنک کرتا ہے۔
<td><a href="/ur/details?id={t.id}">Edit</a></td>
اب آئیے اپنا تفصیلات کا صفحہ بنائیں۔ سب سے پہلے، ہم جس ٹو ڈو آئٹم میں ترمیم کر رہے ہیں اسے حاصل کرنے کے لیے ایک لوڈر شامل کریں گے۔ بنائیے ایک +page.server.js
in /details
اس مواد کے ساتھ:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
ہمارا لوڈر ایک کے ساتھ آتا ہے۔ url
پراپرٹی جس سے ہم استفسار کی سٹرنگ ویلیوز کھینچ سکتے ہیں۔ اس سے ہم جس ٹو ڈو آئٹم میں ترمیم کر رہے ہیں اسے تلاش کرنا آسان بناتا ہے۔ آئیے اس میں ترمیم کرنے کے لیے فعالیت کے ساتھ اس کو کرنے کے لیے پیش کرتے ہیں۔
SvelteKit میں حیرت انگیز بلٹ ان میوٹیشن صلاحیتیں ہیں، جب تک کہ آپ فارم استعمال کرتے ہیں۔ فارم یاد ہے؟ ہمارا تفصیلات کا صفحہ یہ ہے۔ میں نے اختصار کے لیے اسلوب کو ختم کر دیا ہے۔
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
ہم اپنے لے آؤٹ گروپ کے لوڈر سے پہلے کی طرح ٹیگز اور اپنے صفحہ کے لوڈر سے ٹو ڈو آئٹم حاصل کر رہے ہیں۔ ہم اصل کو پکڑ رہے ہیں۔ tag
ٹیگ IDs کی کرنے کی فہرست سے اشیاء اور پھر سب کچھ پیش کرنا۔ ہم ID کے لیے ایک پوشیدہ ان پٹ اور عنوان کے لیے ایک حقیقی ان پٹ کے ساتھ ایک فارم بناتے ہیں۔ ہم ٹیگز ڈسپلے کرتے ہیں اور پھر فارم جمع کرانے کے لیے ایک بٹن فراہم کرتے ہیں۔
اگر آپ نے دیکھا use:enhance
، جو صرف SvelteKit کو ترقی پسند اضافہ اور Ajax کو ہمارا فارم جمع کرانے کے لیے استعمال کرنے کو کہتا ہے۔ آپ شاید ہمیشہ اسے استعمال کریں گے۔
ہم اپنی ترامیم کو کیسے محفوظ کرتے ہیں؟
نوٹس action="?/editTodo"
فارم پر ہی وصف؟ یہ ہمیں بتاتا ہے کہ ہم اپنا ترمیم شدہ ڈیٹا کہاں جمع کرنا چاہتے ہیں۔ ہمارے کیس کے لیے، ہم ایک کو جمع کروانا چاہتے ہیں۔ editTodo
"عمل."
آئیے اسے مندرجہ ذیل میں شامل کرکے بنائیں +page.server.js
فائل ہمارے پاس پہلے سے ہی تفصیلات کے لیے موجود ہے (جس میں فی الحال a load()
فنکشن، ہمارے کام کو حاصل کرنے کے لیے):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
فارم کے اعمال ہمیں ایک دیتے ہیں۔ request
آبجیکٹ، جو ہمارے تک رسائی فراہم کرتا ہے۔ formData
، جو ایک ہے get
ہمارے مختلف فارم فیلڈز کے لیے طریقہ۔ ہم نے ID قدر کے لیے وہ پوشیدہ ان پٹ شامل کیا تاکہ ہم اسے یہاں سے حاصل کر سکیں تاکہ ہم جس ٹو ڈو آئٹم میں ترمیم کر رہے ہیں اسے تلاش کر سکیں۔ ہم تاخیر کی نقل کرتے ہیں، ایک نیا کال کرتے ہیں۔ updateTodo()
طریقہ، پھر صارف کو واپس پر ری ڈائریکٹ کریں۔ /list
صفحہ updateTodo()
طریقہ صرف ہمارے جامد ڈیٹا کو اپ ڈیٹ کرتا ہے۔ حقیقی زندگی میں آپ جو بھی ڈیٹا اسٹور استعمال کررہے ہیں اس میں آپ کسی نہ کسی طرح کی اپ ڈیٹ چلائیں گے۔
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
آئیے اسے آزماتے ہیں۔ ہم پہلے فہرست کے صفحے پر جائیں گے:
اب آئیے ترمیمی صفحہ کو سامنے لانے کے لیے کرنے والی چیزوں میں سے کسی ایک کے لیے ترمیم کے بٹن پر کلک کریں۔ /details
.
ہم ایک نیا عنوان شامل کرنے جا رہے ہیں:
اب، محفوظ کریں پر کلک کریں۔ اس سے ہمیں ہماری طرف واپس جانا چاہئے۔ /list
صفحہ، نئے کرنے کے عنوان کے ساتھ۔
نیا عنوان اس طرح کیسے ظاہر ہوا؟ یہ خودکار تھا۔ ایک بار جب ہم نے ری ڈائریکٹ کیا /list
صفحہ، SvelteKit خود بخود ہمارے تمام لوڈرز کو دوبارہ چلاتا ہے بالکل اسی طرح جیسے اس نے کیا ہوتا۔ یہ وہ اہم پیشرفت ہے جو اگلی نسل کے ایپلیکیشن فریم ورک، جیسے SvelteKit، ریمکس، اور اگلا 13۔ فراہم کریں آپ کو صفحات کو رینڈر کرنے کا ایک آسان طریقہ دینے کے بجائے اور آپ کو ڈیٹا کو اپ ڈیٹ کرنے کے لیے جو بھی اختتامی پوائنٹس حاصل کرنے کے لیے آپ کی نیک خواہشات ہیں، وہ ڈیٹا لوڈنگ کے ساتھ ساتھ ڈیٹا میوٹیشن کو مربوط کرتے ہیں، جس سے دونوں مل کر کام کر سکتے ہیں۔
کچھ چیزیں جو آپ سوچ رہے ہوں گے…
یہ میوٹیشن اپ ڈیٹ زیادہ متاثر کن نہیں لگتا ہے۔ جب بھی آپ نیویگیٹ کریں گے لوڈرز دوبارہ چلیں گے۔ کیا ہوگا اگر ہم نے اپنی فارم ایکشن میں ری ڈائریکٹ شامل نہیں کیا تھا، لیکن موجودہ صفحہ پر رہے؟ SvelteKit اپ ڈیٹ کو فارم ایکشن میں انجام دے گا، جیسا کہ پہلے، لیکن کرے گا۔ اب بھی موجودہ صفحہ کے لیے تمام لوڈرز کو دوبارہ چلائیں، بشمول صفحہ لے آؤٹ میں لوڈرز۔
کیا ہمارے پاس اپنے ڈیٹا کو باطل کرنے کے مزید اہدافی ذرائع ہوسکتے ہیں؟ مثال کے طور پر، ہمارے ٹیگز میں ترمیم نہیں کی گئی تھی، لہذا حقیقی زندگی میں ہم ان سے دوبارہ استفسار نہیں کرنا چاہیں گے۔ ہاں، جو میں نے آپ کو دکھایا وہ SvelteKit میں صرف ڈیفالٹ فارمس کا رویہ ہے۔ آپ پہلے سے طے شدہ رویے کو آف کر سکتے ہیں۔ کو کال بیک فراہم کرنا use:enhance
. پھر SvelteKit دستی فراہم کرتا ہے۔ باطل کرنے کے افعال.
ہر نیویگیشن پر ڈیٹا لوڈ کرنا ممکنہ طور پر مہنگا اور غیر ضروری ہے۔ کیا میں اس ڈیٹا کو کیش کر سکتا ہوں جیسے میں ٹولز کے ساتھ کرتا ہوں۔ react-query
? ہاں، بالکل مختلف۔ SvelteKit آپ کو ویب پہلے سے فراہم کردہ کیش کنٹرول ہیڈرز کو سیٹ کرنے (اور پھر احترام) کرنے دیتا ہے۔ اور میں فالو آن پوسٹ میں کیشے کی غلط کاری کے طریقہ کار کا احاطہ کروں گا۔
اس مضمون میں ہم نے جو کچھ بھی کیا ہے وہ جامد ڈیٹا کا استعمال کرتا ہے اور میموری میں اقدار کو تبدیل کرتا ہے۔ اگر آپ کو ہر چیز کو واپس کرنے اور دوبارہ شروع کرنے کی ضرورت ہے، تو روکیں اور دوبارہ شروع کریں۔ npm run dev
نوڈ کا عمل۔
اپ ریپنگ
ہم نے بمشکل SvelteKit کی سطح کو کھرچ لیا ہے، لیکن امید ہے کہ آپ نے اس کے بارے میں پرجوش ہونے کے لیے کافی دیکھا ہوگا۔ مجھے یاد نہیں ہے کہ میں نے آخری بار ویب ڈویلپمنٹ کو اتنا مزہ کب پایا۔ بنڈلنگ، روٹنگ، ایس ایس آر، اور تعیناتی جیسی چیزوں کے ساتھ باکس سے باہر ہینڈل کیا جاتا ہے، مجھے ترتیب دینے سے زیادہ وقت کوڈنگ میں صرف کرنا پڑتا ہے۔
یہاں کچھ اور وسائل ہیں جو آپ SvelteKit سیکھنے کے اگلے اقدامات کے طور پر استعمال کر سکتے ہیں:
- SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- قابلیت
- ہمارے بارے میں
- اس کے بارے میں
- تک رسائی حاصل
- اکاؤنٹ
- عمل
- اعمال
- آدم
- شامل کیا
- اس کے علاوہ
- پتہ
- منتظم
- اعلی درجے کی
- پر اثر انداز
- تمام
- اجازت دے رہا ہے
- شانہ بشانہ
- پہلے ہی
- ہمیشہ
- رقم
- اور
- ایک اور
- جواب
- کسی
- اپلی کیشن
- درخواست
- ایپلی کیشنز
- اطلاقی
- ارد گرد
- لڑی
- مضمون
- مصنوعی
- تفویض
- خودکار
- خود کار طریقے سے
- دستیاب
- انتظار کرو
- واپس
- پس منظر
- بینر
- بار
- بنیادی
- اس سے پہلے
- BEST
- بہتر
- کے درمیان
- بٹ
- سیاہ
- بلاگ
- بلاگ مراسلات
- بلیو
- باکس
- لانے
- براؤزر
- کیڑوں
- تعمیر
- تعمیر
- تعمیر میں
- بٹن
- کیشے
- فون
- کالز
- صلاحیتوں
- کیس
- یقینی طور پر
- چیلنج
- تبدیل کرنے
- واضح
- کوڈ
- کوڈنگ
- رنگ
- کالم
- کس طرح
- کامن
- مقابلے
- جزو
- اجزاء
- کانفرنسوں
- رابطہ قائم کریں
- مربوط
- کنسول
- مواد
- آسان
- سکتا ہے
- کورس
- ڈھکنے
- کا احاطہ کرتا ہے
- تخلیق
- بنائی
- تخلیق
- موجودہ
- اس وقت
- اعداد و شمار
- ڈیٹا بیس
- پہلے سے طے شدہ
- وضاحت کرتا ہے
- تاخیر
- تاخیر
- تعیناتی
- ڈیزائن
- تفصیلات
- دیو
- ترقی
- DID
- دکھائیں
- نہیں کرتا
- کر
- نہیں
- ہر ایک
- دوسری جگہوں پر
- کافی
- پوری
- پوری
- خرابی
- وغیرہ
- بھی
- ہر کوئی
- سب کچھ
- مثال کے طور پر
- بہت پرجوش
- حوصلہ افزائی
- موجود ہے
- مہنگی
- برآمد
- ممکن
- نمایاں کریں
- چند
- قطعات
- فائل
- فائلوں
- آخر
- آخر
- آگ
- پہلا
- درست کریں
- فلیٹ
- کے بعد
- ہمیشہ کے لیے
- فارم
- فارمیٹ
- فارم
- ملا
- فریم ورک
- سے
- مکمل
- مزہ
- تقریب
- فعالیت
- افعال
- حاصل
- حاصل کرنے
- دے دو
- دے
- گلوبل
- Go
- مقصد
- جاتا ہے
- جا
- قبضہ
- گروپ
- گروپ کا
- ہو
- ہارڈ
- ہیڈر
- مدد
- یہاں
- پوشیدہ
- درجہ بندی
- اعلی سطحی
- کی ڈگری حاصل کی
- امید ہے کہ
- افقی
- کس طرح
- HTML
- HTTPS
- میں ہوں گے
- imaginations
- درآمد
- اہمیت
- متاثر کن
- in
- سمیت
- ابتدائی
- ان پٹ
- کے بجائے
- ضم
- دلچسپ
- تعارف
- IT
- اشیاء
- خود
- جاوا سکرپٹ
- کلیدی
- آخری
- تازہ ترین
- لے آؤٹ
- سیکھنے
- آو ہم
- سطح
- Li
- زندگی
- روشنی
- امکان
- لنکس
- لسٹ
- رہتے ہیں
- لوڈ
- بارک
- لوڈ کر رہا ہے
- بوجھ
- لانگ
- دیکھو
- دیکھنا
- تلاش
- قسمت
- مشینری
- بنا
- بناتا ہے
- بنانا
- مینیجنگ
- دستی
- مارجن
- معاملہ
- کا مطلب ہے کہ
- یاد داشت
- محض
- ضم
- طریقہ
- شاید
- برا
- ماڈیول
- زیادہ
- منتقل
- منتقل
- ایک سے زیادہ
- نام
- نامزد
- NAV
- تشریف لے جائیں
- سمت شناسی
- ضروری
- ضرورت ہے
- نئی
- اگلے
- نوڈ
- عام
- تعداد
- اعتراض
- اشیاء
- ایک
- حکم
- دیگر
- دوسری صورت میں
- خود
- خاص طور پر
- راستہ
- انجام دیں
- لینے
- ٹکڑا
- ٹکڑے ٹکڑے
- پلیس ہولڈر
- پلاٹا
- افلاطون ڈیٹا انٹیلی جنس
- پلیٹو ڈیٹا
- پوائنٹ
- پوسٹ
- مراسلات
- ممکنہ طور پر
- تیار
- مسئلہ
- عمل
- پیدا
- ترقی
- منصوبے
- وعدہ کیا ہے
- جائیداد
- محفوظ
- فراہم
- فراہم کرتا ہے
- ھیںچتی
- ڈال
- سوال
- خام
- پڑھیں
- اصلی
- حقیقی زندگی
- حقیقت
- ریڈ
- ری ڈائریکٹ
- بے شک
- رہے
- یاد
- ہٹا
- رینڈرنگ
- دیتا
- درخواست
- وسائل
- نتائج کی نمائش
- واپسی
- واپس لوٹنے
- واپسی
- واپس
- امیر
- جڑ
- روٹ
- راستے
- رن
- چل رہا ہے
- اسی
- محفوظ کریں
- دیکھ کر
- کام کرتا ہے
- مقرر
- شیڈو
- سیکنڈ اور
- مشترکہ
- ہونا چاہئے
- دکھائیں
- سادہ
- صرف
- بعد
- ایک
- سلائیڈ
- So
- کچھ
- کچھ
- ذرائع
- خرچ
- شروع کریں
- شروع
- ٹھہرے رہے
- مراحل
- بند کرو
- جمع
- کی حمایت کرتا ہے
- سطح
- کے نظام
- ٹیبل
- TAG
- لے لو
- لینے
- بات
- Tandem
- ھدف بنائے گئے
- بتاتا ہے
- سانچے
- ٹرمنل
- ۔
- چیزیں
- بھر میں
- وقت
- عنوان
- کرنے کے لئے
- مل کر
- بھی
- اوزار
- دورے
- علاج
- سچ
- ٹرن
- ٹائپ اسکرپٹ
- ui
- کے تحت
- اپ ڈیٹ کریں
- تازہ ترین معلومات
- URL
- us
- استعمال کی شرائط
- رکن کا
- قیمت
- اقدار
- مختلف
- کی طرف سے
- لنک
- انتظار
- چاہتے تھے
- طریقوں
- ویب
- ویب اجزاء
- ویب سازی
- کیا
- جس
- سفید
- گے
- جیت
- بغیر
- بہت اچھا
- کام
- کام کرتا ہے
- قابل
- گا
- لکھنا
- تم
- اور
- زیفیرنیٹ