feat: Migrate from tsc to rollup

Author: znck

.gitignore

@@ -1,4 +1,5 @@
 dist/
+.rpt2_cache/
 /.github/sereno/public
 /_cache
 test/style.css

docs/faqs.md

@@ -1,10 +1,10 @@
 # Frequently Asked Questions
 
-- **Why does `__file` use absolute path?**
+- **Why does `__file` use absolute path?**  
   The `__file` variable is used by devtools to provide "open in editor" feature. However, in production mode only filename is used. See issue [#258](https://github.com/vuejs/rollup-plugin-vue/issues/258) to enable production mode.
 
-- **Cannot find module `vue-template-compiler`?**
+- **Error: Cannot find module `vue-template-compiler`?**  
   `vue-template-compiler` has a constraint that it should be exact same version as `vue` that is why it is included as peer dependency. Make sure you install `vue-template-compiler` and `vue` in your project.
 
-- **Cannot find module `less` or `node-sass` or `stylus`?**
+- **Error: Cannot find module `less` or `node-sass` or `stylus`?**  
   If you're using any of the style languages (other than css) supported in `.vue` file, you have to install that language's compiler.

package.json

@@ -12,42 +12,42 @@
     "vue"
   ],
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/rollup-plugin-vue.js",
+  "module": "dist/rollup-plugin-vue.mjs",
   "typings": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuejs/rollup-plugin-vue.git"
   },
   "standard-version": {
     "scripts": {
-      "postchangelog": "yarn test && yarn build:docs && git add docs/"
+      "postchangelog": "yarn test && yarn :build:docs && git add docs/"
     }
   },
   "scripts": {
     "prepublishOnly": "yarn build",
-    "prebuild": "yarn lint",
-    "build": "tsc",
-    "prebuild:docs": "cp CHANGELOG.md docs/changelog.md",
-    "build:docs": "vuepress build docs/",
-    "postbuild:docs": "rm docs/changelog.md",
+    "build": "yarn :build",
+    "docs": "yarn :docs",
+    "pre:build": "yarn lint",
+    ":build": "rollup -c",
+    "pre:build:docs": "cp CHANGELOG.md docs/changelog.md",
+    ":build:docs": "vuepress build docs/",
+    "post:build:docs": "rm docs/changelog.md",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
-    "predocs": "cp CHANGELOG.md docs/changelog.md",
-    "docs": "vuepress dev docs/",
-    "postdocs": "rm docs/CHANGELOG.md",
+    "pre:docs": "cp CHANGELOG.md docs/changelog.md",
+    ":docs": "vuepress dev docs/",
+    "post:docs": "rm docs/CHANGELOG.md",
     "lint": "prettier --no-semi --single-quote --write **/*.js **/*.vue !test/target/** !dist/**",
     "release": "standard-version -a",
-    "pretest": "yarn build",
     "test": "jest"
   },
   "files": [
-    "dist/",
-    "src/"
+    "dist/"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.0.0-beta.46",
     "@vue/component-compiler": "^3.6",
     "@vue/component-compiler-utils": "^2.1.0",
-    "debug": "^2.6.0",
+    "debug": "^4.1.1",
     "hash-sum": "^1.0.2",
     "querystring": "^0.2.0",
     "rollup-pluginutils": "^2.0.1",
@@ -59,37 +59,39 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
     "@babel/plugin-transform-runtime": "^7.0.0-beta.46",
     "@babel/preset-env": "^7.0.0-beta.46",
-    "@types/debug": "^0.0.30",
-    "@types/jest": "^22.2.3",
-    "@types/node": "^10.0.4",
+    "@babel/runtime": "^7.0.0-beta.46",
+    "@types/debug": "^0.0.31",
+    "@types/jest": "^23.3.12",
+    "@types/node": "^10.12.18",
     "@types/puppeteer": "^1.3.1",
     "@znck/promised": "^1.0.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^22.4.3",
+    "babel-jest": "^23.6.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "conventional-changelog": "^1.1.24",
-    "jest": "^22.4.2",
+    "conventional-changelog": "^3.0.5",
+    "jest": "^23.6.0",
     "node-sass": "^4.9.0",
-    "postcss": "^6.0.22",
+    "postcss": "^7.0.11",
     "postcss-assets": "^5.0.0",
     "prettier": "^1.12.1",
     "pug": "^2.0.3",
     "puppeteer": "^1.4.0",
-    "rollup": "^0.58.2",
+    "rollup": "^1.1.0",
     "rollup-plugin-babel": "^4.0.0-beta.4",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-css-only": "^0.4.0",
     "rollup-plugin-md": "^0.0.7",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-typescript": "^0.8.1",
-    "rollup-plugin-url": "^1.4.0",
-    "ts-jest": "^22.4.5",
-    "typescript": "^2.8.3",
+    "rollup-plugin-typescript": "^1.0.0",
+    "rollup-plugin-typescript2": "^0.18.1",
+    "rollup-plugin-url": "^2.1.0",
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.2.2",
     "vue": "^2.5.16",
     "vue-class-component": "^6.2.0",
     "vue-template-compiler": "^2.5.16",
-    "vuepress": "^0.13.0"
+    "vuepress": "^0.14.8"
   },
   "peerDependencies": {
     "vue-template-compiler": "*"

rollup.config.js

@@ -0,0 +1,32 @@
+import typescript from 'rollup-plugin-typescript2'
+import pkg from './package.json'
+
+const input = 'src/index.ts'
+const plugins = [typescript({
+  typescript: require('typescript')
+})]
+
+function external(id) {
+  return id in pkg.dependencies || id in pkg.peerDependencies || ['path'].includes(id)
+}
+
+export default [
+  {
+    input,
+    plugins,
+    external,
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+        exports: 'default',
+        sourcemap: true,
+      },
+      {
+        file: pkg.module,
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+  },
+]

src/index.ts

@@ -15,7 +15,7 @@ import {
   StyleCompileResult,
   DescriptorCompileResult,
 } from '@vue/component-compiler'
-import { Plugin } from 'rollup'
+import { Plugin, RawSourceMap } from 'rollup'
 import * as path from 'path'
 import { parse, SFCDescriptor, SFCBlock } from '@vue/component-compiler-utils'
 import debug from 'debug'
@@ -116,7 +116,7 @@ export interface VuePluginOptions {
 /**
  * Rollup plugin for handling .vue files.
  */
-export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
+export default function vue(opts: VuePluginOptions = {}): Plugin {
   const isVue = createVueFilter(opts.include, opts.exclude)
   const isProduction =
     process.env.NODE_ENV === 'production' || process.env.BUILD === 'production'
@@ -145,7 +145,9 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
     (!blacklisted.has('*') || !blacklisted.has(customBlockType)) &&
     (whitelisted.has('*') || whitelisted.has(customBlockType))
 
-  const beforeAssemble = opts.beforeAssemble || ((d: DescriptorCompileResult): DescriptorCompileResult => d)
+  const beforeAssemble =
+    opts.beforeAssemble ||
+    ((d: DescriptorCompileResult): DescriptorCompileResult => d)
 
   delete opts.beforeAssemble
   delete opts.css
@@ -204,14 +206,14 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
     load(id: string) {
       const request = parseVuePartRequest(id)
 
-      if (!request) return
+      if (!request) return null
 
       const element = resolveVuePart(descriptors, request)
       const code =
         'code' in element
           ? ((element as any).code as string) // .code is set when extract styles is used. { css: false }
           : element.content
-      const map = element.map as any
+      const map = element.map as RawSourceMap
 
       dL(`id: ${id}\ncode: \n${code}\nmap: ${JSON.stringify(map, null, 2)}\n\n`)
 
@@ -330,7 +332,7 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
             '\n' +
             `export * from '${createVuePartRequest(
               filename,
-              block.attrs.lang ||
+              (typeof block.attrs.lang === 'string' && block.attrs.lang) ||
                 createVuePartRequest.defaultLang[block.type] ||
                 block.type,
               'customBlocks',

test/assertions.ts

@@ -1,20 +1,16 @@
 const puppeteer = require('puppeteer')
 import * as fs from 'fs'
 import * as path from 'path'
-import * as assertions from './assertions'
 
-import {build, open} from "./setup"
+import { build, open } from './setup'
+import { Browser } from 'puppeteer'
 
-let browser = null
-
-function toCamelCase(name: string) : string {
-  return name.replace(/-(.)/g, (_, char) => char.toUpperCase())
-}
+let browser: Browser | null = null
 
 beforeAll(async () => {
   browser = await puppeteer.launch({
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
-    headless: Boolean(process.env.CI)
+    headless: Boolean(process.env.CI),
   })
 })
 
@@ -23,33 +19,43 @@ describe('baseline', () => {
     .filter((filename: string) => filename.endsWith('.vue'))
     .map((filename: string) => filename.replace(/\.vue$/i, ''))
     .forEach(fixture => {
-      const name = toCamelCase(fixture)
-      test(fixture, () => testRunner(fixture, true, assertions[name]))
-      test(fixture + ' (extract css)', () => testRunner(fixture, false, assertions[name]))
+      test(fixture, () => testRunner(fixture, true))
+      test(fixture + ' (extract css)', () => testRunner(fixture, false))
     })
 })
 
 afterAll(async () => browser && (await browser.close()))
 
-async function testRunner(fixture: string, extractCss: boolean, moreAssertions?: Function): Promise<void> {
+async function testRunner(
+  fixture: string,
+  extractCss: boolean,
+  moreAssertions?: Function
+): Promise<void> {
   const filename = path.join(__dirname, 'fixtures', fixture + '.vue')
-  const code = await build(filename, extractCss)
-  const page = await open(
-    fixture + (extractCss ? '-extract' : ''),
-    browser,
-    code
-  )
-  expect(await page.$('#test')).toBeTruthy()
-  expect(
-    await page.evaluate(() => document.getElementById('test').textContent)
-  ).toEqual(expect.stringContaining('Hello'))
-  expect(
-    await page.evaluate(
-      () => window.getComputedStyle(document.getElementById('test')).color
-    )
-  ).toEqual('rgb(255, 0, 0)')
+  try {
+    const code = await build(filename, extractCss)
 
-  moreAssertions && moreAssertions(page)
-
-  await page.close()
+    const page = await open(
+      fixture + (extractCss ? '-extract' : ''),
+      browser!,
+      code
+    )
+    expect(await page.$('#test')).toBeTruthy()
+    expect(
+      await page.evaluate(() => document.getElementById('test')!.textContent)
+    ).toEqual(expect.stringContaining('Hello'))
+    expect(
+      await page.evaluate(
+        () => window.getComputedStyle(document.getElementById('test')!).color
+      )
+    ).toEqual('rgb(255, 0, 0)')
+
+    moreAssertions && moreAssertions(page)
+
+    await page.close()
+  } catch (error) {
+    console.error({ error })
+
+    throw error
+  }
 }

test/baseline.spec.ts

@@ -2,5 +2,4 @@
   <h1 id="test" style="color: red;">Hello {{ name }}!</h1>
 </template>
 
-<script src="./script.js">
-</script>
+<script src="./script.js"></script>

test/fixtures/with-import-script.vue

@@ -10,5 +10,4 @@ export default {
 }
 </script>
 
-<style src="./style.css">
-</style>
+<style src="./style.css"></style>

test/fixtures/with-import-style.vue

@@ -64,10 +64,16 @@ h1 {
 </style>
 
 <template>
-<div>
-  <div><h1>hi</h1></div>
-  <p class="abc def">hi</p>
-  <template v-if="!ok"><p class="test" id="test">Hello</p></template>
-  <svg><template><p></p></template></svg>
-</div>
+  <div>
+    <div><h1>hi</h1></div>
+    <p class="abc def">hi</p>
+    <template v-if="!ok"
+      ><p class="test" id="test">Hello</p></template
+    >
+    <svg>
+      <template>
+        <p></p>
+      </template>
+    </svg>
+  </div>
 </template>