sfc composer

SFC-compositor

? ‍? Ayudantes previos al compilador para componentes de un solo archivo

Actualmente admite: .Vue, .Svelte, .astro

? ️ Playground

Uso

Paquete de instalación:

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' 

Interno

Clase Magicsfc

MagicSFC<T> es la interfaz raíz suministrada para ser extendida por clases infantiles específicas de marco.

• scripts: MagicBlock<T>[]

  Refiriéndose a <script> o cualquier contexto JavaScript/TypeScript de SFCS.

• templates: MagicBlock<T>[]

  Refiriéndose a <template> partes de SFC.

• styles: MagicBlock<T>[]

  Refiriéndose a <style> partes de SFC.

• customs: MagicBlock<T>[]

  Bloques personalizados de Frameworks analizadores que admiten esa característica.

• getSourcemap(options?: SourceMapOptions): SourceMap

  Genera una versión 3 SourcEmap como MagicString .

• getTransformResult(): TransformResult

  Compatible con el resultado transform() .

• parse(): Promise<MagicSFC>

  Utiliza el analizador para actualizar los bloques MagicSFC .

Debe ser implementado por clases de niños.

¡Obtenga más información sobre todos los usos mirando las pruebas!

Cómo funciona Magicsfc

Al usar la función parse , MagicSFC dividirá el componente suministrado utilizando sus herramientas nativas de marco.

El resultado de análisis se dividirá en un formato estándar que reconoce templates , scripts y bloques styles .

Cada uno de estos MagicBlock preservará la forma original del analizador, pero también expondrá todas las funciones mágicas relevantes.

Cada una de estas funciones, cuando se llama, aplicará sus cambios en el bloque local.

También tiene acceso a _loc y _source en cada MagicBlock , que son copias estándar del posicionamiento y contenido del bloque.

Al llamar result , obtendrá el code como una cadena y un objeto SourceMap apropiado.

Mire la implementación.

CREATESFC FUNCIONS

Frameworks exporta una función createSfc que facilita la generación de SFC programáticamente más fácil.

Todos apoyan los mismos agumentos de entrada:

 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

Código de ejemplo

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

Obtenga más información mirando las pruebas.

createvuesfc

Código de ejemplo

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

? ️ Salirá la salida

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

¡Obtenga más información mirando las pruebas!

Magicsveltesfc

Código de ejemplo

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

¡Obtenga más información mirando las pruebas!

CreateSevelTesfc

Código de ejemplo

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

? ️ Salirá la salida

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

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

<div>{msg}</div>

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

¡Obtenga más información mirando las pruebas!

Magicastrosfc

Código de ejemplo

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

¡Obtenga más información mirando las pruebas!

CreateAsTrosfc

Código de ejemplo

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

? ️ Salirá la salida

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

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

<div>{msg}</div>

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

¡Obtenga más información mirando las pruebas!

Desarrollo

• Clon este repositorio
• Instale la última versión LTS de Node.js
• corepack enable Enable
• Instalar dependencias utilizando pnpm install
• Ejecutar pruebas interactivas usando pnpm dev

Licencia

Hecho con

Publicado bajo la licencia MIT.