Custom stringify/transform option for static content in sfc compiler and loader

[mmis1000]

What problem does this feature solve?

When you write a non DOM environment custom renderer, you need to implement all required nodeOps of the renderer.

Most of opts are actually unaware of the runtime enviroment an long as the structure looks like a tree and have method for manipulate node.

However, insertStaticContent is used to insert a HTML string to reduce the overhead of create elements.
Which may not exist in the environment of other non dom target (if any).

You end up need to embed a parser to parse the html back to ast again and process it. Which cause more overhead instead.

For example, when you are rendering to something like fixed size canvas.
You will probably want to just pre-render the static tree into image directly if you can.
But you now need to parse the html and render to image again during runtime, which is double overhead.

What does the proposed API look like?

An option in the vue-compiler to override how static content should be handled.

Receive a argument for the content vue want to insert as static content (in either html or v-dom tree format (provide as object may reduce the overhead during compile but harm future compatibility if the internal structure is going to change)).

Returns a serializable object that vue will feed into the insertStaticContent when rendering.

Or accept null so the compiler do not generate static node at all.

const compilerOptions = {
  serializeStatic (domOrHTML) {
    return {
      'this': 'object will be send to insertStaticContent during rendering'
    }
  }
}

[yyx990803]

You don't need to implement insertStaticContent - it's only used if the accompanying compiler for your target platform leverages static string transforms:

• compiler-core by default doesn't perform stringify optimizations
• compiler-dom implements an extra transform adjacent static content into Static nodes, and runtime-dom implements insertStaticContent to handle these nodes.

So as long as you didn't implement the same stringify logic in your custom compiler, you don't need to implement insertStaticContent in your custom renderer.

[mmis1000]

So, the proper way to do this is.
Create your own compiler like compiler-dom, and inject the compiler into vue-loader via the vue.config.js?

Like

vue.config.js

const vuePluginNext = require.resolve('vue-cli-plugin-vue-next')
const vueLoaderNext = require.resolve('vue-loader', {paths: [vuePluginNext] })

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader(vueLoaderNext)
            .tap(options => {
                // modify the options...
                return {
                    ...options,
                    compiler: require('./compiler')
                }
            })
    }
}

compiler.js

const { baseCompile, baseParse } = require('@vue/compiler-core')
Object.assign(module.exports, require('@vue/compiler-core'))

module.exports.compile = baseCompile
module.exports.parse = baseParse