sfc composer

เครื่องแต่งกาย SFC

?? ผู้ช่วยคอมไพเลอร์ล่วงหน้าสำหรับส่วนประกอบไฟล์เดียว

ปัจจุบันสนับสนุน: .vue, .svelte, .Astro

? ️สนามเด็กเล่น

การใช้งาน

ติดตั้งแพ็คเกจ:

pnpm install sfc-composer

 import { MagicSFC as MagicVueSFC } from 'sfc-composer/vue'
import { MagicSFC as MagicSvelteSFC } from 'sfc-composer/svelte'
import { MagicSFC as MagicAstroSFC } from 'sfc-composer/astro' 

ภายใน

คลาส Magicsfc

MagicSFC<T> เป็นอินเทอร์เฟซรูทที่ให้มาโดยการขยายโดยคลาสเด็กเฉพาะเฟรมเวิร์ก

• scripts: MagicBlock<T>[]

  อ้างถึง <script> หรือบริบท JavaScript/TypeScript ของ SFCs

• templates: MagicBlock<T>[]

  อ้างถึง <template> บางส่วนของ SFCs

• styles: MagicBlock<T>[]

  อ้างถึง <style> บางส่วนของ SFCs

• customs: MagicBlock<T>[]

  บล็อกที่กำหนดเองจาก Frameworks Parsers รองรับคุณสมบัตินั้น

• getSourcemap(options?: SourceMapOptions): SourceMap

  สร้าง SourceMap เวอร์ชัน 3 เช่น MagicString

• getTransformResult(): TransformResult

  เข้ากันได้กับผลลัพธ์ของ transform() Hook

• parse(): Promise<MagicSFC>

  ใช้ตัวแยกวิเคราะห์เพื่ออัปเดตบล็อก MagicSFC

ควรดำเนินการโดยชั้นเรียนเด็ก

เรียนรู้เพิ่มเติมเกี่ยวกับการใช้งานทั้งหมดโดยดูที่การทดสอบ!

magicsfc ทำงานอย่างไร

เมื่อใช้ฟังก์ parse MagicSFC จะแยกส่วนประกอบที่ให้มาโดยใช้เครื่องมือ Native Framework ของคุณ

ผลการแยกวิเคราะห์จะถูกแยกออกเป็นรูปแบบมาตรฐานที่จดจำ templates scripts และบล็อก styles

MagicBlock เหล่านี้แต่ละตัวจะรักษารูปร่างดั้งเดิมจากตัวแยกวิเคราะห์ แต่จะเปิดเผยฟังก์ชั่น MagicString ที่เกี่ยวข้องทั้งหมด

แต่ละฟังก์ชั่นเหล่านี้เมื่อเรียกทั้งคู่จะใช้การเปลี่ยนแปลงของคุณกับบล็อกท้องถิ่น

นอกจากนี้คุณยังสามารถเข้าถึง _loc และ _source ในทุก MagicBlock ซึ่งเป็นสำเนามาตรฐานของการวางตำแหน่งบล็อกและเนื้อหา

เมื่อโทร result คุณจะได้รับ code เป็นสตริงและวัตถุ SourceMap ที่เหมาะสม

ดูการใช้งาน

ฟังก์ชั่น createsfc

เฟรมเวิร์กส่งออกฟังก์ชั่น createSfc ที่ทำให้การสร้าง SFCS ง่ายขึ้น

พวกเขาทั้งหมดรองรับ Aguments อินพุตเดียวกัน:

 import { createSFC as createVueSFC } from 'sfc-composer/vue'
import { createSFC as createSvelteSFC } from 'sfc-composer/svelte'
import { createSFC as createAstroSFC } from 'sfc-composer/astro'

const writeableSFC = {
  templates : [
    {
      content : '<div>Hello World!</div>'
    }
  ] ,
  scripts : [
    {
      content : 'console.log(`Hello World!`)'
    }
  ] ,
  styles : [
    {
      content : 'div { color: red; }'
    }
  ]
}

// Will output a valid Svelte SFC
createSvelteSFC ( writeableSFC )

// Will output a valid Astro SFC
createAstroSFC ( writeableSFC )

// Will output a valid Vue SFC
createVueSFC ( {
  ... writeableSFC ,
  // Vue also natively supports `customs` block in its parser.
  customs : [
    {
      type : 'i18n' ,
      content : '{ "fr": "Bonjour!", "en": "Hello!" }' ,
    }
  ]
} ) 

MagicVuesfc

รหัสตัวอย่าง

 import { MagicSFC as MagicVueSFC } from 'sfc-composer/vue'
import { parse } from 'vue/compiler-sfc'

async function transformVueSFC ( ) {
  const sfc = new MagicVueSFC (
    '<template><div>Hello World!</div></template>'
    + '<script setup>let test: string</script>'
    + '<style scoped>div { color: red; }</style>' ,
    {
      parser : parse
    }
  )

  // Process the SFC code through the parser
  await sfc . parse ( )

  // Append to the <script> tag
  sfc . scripts [ 0 ] . append ( ' = `Hello World`' )

  return sfc . result ( )

  // {
  //    code: '<template><div>Hello World!</div></template>nn<script setup>let test: string = `Hello World`</script>nn<style scoped>div { color: red; }</style>'
  //    map: SourceMap
  // }
}

