├── .gitignore ├── .travis.yml ├── .eslintrc.yml ├── test ├── helpers │ ├── capitalize.js │ ├── webpack.config.test.js │ └── setup.js ├── .eslintrc.yml ├── test.vue └── index.test.js ├── .editorconfig ├── lib ├── hook.js └── compiler.js ├── LICENSE ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '6' 4 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | extends: airbnb-base 2 | plugins: 3 | - html 4 | -------------------------------------------------------------------------------- /test/helpers/capitalize.js: -------------------------------------------------------------------------------- 1 | module.exports = require('lodash').capitalize; 2 | -------------------------------------------------------------------------------- /test/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | settings: 2 | import/no-extraneous-dependencies: ["error", {"devDependencies": ["**/test/**"]}] 3 | -------------------------------------------------------------------------------- /test/helpers/webpack.config.test.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [{ 4 | use: 'vue-loader', 5 | }], 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /test/helpers/setup.js: -------------------------------------------------------------------------------- 1 | const browserEnv = require('browser-env'); 2 | const { join } = require('path'); 3 | const hook = require('../../'); 4 | 5 | browserEnv(); 6 | hook(join(__dirname, 'webpack.config.test.js')); 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /lib/hook.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-underscore-dangle */ 2 | const execa = require('execa'); 3 | const { resolve } = require('path'); 4 | 5 | module.exports = (configPath) => { 6 | require.extensions['.vue'] = (mod, filename) => { 7 | mod._compile(execa.sync(process.execPath, [ 8 | resolve(__dirname, 'compiler'), 9 | configPath, 10 | filename, 11 | ]).stdout, filename); 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /test/test.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | 27 | 32 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-underscore-dangle */ 2 | import _ from 'lodash'; 3 | import Vue from 'vue'; 4 | import test from 'ava'; 5 | import TestComponentFromNodePath from 'test.vue'; // eslint-disable-line 6 | import TestComponent from './test.vue'; 7 | 8 | test('has loaded NODE_PATH', (t) => { 9 | t.true(_.isFunction(TestComponentFromNodePath.created)); 10 | }); 11 | 12 | test('has a created hook', (t) => { 13 | t.true(_.isFunction(TestComponent.created)); 14 | }); 15 | 16 | test('sets default data', (t) => { 17 | t.true(_.isFunction(TestComponent.data)); 18 | t.deepEqual(TestComponent.data(), { name: 'Test' }); 19 | }); 20 | 21 | test('renders the correct message', async (t) => { 22 | const Constructor = Vue.extend(TestComponent); 23 | const vm = new Constructor().$mount(); 24 | t.is(vm.$el.querySelector('h1').textContent, 'Hello, World!'); 25 | // Update 26 | vm.setName('Foo'); 27 | await Vue.nextTick(); 28 | t.is(vm.$el.querySelector('h1').textContent, 'Hello, Foo!'); 29 | // Update directly 👻 30 | vm._data.name = 'Bar'; 31 | await Vue.nextTick(); 32 | t.is(vm.$el.querySelector('h1').textContent, 'Hello, Bar!'); 33 | }); 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Kenneth Powers (http://knpw.rs) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-node", 3 | "version": "1.1.1", 4 | "description": "A require hook for loading single-file vue components in node.", 5 | "main": "./lib/hook.js", 6 | "scripts": { 7 | "lint": "eslint lib test", 8 | "test": "NODE_PATH=test ava", 9 | "test:watch": "ava --watch", 10 | "posttest": "npm run lint" 11 | }, 12 | "ava": { 13 | "require": [ 14 | "./test/helpers/setup.js" 15 | ] 16 | }, 17 | "engines": { 18 | "node": ">=6.0.0" 19 | }, 20 | "repository": "knpwrs/vue-node", 21 | "author": "Copyright (c) 2017 Kenneth Powers (http://knpw.rs)", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/knpwrs/vue-node/issues" 25 | }, 26 | "homepage": "https://github.com/knpwrs/vue-node#readme", 27 | "dependencies": { 28 | "execa": "^0.6.0", 29 | "lodash": "^4.17.4", 30 | "memory-fs": "^0.4.1", 31 | "webpack-node-externals": "^1.5.4", 32 | "yargs": "^7.0.2" 33 | }, 34 | "peerDependencies": { 35 | "vue-loader": "*", 36 | "webpack": "^2.2.1" 37 | }, 38 | "devDependencies": { 39 | "ava": "^0.19.0", 40 | "browser-env": "^2.0.20", 41 | "css-loader": "^0.28.0", 42 | "eslint": "^3.15.0", 43 | "eslint-config-airbnb-base": "^11.1.0", 44 | "eslint-plugin-html": "^2.0.0", 45 | "eslint-plugin-import": "^2.2.0", 46 | "vue": "^2.1.10", 47 | "vue-loader": "*", 48 | "vue-template-compiler": "*", 49 | "webpack": "^2.2.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /lib/compiler.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash'); 2 | const yargs = require('yargs'); 3 | const webpack = require('webpack'); 4 | const nodeExternals = require('webpack-node-externals'); 5 | const MemoryFileSystem = require('memory-fs'); 6 | const { resolve } = require('path'); 7 | 8 | const componentExternals = _.curry((entry, context, request, done) => { 9 | if (request !== entry && !request.includes('!')) { 10 | done(null, `commonjs ${resolve(context, request)}`); 11 | } else { 12 | done(); 13 | } 14 | }); 15 | 16 | const run = (config, entry) => { 17 | const filename = 'output.js'; 18 | const conf = Object.assign({}, config, { 19 | entry, 20 | output: { 21 | libraryTarget: 'commonjs', 22 | filename, 23 | }, 24 | target: 'node', 25 | // Externalize everything except the entry. 26 | externals: [nodeExternals(), componentExternals(entry)], 27 | // Make sure Vue thinks its running in a "server" 28 | plugins: [ 29 | new webpack.DefinePlugin({ 30 | 'process.env.VUE_ENV': JSON.stringify('server'), 31 | }), 32 | ].concat(config.plugins || []), 33 | }); 34 | if (process.env.NODE_PATH) { 35 | if (!conf.resolve) { 36 | conf.resolve = {}; 37 | } 38 | conf.resolve.modules = [ 39 | ...process.env.NODE_PATH.split(':'), 40 | 'node_modules', 41 | ]; 42 | } 43 | const compiler = webpack(conf); 44 | const fs = new MemoryFileSystem(); 45 | compiler.outputFileSystem = fs; 46 | compiler.run((err, stats) => { 47 | if (err) throw err; 48 | fs.createReadStream(stats.compilation.assets[filename].existsAt, 'utf8').pipe(process.stdout); 49 | }); 50 | }; 51 | 52 | const args = yargs.argv._; 53 | 54 | run(require(args[0]), args[1]); // eslint-disable-line import/no-dynamic-require 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-node 2 | 3 | [![Dependency Status](https://img.shields.io/david/knpwrs/vue-node.svg)](https://david-dm.org/knpwrs/vue-node) 4 | [![devDependency Status](https://img.shields.io/david/dev/knpwrs/vue-node.svg)](https://david-dm.org/knpwrs/vue-node#info=devDependencies) 5 | [![Build Status](https://img.shields.io/travis/knpwrs/vue-node.svg)](https://travis-ci.org/knpwrs/vue-node) 6 | [![Npm Version](https://img.shields.io/npm/v/vue-node.svg)](https://www.npmjs.com/package/vue-node) 7 | [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT) 8 | [![Badges](https://img.shields.io/badge/badges-6-orange.svg)](http://shields.io/) 9 | 10 | A require hook for loading single-file vue components in node. Useful for 11 | testing without having to spin up web browsers! 12 | 13 | ## Impending Deprecation Notice 14 | 15 | [The Vue team is going to be creating official testing tools][vue-test-utils] 16 | based on [`avoriaz`] which already has complete examples of how to test Vue 17 | components in node-based testing frameworks without spinning up web browsers. My 18 | suggestion is for users of this library to migrate to [`avoriaz`] and then to 19 | the official testing tools once those are available. Once the official testing 20 | tools are available, I will mark this package as deprecated on npm. 21 | 22 | Usage of this library will also require changes to your `vue-loader` 23 | configuration starting with version `^12.0.0`. See [issue #9] for more details. 24 | 25 | ## Usage Example 26 | 27 | Here is an example of using `vue-node` with [AVA]. The process should be similar 28 | for whatever node testing framework you want to use. 29 | 30 | First, make sure you have `vue-node` and [`browser-env`] installed as 31 | development dependencies. If you are running an environment with `vue-loader` 32 | and `webpack@2` then you will already have all required peer dependencies: 33 | 34 | ```sh 35 | npm i -D vue-node browser-env 36 | ``` 37 | 38 | Now create a setup file called `test/helpers/setup.js`. Putting it in the 39 | `test/helpers` directory will let [AVA] know that this file is not a test. 40 | 41 | ```js 42 | const browserEnv = require('browser-env'); 43 | const hook = require('vue-node'); 44 | const { join } = require('path'); 45 | 46 | // Setup a fake browser environment 47 | browserEnv(); 48 | // Pass an absolute path to your webpack configuration to the hook function. 49 | hook(join(__dirname, 'webpack.config.test.js')); 50 | ``` 51 | 52 | Now you can configure AVA to require this file in all test processes. In 53 | `package.json`: 54 | 55 | ```json 56 | { 57 | "ava": { 58 | "require": [ 59 | "./test/helpers/setup.js" 60 | ] 61 | } 62 | } 63 | ``` 64 | 65 | Now you can `require` / `import` `.vue` files and test like you would in a 66 | browser! If you need to test DOM updates, you can use `Vue.nextTick` along 67 | with `async` / `await`. 68 | 69 | ```js 70 | import Vue from 'vue'; 71 | import test from 'ava'; 72 | import TestComponent from './test.vue'; 73 | 74 | test('renders the correct message', async (t) => { 75 | const Constructor = Vue.extend(TestComponent); 76 | const vm = new Constructor().$mount(); 77 | t.is(vm.$el.querySelector('h1').textContent, 'Hello, World!'); 78 | // Update 79 | vm.setName('Foo'); 80 | await Vue.nextTick(); 81 | t.is(vm.$el.querySelector('h1').textContent, 'Hello, Foo!'); 82 | }); 83 | ``` 84 | 85 | See the `test` directory in this project for more examples! 86 | 87 | ## Common Questions 88 | 89 | ### How does this work? 90 | 91 | Node allows developers to hook `require` to load files that aren't JavaScript or 92 | JSON. Unfortunately, require hooks have to be synchronous. Using `vue-loader` on 93 | the other hand, is inherently asynchronous. `vue-node` works by synchronously 94 | running webpack in a separate process and collecting the output to pass to 95 | node's module compilation system. The compilation is done completely in memory 96 | without writing to the filesystem. It also modifies your webpack configuration 97 | to automatically build for node and commonjs with all dependencies of your 98 | component externalized. This means that the built component modules are as small 99 | as possible with dependency resolution left up to node. 100 | 101 | ### What if I am using vueify? 102 | 103 | I am personally more familiar with webpack than browserify, so for the time 104 | being this will only work in combination with webpack. I will gladly accept a 105 | pull request to implement browserify functionality. 106 | 107 | ### What about testing in web browsers? 108 | 109 | Unit testing in web browsers is a very heavy process with many tradeoffs. 110 | Configuration and tooling is tricky as is getting browsers to run in CI. I 111 | personally like saving browsers for end-to-end testing with things like 112 | [`Nightwatch.js`]. 113 | 114 | ## License 115 | 116 | **MIT** 117 | 118 | [`avoriaz`]: https://github.com/eddyerburgh/avoriaz "avoriaz" 119 | [`browser-env`]: https://github.com/lukechilds/browser-env "Fake browser environment for node." 120 | [`Nightwatch.js`]: http://nightwatchjs.org/ "Node.js powered End-to-End testing framework" 121 | [`p-immediate`]: https://github.com/sindresorhus/p-immediate "Returns a promise resolved in the next event loop" 122 | [AVA]: https://github.com/avajs/ava "AVA: Futuristic Test Runner" 123 | [issue #9]: https://github.com/knpwrs/vue-node/issues/9 "issue #9" 124 | [vue-test-utils]: https://github.com/vuejs/vue-test-utils/issues/1 "vue-test-utils" 125 | --------------------------------------------------------------------------------