feat: Use @vue/component-compiler (#182)

* feat: use @vue/component-compiler

* chore: add conventional changelog

* chore: Version 4.0.0

* chore: Add circle config for pupperteer

Author: znck

.circleci/config.yml

@@ -1,22 +1,19 @@
 version: 2
 jobs:
   build:
-    working_directory: ~/rollup-plugin-vue
+    working_directory: ~/project
     docker:
-      - image: circleci/node:8.5.0
+      - image: alekzonder/puppeteer # base image: node/8-slim
     steps:
       - checkout
-      - run: 
-          name: Install yarn
+      - run:
+          name: Install yarn if required
           command: curl -o- -s -L https://yarnpkg.com/install.sh | bash
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: Install package dependencies
-          command: yarn --no-progress
-      - run:
-          name: Rebuild node-sass
-          command: npm rebuild node-sass
+          command: yarn --no-progress install --pure-lockfile
       - save_cache:
           key: dependency-cache-{{ checksum "package.json" }}
           paths:

.gitignore

@@ -2,6 +2,7 @@ dist/
 /.github/sereno/public
 /_cache
 test/style.css
+output/
 # Logs
 logs/
 *.log

CHANGELOG.md

@@ -0,0 +1,9 @@
+<a name="4.0.0"></a>
+# [4.0.0](https://github.com/znck/rollup-plugin-vue/compare/v2.5.2...v4.0.0) (2018-05-01)
+
+### Features
+
+* use [@vue](https://github.com/vue)/component-compiler ([e110aa0](https://github.com/znck/rollup-plugin-vue/commit/e110aa0))
+
+
+

README.md

@@ -7,8 +7,6 @@ As vue-loader is for webpack and vueify is for browserify, similarly its for rol
 
 With rollup you can break your application into reusable modules.
 
->  See [docs](http://vuejs.github.io/rollup-plugin-vue) for installing, using and contributing.
-
 <p align="center">
   <a href="https://circleci.com/gh/vuejs/rollup-plugin-vue">
     <img src="https://circleci.com/gh/vuejs/rollup-plugin-vue.svg?style=svg" alt="Build Status" />
@@ -37,6 +35,19 @@ With rollup you can break your application into reusable modules.
   </a>
 </p>
 
+## Usage
+
+```js
+import vue from 'rollup-plugin-vue'
+
+export default  {
+  entry: 'main.js',
+  plugins: [
+    vue(/* options */)
+  ]
+}
+``` 
+
 ## Security
 
 If you discover any security related issues, please email hi@znck.me instead of using the issue tracker.

config/banner.js

@@ -1,14 +1,14 @@
-"use strict";
+'use strict'
 
-let pack = require('../package.json');
+const pack = require('../package.json')
 
-const VERSION = process.env.VERSION || pack.version;
-const YEAR = new Date().getFullYear();
+const VERSION = process.env.VERSION || pack.version
+const YEAR = new Date().getFullYear()
 
 const BANNER = `/*!
  * ${pack.name} v${VERSION}
  * (c) ${YEAR} ${pack.author}
  * Release under the ${pack.license} License.
- */`;
+ */`
 
-module.exports = BANNER;
+module.exports = BANNER

config/build.js

@@ -2,65 +2,47 @@
 
 const babel = require('rollup-plugin-babel')
 const rollup = require('rollup')
-const replace = require('rollup-plugin-replace')
-const zlib = require('zlib')
-const fs = require('fs')
 const pack = require('../package.json')
-const banner = require('./banner')
 
-const main = fs
-      .readFileSync('src/index.js', 'utf-8')
-      .replace(/plugin\.version = '[\d\.]+'/, `plugin.version = '${pack.version}'`)
+const dependencies = Object.keys(pack.dependencies).concat('path')
 
-fs.writeFileSync('src/index.js', main)
-
-rollup.rollup({
+rollup
+  .rollup({
     input: 'src/index.js',
+    external(id) {
+      return dependencies.some(it => it === id || id.startsWith(it))
+    },
     plugins: [
-        babel({ runtimeHelpers: true })
-    ],
-    external (id) {
-        if (/babel-runtime\/.*/i.test(id)) {
-            return true
-        }
-
-        return [
-            'camelcase',
-            'coffeescript-compiler',
-            'de-indent',
-            'debug',
-            'fs',
-            'hash-sum',
-            'html-minifier',
-            'less',
-            'magic-string',
-            'merge-options',
-            'node-sass',
-            'parse5',
-            'path',
-            'postcss',
-            'postcss-load-config',
-            'postcss-modules',
-            'postcss-selector-parser',
-            'posthtml',
-            'posthtml-attrs-parser',
-            'pug',
-            'rollup-pluginutils',
-            'stylus',
-            'vue-template-es2015-compiler',
-            'vue-template-validator',
-            'typescript'
-        ].indexOf(id) > -1
-    }
-}).then(function (bundle) {
+      babel({
+        exclude: 'node_modules/**',
+        babelrc: false,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              modules: false,
+              target: { node: 6 }
+            }
+          ]
+        ],
+        plugins: [
+          '@babel/plugin-proposal-object-rest-spread',
+          '@babel/plugin-transform-runtime'
+        ],
+        runtimeHelpers: true
+      })
+    ]
+  })
+  .then(bundle => {
     bundle.write({
-        format: 'cjs',
-        file: 'dist/' + pack.name + '.common.js'
+      format: 'cjs',
+      file: 'dist/' + pack.name + '.common.js',
+      sourcemap: true
     })
     bundle.write({
-        format: 'es',
-        file: 'dist/' + pack.name + '.js'
+      format: 'es',
+      file: 'dist/' + pack.name + '.js',
+      sourcemap: true
     })
-}).catch(function logError (e) {
-    console.log(e)
-})
+  })
+  .catch(console.error)

docs/config.js

@@ -1,51 +1,58 @@
 const languages = {
-    title: 'Language',
-    type: 'dropdown',
-    exact: true,
-    items: [
-        { title: 'English', path: '/en/', matchPath: /\/en\/.*/i }
-    ]
+  title: 'Language',
+  type: 'dropdown',
+  exact: true,
+  items: [{ title: 'English', path: '/en/', matchPath: /\/en\/.*/i }]
 }
 
 const home = { title: 'Home', path: '/' }
 
 const versions = [
-    { title: 'Version 2.2', path: '/2.2/', matchPath: /^\/([a-z-]+)\/2.2\/.*/i },
-    { title: 'Version 2.3', path: '/2.3/', matchPath: /^\/([a-z-]+)\/2.3\/.*/i },
+  { title: 'Version 2.2', path: '/2.2/', matchPath: /^\/([a-z-]+)\/2.2\/.*/i },
+  { title: 'Version 2.3', path: '/2.3/', matchPath: /^\/([a-z-]+)\/2.3\/.*/i }
 ]
 
 function lang_version(lang) {
-    const version = {
-        title: 'Version',
-        type: 'dropdown',
-        exact: true,
-    }
-    version.items = versions.map(function (v) {
-        const ver = Object.assign({}, v)
-        ver.path = '/' + lang + ver.path
-
-        return ver
-    })
+  const version = {
+    title: 'Version',
+    type: 'dropdown',
+    exact: true
+  }
+  version.items = versions.map(function(v) {
+    const ver = Object.assign({}, v)
+    ver.path = '/' + lang + ver.path
 
-    return version
+    return ver
+  })
+
+  return version
 }
 
 docute.init({
-    repo: 'vuejs/rollup-plugin-vue',
-    'edit-link': 'https://github.com/vuejs/rollup-plugin-vue/edit/master/docs',
-
-    nav: {
-        default: [home, languages, lang_version('en')],
-        'en2.3': [{ title: 'Home', path: '/en/2.3/' }, { title: 'Examples', path: '/en/2.3/examples' }, languages, lang_version('en')],
-        'en2.2': [{ title: 'Home', path: '/en/2.2/' }, { title: 'Examples', path: '/en/2.2/examples' }, languages, lang_version('en')],
-    },
-
-    plugins: [
-        docsearch({
-            apiKey: '7792597613e997afeb0b75a206ca0c5a',
-            indexName: 'rollup-plugin-vue',
-            url: 'https://vuejs.github.io/rollup-plugin-vue'
-        })
+  repo: 'vuejs/rollup-plugin-vue',
+  'edit-link': 'https://github.com/vuejs/rollup-plugin-vue/edit/master/docs',
+
+  nav: {
+    default: [home, languages, lang_version('en')],
+    'en2.3': [
+      { title: 'Home', path: '/en/2.3/' },
+      { title: 'Examples', path: '/en/2.3/examples' },
+      languages,
+      lang_version('en')
+    ],
+    'en2.2': [
+      { title: 'Home', path: '/en/2.2/' },
+      { title: 'Examples', path: '/en/2.2/examples' },
+      languages,
+      lang_version('en')
     ]
-    
+  },
+
+  plugins: [
+    docsearch({
+      apiKey: '7792597613e997afeb0b75a206ca0c5a',
+      indexName: 'rollup-plugin-vue',
+      url: 'https://vuejs.github.io/rollup-plugin-vue'
+    })
+  ]
 })

example/Hello.vue

@@ -1,23 +1,16 @@
-<template>
-  <div class="hello">
-    <h1 class="hello__title">{{ msg }}</h1>
-  </div>
+<template functional>
+  <div class="hello">{{ props.message }}</div>
 </template>
 
 <script>
 export default {
-  data () {
-    return {
-      msg: 'Hello World!'
-    }
-  }
+  props: ['message']
 }
 </script>
 
-<style lang="stylus">
+
+<style scoped>
 .hello {
-  &__title {
-    color: #42b983;
-  }
+  color: red;
 }
 </style>

example/build.js

@@ -6,35 +6,21 @@ const CleanCSS = require('clean-css')
 const fs = require('fs')
 const stylus = require('stylus')
 
-
 rollup({
   entry: 'index.js',
-  plugins: [
-    vue({
-      compileTemplate: true,
-      css (styles, stylesNodes) {
-        write('dist/papervue.styl', styles)
-        stylus.render(styles, function (err, css) {
-          if (err) throw err
-          write('dist/papervue.css', css)
-          write('dist/papervue.min.css', new CleanCSS().minify(css).styles)
-        })
-      }
-    }),
-    buble()
-  ]
+  plugins: [vue(), buble()]
 })
-  .then(function (bundle) {
+  .then(function(bundle) {
     var code = bundle.generate({
       format: 'umd',
       moduleName: 'helloRollupVue',
       useStrict: false
     }).code
-    return write('dist/papervue.js', code).then(function () {
+    return write('dist/papervue.js', code).then(function() {
       return code
     })
   })
-  .then(function (code) {
+  .then(function(code) {
     var minified = uglify.minify(code, {
       fromString: true,
       output: {
@@ -45,24 +31,24 @@ rollup({
   })
   .catch(logError)
 
-function write (dest, code) {
-  return new Promise(function (resolve, reject) {
-    fs.writeFile(dest, code, function (err) {
+function write(dest, code) {
+  return new Promise(function(resolve, reject) {
+    fs.writeFile(dest, code, function(err) {
       if (err) return reject(err)
       console.log(blue(dest) + ' ' + getSize(code))
       resolve()
     })
   })
 }
 
-function getSize (code) {
+function getSize(code) {
   return (code.length / 1024).toFixed(2) + 'kb'
 }
 
-function logError (e) {
+function logError(e) {
   console.log(e)
 }
 
-function blue (str) {
+function blue(str) {
   return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
 }