sfc composer

composeur SFC

? ‍? Aiders de pré-compilateur pour les composants de fichiers uniques

Soutiens actuellement: .vue, .svelte, .astro

? Ourdier

Usage

Installer le package:

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' 

Internes

Classe Magicsfc

MagicSFC<T> est l'interface racine fournie pour être étendue par les classes enfants spécifiques au framework.

• scripts: MagicBlock<T>[]

  Se référant à <script> ou à tout contexte JavaScript/TypeScript de SFCS.

• templates: MagicBlock<T>[]

  Se référant à <template> parties de SFCS.

• styles: MagicBlock<T>[]

  Se référant aux parties <style> des SFC.

• customs: MagicBlock<T>[]

  Blocs personnalisés des analyseurs de frameworks prenant en charge cette fonctionnalité.

• getSourcemap(options?: SourceMapOptions): SourceMap

  Génère un SourceMap de version 3 comme MagicString .

• getTransformResult(): TransformResult

  Compatible avec le résultat du crochet VITE transform() .

• parse(): Promise<MagicSFC>

  Utilise l'analyseur pour mettre à jour les blocs MagicSFC .

Devrait être mis en œuvre par les classes enfants.

En savoir plus sur tous les usages en regardant les tests!

Comment fonctionne Magicsfc

Lorsque vous utilisez la fonction parse , MagicSFC divisera le composant fourni à l'aide de votre outillage natif Framework.

Le résultat de l'analyse sera divisé en un format standard de reconnaissance templates , scripts et des blocs styles .

Chacun de ces MagicBlock préservera la forme d'origine de l'analyseur, mais exposera également toutes les fonctions de magication pertinentes.

Chacune de ces fonctions, lorsqu'elle est appelée, appliquera toutes les deux vos modifications sur le bloc local.

Vous avez également accès à _loc et _source sur chaque MagicBlock , qui sont des copies standard du positionnement et du contenu du bloc.

Lorsque vous appelez result , vous obtiendrez le code en tant que chaîne et un objet SourceMap approprié.

Regardez l'implémentation.

Créer des fonctions

Frameworks exporte une fonction createSfc qui facilite la génération de SFCS.

Ils prennent tous en charge les mêmes agruments d'entrée:

 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

Exemple de code

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

En savoir plus en regardant les tests.

createvuesfc

Exemple de code

 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>

En savoir plus en regardant les tests!

MAGICSVELTESFC

Exemple de code

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

En savoir plus en regardant les tests!

CréerSveltesfc

Exemple de code

 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>

En savoir plus en regardant les tests!

Magicastrosfc

Exemple de code

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

En savoir plus en regardant les tests!

createasstrosfc

Exemple de code

 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>

En savoir plus en regardant les tests!

Développement

• Cloner ce référentiel
• Installez la dernière version LTS de Node.js
• Activer CorePack en utilisant corepack enable
• Installez les dépendances à l'aide de pnpm install
• Exécutez des tests interactifs à l'aide de pnpm dev

Licence

Fait avec

Publié sous la licence MIT.