Vue SFC To ES Modules

Transpiled Vue SFC File to ES modules.

✨ Features

• 💪 Fully Typed
• 🌳 TreeShakable & SideEffects Free, Check out Bundle Phobia
• 📁 Virtual File System (Support Compile .vue/.js File).
• 👬 Friendly Error Tips

💡 Inspiration

This project is heavily inspired by Vue SFC Playground. Actually Copied from it.

📦 Installation

yarn add vue-sfc2esm -S
or
npm i vue-sfc2esm -S

How it Works?

You could imagine that vue-sfc2esm has a virtual file system like vue project.

vue-sfc2esm will help you transpiled your sfc code base on Vue 3 into es modules code blocks with @vue/compiler-sfc

You could use these code blocks directly on the modern browser with type="module" in the <script> element.

Example

<script type="modules">
  // ES Modules Code Blocks Here.
</script>

📖 Usage

addFile

Add a file into the store, ready for compilation.

import { addFile } from 'vue-sfc2esm'

addFile('HelloWorld.vue', `<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
const msg = 'Hello World!'
</script>
`)

changeFile

Change the file code, It will trigger compileFile action.

import { changeFile } from 'vue-sfc2esm'

changeFile('HelloWorld.vue', `<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
const msg = 'Hello Vue SFC2ESM!'
</script>
`)

deleteFile

Delete the file in the store. with or without confirmation.

import { deleteFile } from 'vue-sfc2esm'

deleteFile('HelloWorld.vue')

CompileModules

Transpiled Vue SFC File to ES modules with @vue/compiler-sfc.

import { compileModules } from 'vue-sfc2esm'

(async function () {
  // Compile Default App.vue Component Or Files In Store.
  const modules = await compileModules('App.vue')
  console.log(`Successfully compiled [App.vue] to ES Modules.`)
  console.log(modules)
})()

Typed

/**
 * Transpiled Vue SFC File to ES modules with `@vue/compiler-sfc`.
 *
 * @param filename
 */
declare function compileModules(filename: string): Promise<Array<string>>;

/**
 * Record the code & errors when a sfc file has been compiled.
 */
interface FileCompiled {
    js: string;
    css: string;
    ssr: string;
    errors: Array<string | Error>;
}
/**
 * Simple Virtual File System
 */
declare class File {
    filename: string;
    code: string;
    compiled: FileCompiled;
    constructor(filename: string, code?: string);
}
/**
 * `vue-sfc2esm` built-in store.
 */
interface Store {
    files: Record<string, File>;
    activeFilename: string;
    readonly activeFile: File;
    readonly importMap: string | undefined;
    errors: Array<string | Error>;
}
declare const store: Store;
/**
 * Export the files code.
 *
 * @returns exported
 */
declare function exportFiles(): Record<string, string>;
/**
 * Record File errors when compiling file.
 *
 * @param errors
 */
declare function recordFileErrors(errors: Array<string | Error>): void;
/**
 * Add a file into the store, ready for compilation.
 *
 * @param filename
 * @param code
 */
declare function addFile(filename: string, code: string): void;
/**
 * Change the file code, It will trigger `compileFile` action.
 *
 * @param filename
 * @param code
 */
declare function changeFile(filename: string, code: string): void;
/**
 * Delete the file in the store. with or without confirmation.
 *
 * @param filename
 * @param withConfirm
 */
declare function deleteFile(filename: string, withConfirm?: boolean): void;

/**
 * Compile the `activeFile` in the store. It will change the File.compiled info.
 *
 * @param File
 */
declare function compileFile({ filename, code, compiled }: File): Promise<void>;

💻 Development

yarn install

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build

Who is using this?

• vue-sfc-sandbox

📝 Change Log

Check out CHANGELOG.md

📄 License

MIT @xiaoluoboding