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

* feat: use @vue/component-compiler

* chore: add conventional changelog

* chore: Version 4.0.0

* chore: Add circle config for pupperteer

.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'
}