داستان عشق Svelte و JSX 💖

هرکسی که یک توسعه دهنده وب است در مقطعی از زندگی خود با Svelte و JSX برخورد کرده است. صبر کن! آنها چه هستند و داستان عشق بین آنها چیست؟ 🤔 در این پست وبلاگ به شما معرفی کوتاهی می کنم و ماجرای پنهانی آنها را که فقط تعداد کمی از آنها می دانند را به شما می گویم. 🤫

Svelte یک فناوری انقلابی در فضای وب است. برخلاف سایر کتابخانه‌ها و فریم ورک‌های محبوب رابط کاربری مانند React و Vue که از VDOM برای رابط کاربری استفاده می‌کنند، Svelte یک کامپایلر است که کد svelte را در کد جاوا اسکریپت وانیلی بسیار بهینه‌سازی شده کامپایل می‌کند. 🚀

از سوی دیگر، JSX نسخه توسعه یافته (شکر نحوی) جاوا اسکریپت است که در ابتدا توسط تیم React در کتابخانه React خود پیشنهاد و استفاده شد. JSX ما را قادر می سازد تا نشانه گذاری HTML مانند را مستقیماً در جاوا اسکریپت بنویسیم و کارها را ساده تر از همیشه می کند. 🙌

با وجود روش‌های متفاوت، Svelte و JSX به خوبی یکدیگر را تکمیل می‌کنند. 💛

برای فایل‌های Svelte در ویرایشگر شما، ابزارهای زبان Svelte و پسوند VS Code آن قابلیت‌هایی مانند برجسته‌سازی نحو، قالب‌بندی، خط‌بندی، تکمیل خودکار، بررسی نوع و بسیاری موارد دیگر را ارائه می‌دهند. 💻

آنها چگونه انجامش میدهند؟

با استفاده از JSX! 🤯

من الان در مورد چی صحبت می کنم؟ Svelte کاملاً متفاوت از JSX ساخته شده است، اما بیانیه من چیست؟ در واقع، بسیاری نمی دانند که Svelte مخفیانه از ویژگی های JSX برای تجربه توسعه دهنده غنی خود استفاده می کند/قرض می گیرد. همه ما می دانیم که در حال حاضر اکثر ویرایشگرهای کد و IDE ها تکمیل خودکار و بررسی تایپ را از جعبه ارائه می دهند. ما به لطف جادوی فوق‌العاده‌ای که توسط TypeScript انجام می‌شود، یک بررسی تایپ و تکمیل خودکار بسیار قوی و قابل اعتماد در جاوا اسکریپت و تایپ اسکریپت داریم. ✨

در مراحل اولیه Svelte، زمانی که Svelte شروع به جذب کرد، بیشتر توسعه دهندگانی که از چارچوب ها و کتابخانه های دیگر انتقال پیدا کردند، می خواستند این ویژگی ها را در Svelte نیز داشته باشند. برای حفظ و افزایش نرخ نگهداری آنها، تیم Svelte در گوشه ای قرار گرفت تا Svelte نیز این ویژگی ها را داشته باشد. چیزی که آنها تصمیم گرفتند از آن استفاده کنند کاملاً هوشمندانه است. به جای ساختن چیزها از ابتدا، آنها از بسیاری از پروژه های منبع باز مستقل و جداگانه موجود در یک پروژه واحد برای سرور زبان خود استفاده کردند. یکی از این پروژه ها halfnelson/svelte2tsx است.

svelte2tsx 🤔🤔🤔

svelte2tsx ترانسپایلری است که کد Svelte را به یک کد TypeScript معتبر تبدیل می کند که بعداً توسط سرور زبان TypeScript مصرف می شود. سپس، در نهایت، بررسی تایپ و تکمیل خودکار فانتزی خود را دریافت می کنیم. 🎉

اما چگونه کار می کند؟ svelte2tsx اجزای Svelte را برای بررسی نوع به TSX (TypeScript + JSX) تبدیل می کند. TSX را می توان با استفاده از فایل های svelte-jsx.d.ts و svelte-shims.d.ts موجود بررسی کرد. همچنین دستور Svelte خاص مانند اعلان‌های واکنشی، فروشگاه‌ها، اسلات‌ها و غیره را کنترل می‌کند.

svelte2tsx بخش اصلی ابزار زبان Svelte و پسوند VS Code آن است. ویژگی‌هایی مانند برجسته‌سازی نحو، قالب‌بندی، پر کردن، تشخیص و موارد دیگر را برای فایل‌های Svelte در ویرایشگر شما فعال می‌کند.

import svelte2tsx from 'svelte2tsx';

const svelteCode = `
<script lang="ts">
export let h: boolean = false;
</script>

{#if h}
h is True
{:else}
h is False
{/if}
`;
const {code: tsxCode} = svelte2tsx(svelteCode);

console.log(tsxCode);
/*
///<reference types="svelte" />
<></>;function render() {

 let h: boolean = false;h = __sveltets_any(h);;
;
() => (<>

{(h) ? <>
h is True
</> : <>
h is False
</> }</>);
return { props: {h: h}, slots: {}, getters: {}, events: {} }}

export default class extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
}
*/

با این Svelte → TSX اینجا بازی کنید

این یک رویکرد هوشمندانه و مبتکرانه برای ارائه عملکرد Svelte IDE بدون اختراع مجدد چرخ است. همچنین نشان می دهد که چگونه، علیرغم دشمنی ظاهری، Svelte و JSX می توانند با هم همزیستی کنند. 🤝

امیدوارم این پست وبلاگ بینش جالب و سرگرم کننده ای در مورد Svelte و JSX به شما داده باشد. اگر می‌خواهید بیشتر بدانید، توصیه می‌کنم از وب‌سایت‌های رسمی آن‌ها دیدن کنید: 🌐

کد نویسی مبارک! 🎉