sfc composer
v0.8.2
? ? 단일 파일 구성 요소에 대한 사전 컴파일러 도우미
현재 지원 : .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<T> 는 프레임 워크 별 아동 클래스에 의해 확장되도록 제공되는 루트 인터페이스입니다.
scripts: MagicBlock<T>[]
<script> 또는 SFC의 JavaScript/TypeScript 컨텍스트를 참조하십시오.
templates: MagicBlock<T>[]
SFC의 <template> 부분을 참조하십시오.
styles: MagicBlock<T>[]
SFC의 <style> 부분을 참조하십시오.
customs: MagicBlock<T>[]
해당 기능을 지원하는 프레임 워크 파서의 사용자 정의 블록.
getSourcemap(options?: SourceMapOptions): SourceMap
MagicString 과 같은 버전 3 Sourcemap을 생성합니다.
getTransformResult(): TransformResult
Vite transform() 후크 결과와 호환됩니다.
parse(): Promise<MagicSFC>
파서를 사용하여 MagicSFC 블록을 업데이트합니다.
아동 수업에서 구현해야합니다.
테스트를 살펴보면 모든 사용법에 대해 자세히 알아보십시오!
parse 기능을 사용하는 경우 MagicSFC 프레임 워크 기본 툴링을 사용하여 제공된 구성 요소를 분할합니다.
구문 분석 결과는 templates , scripts 및 styles 블록을 인식하는 표준 형식으로 나뉩니다.
이 MagicBlock 각각 파서에서 원래 모양을 보존하지만 모든 관련 MagicString 기능도 노출시킵니다.
호출되면 이러한 각 기능은 둘 다 로컬 블록에 변경 사항을 적용합니다.
또한 블록 포지셔닝 및 컨텐츠의 표준 사본 인 모든 MagicBlock 에서 _loc 및 _source 에 액세스 할 수 있습니다.
result 호출 할 때 code 문자열로, 적절한 SourceMap 객체를 얻게됩니다.
구현을보십시오.
프레임 워크는 SFC 생성을 프로그래밍 방식으로 쉽게 만들어주는 createSfc 기능을 내보내는 것입니다.
그들은 모두 동일한 입력 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!" }' ,
}
]
} ) 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
// }
}테스트를 살펴보면 자세히 알아보십시오.
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>
테스트를 보면서 자세히 알아보십시오!
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
// }
}테스트를 보면서 자세히 알아보십시오!
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>
테스트를 보면서 자세히 알아보십시오!
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
// }
}테스트를 보면서 자세히 알아보십시오!
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>
테스트를 보면서 자세히 알아보십시오!
corepack enablepnpm install 사용하여 종속성을 설치하십시오pnpm dev 사용하여 대화식 테스트를 실행하십시오 만들어졌습니다
MIT 라이센스에 따라 게시되었습니다.
