Parser

คำเตือน: โครงการนี้ได้ย้ายไปที่ npmjs.com จาก "dss" เป็น "@documented-style-sheets/parser"

DSS , เอกสารสไตล์เอกสารเป็นคู่มือความคิดเห็นทั่วไปและตัวแยกวิเคราะห์ (เช่น CSS, น้อย, Stylus, Sass, SCSS & JS ความคิดเห็น) โครงการนี้ทำการวิเคราะห์ไฟล์แบบคงที่และการแยกวิเคราะห์เพื่อสร้างวัตถุที่จะใช้สำหรับการสร้าง StyleGuides

สารบัญ

• การติดตั้ง
• แยกวิเคราะห์ไฟล์
  • 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 (<fallback>)

วิธีนี้กำหนดวิธีการที่จุดที่น่าสนใจ (เช่นตัวแปร) พบในบรรทัดของข้อความและจากนั้นในภายหลังแยกวิเคราะห์ 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>, <การโทรกลับ>)

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
} )

โครงการอื่น ๆ

• ปลั๊กอินคำราม
• ปลั๊กอินอึก
• ปลั๊กอินข้อความประเสริฐ
• UX Recorder
• เครื่องเล่น UX
• ปลั๊กอิน SourceJS