{"id":16365216,"url":"https://github.com/xiaoluoboding/vue-sfc2esm","last_synced_at":"2025-03-21T01:30:27.273Z","repository":{"id":83484482,"uuid":"355443567","full_name":"xiaoluoboding/vue-sfc2esm","owner":"xiaoluoboding","description":"Transpiled Vue SFC File to ES modules.","archived":false,"fork":false,"pushed_at":"2021-06-02T08:08:35.000Z","size":261,"stargazers_count":29,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-17T19:21:29.090Z","etag":null,"topics":["compiler","compiler-sfc","es-modules","esm","sfc","transpiler","vue-sfc","vue3"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/vue-sfc-sandbox-318nu","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaoluoboding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["xiaoluoboding"]}},"created_at":"2021-04-07T06:57:47.000Z","updated_at":"2024-11-04T18:28:06.000Z","dependencies_parsed_at":"2023-03-25T00:49:21.222Z","dependency_job_id":null,"html_url":"https://github.com/xiaoluoboding/vue-sfc2esm","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"efdca2f1089a9e56771a6f930f9eddd4f6a533bf"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-sfc2esm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-sfc2esm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-sfc2esm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-sfc2esm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoluoboding","download_url":"https://codeload.github.com/xiaoluoboding/vue-sfc2esm/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244721006,"owners_count":20498883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compiler","compiler-sfc","es-modules","esm","sfc","transpiler","vue-sfc","vue3"],"created_at":"2024-10-11T02:42:59.362Z","updated_at":"2025-03-21T01:30:27.268Z","avatar_url":"https://github.com/xiaoluoboding.png","language":"TypeScript","funding_links":["https://github.com/sponsors/xiaoluoboding"],"categories":[],"sub_categories":[],"readme":"![sfc2esm](sfc2esm.png)\n\n\u003ch1 align=\"center\"\u003eVue SFC To ES Modules\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003cp align=\"center\"\u003e\n  Transpiled \u003cstrong\u003eVue SFC File\u003c/strong\u003e to \u003cstrong\u003eES modules\u003c/strong\u003e.\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n[![NPM][npmBadge]][npmUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n[![License][licenseBadge]][licenseUrl]\n\u003c!-- [![Minzipped Size][bundlePhobiaBadge]][bundlePhobiaUrl] --\u003e\n\n[npmBadge]:https://img.shields.io/npm/v/vue-sfc2esm.svg?maxAge=2592000\n[npmUrl]:https://www.npmjs.com/package/vue-sfc2esm@next\n\n[npmDtBadge]:https://img.shields.io/npm/dt/vue-sfc2esm.svg\n[npmDtUrl]:https://www.npmjs.com/package/vue-sfc2esm\n\n[licenseBadge]:https://img.shields.io/badge/license-MIT-blue.svg\n[licenseUrl]:https://raw.githubusercontent.com/vueblocks/vue-sfc2esm/master/LICENSE\n\n\u003c!-- [bundlePhobiaBadge]:https://badgen.net/bundlephobia/minzip/vue-sfc2esm\n[bundlePhobiaUrl]:https://bundlephobia.com/result?p=vue-sfc2esm --\u003e\n\n\u003c/div\u003e\n\n## ✨ Features\n\n* 💪 Fully Typed\n* 🌳 TreeShakable \u0026 SideEffects Free, Check out [Bundle Phobia](https://bundlephobia.com/result?p=vue-sfc2esm)\n* 📁 Virtual File System (Support Compile `.vue/.js` File).\n* 👬 Friendly Error Tips\n\n## 💡 Inspiration\n\nThis project is heavily inspired by [Vue SFC Playground](https://github.com/vuejs/vue-next/tree/master/packages/sfc-playground). Actually Copied from it.\n\n\n## 📦 Installation\n\n```bash\nyarn add vue-sfc2esm -S\nor\nnpm i vue-sfc2esm -S\n```\n\n## How it Works?\n\nYou could imagine that `vue-sfc2esm` has a virtual file system like vue project.\n\n`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)\n\nYou could use these code blocks directly on the modern browser with `type=\"module\"` in the `\u003cscript\u003e` element.\n\n### Example\n\n```html\n\u003cscript type=\"modules\"\u003e\n  // ES Modules Code Blocks Here.\n\u003c/script\u003e\n```\n\n## 📖 Usage\n\n### addFile\n\n\u003e Add a file into the store, ready for compilation.\n\n```js\nimport { addFile } from 'vue-sfc2esm'\n\naddFile('HelloWorld.vue', `\u003ctemplate\u003e\n  \u003ch1\u003e{{ msg }}\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst msg = 'Hello World!'\n\u003c/script\u003e\n`)\n```\n\n### changeFile\n\n\u003e Change the file code, It will trigger `compileFile` action.\n\n```js\nimport { changeFile } from 'vue-sfc2esm'\n\nchangeFile('HelloWorld.vue', `\u003ctemplate\u003e\n  \u003ch1\u003e{{ msg }}\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst msg = 'Hello Vue SFC2ESM!'\n\u003c/script\u003e\n`)\n```\n\n### deleteFile\n\n\u003e Delete the file in the store. with or without confirmation.\n\n```js\nimport { deleteFile } from 'vue-sfc2esm'\n\ndeleteFile('HelloWorld.vue')\n```\n\n### CompileModules\n\n\u003e Transpiled Vue SFC File to ES modules with `@vue/compiler-sfc`.\n\n```js\nimport { compileModules } from 'vue-sfc2esm'\n\n(async function () {\n  // Compile Default App.vue Component Or Files In Store.\n  const modules = await compileModules('App.vue')\n  console.log(`Successfully compiled [App.vue] to ES Modules.`)\n  console.log(modules)\n})()\n```\n\n## Typed\n\n```typescript\n/**\n * Transpiled Vue SFC File to ES modules with `@vue/compiler-sfc`.\n *\n * @param filename\n */\ndeclare function compileModules(filename: string): Promise\u003cArray\u003cstring\u003e\u003e;\n\n/**\n * Record the code \u0026 errors when a sfc file has been compiled.\n */\ninterface FileCompiled {\n    js: string;\n    css: string;\n    ssr: string;\n    errors: Array\u003cstring | Error\u003e;\n}\n/**\n * Simple Virtual File System\n */\ndeclare class File {\n    filename: string;\n    code: string;\n    compiled: FileCompiled;\n    constructor(filename: string, code?: string);\n}\n/**\n * `vue-sfc2esm` built-in store.\n */\ninterface Store {\n    files: Record\u003cstring, File\u003e;\n    activeFilename: string;\n    readonly activeFile: File;\n    readonly importMap: string | undefined;\n    errors: Array\u003cstring | Error\u003e;\n}\ndeclare const store: Store;\n/**\n * Export the files code.\n *\n * @returns exported\n */\ndeclare function exportFiles(): Record\u003cstring, string\u003e;\n/**\n * Record File errors when compiling file.\n *\n * @param errors\n */\ndeclare function recordFileErrors(errors: Array\u003cstring | Error\u003e): void;\n/**\n * Add a file into the store, ready for compilation.\n *\n * @param filename\n * @param code\n */\ndeclare function addFile(filename: string, code: string): void;\n/**\n * Change the file code, It will trigger `compileFile` action.\n *\n * @param filename\n * @param code\n */\ndeclare function changeFile(filename: string, code: string): void;\n/**\n * Delete the file in the store. with or without confirmation.\n *\n * @param filename\n * @param withConfirm\n */\ndeclare function deleteFile(filename: string, withConfirm?: boolean): void;\n\n/**\n * Compile the `activeFile` in the store. It will change the File.compiled info.\n *\n * @param File\n */\ndeclare function compileFile({ filename, code, compiled }: File): Promise\u003cvoid\u003e;\n```\n\n## 💻 Development\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn dev\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n## Who is using this?\n\n* [vue-sfc-sandbox](https://github.com/xiaoluoboding/vue-sfc-sandbox)\n\n## 📝 Change Log\n\n[Check out CHANGELOG.md](./CHANGELOG.md)\n\n## 📄 License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-sfc2esm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoluoboding%2Fvue-sfc2esm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-sfc2esm/lists"}