Update Deps and add FS example

.browserslistrc

@@ -1 +1 @@
-chrome 77
+chrome 78

.eslintrc.js

@@ -21,167 +21,18 @@ module.exports = {
   },
   plugins: [
     'jest',
-    // required to lint *.vue files
     'vue'
   ],
   extends: [
     'eslint:recommended',
-    'plugin:vue/recommended',
+    'plugin:jest/recommended',
-    'plugin:jest/recommended'
+    'tjw-base',
+    'tjw-vue'
   ],
   rules: {
-    'arrow-parens': ['off'],
+    'no-restricted-syntax': [
-    'brace-style': [
       'error',
-      '1tbs',
+      'Property[method="true"]'
-      {
+    ]
-        'allowSingleLine': true
-      }
-    ],
-    'comma-dangle': ['error', 'never'],
-    'comma-spacing': [
-      'error',
-      {
-        'before': false,
-        'after': true
-      }
-    ],
-    'comma-style': ['error', 'last'],
-    'curly': ['error'],
-    // allow async-await
-    'generator-star-spacing': ['off'],
-    // 2 space indentation to match .editorconfig
-    'indent': [
-      'error',
-      2,
-      {
-        'SwitchCase': 1
-      }
-    ],
-    'keyword-spacing': [
-      'error',
-      {
-        'before': true,
-        'after': true
-      }
-    ],
-    // allow debugger during development
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-multi-spaces': ['error'],
-    'no-restricted-syntax': ['error', 'Property[method="true"]'],
-    'no-unused-vars': ['error'],
-    'no-undef': ['error'],
-    // Only allow let and const, no var
-    'no-var': ['error'],
-    'object-curly-spacing': ['error', 'always'],
-    'one-var': ['error', 'never'],
-    'quotes': ['error', 'single'],
-    'semi': ['error', 'always'],
-    'space-before-blocks': ['error', 'always'],
-    'space-before-function-paren': ['error', 'always'],
-    'space-in-parens': ['error', 'never'],
-    'space-infix-ops': ['error'],
-    'spaced-comment': ['error', 'always'],
-    // Vue Linter Options
-    'vue/attribute-hyphenation': ['error', 'never'],
-    'vue/attributes-order': [
-      'error',
-      {
-        'order': [
-          // 'v-for item in items'
-          'LIST_RENDERING',
-          // 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
-          'CONDITIONALS',
-          // 'v-once', 'v-pre'
-          'RENDER_MODIFIERS',
-          // 'v-model', 'v-bind', ':property="foo"'
-          'BINDING',
-          // 'v-text', 'v-html'
-          'CONTENT',
-          // 'is'
-          'DEFINITION',
-          // 'id'
-          'GLOBAL',
-          // 'customProp="foo"', 'class', 'type', 'value' etc
-          'OTHER_ATTR',
-          // '@click="functionCall"', 'v-on="event"'
-          'EVENTS',
-          // 'slot', 'key', 'ref'
-          'UNIQUE'
-        ]
-      }
-    ],
-    'vue/html-closing-bracket-newline': [
-      'error',
-      {
-        'singleline': 'never',
-        'multiline': 'always'
-      }
-    ],
-    'vue/html-closing-bracket-spacing': [
-      'error',
-      {
-        'startTag': 'never',
-        'endTag': 'never',
-        'selfClosingTag': 'always'
-      }
-    ],
-    'vue/html-indent': [
-      'error',
-      2,
-      {
-        'attribute': 1,
-        'closeBracket': 0
-      }
-    ],
-    'vue/html-self-closing': [
-      'error',
-      {
-        'html': {
-          'void': 'always',
-          'normal': 'never',
-          'component': 'always'
-        }
-      }
-    ],
-    'vue/max-attributes-per-line': [
-      'error',
-      {
-        'singleline': 3,
-        'multiline': {
-          'max': 1,
-          'allowFirstLine': false
-        }
-      }
-    ],
-    'vue/name-property-casing': ['error', 'PascalCase'],
-    'vue/order-in-components': [
-      'error',
-      {
-        'order': [
-          'el',
-          'name',
-          ['template', 'render'],
-          'parent',
-          'functional',
-          ['delimiters', 'comments'],
-          ['components', 'directives'],
-          'extends',
-          'mixins',
-          'inheritAttrs',
-          'model',
-          ['props', 'propsData'],
-          'data',
-          'methods',
-          'computed',
-          'filters',
-          'watch',
-          'LIFECYCLE_HOOKS',
-          'renderError'
-        ]
-      }
-    ],
-    'vue/prop-name-casing': ['error', 'camelCase']
   }
 };

