دليل لإنشاء مكوّن ملاحظة لجعل بيانات وقت القراءة متاحة عند استيراد ملفات MDX كالوحدات ES.
Remark هو معالج ماركداون قوي يمكن استخدامه لإنشاء ملحقات مخصصة لتحويل محتوى الماركداون. عند تحليل ملفات الماركداون باستخدام remark، يتم تحويل المحتوى إلى شجرة بناء جملة مجردة (AST) يمكن التلاعب بها باستخدام الملحقات.
للحصول على تجربة مستخدم أفضل، من المعتاد عرض التقدير الزمني لقراءة المقالة. في هذا الدليل، سنقوم بإنشاء مكوّن ملاحظة لاستخراج بيانات وقت القراءة من ملف MDX وجعلها متاحة عند استيراد ملف MDX كوحدة ES.
لنبدأ بإنشاء ملف MDX:
بافتراض أننا نستخدم "Vite" كمجمع، مع الملحق الرسمي @mdx-js/rollup لتحويل ملفات MDX، يمكننا استيراد ملف MDX كوحدة ES. يجب أن يبدو تكوين Vite كالتالي:
إذا قمنا باستيراد ملف MDX كوحدة ES، سيكون المحتوى هو كائن يحتوي على الخاصية default التي تحتوي على JSX المجمع. على سبيل المثال:
سيؤدي ذلك إلى:
بمجرد أن يكون لدينا الإخراج مثل هذا، نكون جاهزين لإنشاء مكوّن الملاحظة.
لنلقي نظرة على ما نحتاج إلى القيام به لتحقيق الهدف:
لحسن الحظ، هناك مكتبات بالفعل لمساعدتنا في حساب وقت القراءة والعمليات الأساسية لشجرة AST:
reading-time لحساب وقت القراءة.mdast-util-to-string لتحويل AST الخاص بـ MDX إلى نص.estree-util-value-to-estree لتحويل بيانات وقت القراءة إلى عقدة ESTree.إذا كنت مستخدمًا لـ TypeScript، فقد تحتاج أيضًا إلى تثبيت هذه الحزم لتعريفات الأنواع:
@types/mdast لتعريفات نوع العقدة الجذرية لـ MDX.unified لتعريفات نوع الملحقات.طالما لدينا الحزم مثبتة، يمكننا البدء في إنشاء الملحق:
كما نرى، يقتصر الملحق ببساطة على استخراج محتوى MDX إلى نص وحساب وقت القراءة. الآن نحتاج إلى إرفاق بيانات وقت القراءة بمحتوى MDX، ويبدو أن الأمر ليس ساده تمامًا. لكن إذا نظرنا إلى المكتبات الأخرى الرائعة مثل remark-mdx-frontmatter، يمكننا العثور على طريقة للقيام بذلك:
لاحظ type: 'mdxjsEsm' في الكود أعلاه. هذا نوع من العقد المستخدمة لتسلسل ESM في MDX. يرفق الكود أعلاه بيانات وقت القراءة باستخدام الاسم readingTime بمحتوى MDX، الذي سيؤدي إلى الإخراج التالي عند استيراد ملف MDX كوحدة ES:
إذا كنت بحاجة إلى تغيير اسم بيانات وقت القراءة، يمكنك تحديث الخاصية name للعقدة Identifier.
لجعل الملحق أكثر صداقة للمطورين، يمكننا إجراء لمسة أخيرة من خلال تعزيز تعريفات نوع MDX:
الآن، عند استيراد ملف MDX، سيتعرف TypeScript على الخاصية readingTime:
آمل أن يساعدك هذا الدليل في الحصول على تجربة أفضل عند العمل مع ملفات MDX. مع هذا المكوّن الملاحظة، يمكنك استخدام بيانات وقت القراءة مباشرة وحتى الاستفادة من تقليل الشجرة ESM لتحسين الأداء.