เรียนรู้เพิ่มเติมโดยดูที่การทดสอบ

createVuesfc

รหัสตัวอย่าง

 import { createSFC as createVueSFC } from 'sfc-composer/vue'

const MagicVueSFC = createVueSFC ( {
  templates : [
    {
      content : '<div>{{ msg }}</div>' ,
    }
  ] ,
  script : [
    {
      content : 'export default { data() { return { msg: "Hello, world!" } } }'
    } ,
    {
      content : 'const setupMsg = "Hello from setup!"' ,
    }
  ] ,
  styles : [
    {
      lang : 'scss' ,
      scoped : true ,
      content : '.text { color: red; }' ,
    } ,
  ] ,
} ) 

? utput จะส่งออก

 <script>
export default { data() { return { msg: "Hello, world!" } }
</script>

<script setup>
const setupMsg = "Hello from setup!"
</script>

<template>
<div>{{ msg }}</div>
</template>

<style scoped lang="scss">
.text { color: red; }
</style>

เรียนรู้เพิ่มเติมโดยดูที่การทดสอบ!

magicsveltesfc

รหัสตัวอย่าง

 import { MagicSFC as MagicSvelteSFC } from 'sfc-composer/svelte'
import { preprocess } from 'svelte/compiler'

async function transformSvelteSFC ( ) {
  const sfc = new MagicSvelteSFC (
    '<script>let test: string</script>nn'
    + '<div>Hello World!</div>nn'
    + '<style>div { color: red; }</style>' ,
    {
      parser : preprocess
    }
  )

  // Process the SFC code through the parser
  await sfc . parse ( )

  // Append to the <script> tag
  sfc . scripts [ 0 ] . append ( ' = `Hello World`' )

  return sfc . result ( )

  // {
  //    code: '<script>let test: string = `Hello World`</script>nn<div>Hello World!</div>nn<style>div { color: red; }</style>'
  //    map: SourceMap
  // }
}

เรียนรู้เพิ่มเติมโดยดูที่การทดสอบ!

createSveltesfc

รหัสตัวอย่าง

 import { createSFC as createSvelteSFC } from 'sfc-composer/svelte'

const MagicVueSFC = createSvelteSFC ( {
  templates : [
    {
      content : '<div>{msg}</div>' ,
    }
  ] ,
  script : [
    {
      content : 'let test = `Hello World!`;'
    }
  ] ,
  styles : [
    {
      content : '.text { color: red; }' ,
    } ,
  ] ,
} ) 

? utput จะส่งออก

 <script>
let test = `Hello World!`;
</script>

<script setup>
const setupMsg = "Hello from setup!"
</script>

<div>{msg}</div>

<style>
.text { color: red; }
</style>

เรียนรู้เพิ่มเติมโดยดูที่การทดสอบ!

MagicAstrosfc

รหัสตัวอย่าง

 import { MagicSFC as MagicAstroSFC } from 'sfc-composer/astro'
import { preprocess } from '@astrojs/compiler'

async function transformAstroSFC ( ) {
  const sfc = new MagicAstroSFC (
    '---nlet test: stringn---nn'
    + '<div>Hello World!</div>nn'
    + '<style>div { color: red; }</style>' ,
    {
      parser : preprocess
    }
  )

  // Process the SFC code through the parser
  await sfc . parse ( )

  // Append to the <script> tag
  sfc . scripts [ 0 ] . append ( 'test = `Hello World`' )

  return sfc . result ( )

  // {
  //    code: '---nlet test: stringntest = `Hello World`n---nn<div>Hello World!</div>nn<style>div { color: red; }</style>'
  //    map: SourceMap
  // }
}

เรียนรู้เพิ่มเติมโดยดูที่การทดสอบ!

createastrosfc

รหัสตัวอย่าง

 import { createSFC as createAstroSFC } from 'sfc-composer/astro'

const MagicVueSFC = createAstroSFC ( {
  templates : [
    {
      content : '<div>{msg}</div>' ,
    }
  ] ,
  script : [
    {
      content : 'let test = `Hello World!`;' ,
      attrs : {
        frontmatter : true
      }
    } ,
    {
      content : 'let secondTest = `Hello World`;'
    }
  ] ,
  styles : [
    {
      content : '.text { color: red; }' ,
    } ,
  ] ,
} ) 

? utput จะส่งออก

 ---
let test = `Hello World!`;
---

<script>
let secondTest = `Hello World`;
</script>

<div>{msg}</div>

<style>
.text { color: red; }
</style>

เรียนรู้เพิ่มเติมโดยดูที่การทดสอบ!

การพัฒนา

• โคลนที่เก็บนี้
• ติดตั้ง LTS เวอร์ชันล่าสุดของ node.js
• เปิดใช้งาน CorePack โดยใช้ corepack enable
• ติดตั้งการพึ่งพาโดยใช้ pnpm install
• เรียกใช้การทดสอบแบบโต้ตอบโดยใช้ pnpm dev

ใบอนุญาต

ทำด้วย

เผยแพร่ภายใต้ใบอนุญาต MIT