sfc composer

SFC-Composer

? ‍? Помощники-предварительные компиляторы для единичных компонентов

В настоящее время поддерживает: .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 Class

MagicSFC<T> -это корневой интерфейс, поставляемый для расширения детских классов, специфичных для фреймворта.

• scripts: MagicBlock<T>[]

  Ссылаясь на <script> или любые контексты JavaScript/TypeScript SFCS.

• templates: MagicBlock<T>[]

  Ссылаясь на <template> Части SFCS.

• styles: MagicBlock<T>[]

  Ссылаясь на <style> Части SFCS.

• customs: MagicBlock<T>[]

  Пользовательские блоки от анализаторов Frameworks, поддерживающих эту функцию.

• getSourcemap(options?: SourceMapOptions): SourceMap

  Генерирует версию 3 Sourcemap, как MagicString .

• getTransformResult(): TransformResult

  Совместим с результатом крючка VITE transform() .

• parse(): Promise<MagicSFC>

  Использует анализатор для обновления блоков MagicSFC .

Должен быть реализован детьми классы.

Узнайте больше обо всех использованиях, посмотрев на тесты!

Как работает MagicsFC

При использовании функции parse MagicSFC разделяет поставляемый компонент, используя ваш нативный инструмент.

Результат анализа будет разделен на стандартный формат, распознающий templates , scripts и блоки styles .

Каждый из этих MagicBlock сохранит оригинальную форму от анализатора, но также выявит все соответствующие функции MagicString.

Каждая из этих функций, когда вы вызываете, оба применяют ваши изменения в локальном блоке.

Вы также получаете доступ к _loc и _source на каждом MagicBlock , которые являются стандартными копиями позиционирования и содержания блока.

При вызове result вы получите code в качестве строки и соответствующий объект SourceMap .

Посмотрите на реализацию.

CreateSFC функции

Frameworks экспортирует функцию 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; }' ,
    } ,
  ] ,
} ) 

? ️ вывод

 <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; }' ,
    } ,
  ] ,
} ) 

? ️ вывод

 <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; }' ,
    } ,
  ] ,
} ) 

? ️ вывод

 ---
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.