diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..0a918b9 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,7 @@ +{ + "root": true, + "extends": "vue", + "env": { + "mocha": true + } +} diff --git a/.gitignore b/.gitignore index 91dfed8..6218a0b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store -node_modules \ No newline at end of file +node_modules +test/temp diff --git a/README.md b/README.md index da918e0..9a42c15 100644 --- 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 - +
``` @@ -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 ` diff --git a/test/fixtures/basic.vue b/test/fixtures/basic.vue index 3996ac9..5dce8c7 100644 --- a/test/fixtures/basic.vue +++ b/test/fixtures/basic.vue @@ -1,25 +1,19 @@ - - + + diff --git a/test/fixtures/custom.vue b/test/fixtures/custom.vue deleted file mode 100644 index e5a016e..0000000 --- a/test/fixtures/custom.vue +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/test/fixtures/empty.vue b/test/fixtures/empty.vue deleted file mode 100644 index e69de29..0000000 diff --git a/test/fixtures/imports/import.less b/test/fixtures/imports/import.less deleted file mode 100644 index 6679fe0..0000000 --- a/test/fixtures/imports/import.less +++ /dev/null @@ -1 +0,0 @@ -@base: #f938ab; diff --git a/test/fixtures/imports/import.sass b/test/fixtures/imports/import.sass deleted file mode 100644 index 6fb403e..0000000 --- a/test/fixtures/imports/import.sass +++ /dev/null @@ -1,2 +0,0 @@ -$font-stack: Helvetica, sans-serif; -$primary-color: #333; diff --git a/test/fixtures/imports/import.styl b/test/fixtures/imports/import.styl deleted file mode 100644 index b08b59b..0000000 --- a/test/fixtures/imports/import.styl +++ /dev/null @@ -1,2 +0,0 @@ -$font-stack = Helvetica, sans-serif; -$primary-color = #333 diff --git a/test/fixtures/jade.vue b/test/fixtures/jade.vue deleted file mode 100644 index 5b44d98..0000000 --- a/test/fixtures/jade.vue +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/test/fixtures/less.vue b/test/fixtures/less.vue deleted file mode 100644 index 060a45a..0000000 --- a/test/fixtures/less.vue +++ /dev/null @@ -1,17 +0,0 @@ - diff --git a/test/fixtures/media-query.vue b/test/fixtures/media-query.vue new file mode 100644 index 0000000..9dbe0ee --- /dev/null +++ b/test/fixtures/media-query.vue @@ -0,0 +1,7 @@ + diff --git a/test/fixtures/multiple-scripts.vue b/test/fixtures/multiple-scripts.vue deleted file mode 100644 index 1ae4119..0000000 --- a/test/fixtures/multiple-scripts.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/test/fixtures/multiple-styles.vue b/test/fixtures/multiple-styles.vue deleted file mode 100644 index 71496f9..0000000 --- a/test/fixtures/multiple-styles.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - - - \ No newline at end of file diff --git a/test/fixtures/multiple.vue b/test/fixtures/multiple.vue deleted file mode 100644 index 1bfbc94..0000000 --- a/test/fixtures/multiple.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - \ No newline at end of file diff --git a/test/fixtures/non-minified.vue b/test/fixtures/non-minified.vue deleted file mode 100644 index 0e9ecd0..0000000 --- a/test/fixtures/non-minified.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/test/fixtures/postcss.vue b/test/fixtures/postcss.vue new file mode 100644 index 0000000..a02d550 --- /dev/null +++ b/test/fixtures/postcss.vue @@ -0,0 +1,5 @@ + diff --git a/test/fixtures/pre-processors.vue b/test/fixtures/pre-processors.vue new file mode 100644 index 0000000..f59787e --- /dev/null +++ b/test/fixtures/pre-processors.vue @@ -0,0 +1,34 @@ + + + + + + + + + diff --git a/test/fixtures/pug.vue b/test/fixtures/pug.vue index d1b7643..5a43989 100644 --- a/test/fixtures/pug.vue +++ b/test/fixtures/pug.vue @@ -1,11 +1,6 @@ diff --git a/test/fixtures/sass.vue b/test/fixtures/sass.vue deleted file mode 100644 index 3930c28..0000000 --- a/test/fixtures/sass.vue +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue new file mode 100644 index 0000000..ce28b06 --- /dev/null +++ b/test/fixtures/scoped-css.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/test/fixtures/scoped.vue b/test/fixtures/scoped.vue deleted file mode 100644 index d30a9c0..0000000 --- a/test/fixtures/scoped.vue +++ /dev/null @@ -1,12 +0,0 @@ - - - - diff --git a/test/fixtures/script-import.js b/test/fixtures/script-import.js new file mode 100644 index 0000000..8ab2015 --- /dev/null +++ b/test/fixtures/script-import.js @@ -0,0 +1,7 @@ +export default { + data () { + return { + msg: 'Hello from Component A!' + } + } +}; \ No newline at end of file diff --git a/test/fixtures/script-import.vue b/test/fixtures/script-import.vue new file mode 100644 index 0000000..b45d1ec --- /dev/null +++ b/test/fixtures/script-import.vue @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/fixtures/src.vue b/test/fixtures/src.vue deleted file mode 100644 index 37d642b..0000000 --- a/test/fixtures/src.vue +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/test/fixtures/src/test.js b/test/fixtures/src/test.js deleted file mode 100644 index dce344e..0000000 --- a/test/fixtures/src/test.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - el: '#hi' -} diff --git a/test/fixtures/styl.vue b/test/fixtures/styl.vue deleted file mode 100644 index b24d35a..0000000 --- a/test/fixtures/styl.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/test/fixtures/style-export.vue b/test/fixtures/style-export.vue new file mode 100644 index 0000000..c3311de --- /dev/null +++ b/test/fixtures/style-export.vue @@ -0,0 +1,3 @@ + diff --git a/test/fixtures/style-import-scoped.css b/test/fixtures/style-import-scoped.css new file mode 100644 index 0000000..954b5d8 --- /dev/null +++ b/test/fixtures/style-import-scoped.css @@ -0,0 +1 @@ +h1 { color: green; } diff --git a/test/fixtures/style-import.css b/test/fixtures/style-import.css new file mode 100644 index 0000000..5ce768c --- /dev/null +++ b/test/fixtures/style-import.css @@ -0,0 +1 @@ +h1 { color: red; } diff --git a/test/fixtures/style-import.vue b/test/fixtures/style-import.vue new file mode 100644 index 0000000..54b83bf --- /dev/null +++ b/test/fixtures/style-import.vue @@ -0,0 +1,2 @@ + + diff --git a/test/fixtures/template-import.jade b/test/fixtures/template-import.jade new file mode 100644 index 0000000..bc60abf --- /dev/null +++ b/test/fixtures/template-import.jade @@ -0,0 +1,2 @@ +div + h1 hello diff --git a/test/fixtures/template-import.vue b/test/fixtures/template-import.vue new file mode 100644 index 0000000..ce53453 --- /dev/null +++ b/test/fixtures/template-import.vue @@ -0,0 +1 @@ + diff --git a/test/fixtures/test.html b/test/fixtures/test.html deleted file mode 100644 index 67326d3..0000000 --- a/test/fixtures/test.html +++ /dev/null @@ -1 +0,0 @@ -

