مقدمة
لفترة من الوقت، أردت إنشاء مكتبة مفتوحة المصدر لاختبار مهاراتي وتعلم مهارات جديدة في تطوير البرمجيات والمساهمة في نظام Svelte. جاءت هذه الفرصة عندما اكتشفت security headers في HTTP response headers. أردت اختبارها في محفظتي ولكنني واجهت تجربة مطور (DX) سيئة حيث لم تكن هناك وظيفة الإكمال التلقائي.
الإلهام
وجدت sveltekit-security-headers، وهي مكتبة كان بها بالضبط ما أردت ولكنها كانت تفتقر إلى ميزات مثل معالجة Content-Security-Policy directives والأمان الأساسي للأنواع. لذلك، قررت إنشاء مكتبتي الخاصة مع هذه الميزات المفقودة.
عملية التطوير
البحث والتخطيط
قبل كتابة أي كود، كنت مهتمًا بإدارة securekit في monorepo على GitHub. كنت بحاجة إلى فهم كيفية التعامل مع إدارة الإصدارات والنشر على npm.
مكتبة TypeScript وإدارة الإصدارات
قادني بحثي إلى فيديو رائع من Matt Pocock حول نشر مكتبات TypeScript على npm.
كان هذا الفيديو من Matt Pocock رائعًا ومفيدًا جدًا للبدء.
إعداد Monorepo
استخدمت في البداية workspaces الخاص بمدير الحزم Bun لإنشاء monorepo.
إنشاء مستودع المشروع
قمت بإعداد مشروعي وإنشاء monorepo مع حزمة securekit TypeScript متبعًا الدروس التعليمية التي درستها. قمت بتضمين تطبيق SvelteKit تجريبي للاختبار بهذا الهيكل:
├── package.json
├── LICENSE
├── README.md
├── .gitignore
├── apps
│ └── demo // تطبيق SvelteKit تجريبي
└── packages
└── securekit // مكتبة typescript
التدقيق والاختبار
أنشأت GitHub action للتدقيق في .github/workflows/lint.yml وحاولت نشر تطبيق SvelteKit التجريبي على Vercel. ومع ذلك، فشل لأن مساحة عمل Bun لم تعمل بشكل صحيح مع Vercel. كان علي إنشاء نص برمجي مخصص لبناء الحزمة أولاً، ثم التطبيق التجريبي.
النشر
فشل النشر الأولي لـ securekit@0.0.1 على npm عدة مرات. بعد استكشاف الأخطاء وإصلاحها وقراءة الوثائق، أدركت أن استخدام Bun كمدير مساحة عمل لم يكن الحل المثالي. هذا قادني للبحث عن حلول monorepo أفضل.
تطور Monorepo
مساحات عمل Pnpm
ذهبت إلى svelte-markdoc-preprocess، المكتبة التي أستخدمها لتحويل markdown إلى ما تقرأه الآن، ووجدت أنه يستخدم مساحات عمل pnpm لـ monorepo الخاص به. لذلك قررت استخدامه.
كان علي البحث واستبدال bun بـ pnpm في كل مكان في مشروعي وإضافة pnpm-workspace.yaml. ثم بعد المحاولة، عمل، ولكن مثل bun، لم يعمل كما هو متوقع، خاصة لتطبيق sveltekit التجريبي الذي نشرته على Vercel. كان يفشل في النشر بسبب النص البرمجي المخصص وفشل في بناء الاعتماد على الحزمة قبل التطبيق. مرة أخرى، كان علي إيجاد حل monorepo أفضل.
Turborepo
روجت Vercel لأحد منتجاتها، Turborepo. شاهدت فيديو Fireship عنه، وكان بالضبط ما كنت أحتاجه.
شاهدت فيديو البدء من mattpocockuk مرة أخرى.
وبدأت على الفور باستخدامه في مشروعي. عدت إلى مدير الحزم bun للتثبيت والنشر الأسرع، قمت بإعداد turborepo، وتم الالتزام، وعمل على الفور كما هو متوقع.
الميزة التالية
بعد حل مشاكل monorepo، اكتشفت أن SvelteKit كان لديه بالفعل Content-Security-Policy directives في sveltekit.config.js، وكانت مكتبتي تتجاوز هذه الإعدادات. طورت حلاً ونشرته بنجاح كـ securekit@1.1.0.
اختبار الوحدات والمتصفح
لتحسين عملية الاختبار، نفذت:
- اختبار الحزمة باستخدام Bun test
- اختبار المتصفح مع Playwright للتحقق من الرؤوس
- التكامل مع Turbo.json وسير عمل CI
الخاتمة
قدم هذا المشروع تجارب تعليمية قيمة في:
- إدارة monorepos
- تنفيذ سير عمل CI/CD
- صيانة مكتبة TypeScript مفتوحة المصدر
ستكون هذه التجارب لا تقدر بثمن للمشاريع المستقبلية وتساعد في منع الأخطاء المماثلة.