مستكشف شجرة AST لـ JavaScript

كيفية استكشاف شجرة AST لشيفرة JavaScript

1. الصق شيفرتك في حقل شيفرة JavaScript، أو انقر تحميل المثال لتبدأ بوحدة صغيرة جاهزة.
2. اختر نوع المصدر: وحدة Module (import/export، الوضع الصارم) لوحدات ES، أو سكربت Script (تقليدي) للسكربتات العادية التي قد تستخدم ميزات الوضع غير الصارم مثل with.
3. تتحدّث الشجرة بعد لحظة من توقفك عن الكتابة. انقر تحليل لتشغيل التحليل فورًا.
4. في شجرة الصياغة، انقر السهم الصغير لتوسيع العقدة أو طيّها. وانقر اسم العقدة لتحديد الشيفرة المقابلة لها في المحرر؛ فتعرض لوحة العقدة المحددة نوعها، والخاصية التي تنتمي إليها، ونطاق أحرفها، وسطرها وعمودها، وخصائصها البسيطة (الاسم، والعامل، والقيمة الخام…) ونصها المصدري.
5. ويعمل الربط في الاتجاه المعاكس أيضًا: انقر في أي مكان من الشيفرة، أو حرّك المؤشر بلوحة المفاتيح، أو حدّد جزءًا منها، فتُوسَّع أعمق عقدة تحتويه وتُبرز في الشجرة.
6. افتح ESTree JSON لعرض الشجرة كاملة بصيغة JSON، مع خيار تضمين المواضع (start وend وloc) أو دونه، ثم انسخها أو استخدم تنزيل JSON.

تعرض العدّادات عدد العُقد، وأقصى عمق للشجرة، وعدد تعليمات المستوى الأعلى.

ما شجرة الصياغة المجردة (AST)؟

قبل أن يتمكن محرّك JavaScript أو أداة فحص (linter) أو أداة تجميع (bundler) من فعل أي شيء بشيفرتك، يحلّل النص إلى شجرة من العقد. لكل عقدة نوع type (مثل VariableDeclaration وCallExpression وIdentifier…) وعقد أبناء محفوظة في خصائص مسمّاة. فالتعليمة total += size; تنتج عقدة ExpressionStatement تكون خاصيتها expression من النوع AssignmentExpression بالعامل +=، وطرفها الأيسر left هو المعرّف total وطرفها الأيمن right هو المعرّف size. أما الأقواس والفواصل المنقوطة والتعليقات فتختفي: تحتفظ الشجرة بالبنية المهمة فقط، ولهذا توصف بأنها مجردة.

تستخدم هذه الأداة Acorn، المحلّل الصغير والسريع الذي تعتمد عليه أدوات JavaScript كثيرة، مع الإعداد ecmaVersion: "latest". وتتبع النتيجة معيار ESTree، وهو الصيغة المشتركة التي ينتجها أيضًا Espree (محلّل ESLint) وتفهمها معظم أدوات تحويل الشيفرة. ومعرفة أنواع العقد بدقة أمر أساسي عند كتابة قاعدة ESLint، أو تحويل آلي (codemod) بـ Babel أو jscodeshift، أو إضافة لـ Prettier، أو أي سكربت يحلّل الشيفرة.

المواضع والنطاقات وتصدير JSON

تحمل كل عقدة الخاصيتين start وend، وهما موضع أول حرف فيها والموضع الذي يلي آخر حرف في المصدر، إضافةً إلى كائن loc يحتوي الأسطر (بدءًا من 1) والأعمدة. في JSON تبدأ الأعمدة من 0 كما في مخرجات Acorn، بينما تعرضها لوحة العقدة المحددة بدءًا من 1 كما تفعل معظم المحررات. ألغِ تحديد تضمين المواضع (start وend وloc) للحصول على JSON أخفّ يسهل مقارنته بين نسختين من الشيفرة.

بعض القيم لا يمكن تمثيلها في JSON: فالتعابير النمطية الحرفية تأخذ القيمة "value": null (وتحتفظ خاصيتها regex بالنمط والرايات)، وتُكتب قيم BigInt الحرفية سلاسلَ نصية، كما توصي مواصفة ESTree.

الحدود والخصوصية

تُحلَّل الشيفرة في متصفحك، ولا تُنفَّذ ولا تُرسل إلى أي مكان: فالمحلّل يقرأ النص فقط. ويقتصر الإدخال على مليون حرف. تُعرض الأشجار الكبيرة جدًا عند الطلب، دفعةً من الأبناء في كل مرة، ويمكن تنزيل ملف JSON حتى لو كان أكبر من أن يُعرض. ولأن JSX وTypeScript ليستا JavaScript قياسية، يعدّهما Acorn أخطاء صياغة.