Update Deps and add FS example

2019-10-29 13:20:44 -04:00 · 2019-10-29 13:20:44 -04:00 · 968a1714e7
commit 968a1714e7
parent 2a102c742a b192c65423
12 changed files with 3136 additions and 4069 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1 +1 @@
-chrome 77
+chrome 78
--- a/.eslintrc.js
+++ b/.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'],
-    'brace-style': [
+    'no-restricted-syntax': [
      'error',
-      '1tbs',
-      {
-        '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'
+      'Property[method="true"]'
    ]
  }
-    ],
-    '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']
-  }
 };
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,9 @@
+sudo: required
+dist: trusty
+language: node_js
+node_js:
+  - "10"
+install:
+    - npm install
+script:
+    - npm run validate
--- a/README.md
+++ b/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)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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:lin:clean": "rimraf ./dist-vue ./dist/nw-vue-1.0.0-linux-x64 ./dist/nw-vue-1.0.0-linux-x64.zip",
-    "run:win": "dist\\nw-vue-1.0.0-win-x86\\nw-vue.exe",
-    "run:lin": "./dist/nw-vue-1.0.0-linux-x64/nw-vue",
+    "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.1.0-linux-x64 ./dist/nw-vue-1.1.0-linux-x64.zip",
+    "run:win": "dist\\nw-vue-1.1.0-win-x86\\nw-vue.exe",
+    "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-e2e-nightwatch": "^3.11.0",
-    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-plugin-unit-jest": "^3.11.0",
-    "@vue/cli-service": "^3.11.0",
+    "@vue/cli-plugin-babel": "^4.0.5",
+    "@vue/cli-plugin-e2e-nightwatch": "^4.0.5",
+    "@vue/cli-plugin-eslint": "^4.0.5",
+    "@vue/cli-plugin-unit-jest": "^4.0.5",
+    "@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",
-    "core-js": "^2.6.5",
-    "eslint": "^6.4.0",
-    "eslint-plugin-jest": "^22.17.0",
+    "concurrently": "^5.0.0",
+    "core-js": "^3.3.5",
+    "eslint": "^6.6.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",
--- a/src/components/FsExample.vue
+++ b/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>
--- a/src/components/HelloWorld.vue
+++ b/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;
--- a/tests/unit/components/FsExample.test.js
+++ b/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();
+  });
+});
--- a/tests/unit/components/snapshots/FsExample.test.js.snap
+++ b/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>
+`;
--- a/tests/unit/components/snapshots/HelloWorld.test.js.snap
+++ b/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),
-    Node.js (v12.9.1),
+    NW.js (v0.42.0-sdk),
+    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>
 `;
--- a/tests/unit/setup.js
+++ b/tests/unit/setup.js
@ -26,13 +26,22 @@ global.beforeEach(() => {
      NODE_ENV: 'development'
    },
    versions: {
-      chromium: '77.0.3865.75',
-      nw: '0.41.1',
+      chromium: '78.0.3904.70',
+      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()
    },