๐จโ๐ฌ Pre-compiler helpers for Single File Components
Install package:
# npm
npm install sfc-composer
# yarn
yarn add sfc-composer
# pnpm
pnpm install sfc-composer
Import:
// ESM
import { MagicVueSFC, createVueSFC } from 'sfc-composer'
// CommonJS
const { createVueSFC, MagicVueSFC } = require('sfc-composer')
MagicSFC
is the root interface supplied to be extended by framework-specific utils.
It exposes:
getSourcemap(options?: SourceMapOptions): SourceMap
Generates a version 3 sourcemap like MagicString
.
getTransformResult(): TransformResult
Compatible with Vite transform()
hook result.
parse(): void
Refresh the current content of the MagicSFC
instance. Should be implemented by child classes.
sfc-composer
currently only exposes MagicVueSFC
on top of MagicSFC
.
Learn more about all the usages by looking at the tests!
MagicVueSFC
acts as a wrapper of vue/compiler-sfc
and MagicString
.
It makes it very easy to apply changes to specific Vue SFCs <blocks>
without the hassle of handling character offsets in the MagicString.
It does so by creating a proxy of every block from the SFC parsed by vue/compiler-sfc
offering all of the MagicString
methods for each block.
const sfc = new MagicVueSFC('<template><div>Hello World!</div></template>\n<script>\nexport default {\n name: "MyComponent",\n};\n</script>')
sfc.script.overwrite(27, 38, 'UpdatedComponent')
console.log(sfc.toString())
// ^ '<template><div>Hello World!</div></template>\n<script>\nexport default {\n name: "UpdatedComponent",\n};\n</script>'
Learn more about all the usages by looking at the tests!
createVueSFC
helps in creating a MagicVueSFC from an object-like format.
It can be useful to create components programmatically or to recompose components from existing ones.
The input format is compatible with the SFCDescriptor
format that is given by vue/compiler-sfc
.
import { createVueSFC } from 'sfc-composer'
const MagicVueSFC = createVueSFC({
template: {
content: '<div>{{ msg }}</div>',
},
script: {
content: `export default {
data() {
return {
msg: "Hello, world!",
};
},
};`,
},
scriptSetup: {
content: 'const setupMsg = \'Hello from setup!\';',
},
styles: [
{
content: `.text {
color: red;
}`,
},
],
})
Learn more about all the usages by looking at the tests!
- Clone this repository
- Install latest LTS version of Node.js
- Enable Corepack using
corepack enable
- Install dependencies using
pnpm install
- Run interactive tests using
pnpm dev
Made with ๐
Published under MIT License.