TODOs

[yyx990803]

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

[znck]

CSS pre-processor handling in compileStyle ... ... The implementation should look like the preprocess step in compileTemplate and be synchronous.

Making this step synchronous might effect performance.

[yyx990803]

@znck we can make it optionally sync. Most preprocessors have both sync and async APIs. Sync is a requirement for vue-jest.

[znck]

Something like compileScript and compileScriptSync.

[znck]

Heads up. I'm working on compileStyle. Planning to send a PR by mid next week.

[znck]

@yyx990803 Do we need compileScript?

[yyx990803]

@znck we eventually do but for now we don't have anything that immediately needs it - maybe when @eddyerburgh starts to migrate vue-jest to use this package?

[nicoabie]

Will this package help resolve this issue with vue-jest debugging. I've been trying to fix it myself but I've had experience with the source mapping handling and don't know exactly how to tackle it properly. If you can point me in the right direction I'd gladly help.

Thanks guys @yyx990803 @znck @eddyerburgh