chore: update dependencies to the newest version

jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
   moduleFileExtensions: ['js', 'json', 'png', 'ts', 'vue'],
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '^.+\\.ts$': '<rootDir>/node_modules/ts-jest/preprocessor.js',
+    '^.+\\.ts$': 'ts-jest',
     '.*.(js|vue|png)$': './test/setup/jest-helper.js'
   },
   testMatch: ['**/?(*.)(spec|test).ts']

package.json

@@ -31,31 +31,32 @@
   },
   "homepage": "https://github.com/vuejs/vue-component-compiler#readme",
   "devDependencies": {
-    "@types/clean-css": "^3.4.30",
+    "@types/clean-css": "^3.4.32",
     "@types/jest": "^25.2.3",
-    "@types/node": "^9.4.7",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
+    "@types/node": "^12.12.42",
+    "@types/puppeteer": "^3.0.0",
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
     "conventional-changelog": "^1.1.24",
-    "jest": "^22.4.2",
-    "pug": "^2.0.3",
-    "puppeteer": "^1.3.0",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-image": "^1.0.2",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "sass": "^1.18.0",
-    "ts-jest": "^22.4.2",
-    "typescript": "^3.2.4",
-    "typescript-eslint-parser": "^15.0.0",
+    "jest": "^26.0.1",
+    "pug": "^2.0.4",
+    "puppeteer": "^3.1.0",
+    "rollup": "^2.10.8",
+    "@rollup/plugin-babel": "^5.0.2",
+    "@rollup/plugin-commonjs": "^12.0.0",
+    "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "sass": "^1.26.5",
+    "ts-jest": "^26.0.0",
+    "typescript": "^3.9.3",
     "vue": "^2.5.16",
     "vue-template-compiler": "^2.5.16"
   },
   "optionalDependencies": {
     "less": "^3.9.0",
-    "pug": "^2.0.3",
-    "sass": "^1.18.0",
+    "pug": "^2.0.4",
+    "sass": "^1.26.5",
     "stylus": "^0.54.5"
   },
   "peerDependencies": {

test/baseline.spec.ts

@@ -1,12 +1,13 @@
+import {Browser} from "puppeteer";
 const puppeteer = require('puppeteer')
 const { readdirSync } = require('fs')
 const { join, resolve } = require('path')
 import { build, open } from './setup/utils'
 
-let browser = null
+let browser: Browser;
 const fixtures = readdirSync(join(__dirname, 'fixtures'))
-  .filter(it => it.endsWith('.vue'))
-  .map(it => it.replace(/\.vue$/i, ''))
+  .filter((it: string) => it.endsWith('.vue'))
+  .map((it: string) => it.replace(/\.vue$/i, ''))
 
 beforeAll(async () => {
   browser = await puppeteer.launch({
@@ -16,18 +17,18 @@ beforeAll(async () => {
 })
 afterAll(async () => browser && (await browser.close()))
 
-fixtures.forEach(it =>
+fixtures.forEach((it: string) =>
   test(it, async () => {
     const filename = join(__dirname, 'fixtures', it + '.vue')
     const code = await build(filename)
     const page = await open(it, browser, code)
     expect(await page.$('#test')).toBeTruthy()
     expect(
-      await page.evaluate(() => document.getElementById('test').textContent)
+      await page.evaluate(() => document.getElementById('test')!.textContent)
     ).toEqual(expect.stringContaining('Hello'))
     expect(
       await page.evaluate(
-        () => window.getComputedStyle(document.getElementById('test')).color
+        () => window.getComputedStyle(document.getElementById('test')!).color
       )
     ).toEqual('rgb(255, 0, 0)')
 

test/setup/utils.ts

@@ -1,45 +1,48 @@
 import { rollup } from 'rollup'
-import babel from 'rollup-plugin-babel'
-import commonjs from 'rollup-plugin-commonjs'
-import nodeResolve from 'rollup-plugin-node-resolve'
-import image from 'rollup-plugin-image'
+import babel from '@rollup/plugin-babel'
+import nodeResolve from '@rollup/plugin-node-resolve'
+const commonjs = require('@rollup/plugin-commonjs');
+const image = require('@rollup/plugin-image');
 import { readFileSync } from 'fs'
 import { resolve } from 'path'
+import { Browser } from "puppeteer";
+import { createCompiler, assemble } from '../..'
+import { AssembleResults } from "../../src";
 
 export { compile, build, open, pack }
 
 function vue() {
   return {
     name: 'vue',
-    transform(code, id) {
+    transform(code: string, id: string) {
       if (id.endsWith('.vue')) return compile(id, code)
     }
   }
 }
 
-function inline(filename, code) {
+function inline(filename: string, code: string | AssembleResults) {
   return {
     name: 'Inline',
-    resolveId(id) {
+    resolveId(id: string) {
       if (id === filename) return filename
     },
-    load(id) {
+    load(id: string) {
       if (id === filename) {
         return code
       }
     }
   }
 }
 
-function load(ext, handle) {
+function load(ext: string, handle: (T: string) => string) {
   return {
     name: 'load' + ext,
-    load(id) {
-      if (id.endsWith(ext)) return handle(id.split(':').pop())
+    load(id: string) {
+      if (id.endsWith(ext)) return handle(id.split(':').pop()!)
     }
   }
 }
-import { createCompiler, assemble } from '../..'
+
 const compiler = createCompiler({
   script: {},
   style: { trim: true },
@@ -50,7 +53,7 @@ const compiler = createCompiler({
     optimizeSSR: process.env.VUE_ENV === 'server'
   }
 })
-function compile(filename, source) {
+function compile(filename: string, source: string) {
   const result = compiler.compileToDescriptor(filename, source)
 
   result.styles.forEach(style => {
@@ -61,13 +64,13 @@ function compile(filename, source) {
 }
 
 const babelit = babel({
-  presets: [[require.resolve('babel-preset-env'), { modules: false }]],
-  plugins: ['external-helpers'],
+  presets: [[require.resolve('@babel/preset-env'), { modules: false }]],
+  plugins: ["@babel/plugin-transform-runtime"],
   babelrc: false,
-  runtimeHelpers: true
+  babelHelpers: 'runtime',
 })
 
-async function pack(filename, source) {
+async function pack(filename: string, source: string) {
   const name = filename + '__temp.js'
   let bundle = await rollup(<any>{
     input: name,
@@ -78,23 +81,23 @@ async function pack(filename, source) {
     plugins: [
       load(
         '.png',
-        id =>
+        (id) =>
           `export default "data:image/png;base64,${readFileSync(
             id,
             'base64'
           )}"\n`
       ),
-      inline(name, (await bundle.generate({ format: 'cjs' })).code),
+      inline(name, (await bundle.generate({ format: 'cjs' })).output[0].code),
       commonjs(),
       babelit
     ]
   })
 
-  return (await bundle.generate({ format: 'cjs' })).code
+  return (await bundle.generate({ format: 'cjs' })).output[0].code
 }
 
-const cache = {}
-async function build(filename) {
+const cache: Record<string, string> = {}
+async function build(filename: string) {
   if (filename in cache) return cache[filename]
   const source = compile(filename, readFileSync(filename).toString())
   const component = filename + '__.js'
@@ -134,15 +137,15 @@ async function build(filename) {
       vue(),
       image(),
       commonjs(),
-      inline(component, generated.code),
+      inline(component, generated.output[0].code),
       babelit
     ]
   })
 
   cache[filename] = (await bundle.generate({
     format: 'iife',
     name: 'App'
-  })).code
+  })).output[0].code
 
   return cache[filename]
 }
@@ -151,7 +154,7 @@ const vueSource = readFileSync(
   resolve(__dirname, '../../node_modules/vue/dist/vue.min.js')
 ).toString()
 const escape = (any: string) => any.replace(/<\//g, '&lt;\/')
-async function open(name, browser, code, id = '#test') {
+async function open(name: string, browser: Browser, code: string, id = '#test') {
   const page = await browser.newPage()
 
   const content = `

tsconfig.json

@@ -13,7 +13,7 @@
     "strictNullChecks": true,
     "noImplicitAny": true,
     "removeComments": false,
-    "lib": ["es6", "es7"],
+    "lib": ["es6", "es7", "dom"],
     "types": ["@types/jest", "node"]
   },
   "include": ["src", "typings"]

typings/rollup-plugin-babel.d.ts

@@ -0,0 +1 @@
+declare module '@rollup/plugin-babel';