sfc-composer

👨‍🔬 Pre-compiler helpers for Single File Components

Usage

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

API

MagicSFC

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

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

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: [
    {
      lang: 'scss', // scss | less | ts
      content: `.text {
  color: red;
}`,
    },
  ],
})

Learn more about all the usages by looking at the tests!

Development

• 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

License

Made with 💚

Published under MIT License.