Sandpack یک جعبه ابزار کامپوننت منبع باز است که امکان تجربه ویرایش کدهای تعاملی و زنده در مرورگر را فراهم می کند. این باندلر درون مرورگر موتور CodeSandbox است.
اخیرا Sandpack با افزودن پشتیبانی از قالب های Node.js قابلیت های خود را گسترش داده است. با این ویژگی جدید، کاربران می توانند Next.js 13، Vite 3 و سایر فریم ورک ها را مستقیماً در مرورگر کروم، فایرفاکس و سافاری اجرا کنند.
با تجربه کدنویسی زنده Sandpack، کاربران می‌توانند یک سفر کامل با کدگذاری زنده از یک سندباکس زنده به یک تجربه نزدیک به میزبان محلی داشته باشند:
- ویرایشگر Sandpack: یک تجربه ویرایشگر کامل با موضوع و پاسخگو با برجسته کردن نحو، پشتیبانی از دستگاه لمسی، کاوشگر فایل و ابزارهای اشکال زدایی.
- ویرایش بی‌درنگ: پیش‌نمایش پیشرفته‌ای که از پشتیبانی وابستگی NPM، بارگیری مجدد ماژول داغ، ذخیره‌سازی و غیره استفاده می‌کند.
- تجربه توسعه کامل: جعبه‌های sandbox را مستقیماً در CodeSandbox با یک کلیک باز کنید که یک تجربه توسعه کامل در فضای ابری را ارائه می‌دهد.
توسط توسعه دهندگان، برای توسعه دهندگان
در CodeSandbox، یکی از ارزش‌های اصلی ما دسترسی‌پذیری است: اطمینان از اینکه هیچ چیز مانع از تحقق ایده‌های توسعه‌دهندگان نمی‌شود. این همان چیزی است که Sandpack در مورد آن است. موانع ورود برای توسعه دهندگان مبتدی را که به تازگی با یک کتابخانه جدید شروع کرده اند یا با ابزارهای مورد نیاز برای توسعه محلی آشنا نیستند، تا حد زیادی کاهش می دهد.
با استفاده از Sandpack برای اجرای نمونه‌های کدنویسی در Docs خود، به کاربران نهایی خود اجازه می‌دهید مستقیماً از Docs با کدهای زنده تعامل داشته باشند و نتایج را در زمان واقعی بدون نیاز به ترک صفحه مشاهده کنند.
علاوه بر این، با ارائه آموزش های تعاملی و یک محیط امن برای آزمایش، Sandpack می تواند به توسعه دهندگان کمک کند تا اعتماد به نفس بیشتری کسب کنند و مهارت ها را سریعتر و موثرتر ایجاد کنند.
هیجان زده شدن تحریک شدن؟ بیایید با آن شروع کنیم.
در حال نصب
وابستگی Sandpack را روی پروژه خود نصب کنید.
npm i @codesandbox/sandpack-react
تمام اجزا و باندلر در داخل کامپوننت Sandpack بسته بندی می شوند که یک صادرات نامگذاری شده از بسته است. علاوه بر این، بسته شامل چندین مورد است اجزاء، خدمات رفاهی، و تایپ ها.
import { Sandpack } from "@codesandbox/sandpack-react";
export default function App() {
return <Sandpack template="node" />
}
خودشه! اکنون یک ویرایشگر و مؤلفه پیش‌نمایش دارید که یک سرور اصلی Node.js را در داخل مرورگر خود اجرا می‌کند.
چه کسی از Sandpack استفاده می کند؟
ما از نزدیک با انجمن React برای حل مشکلات واقعی کار کرده ایم. از وب‌سایت‌های آموزشی گرفته تا مستندات پروژه منبع باز، ما هزینه‌های زیادی را صرف تحقیق، طراحی و آزمایش می‌کنیم تا اصطکاک کدنویسی در مرورگر را از بین ببریم و به تولیدکنندگان محتوا قدرت دهیم.
به همین دلیل است که ما بر این باوریم که Sandpack به سرعت تبدیل به ابزاری برای هر کسی می شود که به دنبال ارائه یک تجربه توسعه وب یکپارچه، در دسترس و قدرتمند به کاربران خود است.
بیایید چند پروژه را با استفاده از Sandpack به روش های مختلف بررسی کنیم.
مستندات واکنش: اجرای مایل اضافی
مستندات React یک نسخه بسیار سفارشی از Sandpack را پیاده‌سازی می‌کند که اساساً به آن متکی است SandpackProvider جزء برای رسیدگی به حالت های فایل، SandpackCodeEditor برای ویرایش کد، و SandpackPreview برای ارائه کد خروجی
هر چیز دیگری – مانند تم، ترکیب اجزا و سبک‌ها – به صورت داخلی ساخته می‌شود، که آن را به پیشرفته‌ترین نمونه پیاده‌سازی در اکوسیستم Sandpack تبدیل می‌کند و مثالی از اینکه Sandpack چقدر می‌تواند توسعه‌پذیر باشد، ارائه می‌دهد.
👉 react.dev
رابط کاربری چاکرا: زیباترین زمین بازی کتابخانه
با اجزای Sandpack، شما اساسا می توانید CodeSandbox خود را بسازید.
رابط کاربری چاکرا این را درک کرد و آنها قابلیت‌های دیگری را در بالای Sandpack پیاده‌سازی کردند، مانند قالب‌بندی کد و URLهای قابل اشتراک‌گذاری. علاوه بر این، شما به سادگی می توانید از ویرایشگرهای کد مختلف مانند موناکو استفاده کنید که می تواند به طور پیش فرض تکمیل خودکار را ارائه دهد.
👉 play.chakra-ui.com
React Spring: مستندسازی می تواند سرگرم کننده باشد
Sandpack می تواند بهترین دوست پروژه های Visual React مانند API های انیمیشن و کتابخانه های UI باشد.
می‌توانید تکه‌های ایستا از کدها را روی نمونه‌های زنده تغییر دهید، موانع تجسم خروجی کتابخانه را کاهش دهید، یا به سادگی پارامترهای مختلف را امتحان کنید. این دقیقاً همان کاری است که React Spring در Docs خود انجام داد.
👉 www.react-spring.dev
Jest-extended: فراتر از مولفه پیش نمایش
تا اینجا ما فقط در مورد چیدمان پیش فرض (Editor + Preview) صحبت کرده ایم.
با این حال، Sandpack با بسیاری از موارد استفاده اضافی، مانند نمایش خروجی تست‌های واحد و گزارش‌های کنسول، مطابقت دارد. این امکان پذیر است زیرا Sandpack می تواند طیف وسیعی از محیط ها را اجرا کند، از جمله Jest، همانطور که در Docs با jest-extended دیده می شود.
👉 jest-extended.jestcommunity.dev
تمام ویژگی ها را کاوش کنید
مثال‌هایی که در بالا به اشتراک گذاشتیم برای اینکه ببینیم Sandpack چه توانایی‌هایی دارد عالی هستند – اما چیزهای بیشتری برای باز کردن وجود دارد!
در زیر یک مرور مختصر از برخی از کارهای عالی که Sandpack به شما امکان می دهد را مشاهده کنید.
قالب ها
در حال حاضر، Sandpack از چندین الگو، از الگوهای مشتری گرفته تا سرور پشتیبانی می کند:
- استاتیک
- زاویه ای
- واکنش نشان دهید
- React TS
- گره
- Nextjs
- سریع
- Astro
و خیلی بیشتر.
اجزای توسعه پذیر
- File-Explorer: تجربه ای کمینه اما بسیار قدرتمند برای پیمایش در میان فایل ها. می توانید پوشه ها را باز و بسته کنید و فایل های جدید را باز کنید.
- تست‌ها: یک پوشش نازک در اطراف Jest ارائه می‌کند تا آزمایش‌ها را مستقیماً در مرورگر اجرا کند.
- Console: ابزار devtool که امکان چاپ سیاهههای مربوط به کنسول را از یک سرویس گیرنده Sandpack می دهد.
جزئیات و نمونه های بیشتر در مورد سند پک.
بسته های محلی
اگرچه Sandpack بیشتر به NPM برای واکشی وابستگی ها متکی است، شما همچنین می توانید بسته/وابستگی های محلی را با تزریق آنها به بافت Sandpack و آزمایش بر روی کتابخانه های توسعه ارائه دهید.
اطلاعات بیشتر در مورد نحوه مصرف وابستگی ها/بسته های محلی در Sandpack
تم ها
استایل کلی را می‌توان از طریق قالب تم تنظیم کرد، اما Sandpack مجموعه‌ای از گزینه‌های از پیش تعریف‌شده را نیز ارائه می‌کند. @codesandbox/sandpack-themes، یک بسته منبع باز که حاوی بسیاری از تم های دیگر سازگار با Sandpack است.
پروژه خود را در دسترس تر کنید
دیدن همه محبت و حمایتی که Sandpack از جامعه دریافت می کند، ما را به جلو می برد تا آن را حتی بهتر و قدرتمندتر کنیم.
اگر پیشنهادی در مورد اینکه چگونه می توانیم Sandpack را بهبود ببخشیم، دارید، می توانید مشکلی را در GitHub باز کنید. و اگر Sandpack را به اسناد ما اضافه کرده اید، ما دوست داریم نتیجه را ببینیم – آن را توییت کنید @CodeSandbox.
