Giter VIP home page Giter VIP logo

vue-sfc2esm's Introduction

sfc2esm

Vue SFC To ES Modules

Transpiled Vue SFC File to ES modules.


NPM NPM Download License

โœจ 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?

๐Ÿ“ Change Log

Check out CHANGELOG.md

๐Ÿ“„ License

MIT @xiaoluoboding

vue-sfc2esm's People

Contributors

xiaoluoboding avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vue-sfc2esm's Issues

project error: babelParserDefaultPlugins no export

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vue-sfc2esm/lib/vue-sfc2esm.esm.js:7:9: error: No matching export in "node_modules/@vue/shared/dist/shared.esm-bundler.js" for import "babelParserDefaultPlugins"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.