Description
The current API surface is the minimal amount of methods needed in vue-loader. There are a few features that are good to have here but not currently present:
CSS pre-processor handling in compileStyle
This is currently not included because in vue-loader CSS preprocessing is delegated to other webpack loaders. However for some other systems that do not support that kind of usage, directly handling preprocessors here will make more sense.
We will need to add the same preprocessLang and preprocessOptions fields to StyleCompileOptions. The implementation should look like the preprocess step in compileTemplate and be synchronous. It will require whatever preprocessor is specified in lang to be separately installed.
const { code, map } = compileStyle({
source: `...`,
filename: `...`,
map: {},
preprocessLang: styleDescriptor.lang,
// optional extra options to be passed to the preprocessor
preprocessOptions: {
indentedSyntax: true
}
})compileScript for JavaScript pre-processor handling
This is left out because again vue-loader delegates script processing to webpack loaders. Same idea:
const { code, map } = compileScript({
source: `...`,
filename: `...`,
map: {},
preprocessLang: scriptDescriptor.lang,
preprocessOptions: {
// ...
}
})Actual compilation for babel, ts and coffee can probably be reused from vue-jest.
genId
Probably a good idea to put in this package as well.
assemble
This is intentionally left out because in actual implementations, the assemble step is highly dependent on the targeted system. Behaviors like hot reload and style injection have to be handled differently in different environments.
Tests
Currently this package has no tests for itself yet because most of the logic was tested during the development of vue-loader 15 and later simply moved into this package with minimal modifications.
But we surely need to write the tests :)
Higher-Level Convenience Method
The current vue-component-compiler package can be built on top of this package and expose an API that looks like this:
const templateCompiler = require('vue-template-compiler')
const { createCompiler } = require('vue-component-compiler')
const compiler = createCompiler({
templateCompiler,
templateCompilerOptions: {}, // optional
transpileOptions: {}, // optional, for vue-template-es2015-compiler
transformAssetUrls: true // optional, defaults to false
})
const compiledDescriptor = compiler.compile({
source,
filename,
isProduction: true // optional, defaults to process.env.NODE_ENV === 'production'
})Note the compile method returns a descriptor instead of code. The descriptor has the same template, script and style parts but contains compiled code and source maps. It is then up to the user to decide how to assemble these compiled descriptors into final code.
This API may or may not be flexible enough - but ideally tools like vue-jest should be able to use this API instead of the lower level ones.
/cc @znck @eddyerburgh