المنهجية

1. بنية المحرر

تستخدم مساحة العمل ثلاثة محررات نصية لـ HTML وCSS وJavaScript مع هوامش أرقام الأسطر، ومعالجة المسافات البادئة بالتبويب، وضوابط حجم الخط، والتفاف النص الاختياري.

2. معالجة HTML

يُوضَع HTML من لوحة HTML في body لمستند مُولَّد. لا ينفّذ الأداة HTML كواجهة للصفحة الأصلية.

3. حقن CSS

يُدرَج CSS في عنصر style داخل head للمستند المُولَّد حتى تُطبَّق القواعد على مستند المعاينة فقط.

4. تنفيذ JavaScript

يُوضَع JavaScript في عنصر script داخل مستند المعاينة. يعمل في سياق تصفح iframe بعد Run.

5. عرض iframe

يُعيَّن المستند المُجمَّع إلى iframe.srcdoc، مما ينشئ مستند معاينة جديدًا دون التنقل في الصفحة الأصلية.

6. عزل sandbox

يستخدم iframe سمة sandbox (السماح بالنصوص البرمجية للمعاينة). لا تُعرَّض واجهات DOM للصفحة الأصلية لتنفيذ كود المستخدم.

7. معالجة وحدة التحكم

جسر صغير داخل المعاينة يُعيد توجيه console.log/info/warn/error وأخطاء وقت التشغيل إلى الأصل عبر postMessage للعرض.

8. واجهات برمجة المتصفح

ما يمكن للنصوص البرمجية فعله يعتمد على سياسة المتصفح وأذونات sandbox. بعض الواجهات تتصرف بشكل مختلف في iframes عن الصفحات ذات المستوى الأعلى.

9. التخزين المحلي

قد يُكتَب حالة المحرر في مفاتيح localStorage مقيدة بهذا الأصل حتى لا يمحو التحديث العمل الجاري.

10. القيود

لا يوجد تجميع من جانب الخادم لـ HTML/CSS/JS القياسي. خطوط بناء معقدة وحزم خاصة وواجهات أجهزة مميزة خارج النطاق.

11. اعتبارات الخصوصية

تجميع المعاينة يتم من جانب العميل. يبقى التخزين المحلي في المتصفح ما لم تصدّر أو تنسخ المحتوى في مكان آخر.