https://github.com/xiaoluoboding/vue-sfc2esm
Transpiled Vue SFC File to ES modules.
https://github.com/xiaoluoboding/vue-sfc2esm
compiler compiler-sfc es-modules esm sfc transpiler vue-sfc vue3
Last synced: about 2 months ago
JSON representation
Transpiled Vue SFC File to ES modules.
- Host: GitHub
- URL: https://github.com/xiaoluoboding/vue-sfc2esm
- Owner: xiaoluoboding
- License: mit
- Created: 2021-04-07T06:57:47.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-02T08:08:35.000Z (almost 4 years ago)
- Last Synced: 2025-03-17T19:21:29.090Z (2 months ago)
- Topics: compiler, compiler-sfc, es-modules, esm, sfc, transpiler, vue-sfc, vue3
- Language: TypeScript
- Homepage: https://codesandbox.io/s/vue-sfc-sandbox-318nu
- Size: 255 KB
- Stars: 29
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Vue SFC To ES Modules
Transpiled Vue SFC File to ES modules.
[![NPM][npmBadge]][npmUrl]
[![NPM Download][npmDtBadge]][npmDtUrl]
[![License][licenseBadge]][licenseUrl]
[npmBadge]:https://img.shields.io/npm/v/vue-sfc2esm.svg?maxAge=2592000
[npmUrl]:https://www.npmjs.com/package/vue-sfc2esm@next
[npmDtBadge]:https://img.shields.io/npm/dt/vue-sfc2esm.svg
[npmDtUrl]:https://www.npmjs.com/package/vue-sfc2esm
[licenseBadge]:https://img.shields.io/badge/license-MIT-blue.svg
[licenseUrl]:https://raw.githubusercontent.com/vueblocks/vue-sfc2esm/master/LICENSE
## ✨ Features
* 💪 Fully Typed
* 🌳 TreeShakable & SideEffects Free, Check out [Bundle Phobia](https://bundlephobia.com/result?p=vue-sfc2esm)
* 📁 Virtual File System (Support Compile `.vue/.js` File).
* 👬 Friendly Error Tips
## 💡 Inspiration
This project is heavily inspired by [Vue SFC Playground](https://github.com/vuejs/vue-next/tree/master/packages/sfc-playground). Actually Copied from it.
## 📦 Installation
```bash
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](https://www.npmjs.com/package/@vue/compiler-sfc)
You could use these code blocks directly on the modern browser with `type="module"` in the `` element.
### Example
```html
<script type="modules">
// ES Modules Code Blocks Here.
```
## 📖 Usage
### addFile
> Add a file into the store, ready for compilation.
```js
import { addFile } from 'vue-sfc2esm'
addFile('HelloWorld.vue', `
{{ msg }}
const msg = 'Hello World!'
`)
```
### changeFile
> Change the file code, It will trigger `compileFile` action.
```js
import { changeFile } from 'vue-sfc2esm'
changeFile('HelloWorld.vue', `
{{ msg }}
const msg = 'Hello Vue SFC2ESM!'
`)
```
### deleteFile
> Delete the file in the store. with or without confirmation.
```js
import { deleteFile } from 'vue-sfc2esm'
deleteFile('HelloWorld.vue')
```
### CompileModules
> Transpiled Vue SFC File to ES modules with `@vue/compiler-sfc`.
```js
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
```typescript
/**
* Transpiled Vue SFC File to ES modules with `@vue/compiler-sfc`.
*
* @param filename
*/
declare function compileModules(filename: string): Promise>;
/**
* Record the code & errors when a sfc file has been compiled.
*/
interface FileCompiled {
js: string;
css: string;
ssr: string;
errors: Array;
}
/**
* 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;
activeFilename: string;
readonly activeFile: File;
readonly importMap: string | undefined;
errors: Array;
}
declare const store: Store;
/**
* Export the files code.
*
* @returns exported
*/
declare function exportFiles(): Record;
/**
* Record File errors when compiling file.
*
* @param errors
*/
declare function recordFileErrors(errors: Array): 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;
```
## 💻 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](https://github.com/xiaoluoboding/vue-sfc-sandbox)
## 📝 Change Log
[Check out CHANGELOG.md](./CHANGELOG.md)
## 📄 License
MIT [@xiaoluoboding](https://github.com/xiaoluoboding)