Rollup-plugin-vue: normalizeComponent function dose not get transpiled

[Tidyzq]

Version

4.6.1

Reproduction link

https://codesandbox.io/s/9483vj1jw

Steps to reproduce

Example rollup config file:

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';

export default {
  input: './src/foo.vue',
  output: {
    file: './dist/foo.js',
    format: 'esm',
  },
  plugins: [
    vue(),
    babel({
      // https://github.com/rollup/rollup-plugin-babel/issues/260
      extensions: [ '.js', '.ts', '.tsx', '.jsx', '.es6', '.es', '.mjs', '.vue' ],
    }),
  ],
};

What is expected?

The normalizeComponent function from vue-runtime-helpers is injected by this plugin, it should be transpiled.

What is actually happening?

The following generated code still contains const keywords after using rollup-plugin-vue and rollup-plugin-babel.

function normalizeComponent(compiledTemplate, injectStyle, defaultExport, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, isShadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
  if (typeof isShadowMode === 'function') {
    createInjectorSSR = createInjector;
    createInjector = isShadowMode;
    isShadowMode = false;
  } // Vue.extend constructor export interop


  const options = typeof defaultExport === 'function' ? defaultExport.options : defaultExport; // render functions

---

[znck]

Files in node_modules directory are not transpiled.

Anyways, I'd publish an es2015 version of vue-runtime-helpers soon.

[leafront]

add code
import buble from 'rollup-plugin-buble'
plugins: [
vue(),
babel({
// https://github.com/rollup/rollup-plugin-babel/issues/260
extensions: [ '.js', '.ts', '.tsx', '.jsx', '.es6', '.es', '.mjs', '.vue' ],
}),
buble()
]

[lc-soft]

{
  plugins: [
    vue({
      normalizer: '~vue-runtime-helpers/dist/normalize-component.js'
    })
  ]
}

[Hishengs]

@znck Hi, the problem is still there, and at 2019 you promised a "es2015 version of vue-runtime-helpers soon", how is it going?

[znck]

ES2015 version is already there. See .mjs files in https://unpkg.com/browse/[email protected]/dist/

You can use ES2015 version using the API as suggested by @lc-soft in the above example.

[Hishengs]

@znck Hi, I am using rollup and @rollup/plugin-node-resolve which main fields are: ['module', 'main'], and I see the module field in vue-runtime-helpers refered to a untranspiled file, which occurs the problem mentioned above, so can you just provide a transpiled file of module entry?

[txs1992]

@znck There is still the problem of no conversion, these codes are not translated

/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */   

This is my configuration

/** @format */
/* eslint-disable @typescript-eslint/no-var-requires */

const rollup = require('rollup')
const vue = require('rollup-plugin-vue')
const babel = require('rollup-plugin-babel')
const commonjs = require('rollup-plugin-commonjs')
const resolve = require('rollup-plugin-node-resolve')
const typescript = require('rollup-plugin-typescript')
const terser = require('rollup-plugin-terser').terser
const components = require('../components.json')

function kebabToCamel(str) {
  return str.replace(/(^\w)|(-(\w){1})/g, ($1, _, __, $4) => ($4 || $1).toLocaleUpperCase())
}

function gerenateNameScope(name) {
  return 'Yys' + kebabToCamel(name)
}

const buildPlugins = [
  vue({
    normalizer: '~vue-runtime-helpers/dist/normalize-component.js',
  }),
  typescript(),
  resolve({
    browser: true,
  }),
  babel({
    babelrc: true,
    exclude: 'node_modules/**',
  }),
  commonjs(),
  terser(),
]

async function build(inputOptions, outputOptions) {
  const bundle = await rollup.rollup(inputOptions)
  await bundle.write(outputOptions)
}

const componentNames = Object.keys(components)

componentNames.forEach(name => {
  const inputOptions = {
    input: components[name],
    external: ['vue', 'vue-class-component', 'vue-property-decorator'],
    plugins: buildPlugins.slice(0, 5),
  }

  const outputOptions = {
    globals: {
      vue: 'vue',
      'vue-class-component': 'vue-class-component',
      'vue-property-decorator': 'vue-property-decorator',
    },
    name: gerenateNameScope(name),
    file: `dist/${name}.js`,
    format: 'umd',
  }

  const minInputOptions = {...inputOptions, plugins: buildPlugins}
  const minOutputOptions = {
    ...outputOptions,
    file: `dist/${name}.min.js`,
  }

  build(inputOptions, outputOptions)
  build(minInputOptions, minOutputOptions)
})