diff --git a/README.md b/README.md
index 66fa388..9a42c15 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,13 @@
-# vueify [](https://circleci.com/gh/vuejs/vueify) [](http://badge.fury.io/js/vueify)
+# THIS REPOSITORY IS DEPRECATED
+
+> Note: We are concentrating our efforts on supporting webpack and rollup.
+
+## vueify [](https://circleci.com/gh/vuejs/vueify) [](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
@@ -269,7 +275,7 @@ npm install browserify-hmr --save-dev
watchify -p browserify-hmr index.js -o bundle.js
```
-You can scaffold a hot-reload enabled project easily using `vue-cli` and the [this template](https://github.com/vuejs-templates/browserify-simple-2.0).
+You can scaffold a hot-reload enabled project easily using `vue-cli` and the [this template](https://github.com/vuejs-templates/browserify-simple).
## CSS Extraction
@@ -294,6 +300,14 @@ browserify('./main.js')
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).
+## Building for Production
+
+When building for production, follow these steps to ensure smaller bundle size:
+
+1. Make sure `process.env.NODE_ENV === "production"`. This tells `vueify` to avoid including hot-reload related code.
+
+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.
+
## Compiler API
The compiler API (originally `vue-component-compiler`) is also exposed:
diff --git a/index.js b/index.js
index 1bb2933..d789a83 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,7 @@ module.exports = function vueify (file, options) {
return through()
}
+ compiler.loadConfig()
compiler.applyConfig(options)
compiler.applyConfig({
sourceMap: options._flags.debug
diff --git a/lib/compiler.js b/lib/compiler.js
index 7fb0e2c..cde3d99 100644
--- a/lib/compiler.js
+++ b/lib/compiler.js
@@ -60,6 +60,10 @@ compiler.applyConfig = function (config) {
}
compiler.compile = function (content, filePath, cb) {
+ var isProduction = process.env.NODE_ENV === 'production'
+ var isServer = process.env.VUE_ENV === 'server'
+ var isTest = !!process.env.VUEIFY_TEST
+
// generate css scope id
var id = 'data-v-' + genId(filePath)
// parse the component into parts
@@ -96,7 +100,7 @@ compiler.compile = function (content, filePath, cb) {
var map = null
// styles
var style = resolvedParts.styles.join('\n')
- if (style) {
+ if (style && !isServer) {
// emit style
compiler.emit('style', {
file: filePath,
@@ -126,23 +130,30 @@ compiler.compile = function (content, filePath, cb) {
// template
var template = resolvedParts.template
if (template) {
- if (process.env.NODE_ENV !== 'production') {
+ if (!isProduction && !isServer) {
output +=
'if (__vue__options__.functional) {console.error("' +
'[vueify] functional components are not supported and ' +
'should be defined in plain js files using render functions.' +
'")}\n'
}
+ var beforeLines
+ if (map) {
+ beforeLines = output.split(splitRE).length
+ }
output +=
'__vue__options__.render = ' + template.render + '\n' +
'__vue__options__.staticRenderFns = ' + template.staticRenderFns + '\n'
+ if (map) {
+ addTemplateMapping(content, parts, output, map, beforeLines)
+ }
}
// scoped CSS id
if (hasScopedStyle) {
output += '__vue__options__._scopeId = "' + id + '"\n'
}
// hot reload
- if (process.env.NODE_ENV !== 'production' && !process.env.VUEIFY_TEST) {
+ if (!isProduction && !isTest && !isServer) {
output +=
'if (module.hot) {(function () {' +
' var hotAPI = require("' + hotReloadAPIPath + '")\n' +
@@ -201,10 +212,29 @@ compiler.compile = function (content, filePath, cb) {
})
}
})
+ map._hashedFilename = hashedFilename
return map
}
}
+function addTemplateMapping (content, parts, output, map, beforeLines) {
+ var afterLines = output.split(splitRE).length
+ var templateLine = content.slice(0, parts.template.start).split(splitRE).length
+ for (; beforeLines < afterLines; beforeLines++) {
+ map.addMapping({
+ source: map._hashedFilename,
+ generated: {
+ line: beforeLines,
+ column: 0
+ },
+ original: {
+ line: templateLine,
+ column: 0
+ }
+ })
+ }
+}
+
function processTemplate (part, filePath, parts) {
if (!part) return Promise.resolve()
var template = getContent(part, filePath)
diff --git a/lib/compilers/babel.js b/lib/compilers/babel.js
index d237ed6..be317b4 100644
--- a/lib/compilers/babel.js
+++ b/lib/compilers/babel.js
@@ -1,5 +1,6 @@
var fs = require('fs')
var path = require('path')
+var json = require('json5')
var assign = require('object-assign')
var ensureRequire = require('../ensure-require')
@@ -16,7 +17,7 @@ var babelOptions = fs.existsSync(babelRcPath)
function getBabelRc () {
var rc
try {
- rc = JSON.parse(fs.readFileSync(babelRcPath, 'utf-8'))
+ rc = json.parse(fs.readFileSync(babelRcPath, 'utf-8'))
} catch (e) {
throw new Error('[vueify] Your .babelrc seems to be incorrectly formatted.')
}
@@ -24,7 +25,7 @@ function getBabelRc () {
}
module.exports = function (raw, cb, compiler, filePath) {
- if (babelOptions === defaultBabelOptions) {
+ if ((compiler.options.babel || babelOptions) === defaultBabelOptions) {
try {
ensureRequire('babel', ['babel-preset-es2015', 'babel-runtime', 'babel-plugin-transform-runtime'])
} catch (e) {
diff --git a/lib/gen-id.js b/lib/gen-id.js
index 25281ae..8c9621d 100644
--- a/lib/gen-id.js
+++ b/lib/gen-id.js
@@ -1,8 +1,8 @@
// utility for generating a uid for each component file
// used in scoped CSS rewriting
-var fileUid = 1
-var fileRegistry = Object.create(null)
+var hash = require('hash-sum')
+var cache = Object.create(null)
module.exports = function genId (file) {
- return fileRegistry[file] || (fileRegistry[file] = fileUid++)
+ return cache[file] || (cache[file] = hash(file))
}
diff --git a/lib/style-rewriter.js b/lib/style-rewriter.js
index c631857..1195799 100644
--- a/lib/style-rewriter.js
+++ b/lib/style-rewriter.js
@@ -40,7 +40,7 @@ var addId = postcss.plugin('add-id', function () {
*/
module.exports = function (id, css, scoped, options) {
- var key = id + '!!' + css
+ var key = id + '!!' + scoped + '!!' + css
var val = cache.get(key)
if (val) {
return Promise.resolve(val)
@@ -56,9 +56,16 @@ module.exports = function (id, css, scoped, options) {
}
// scoped css rewrite
- if (scoped) {
+ // make sure the addId plugin is only pushed once
+ if (scoped && plugins.indexOf(addId) === -1) {
plugins.push(addId)
}
+
+ // remove the addId plugin if the style block is not scoped
+ if (!scoped && plugins.indexOf(addId) !== -1) {
+ plugins.splice(plugins.indexOf(addId), 1)
+ }
+
// minification
if (process.env.NODE_ENV === 'production') {
plugins.push(require('cssnano')(assign({
diff --git a/lib/template-compiler.js b/lib/template-compiler.js
index 3824c37..51314b9 100644
--- a/lib/template-compiler.js
+++ b/lib/template-compiler.js
@@ -1,5 +1,6 @@
var chalk = require('chalk')
var vueCompiler = require('vue-template-compiler')
+var transpile = require('vue-template-es2015-compiler')
module.exports = function compileTemplate (template, compiler) {
var compiled = vueCompiler.compile(template)
@@ -17,5 +18,5 @@ module.exports = function compileTemplate (template, compiler) {
}
function toFunction (code) {
- return 'function(){' + code + '}'
+ return transpile('function render () {' + code + '}')
}
diff --git a/package.json b/package.json
index 5be8f1a..c1caee7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vueify",
- "version": "9.2.2",
+ "version": "9.4.1",
"description": "Vue component transform for Browserify",
"main": "index.js",
"repository": {
@@ -31,8 +31,10 @@
"postcss-selector-parser": "^2.0.0",
"source-map": "^0.5.6",
"through": "^2.3.6",
+ "json5": "^0.5.1",
"vue-hot-reload-api": "^2.0.1",
- "vue-template-compiler": "^2.0.0-alpha.8"
+ "vue-template-compiler": "^2.0.0-alpha.8",
+ "vue-template-es2015-compiler": "^1.2.2"
},
"devDependencies": {
"babel-core": "^6.0.0",
@@ -44,6 +46,7 @@
"coffee-script": "^1.10.0",
"eslint": "^2.13.0",
"eslint-config-vue": "^1.0.3",
+ "eslint-plugin-html": "^1.5.3",
"jade": "^1.11.0",
"jsdom": "^9.2.1",
"less": "^2.5.1",
diff --git a/plugins/extract-css.js b/plugins/extract-css.js
index 740bb80..e3331e9 100644
--- a/plugins/extract-css.js
+++ b/plugins/extract-css.js
@@ -18,21 +18,16 @@ module.exports = function (b, opts) {
outPath.write(css)
outPath.end()
} else if (typeof outPath === 'string') {
- fs.writeFile(outPath, css)
+ fs.writeFile(outPath, css, function () {})
}
})
})
- b.on('reset', listen)
- listen()
-
- function listen () {
- b.on('transform', function (tr, file) {
- if (tr.vueify) {
- tr.on('vueify-style', function (e) {
- styles[e.file] = e.style
- })
- }
- })
- }
+ b.on('transform', function (tr, file) {
+ if (tr.vueify) {
+ tr.on('vueify-style', function (e) {
+ styles[e.file] = e.style
+ })
+ }
+ })
}
diff --git a/test/test.js b/test/test.js
index 69d3e4b..dfcf92a 100644
--- a/test/test.js
+++ b/test/test.js
@@ -9,6 +9,7 @@ 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')
const tempDir = path.resolve(__dirname, './temp')
@@ -50,7 +51,7 @@ function testCssExtract (file, assert) {
function assertRenderFn (options, template) {
const compiled = vueCompiler.compile(template)
- expect(options.render.toString()).to.equal('function (){' + compiled.render + '}')
+ expect(options.render.toString()).to.equal(transpile('function render() {' + compiled.render + '}'))
}
describe('vueify', () => {
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy