پلتفرم کدنویسی کلاس جهانی / Sandbox / REPL با Sandpack • Josh W. Comeau

یکی از مهم ترین عناصر در وبلاگ توسعه دهنده یا مستندات فنی، کد پد است. این ویجت که به عنوان “جعبه شن” نیز شناخته می شود، به شما امکان می دهد یک قطعه کد را ویرایش کنید و فوراً نتایج را مشاهده کنید.

این سایتی است که من در این وبلاگ استفاده می کنم:

function App() {
  return (
    >
      h1>
        I'm a playground!
      h1>
      p>
        You can edit this text. 😄
      p>
    >
  );
}

export default App;

من اخیراً با استفاده از زمین بازی این وبلاگ را بازسازی کردم بسته بندی شن و ماسه(در برگه جدید باز می شود)یک چارچوب زمین بازی مدرن که توسط افراد CodeSandbox ایجاد شده است. همین فوق العاده من از آن بسیار راضی هستم و فکر می کنم مفید خواهد بود آنچه را که در مورد این ابزار آموخته ام به اشتراک بگذارم.

این یک پست حمایت شده نیست. اینها افکار صادقانه من در مورد ابزاری است که در واقع در این وبلاگ و در پلتفرم دوره خود استفاده می کنم.

چند سال پیش، توسعه دهنده هلندی و شخصیت فوق العاده ایوس ون هورن راه اندازی شد CodeSandbox(در برگه جدید باز می شود)، یک محیط توسعه مبتنی بر مرورگر.

“سس مخفی” برای CodeSandbox بسته درون مرورگر است. می‌تواند وابستگی‌های NPM را استخراج کند، JSX شما را جابجا کند، و حتی از ویژگی‌های پیشرفته کیفیت زندگی مانند بارگیری مجدد ماژول داغ پشتیبانی می‌کند. همه این کارها را بدون نیاز به دانلود صدها مگابایت کد سیستم بیلد در مرورگر انجام می دهد. این وحشی است.

Sandpack بسته واقعی مورد استفاده CodeSandbox است. آن را باز کرده اند. بنابراین شما کد آزمایش شده نبرد را دریافت می کنید که آنها سال ها تکرار کرده اند.

دو مخزن مناسب وجود دارد:

در این مقاله بیشتر در مورد آن صحبت خواهیم کرد sandpack-react.

یکی از جالب‌ترین چیزها در مورد اتصال‌های React Sandpack این است که سطوح مختلفی از انتزاع را ارائه می‌دهند.

در بالاترین سطح، الف کل زمین بازی را در یک خط کد برای شما ایجاد می کند. در اینجا یک سلام سریع جهان وجود دارد:

این مثال از الگوی React استفاده می کند، اما Sandpack شامل بسیاری دیگر است قالب ها(در برگه جدید باز می شود)از جمله Vue، Svelte، Angular و غیره.

هر قالب یک برنامه کاربردی آماده و کامل با چندین فایل (مجازی) ایجاد می کند. قالب React از برنامه create-react-app با روت استفاده می کند /index.js، یک /App.jsو الف /public/index.html.

برای گنجاندن کد منبع خود، می‌توانیم هر یک از این فایل‌ها را با کد بازنویسی کنیم files پشتیبانی:

اگر چندین فایل ارائه کنیم، Sandpack نوار برگه ای را نمایش می دهد که به ما امکان می دهد بین آنها جابجا شویم:

همانطور که انتظار دارید، ما می توانیم از بین چندین مورد از پیش تعریف شده انتخاب کنیم موضوعات(در برگه جدید باز می شود). به عنوان مثال، می توانیم از شگفت انگیز «شب جغد”(در برگه جدید باز می شود) موضوع:

اگر می خواهید، می توانید خودتان را بسازید موضوع(در برگه جدید باز می شود) با ابزار دستی خود

پیوند به این عنواناجزای سطح پایین تر

را سریع ترین راه برای شروع با Sandpack است، اما کمترین میزان انعطاف را ارائه می دهد.

در عوض، می توانید زمین بازی خود را با ترکیب و تطبیق اجزای سطح پایین ارائه شده بسازید.

به عنوان مثال: در کامپوننت دارای یک چیدمان پاسخگو داخلی است که کدها را در کنار هم در صفحه‌های بزرگ نمایش می‌دهد، اما در صفحه‌های کوچک‌تر به صورت عمودی روی هم قرار می‌گیرد. اگر بخواهیم همیشه به صورت عمودی روی هم چیده شوند چه؟

ما می توانیم این کار را با استفاده از اجزای سطح پایین انجام دهیم:

این واقعا عالی است. بسته شنی تمام آجرهای LEGO™ را که برای ساختن زمین بازی رویاهایمان نیاز داریم، نشان می دهد.

SandpackProvider جزء اصلی ما است، یکی که مجموعه ای از فایل ها را می گیرد و آنها را با هم در یک برنامه قرار می دهد. سپس داده های مورد نیاز را از طریق یک زمینه React در اختیار همه مؤلفه های فرزند قرار می دهد.

تعداد زیادی آجر LEGO™ اضافی برای ترکیب و تطبیق وجود دارد، از جمله مواردی مانند SandpackFileExplorer، SandpackConsole، و SandpackTests.

برای پر سفارشی سازی، با این حال، ما نیاز به دسترسی به وضعیت اساسی داریم. و اینجاست که قلاب های سفارشی آنها وارد می شود.

پیوند به این عنوانکنترل کامل با قلاب

Sandpack علاوه بر افشای دسته ای از اجزای سطح پایین، چندین قلاب سفارشی نیز دارد.

برای مثال، فرض کنید می خواهیم بدانیم کدام فایل در حال حاضر در ویرایشگر کد انتخاب شده است. ما می توانیم این اطلاعات را با useSandpack قلاب:

برای مثال کاربردی تر: فرض کنید دکمه Refresh داخلی را دوست نداریم. در اینجا نحوه ساخت خودمان آمده است:

این خیلی باحاله! نه تنها ما می توانیم خواندن کشور، ما می توانیم به روز رسانی را آغاز می کند.

در داخل، Sandpack از یک توزیع کننده عمل به سبک Redux استفاده می کند. را refresh تابع عملکرد مناسب را برای ما ارسال می کند تا یک بازخوانی صفحه را راه اندازی کنیم.

ما حتی به مدیر دسترسی مستقیم داریم. این به این معنی است که اگر مایل به کاوش در پایگاه کد آنها باشیم، می‌توانیم نحوه تغییر هر حالت/رویداد را بفهمیم. ما داریم باور نکردنی میزان کنترل

در این وبلاگ، من از اجزای سطح پایین تر و قلاب ها برای اضافه کردن مواردی مانند:

• دکمه “format” برای فرمت کد با Prettier

• دکمه ریست برای بازگرداندن کد به حالت اولیه

• کنسولی که هرگونه پیام کنسول را نمایش می دهد

• چیدمان و زیبایی شناسی سفارشی خودم

در اینجا بسته بندی سفارشی من با ویژگی های زیر است:

function App() {
  return (
    >
      h1>
        I'm a playground!
      h1>
      p>
        You can edit this text. 😄
      p>
    >
  );
}

export default App;

در پلتفرم دوره خود، با اضافه کردن مواردی مانند:

• ذخیره خودکار به طوری که تمام تغییرات کد در localStorage ذخیره شده و در بازدیدهای بعدی بازیابی شود

• هشدارهای ESLint یکپارچه

• حالت تمام صفحه که در آن ویرایشگر صفحه را پر می کند

• یک سوئیچ “Strict Mode” که کد مبتنی بر React را به/از حالت سخت برمی گرداند.

من زمان زیادی را صرف تکمیل زمین بازی خود کرده ام و تا کنون توانسته ام هر ویژگی را که می خواستم پیاده سازی کنم. انعطاف پذیری که Sandpack فراهم می کند این است وحشی.

به طور پیش فرض از Sandpack استفاده می کند CodeMirror(در برگه جدید باز می شود) به عنوان ویرایشگر کد آن

این تا حدودی تعجب آور است. CodeSandbox از VSCode به عنوان ویرایشگر خود استفاده می کند، بنابراین من فکر کردم که Sandpack مطمئناً از آن استفاده خواهد کرد موناکو(در برگه جدید باز می شود)، ویرایشگری که VSCode را تامین می کند.

با این حال، پس از آزمایش با آن، متوجه شدم که CodeMirror را کاملاً دوست دارم. به اندازه موناکو با امکانات کامل نیست، اما اینطور نیست نیاز دارند بودن بیشتر دوره های مبتنی بر وب برای نشان دادن یک مفهوم طراحی شده اند تا اینکه به عنوان ویرایشگر برای درایورهای روزمره خدمت کنند.

CodeMirror نیز بسیار توسعه پذیر است. به عنوان مثال React جدید فوق العاده اسناد(در برگه جدید باز می شود) بهره بردن از @codemirror/lint(در برگه جدید باز می شود) بسته NPM برای نمایش هشدارهای خزه در ویرایشگر.

از آنجایی که Sandpack بسیار ماژولار است، اگر از CodeMirror خوشتان نمی آید، مجبور نیستید به آن بچسبید! در واقع، آنها حتی یک راهنمای سوئیچ دارند موناکو(در برگه جدید باز می شود)!

یک چیز جالب در مورد نحوه معماری Sandpack: بسته به صورت محلی کار نمی کند.

وقتی ما یک جزء، یک iframe ایجاد می کند. این iframe توسط CodeSandbox میزبانی می شود و همه بسته بندی ها در دامنه خارجی آن انجام می شود.

در اصل، زمانی که کاربر تغییری در کد موجود در ویرایشگر ایجاد می کند، کد جدید در چارچوب درون خطی به سایت ارسال می شود. این صفحه کد را دوباره گروه بندی می کند و نتیجه جدید را نمایش می دهد.

خوبی این روش این است که ایمن است. برای مثال، اگر کاربر JS بنویسد که سعی می‌کند کوکی‌ها / محلی ذخیره‌سازی را بخواند، به مواردی در دامنه CodeSandbox دسترسی خواهد داشت، نه دامنه شما.

با این حال، من از داشتن چنین وابستگی شدید به یک سرویس خارجی کمی محتاط بودم. اگر CodeSandbox متوقف شود، نمی‌خواهم روی زمین‌های بازی من تأثیر بگذارد!

خوشبختانه گزینه دیگری وجود دارد: میزبانی خود.

اساسا، ما می توانیم کد خوشه بندی را خودمان در هر دامنه ای که بخواهیم بسازیم + مستقر کنیم. سپس می‌توانیم این دامنه را هنگام ارائه یک نمونه Sandpack مشخص کنیم:

Sandpack
  options={{
    bundlerURL: 'https://my-hosted-bundler.com',
  }}
>

به این ترتیب، با حفظ کنترل 100٪، از مزایای امنیتی پیش‌نمایش میزبان خارجی برخوردار می‌شویم.

شما می توانید یاد بگیرید که چگونه خود را میزبانی کنید باند گردان(در برگه جدید باز می شود) در اسناد خود

به‌طور پیش‌فرض، Sandpacks با یک دکمه lil’ رندر می‌شوند که کد فعلی را در CodeSandbox باز می‌کند:

من در ابتدا خیلی به این ویژگی فکر نمی کردم، اما متوجه شدم که اینطور است باور نکردنی.

این باعث می‌شود افراد به اشتراک گذاری قطعات کد را بسیار آسان کنند. اگر کسی با چیزی گیر کرد و به کمک نیاز داشت، می‌تواند روی این دکمه کلیک کند و به جای اینکه مجبور باشد کاری را که انجام داده است توصیف کند یا تمام کدها را کپی/پیست کند (که اغلب به چندین فایل تقسیم می‌شود) URL را برای من ارسال کند.

این ویژگی حتی زمانی که بسته به صورت خود میزبانی می شود نیز کار می کند.

اگر ترجیح می‌دهید هیچ وابستگی صریحی به CodeSandbox نداشته باشید، این دکمه را می‌توان به راحتی با prop حذف کرد:

SandpackProvider template="react">
  SandpackCodeEditor />
  SandpackPreview
    showOpenInCodeSandbox={false}
  />
SandpackProvider>

همانطور که قبلاً نوشته ام، این وبلاگ با استفاده از آن ساخته شده است MDX(در برگه جدید باز می شود).

اگر با MDX آشنایی ندارید، این فرمت مبتنی بر Markdown است که به من امکان می دهد اجزای React سفارشی را در سند جاسازی کنم. این بهترین در هر دو جهان است: من به راحتی می توانم پست های وبلاگ جدید را بدون نیاز به پیچیدن هر پاراگراف در آن ایجاد کنم tag. At the same time, I can include all manner of custom content using bespoke React components.

