Parser

️ تحذير: انتقل هذا المشروع على npmjs.com من "dss" إلى "@documented-style-sheets/parser"

DSS ، أوراق الأنماط الموثقة هي دليل تعليقات للأغراض العامة والمحلل (على سبيل المثال CSS ، أقل ، تعليقات القلم ، SASS ، SCSS & JS). يقوم هذا المشروع بتحليل الملفات الثابتة والحلية لإنشاء كائن لاستخدامه لتوليد نماذج النمط.

جدول المحتويات

• تثبيت
• تحليل ملف
  • dss.detector
  • dss.parser
• مشاريع أخرى

تثبيت

npm i @documented-style-sheets/parser

تحليل ملف

في معظم الحالات ، ستحتاج إلى تضمين محلل DSS في خطوة بناء من شأنها إنشاء ملفات الوثائق تلقائيًا (أو تريد فقط اللعب مع هذا Object الذي تم إرجاعه لوسائل أخرى) ؛ في كلتا الحالتين ، نحن ندعم رسميًا مكونًا إضافيًا ومكونًا إضافيًا.

أمثلة

مثال على تنسيق كتلة التعليق

 //
// @name Button
// @description Your standard form button.
// 
// @state :hover - Highlights when hovering.
// @state :disabled - Dims the button when disabled.
// @state .primary - Indicates button is the primary action.
// @state .smaller - A smaller button
// 
// @markup
//   <button>This is a button</button>
// 

مثال الاستخدام

 // Requirements
const fs = require ( 'fs' )
const { parse } = require ( '@documented-style-sheets/parser' )

// Get file contents
const fileContents = fs . readFileSync ( 'styles.css' )

// Run the DSS Parser on the file contents
parse ( fileContents , { } , function ( parsedObject ) {
  // Output the parsed document
  console . log ( parsedObject )
} ) 

مثال الإخراج

{
  "name" : " Button " ,
  "description" : " Your standard form button. " ,
  "state" : [
    { 
      "name" : " :hover " ,
      "escaped" : " pseudo-class-hover " ,
      "description" : " Highlights when hovering. "
    },
    {
      "name" : " :disabled " ,
      "escaped" : " pseudo-class-disabled " ,
      "description" : " Dims the button when disabled. "
    },
    {
      "name" : " .primary " ,
      "escaped" : " primary " ,
      "description" : " Indicates button is the primary action. "
    },
    {
      "name" : " .smaller " ,
      "escaped" : " smaller " ,
      "description" : " A smaller button "
    }
  ],
  "markup" : {
    "example" : " <button>This is a button</button> " ,
    "escaped" : " &lt;button&gt;This is a button&lt;/button&gt; "
  }
}

DSS.Detector (<<ballback>)

تحدد هذه الطريقة الطريقة التي يتم بها العثور على نقاط الاهتمام (أي المتغيرات) في خطوط النص ، وبعد ذلك ، تم تحليلها لاحقًا. يظهر أدناه DSS Dogfoods هذا API والتنفيذ الافتراضي أدناه.

الكاشف الافتراضي:

 // Describe default detection pattern
// Note: the current line, as a string, is passed to this function
const dss = require ( '@documented-style-sheets/parser' )
dss . detector ( function ( line ) {
  if ( typeof line !== 'string' ) {
    return false
  }
  var reference = line . split ( "nn" ) . pop ( )
  return ! ! reference . match ( / .*@ / )
} )

dss . parse ( ... ) 

dss.parser (<name> ، <callback>)

يتضمن DSS ، افتراضيًا ، 4 محللين name description state markup كتلة التعليق. يمكنك إضافة أو تجاوز هذه الإعدادات الافتراضية عن طريق تسجيل محلل جديد. تتبع هذه الإعدادات الافتراضية أيضًا نمطًا يستخدم @ Decorator لتحديده. يمكنك تعديل هذا behaivour توفير وظيفة رد اتصال مختلفة إلى dss.detector() .

تتوقع dss.parser اسم المتغير الذي تبحث عنه ووظيفة رد الاتصال لمعالجة المحتويات. كل ما يتم إرجاعه بواسطة وظيفة رد الاتصال هذه هو ما يستخدم في إنشاء JSON.

رد الاتصال this :

• this.file : الملف الحالي
• this.name : اسم المحلل
• this.options : الخيارات التي تم تمريرها إلى dss.parse() في البداية
• this.line :
  • this.line.contents : المحتوى المرتبط بهذا المتغير
  • this.line.from : رقم السطر حيث تم العثور على هذا المتغير
  • this.line.to : رقم السطر حيث انتهت محتويات هذا المتغير
• this.block :
  • this.block.contents : المحتوى المرتبط بكتلة تعليق هذا المتغير
  • this.block.from : رقم السطر حيث يبدأ كتلة تعليق هذا المتغير
  • this.block.to : رقم السطر حيث ينتهي كتلة تعليق هذا المتغير

أمثلة المحلل المخصص:

 // Matches @version
dss . parser ( 'version' , function ( ) {
  // Just returns the lines contents
  return this . line . contents
} ) 

 dss . parser ( 'link' , function ( ) {
  // Replace link with HTML wrapped version
  const exp = / (b(https?|ftp|file): / / [ - A - Z0 - 9 + & @# / % ? = ~ _ | ! : , . ; ] * [ - A - Z0 - 9 + & @# / %= ~ _ | ] ) / ig
  this . line . contents . replace ( exp , "<a href='$1'>$1</a>" )
  return line
} )

مشاريع أخرى

• مكون إضافي نخر
• المكون الإضافي GULP
• سامي نص مكون إضافي
• ux recorder
• لاعب UX
• Plugin SourceJS