hi

\ No newline at end of file diff --git a/test/fixtures/test.styl b/test/fixtures/test.styl deleted file mode 100644 index c6fe265..0000000 --- a/test/fixtures/test.styl +++ /dev/null @@ -1,2 +0,0 @@ -h1 - font-size 12px \ No newline at end of file diff --git a/test/test.js b/test/test.js index 202799a..dfcf92a 100644 --- a/test/test.js +++ b/test/test.js @@ -1,75 +1,141 @@ -var fs = require('fs') -var path = require('path') -var compiler = require('../lib/compiler') -var assert = require('assert') -var hash = require('hash-sum') +process.env.VUEIFY_TEST = true -// test custom transform -compiler.applyConfig({ - customCompilers: { - test: function (content, cb) { - content = content.replace('not ', '') - cb(null, content) - } - } -}) +const fs = require('fs') +const path = require('path') +const expect = require('chai').expect +const rimraf = require('rimraf') +const mkdirp = require('mkdirp') +const browserify = require('browserify') +const vueify = require('../index') +const jsdom = require('jsdom') +const vueCompiler = require('vue-template-compiler') +const transpile = require('vue-template-es2015-compiler') +const genId = require('../lib/gen-id') -function read (file) { - return fs.readFileSync(path.resolve(__dirname, file), 'utf-8') -} +const tempDir = path.resolve(__dirname, './temp') +const mockEntry = path.resolve(tempDir, 'entry.js') +rimraf.sync(tempDir) +mkdirp.sync(tempDir) -function test (name) { - it(name, function (done) { - var filePath = 'fixtures/' + name + '.vue' - var fileContent = read(filePath) - var expected = read('expects/' + name + '.js') - .replace(/\{\{id\}\}/g, '_v-' + hash(require.resolve('./' + filePath))) +function test (file, assert) { + it(file, done => { + fs.writeFileSync(mockEntry, 'window.vueModule = require("../fixtures/' + file + '.vue")') + browserify(mockEntry) + .transform(vueify) + .bundle((err, buf) => { + if (err) return done(err) + jsdom.env({ + html: '', + src: [buf.toString()], + done: (err, window) => { + if (err) return done(err) + assert(window) + done() + } + }) + }) + }) +} - // test registering dependency - var deps = [] - function addDep (file) { - deps.push(file) - } - compiler.on('dependency', addDep) +function testCssExtract (file, assert) { + it(file, done => { + fs.writeFileSync(mockEntry, 'window.vueModule = require("../fixtures/' + file + '.vue")') + browserify(mockEntry) + .transform(vueify) + .plugin('./plugins/extract-css', { out: { write: assert, end: done }}) + .bundle((err, buf) => { + if (err) return done(err) + }) + }) +} - process.env.VUEIFY_TEST = true - process.env.NODE_ENV = name === 'non-minified' - ? 'development' - : 'production' +function assertRenderFn (options, template) { + const compiled = vueCompiler.compile(template) + expect(options.render.toString()).to.equal(transpile('function render() {' + compiled.render + '}')) +} - compiler.compile( - fileContent, - path.resolve(__dirname, filePath), - function (err, result) { - // the cb is handled by a Promise, so the assertion - // errors gets swallowed and the test never fails. - // do it in a separate tick. - setTimeout(function () { - if (err) throw err - assert.equal(result, expected, 'should compile correctly') +describe('vueify', () => { + test('basic', window => { + const module = window.vueModule + assertRenderFn(module, '