To use Sandpack inside MDX, I suggest creating your own Playground مؤلفه ای که شامل تمام سفارشی سازی هایی است که می خواهید انجام دهید و آن را در اختیار دامنه MDX قرار دهید. در اینجا نحوه استفاده به نظر می رسد next-mdx-remote(در برگه جدید باز می شود):

در کلیپ بورد کپی کنید

import Playground from '@/components/Playground';

export default function BlogPost() {
  return (
    MDXRemote
      source={/* Pass in the raw MDX content here */}
      components={{
        // Specify the Playground here:
        Playground,
      }}
    />
  )
}

سپس می توانید از خود استفاده کنید Playground جزء مستقیم در پست های وبلاگ شما!

در کلیپ بورد کپی کنید

This is an example of how you’d render a _playground_ inside MDX:

Playground
  preset="react"
  files={{
    '/App.js': 'Code goes here',
  }}
/>

بنابراین، در مجموع، من چیز کمی برای شکایت پیدا کردم. استفاده از Sandpack تجربه بسیار روانی بود و وقتی با مشکلات کوچکی مواجه شدم، تیم بسیار مفید بود پاسخگو(در برگه جدید باز می شود). در واقع، آنها حتی دو مشکلی را که در نسخه قبلی این پست وبلاگ ذکر کردم، برطرف کردند!

من در ابتدا اشاره کردم که Sandpack دارای یک الگوی "ایستا" نیست که از HTML/CSS/JS ساده استفاده کند. ویژگی اصلی Sandpack بسته بندی آن است که باعث می شود کدهایی که نباید بسته بندی شوند تا حدودی ناخوشایند است!

تیم CodeSandbox از آن زمان یک الگوی استاتیک را گنجانده است. و صادقانه بگویم، نتایج کمی متفاوت بود. از Service Workers استفاده می‌کند که توسط همان تنظیمات حریم خصوصی که کوکی‌های شخص ثالث را مسدود می‌کنند، مسدود می‌شوند. برای کاربران حساس به حریم خصوصی، پیش نمایش راه اندازی نمی شود. همچنین از بسیاری از کاربران شنیده ام که زمین بازی پس از مدتی قطع می شود و بدون بارگذاری مجدد کامل صفحه قابل تعمیر نیست.

بنابراین من فکر می کنم Sandpack یک انتخاب عالی است اگر بیشتر کدهای جاوا اسکریپت بسته بندی شده را نمایش می دهید (مانند React، Vue، و غیره)، اما احتمالاً بهترین انتخاب برای قطعه های HTML/CSS/JS به سبک کدپن نیست. که خیلی بد است، زیرا در غیر این صورت یک ابزار شگفت انگیز است!

داشتن یک ویرایشگر کد قابل ویرایش زنده + تجسم بخشی ضروری از هر منبع آموزشی توسعه دهنده است.

همانطور که در پست وبلاگم نوشتم "چگونه چیزها را سریع یاد بگیریم"، آنجا نیاز دارد جزء فعال یک درس/منبع موثر باشید. زمین های بازی به زبان آموز اجازه می دهد تا با ایده ها درگیر شود، آزمایش کند و درس ها را به خاطر بسپارد.

در چند سال گذشته، من بر ایجاد بهترین دوره های توسعه دهنده در وب متمرکز بوده ام و Sandpack یک ابزار بوده است. من بیشتر دارم 800 نسخه Sandpack در دو دوره من!

من اخیراً The Joy of را منتشر کردم واکنش نشان دهید(در برگه جدید باز می شود)، یک دوره جامع React.js. اگر تلاش کرده اید که احساس کنید واقعاً React را "دریافت" کرده اید، می توانید با دوره تعاملی من برای آن شهود ایجاد کنید.

می‌توانید در مورد این دوره بیشتر بیاموزید و لذت ساختن را با React کشف کنید:

من واقعاً از تیم CodeSandbox برای ساخت و نگهداری چنین منبع رایگان شگفت انگیزی سپاسگزارم. با تشکر از آیوز و دانیلو از CodeSandbox برای بررسی این پست وبلاگ. 💜

آخرین به روز رسانی از

5 جولای 2025