.travis.yml

@@ -0,0 +1,9 @@
+sudo: required
+dist: trusty
+language: node_js
+node_js:
+  - "10"
+install:
+    - npm install
+script:
+    - npm run validate

README.md

@@ -1,13 +1,15 @@
 # nw-vue-cli-example
 
-NW.js + Vue-CLI 3 example
+[![Build Status](https://travis-ci.org/nwutils/nw-vue-cli-example.svg?branch=master)](https://travis-ci.org/nwutils/nw-vue-cli-example)
+
+NW.js + Vue-CLI 4 example
 
 ![A screenshot of the default app running on Windows](screenshot.png)
 
 * NW.js
-* Vue-CLI 3
+* Vue-CLI 4
 * Vue 2
-* Vue-DevTools
+* Vue-DevTools (latest)
 * Babel
 * ESLint
 * Jest (100% test coverage)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nw-vue",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "http://localhost:8964",
   "node-remote": "http://localhost:8964",
   "node-main": "",
@@ -21,26 +21,27 @@
     "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
     "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
     "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
-    "build:win:clean": "rimraf ./dist-vue ./dist/nw-vue-1.0.0-win-x86 ./dist/nw-vue-1.0.0-win-x86.zip ./dist/nw-vue-1.0.0-win-x86.7z ./dist/nw-vue-1.0.0-win-x86-Setup.exe",
+    "build:win:clean": "rimraf ./dist-vue ./dist/nw-vue-1.1.0-win-x86 ./dist/nw-vue-1.1.0-win-x86.zip ./dist/nw-vue-1.1.0-win-x86.7z ./dist/nw-vue-1.1.0-win-x86-Setup.exe",
-    "build:lin:clean": "rimraf ./dist-vue ./dist/nw-vue-1.0.0-linux-x64 ./dist/nw-vue-1.0.0-linux-x64.zip",
+    "build:lin:clean": "rimraf ./dist-vue ./dist/nw-vue-1.1.0-linux-x64 ./dist/nw-vue-1.1.0-linux-x64.zip",
-    "run:win": "dist\\nw-vue-1.0.0-win-x86\\nw-vue.exe",
+    "run:win": "dist\\nw-vue-1.1.0-win-x86\\nw-vue.exe",
-    "run:lin": "./dist/nw-vue-1.0.0-linux-x64/nw-vue",
+    "run:lin": "./dist/nw-vue-1.1.0-linux-x64/nw-vue",
     "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win",
     "lint": "vue-cli-service lint --no-fix",
     "fix": "vue-cli-service lint --fix",
     "test": "npm run test:unit",
     "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "jest --config jest.config.js --coverage --runInBand"
+    "test:unit": "jest --config jest.config.js --coverage --runInBand",
+    "validate": "npm run lint && npm run test:unit && npm run build:vue"
   },
   "dependencies": {
     "express": "^4.17.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.11.0",
+    "@vue/cli-plugin-e2e-nightwatch": "^4.0.5",
-    "@vue/cli-plugin-eslint": "^3.11.0",
+    "@vue/cli-plugin-eslint": "^4.0.5",
-    "@vue/cli-plugin-unit-jest": "^3.11.0",
+    "@vue/cli-plugin-unit-jest": "^4.0.5",
-    "@vue/cli-service": "^3.11.0",
+    "@vue/cli-service": "^4.0.5",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
@@ -50,15 +51,18 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.24.1",
     "babel-preset-vue-app": "^2.0.0",
-    "concurrently": "^4.1.2",
+    "concurrently": "^5.0.0",
-    "core-js": "^2.6.5",
+    "core-js": "^3.3.5",
-    "eslint": "^6.4.0",
+    "eslint": "^6.6.0",
-    "eslint-plugin-jest": "^22.17.0",
+    "eslint-config-tjw-base": "^1.0.0",
+    "eslint-config-tjw-vue": "^1.0.0",
+    "eslint-plugin-jest": "^23.0.2",
     "eslint-plugin-vue": "^5.2.3",
     "jest": "^24.9.0",
+    "jest-environment-jsdom": "^24.9.0",
     "jest-environment-jsdom-global": "^1.2.0",
     "jest-transform-stub": "^2.0.0",
-    "nw": "0.41.1-sdk",
+    "nw": "0.42.0-sdk",
     "nw-vue-devtools": "^1.3.0",
     "nwjs-builder-phoenix": "^1.15.0",
     "nwjs-types": "^1.0.0",
@@ -70,7 +74,7 @@
   },
   "chromium-args": "--load-extension='./node_modules/nw-vue-devtools/extension'",
   "build": {
-    "nwVersion": "v0.41.1",
+    "nwVersion": "v0.42.0",
     "nwFlavor": "normal",
     "targets": [
       "zip",

src/components/FsExample.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div v-if="error">
+      There was an error attempting to read from the file system.
+    </div>
+
+    <button
+      data-test="fs-example-button"
+      @click="getCurrentDirectory"
+    >
+      <template v-if="!error">
+        Click for File System example
+      </template>
+      <template v-else>
+        Try again for File System example
+      </template>
+    </button>
+
+    <template v-if="contents">
+      <p>
+        The contents of the current working directory:
+      </p>
+      <div class="contents">
+        <div
+          v-for="(file, fileIndex) in contents"
+          class="file"
+          :key="'file' + fileIndex"
+        >
+          {{ file }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FsExample',
+  data: function () {
+    return {
+      contents: null,
+      error: false
+    };
+  },
+  methods: {
+    getCurrentDirectory: function () {
+      const fs = window.nw.require('fs');
+      try {
+        this.contents = fs.readdirSync('.');
+        this.error = false;
+      } catch (err) {
+        this.error = true;
+      }
+    }
+  },
+  computed: {}
+};
+</script>
+
+<style scoped>
+button {
+  background: linear-gradient(0deg, #2EB277, #65E6AC);
+  border-width: 3.4px;
+  border-color: #35495E;
+  border-radius: 8px;
+  margin: 22px 0px 6px 0px;
+  padding: 11px 17px;
+  color: #050709;
+  font-family: 'Trebuchet MS', Verdana, sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.contents {
+  display: flex;
+  flex-flow: wrap;
+}
+.file {
+  flex-grow: 1;
+  min-width: 200px;
+  background: #DDD;
+  margin: 5px;
+  padding: 11px;
+}
+</style>

src/components/HelloWorld.vue

@@ -37,17 +37,23 @@
 
     <h3>Ecosystem</h3>
     <LinkList :links="ecosystemLinks" />
+
+    <hr />
+
+    <FsExample />
   </div>
 </template>
 
 <script>
 import Vue from 'vue';
 
+import FsExample from '@/components/FsExample.vue';
 import LinkList from '@/components/LinkList.vue';
 
 export default {
   name: 'HelloWorld',
   components: {
+    FsExample,
     LinkList
   },
   props: {
@@ -157,7 +163,7 @@ export default {
   },
   computed: {
     devMode: function () {
-      return window.process.env.NODE_ENV === 'development';
+      return window.process.versions['nw-flavor'] === 'sdk';
     },
     versions: function () {
       return window.process.versions;

tests/unit/components/FsExample.test.js

@@ -0,0 +1,41 @@
+import { shallowMount } from '@vue/test-utils';
+import FsExample from '@/components/FsExample.vue';
+
+describe('FsExample.vue', () => {
+  test('Render default contents', () => {
+    const wrapper = shallowMount(FsExample);
+
+    expect(wrapper.html())
+      .toMatchSnapshot();
+  });
+
+  test('Click button', () => {
+    const wrapper = shallowMount(FsExample);
+    let domButton = wrapper.find('[data-test="fs-example-button"]');
+    domButton.trigger('click');
+
+    expect(window.nw.require)
+      .toHaveBeenCalledWith('fs');
+
+    expect(wrapper.html())
+      .toMatchSnapshot();
+  });
+
+  test('Error state', () => {
+    window.nw.require.mockImplementation((module) => {
+      if (module === 'fs') {
+        return new Error();
+      }
+    });
+
+    const wrapper = shallowMount(FsExample);
+    let domButton = wrapper.find('[data-test="fs-example-button"]');
+    domButton.trigger('click');
+
+    expect(window.nw.require)
+      .toHaveBeenCalledWith('fs');
+
+    expect(wrapper.html())
+      .toMatchSnapshot();
+  });
+});

tests/unit/components/__snapshots__/FsExample.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FsExample.vue Click button 1`] = `
+<div>
+  <!---->
+  <button>
+    Click for File System example
+  </button>
+  <p>
+    The contents of the current working directory:
+  </p>
+  <div class="contents">
+    <div class="file">
+      example-file-1.ext
+    </div>
+    <div class="file">
+      example-file-2.ext
+    </div>
+  </div>
+</div>
+`;
+
+exports[`FsExample.vue Error state 1`] = `
+<div>
+  <div>
+    There was an error attempting to read from the file system.
+  </div>
+  <button>
+    Try again for File System example
+  </button>
+  <!---->
+</div>
+`;
+
+exports[`FsExample.vue Render default contents 1`] = `
+<div>
+  <!---->
+  <button>
+    Click for File System example
+  </button>
+  <!---->
+</div>
+`;

tests/unit/components/__snapshots__/HelloWorld.test.js.snap

@@ -24,10 +24,10 @@ exports[`HelloWorld.vue Render default contents 1`] = `
   <h3>
     You are using
     Vue.js (v2.6.10),
-    NW.js (v0.41.1-sdk),
+    NW.js (v0.42.0-sdk),
-    Node.js (v12.9.1),
+    Node.js (v12.12.0),
     and
-    Chromium (v77.0.3865.75).
+    Chromium (v78.0.3904.70).
   </h3>
   <button>
     Show
@@ -141,5 +141,13 @@ exports[`HelloWorld.vue Render default contents 1`] = `
       </a>
     </li>
   </ul>
+  <hr>
+  <div>
+    <!---->
+    <button>
+      Click for File System example
+    </button>
+    <!---->
+  </div>
 </div>
 `;

tests/unit/setup.js

@@ -26,13 +26,22 @@ global.beforeEach(() => {
       NODE_ENV: 'development'
     },
     versions: {
-      chromium: '77.0.3865.75',
+      chromium: '78.0.3904.70',
-      nw: '0.41.1',
+      nw: '0.42.0',
       'nw-flavor': 'sdk',
-      node: '12.9.1'
+      node: '12.12.0'
     }
   };
   window.nw = {
+    require: jest.fn((module) => {
+      if (module === 'fs') {
+        return {
+          readdirSync: jest.fn(() => {
+            return ['example-file-1.ext', 'example-file-2.ext'];
+          })
+        };
+      }
+    }),
     Shell: {
       openExternal: jest.fn()
     },