vuejs · ghost · Jun 15, 2016 · Jun 15, 2016 · Jun 15, 2016 · Jun 15, 2016
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,7 @@
+{
+  "root": true,
+  "extends": "vue",
+  "env": {
+    "mocha": true
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
-node_modules
+node_modules
+test/temp
diff --git a/README.md b/README.md
@@ -1,7 +1,13 @@
-# vueify [![Build Status](https://circleci.com/gh/vuejs/vueify.svg?style=shield)](https://circleci.com/gh/vuejs/vueify) [![npm version](https://badge.fury.io/js/vueify.svg)](http://badge.fury.io/js/vueify)
+# THIS REPOSITORY IS DEPRECATED
+
+> Note: We are concentrating our efforts on supporting webpack and rollup.
+
+## vueify [![Build Status](https://circleci.com/gh/vuejs/vueify.svg?style=shield)](https://circleci.com/gh/vuejs/vueify) [![npm version](https://badge.fury.io/js/vueify.svg)](http://badge.fury.io/js/vueify)
 
 > [Browserify](http://browserify.org/) transform for [Vue.js](http://vuejs.org/) components, with scoped CSS and component hot-reloading.
 
+**NOTE: master branch now hosts version ^9.0, which only works with Vue ^2.0. Vueify 8.x which works with Vue 1.x is in the [8.x branch](https://github.com/vuejs/vueify/tree/8.x).**
+
 This transform allows you to write your components in this format:
 
 ``` html
@@ -67,17 +73,6 @@ npm install vueify --save-dev
 browserify -t vueify -e src/main.js -o build/build.js
 ```
 
-If you are using npm 3+, it no longer auto install the peer dependencies. So you will also have to also install the babel-related dependencies:
-
-``` bash
-npm install\
-  babel-core\
-  babel-preset-es2015\
-  babel-runtime\
-  babel-plugin-transform-runtime\
-  --save-dev
-```
-
 And this is all you need to do in your main entry file:
 
 ``` js
@@ -86,9 +81,9 @@ var Vue = require('vue')
 var App = require('./app.vue')
 
 new Vue({
-  el: 'body',
-  components: {
-    app: App
+  el: '#app',
+  render: function (createElement) {
+    return createElement(App)
   }
 })
 ```
@@ -97,7 +92,7 @@ In your HTML:
 
 ``` html
 <body>
-  <app></app>
+  <div id="app"></div>
   <script src="build.js"></script>
 </body>
 ```
@@ -121,35 +116,34 @@ Make sure to have the `NODE_ENV` environment variable set to `"production"` when
 
 If you are using Gulp, note that `gulp --production` **does not** affect vueify; you still need to explicitly set `NODE_ENV=production`.
 
-## ES2015 by Default
-
-Vueify automatically transforms the JavaScript in your `*.vue` components using Babel. Write ES2015 today!
+## ES2015 with Babel
 
-The default Babel (6) options used for Vue.js components are:
+Vueify is pre-configured to work with Babel. Simply install Babel-related dependencies:
 
-``` js
-{
-  "presets": ["es2015"],
-  "plugins": ["transform-runtime"]
-}
+``` bash
+npm install\
+  babel-core\
+  babel-preset-es2015\
+  --save-dev
 ```
 
-If you wish to override this, you can add a `.babelrc` file at the root of your project:
+Then create a `.babelrc`:
 
 ``` json
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"]
+  "presets": ["es2015"]
 }
 ```
 
+And voila! You can now write ES2015 in your `*.vue` files. Note if you want to use ES2015 on normal `*.js` files, you will also need [babelify](https://github.com/babel/babelify).
+
 You can also configure babel with the `babel` field in `vue.config.js`, which will take the highest priority.
 
-## Enabling Pre-Processors
+## Enabling Other Pre-Processors
 
-You need to install the corresponding node modules to enable the compilation. e.g. to get stylus compiled in your Vue components, do `npm install stylus --save-dev`.
+For other pre-processors, you also need to install the corresponding node modules to enable the compilation. e.g. to get stylus compiled in your Vue components, do `npm install stylus --save-dev`.
 
-These are the built-in preprocessors:
+These are the preprocessors supported by vueify out of the box:
 
 - stylus
 - less
@@ -158,13 +152,9 @@ These are the built-in preprocessors:
 - pug
 - coffee-script (use `coffee` in [config section](#configuring-options))
 
-## Autoprefix by Default
-
-Starting in 5.0.0, all CSS output via vueify will be autoprefixed by default. See [config section](#configuring-options) below on customizing the options.
-
 ## PostCSS
 
-Vueify uses PostCSS for scoped CSS rewrite and autoprefixing. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
+Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
 
 ## Configuring Options
 
@@ -178,15 +168,6 @@ module.exports = {
   },
   // provide your own postcss plugins
   postcss: [...],
-  // configure autoprefixer
-  autoprefixer: {
-    browsers: ['last 2 versions']
-  },
-  // configure html minification in production mode
-  // see https://github.com/kangax/html-minifier#options-quick-reference
-  htmlMinifier: {
-    // ...
-  },
   // register custom compilers
   customCompilers: {
     // for tags with lang="ts"
@@ -209,9 +190,7 @@ Example using custom PostCSS plugin:
 var cssnext = require('cssnext')
 
 module.exports = {
-  postcss: [cssnext()],
-  // disable autoprefixer since cssnext comes with it
-  autoprefixer: false
+  postcss: [cssnext()]
 }
 ```
 
@@ -251,9 +230,7 @@ browserify('./main.js')
   .pipe(fs.createWriteStream("bundle.js"))
 ```
 
-### Scoped CSS
-
-> Experimental
+## Scoped CSS
 
 When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM, but doesn't require any polyfills. It is achieved by transforming the following:
 
@@ -281,17 +258,15 @@ Into the following:
 </template>
 ```
 
-#### Notes
+### Scoped CSS Notes
 
 1. You can include both scoped and non-scoped styles in the same component.
 
-2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
-
-3. Partials are not affected by scoped styles.
-
-### Hot Reload
+2. The following will be affected by both the parent's scoped CSS and the child's scoped CSS:
+  - A child component's root node
+  - Content inserted to a child component via `<slot>`
 
-> Experimental
+## Hot Reload
 
 To enable hot component reloading, you need to install the [browserify-hmr](https://github.com/AgentME/browserify-hmr) plugin:
 
@@ -300,97 +275,59 @@ npm install browserify-hmr --save-dev
 watchify -p browserify-hmr index.js -o bundle.js
 ```
 
-A full setup example with hot reloading is available at [vuejs/vueify-example](https://github.com/vuejs/vueify-example).
+You can scaffold a hot-reload enabled project easily using `vue-cli` and the [this template](https://github.com/vuejs-templates/browserify-simple).
 
-## Compiler API
+## CSS Extraction
 
-The compiler API (originally `vue-component-compiler`) is also exposed:
+By default, the CSS in each component is injected into the page using a `<style>` tag. This works well in most scenarios and enables CSS hot-reloading during development. However, in some cases you may prefer extracting all component CSS into a single file for better performance. To do that, you will need to add the CSS extraction browserify plugin.
 
-``` js
-var compiler = require('vueify').compiler
+Via CLI:
 
-// filePath should be an absolute path
-compiler.compile(fileContent, filePath, function (err, result) {
-  // result is a common js module string
-})
+``` bash
+browserify -t vueify -p [ vueify/plugins/extract-css -o dist/bundle.css ] main.js
 ```
 
-## Syntax Highlighting
-
-Currently there are syntax highlighting support for [Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue), [Vim](https://github.com/posva/vim-vue), [Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue) and [Brackets](https://github.com/pandao/brackets-vue). Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating `*.vue` files as HTML in your editor.
-
-## Example
-
-For an example setup using most of the features mentioned above, see [vuejs/vueify-example](https://github.com/vuejs/vueify-example).
-
-If you use Webpack, there's also [vue-loader](https://github.com/vuejs/vue-loader) that does the same thing.
-
-## Changelog
-
-### 8.5.0
-
-- Now also supports passing in Vueify options via browserify transform options. The options are exactly the same as `vue.config.js`.
-
-### 8.4.0
-
-- Removed peer dependencies. Now vueify simply warns you when you are using a feature that requires a missing dependency.
-
-### 8.3.0
-
-- Added compile-time template syntax validation that catches common errors.
-- Code blocks with base indents are now de-indented before being processed.
-
-### 8.2.0
-
-- Added `htmlMinifier` option in config that allows configuration of HTML minification in production mode.
-- Fixed HTML minification removing `type` attribute for `<input type="text">`.
-
-### 8.1.0
-
-- Vueify now respects `.babelrc` over default options.
-
-### 8.0.0
-
-- `babel-core` is now a peer dependency.
-
-### 7.0.0
-
-- Added relative `@import` path support and import dependency tracking for LESS, SASS & Stylus. Now you can `@import` files using relative paths to the file being edited, and editing these imported files will also trigger watchify rebuild.
-
-- Removed built-in compiler for `myth`. Prefer using PostCSS + CSSNext.
+Via API:
 
-### 6.0.0
-
-- Upgraded to Babel 6. This is a breaking change because the babel configuration is now different.
-
-### 5.0.4
+``` js
+browserify('./main.js')
+  .transform('vueify')
+  .plugin('vueify/plugins/extract-css', {
+    out: 'dist/bundle.css' // can also be a WritableStream
+  })
+  .bundle()
+```
 
-- Added `postcss` option for providing custom PostCSS plugins.
+This only works for vueify 9+. For Vue 1.x / vueify 8.x you can use [vueify-extract-css](https://github.com/rawcreative/vueify-extract-css).
 
-### 5.0.0
+## Building for Production
 
-- New: CSS output is now autoprefixed by default.
-- Changed: [New config file format](#configuring-options)
+When building for production, follow these steps to ensure smaller bundle size:
 
-### 4.0.0
+1. Make sure `process.env.NODE_ENV === "production"`. This tells `vueify` to avoid including hot-reload related code.
 
-- Support ES2015 by default.
+2. Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle. This allows the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks.
 
-### 3.0.0
+## Compiler API
 
-- Added support for [scoped CSS](#scoped-css) and [component hot reloading](#hot-reload).
+The compiler API (originally `vue-component-compiler`) is also exposed:
 
-### 2.0.1
+``` js
+var compiler = require('vueify').compiler
 
-- Built-in lang for ES2015 has been renamed from `es6` to `es`.
+// filePath should be an absolute path
+compiler.compile(fileContent, filePath, function (err, result) {
+  // result is a common js module string
+})
+```
 
-- `es` transforms now uses loose mode and optional runtime by default. This means in addition to installing `babel`, you should also install `babel-runtime`.
+## Syntax Highlighting
 
-- Templates and CSS are now non-minified by default. To enable minification, run the build with `NODE_ENV=production`.
+Currently there are syntax highlighting support for [Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue), [Vim](https://github.com/posva/vim-vue), [Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue) and [Brackets](https://github.com/pandao/brackets-vue). Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating `*.vue` files as HTML in your editor.
 
-- Options for built-in pre-processors can now be configured in `vue.config.js`.
+## Changelog
 
-- `vue-component-compiler` has been merged into `vueify`. It is now exposed as `require('vueify').compiler`.
+Please see the [Releases](https://github.com/vuejs/vueify/releases) page for changes in versions ^9.0.0.
 
 ## License
 

diff --git a/circle.yml b/circle.yml
@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 6
diff --git a/index.js b/index.js
@@ -1,30 +1,46 @@
 var through = require('through')
 var compiler = require('./lib/compiler')
 
-compiler.loadConfig()
-
 module.exports = function vueify (file, options) {
-  if (!/.vue$/.test(file)) return through()
+  if (!/.vue$/.test(file)) {
+    return through()
+  }
+
+  compiler.loadConfig()
   compiler.applyConfig(options)
+  compiler.applyConfig({
+    sourceMap: options._flags.debug
+  })
 
   var data = ''
   var stream = through(write, end)
+  stream.vueify = true
 
-  function dependency(file) {
+  function dependency (file) {
     stream.emit('file', file)
   }
 
-  function write(buf) {
+  function emitStyle (e) {
+    stream.emit('vueify-style', e)
+  }
+
+  function write (buf) {
     data += buf
   }
 
   function end () {
     stream.emit('file', file)
     compiler.on('dependency', dependency)
+    compiler.on('style', emitStyle)
 
-    compiler.compile(data, file, function(error, result) {
+    compiler.compile(data, file, function (error, result) {
       compiler.removeListener('dependency', dependency)
-      if (error) stream.emit('error', error)
+      compiler.removeListener('style', emitStyle)
+      if (error) {
+        stream.emit('error', error)
+        // browserify doesn't log the stack by default...
+        console.error(error.stack.replace(/^.*?\n/, ''))
+      }
       stream.queue(result)
       stream.queue(null)
     })