docs: update README.md

Author: xiaoluoboding

README.md

@@ -1,6 +1,6 @@
 # Vue SFC To ES Modules
 
-> Compile Vue SFC File to ES Modules.
+> Transpiled Vue SFC File to ES modules.
 
 ## ✨ Features
 
@@ -11,7 +11,7 @@
 
 ## 💡 Inspiration
 
-This project is heavily inspired by [Vue Sfc Playground](https://github.com/vuejs/vue-next/tree/master/packages/sfc-playground)
+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
@@ -22,6 +22,164 @@ 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 `<script>` element.
+
+### Example
+
+```html
+<script type="modules">
+  // ES Modules Code Blocks Here.
+</script>
+```
+
+## 📖 Usage
+
+### addFile
+
+> Add a file into the store, ready for compilation.
+
+```js
+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.
+
+```js
+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.
+
+```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<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
@@ -37,6 +195,14 @@ yarn dev
 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)