A utility function for compiling a Vue SFC into a JavaScript file and an optional TypeScript declarations file.
npm install compile-vue-sfc
compile-vue-sfc ./src/components/*.vue
With TypeScript declarations:
compile-vue-sfc --declarations ./src/components/*.vue
Import compileVueSFC
into your project and call it:
import { compileVueSFC } from 'compile-vue-sfc';
await compileVueSFC({
declarations: true,
outDir: 'dist',
files: globbySync(['./src/spinners/*.vue']),
projectRootPath: join(import.meta.url, '../src'),
});
TypeScript definitions are generated with vue-tsc
. However, TypeScript unfortunately doesn't support specifying individual files for compilation in combination with a tsconfig.json
file. Thus, in order to work around this limitation, a temporary tsconfig.json
file needs to be created specifying the .vue
file explicitly within an extra includes
property. But, creating a temporary tsconfig.json
on disk is slow and error-prone, so instead, we call a wrapper script which overrides fs.readFileSync
to provide a "virtual" tsconfig.json
file with the appropriate options before it invokes vue-tsc
.
Unfortunately, for unknown reasons, whenever multiple .vue
files are specified, vue-tsc
encounters an infinite loop and never exits. Thus, each Vue SFC needs to be compiled separately (if there is a solution to this, please let me know!)
In addition, since TypeScript doesn't provide a way to export declarations via standard output, we also have to monkeypatch fs.writeSync
to save the declaration output to a temporary variable before outputting it from our wrapper script.