{{msg}}

') + expect(module.data().msg).to.contain('Hello from Component A!') + const style = window.document.querySelector('style').textContent + expect(style).to.contain('comp-a h2 {\n color: #f00;\n}') + }) - // check src - if (name === 'src') { - assert.equal(deps[0], __dirname + '/fixtures/test.html') - assert.equal(deps[1], __dirname + '/fixtures/test.styl') - assert.equal(deps[2], __dirname + '/fixtures/src/test.js') - } + test('pre-processors', window => { + var module = window.vueModule + assertRenderFn(module, + '
' + + '

This is the app

' + + '' + + '' + + '
' + ) + expect(module.data().msg).to.contain('Hello from coffee!') + var style = window.document.querySelector('style').textContent + // stylus + expect(style).to.contain('body {\n font: 100% Helvetica, sans-serif;\n color: #999;\n}') + // sass + expect(style).to.contain('h1 {\n color: red;') + // less + expect(style).to.contain('h1 {\n color: green;') + }) - if (name === 'less' || name === 'sass' || name === 'styl') { - assert.equal(deps[0], __dirname + '/fixtures/imports/import.' + name) - } + test('pug', window => { + var module = window.vueModule + assertRenderFn(module, + '
' + + '

This is the app

' + + '' + + '' + + '
' + ) + }) - compiler.removeListener('dependency', addDep) - done() - }, 0) - } + test('scoped-css', window => { + var module = window.vueModule + var id = 'data-v-' + genId(require.resolve('./fixtures/scoped-css.vue')) + expect(module._scopeId).to.equal(id) + assertRenderFn(module, + '
' + + '

hi

\n' + + '

hi

\n' + + '\n' + + '

' + + '
' ) + var style = window.document.querySelector('style').textContent + expect(style).to.contain('.test[' + id + '] {\n color: yellow;\n}') + expect(style).to.contain('.test[' + id + ']:after {\n content: \'bye!\';\n}') + expect(style).to.contain('h1[' + id + '] {\n color: green;\n}') + }) + + test('style-import', window => { + var styles = window.document.querySelectorAll('style') + expect(styles[0].textContent).to.contain('h1 { color: red; }') + // import with scoped + var id = 'data-v-' + genId(require.resolve('./fixtures/style-import.vue')) + expect(styles[0].textContent).to.contain('h1[' + id + '] { color: green; }') + }) + + test('template-import', window => { + var module = window.vueModule + assertRenderFn(module, '

hello

') + }) + + test('script-import', window => { + var module = window.vueModule + expect(module.data().msg).to.contain('Hello from Component A!') }) -} -describe('Vueify compiler', function () { - fs.readdirSync(path.resolve(__dirname, 'expects')) - .forEach(function (file) { - test(path.basename(file, '.js')) - }) + test('media-query', window => { + var style = window.document.querySelector('style').textContent + var id = 'data-v-' + genId(require.resolve('./fixtures/media-query.vue')) + expect(style).to.contain('@media print {\n .foo[' + id + '] {\n color: #000;\n }\n}') + }) + + testCssExtract('style-export', css => { + expect(css).to.equal('h2 {color: red;}') + }) })