Build update

Bumps [webpack](https://github.com/webpack/webpack) from 4.42.1 to 4.43.0.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v4.42.1...v4.43.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.github/workflows/main.yml

@@ -1,5 +1,5 @@
 name: Build
-on: [push, pull_request]
+on: [push]
 
 jobs:
   build:

.github/workflows/pull_request.yml

@@ -0,0 +1,24 @@
+name: Build PR
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: [12.x]
+        os: [ubuntu-latest]
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node_version }}
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm run start -- --testMode
+        npm run demo
+        npm run coverage
+      env:
+        CI: true

.npmignore

@@ -28,3 +28,5 @@ config
 .travis.yml
 CHANGELOG.md
 README.md
+.eslintignore
+.eslintrc.json

README.md

@@ -28,7 +28,7 @@
   </a>
 </p>
 
-> The slick virtual keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.
+<blockquote>The slick virtual keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
 
 ## 🚀 Demo
 [Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.28.1
+ *   simple-keyboard v2.29.1
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -8,5 +8,5 @@
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *   
- */.hg-theme-default{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.hg-theme-default{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
+ */.hg-theme-default{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.hg-theme-default{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;background-color:#ececec;padding:5px;border-radius:5px}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
 /*# sourceMappingURL=index.css.map */

build/index.d.ts

@@ -183,10 +183,16 @@ declare module 'simple-keyboard' {
      * Executes the callback function on input change. Returns the input object with all defined inputs.
      */
     onChangeAll?: (inputs: any) => any;
+
+    /**
+     * Module classes to be loaded by simple-keyboard.
+     */
+    modules?: any[];
   }
 
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
+    constructor(selector: HTMLDivElement, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
 
     /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.28.1",
+  "version": "2.29.1",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -40,72 +40,68 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.8.4",
+    "@babel/core": "7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "@svgr/webpack": "5.1.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@svgr/webpack": "5.3.1",
     "@typescript-eslint/eslint-plugin": "1.13.0",
     "@typescript-eslint/parser": "1.13.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "babel-loader": "8.0.6",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.4.0",
+    "babel-loader": "8.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
-    "babel-preset-react-app": "^9.1.1",
-    "camelcase": "^5.2.0",
+    "babel-preset-react-app": "^9.1.2",
+    "camelcase": "^6.0.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "3.4.2",
+    "css-loader": "3.5.2",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.1",
-    "eslint-loader": "3.0.3",
+    "eslint-loader": "4.0.0",
     "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "2.20.1",
+    "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.18.3",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "file-loader": "5.0.2",
-    "fs-extra": "8.1.0",
-    "html-webpack-plugin": "4.0.0-beta.11",
+    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "file-loader": "6.0.0",
+    "fs-extra": "9.0.0",
+    "html-webpack-plugin": "4.2.0",
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^2.1.0",
-    "jest": "25.1.0",
+    "jest": "25.4.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
-    "jest-resolve": "25.1.0",
-    "jest-watch-typeahead": "0.4.2",
+    "jest-resolve": "25.4.0",
+    "jest-watch-typeahead": "0.5.0",
     "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
-    "pnp-webpack-plugin": "1.6.0",
+    "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.2.0",
     "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
+    "postcss-normalize": "9.0.0",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.1",
+    "postcss-safe-parser": "4.0.2",
     "prettier": "^1.19.1",
     "prettier-webpack-plugin": "^1.2.0",
-    "react": "^16.12.0",
+    "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
-    "react-dev-utils": "^10.1.0",
-    "react-dom": "^16.12.0",
-    "resolve": "1.15.1",
+    "react-dev-utils": "10.1.0",
+    "react-dom": "^16.13.1",
+    "resolve": "1.16.1",
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.2",
-    "semver": "7.1.2",
-    "simple-keyboard-autocorrect": "^2.1.3",
-    "simple-keyboard-input-mask": "^2.2.3",
-    "simple-keyboard-key-navigation": "^2.1.1",
-    "style-loader": "1.1.3",
-    "swipe-keyboard": "^2.1.4",
-    "terser-webpack-plugin": "2.3.4",
-    "ts-pnp": "1.1.5",
+    "semver": "7.3.2",
+    "style-loader": "1.1.4",
+    "terser-webpack-plugin": "2.3.5",
+    "ts-pnp": "1.2.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "url-loader": "3.0.0",
-    "webpack": "4.41.5",
+    "url-loader": "4.1.0",
+    "webpack": "4.43.0",
     "webpack-dev-server": "3.10.3",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "5.0.0"
+    "workbox-webpack-plugin": "5.1.2"
   },
   "eslintConfig": {
     "extends": "react-app"

src/demo/tests/ModuleSimpleKeyboardAutocorrect.test.js

@@ -1,28 +0,0 @@
-import Keyboard from '../../lib';
-import SimpleKeyboardAutocorrect from 'simple-keyboard-autocorrect';
-
-test('Module simple-keyboard-autocorrect runs without crashing', () => {
-  const div = document.createElement('div');
-  
-  div.className = "simple-keyboard";
-  document.body.appendChild(div);
-
-  const keyboard = new Keyboard({
-    debug: true,
-    onChange: input => input,
-    onKeyPress: button => button,
-    newLineOnEnter: true,
-    useMouseEvents: true,
-    autocorrectDict: ["dog", "house"],
-    modules: [
-      SimpleKeyboardAutocorrect
-    ]
-  });
-
-  keyboard.getButtonElement("d").onclick();
-  keyboard.getButtonElement("o").onclick();
-  keyboard.getButtonElement("{space}").onclick();
-  keyboard.getButtonElement("{bksp}").onclick();
-
-  expect(keyboard.getInput()).toBe("dog");
-});

src/demo/tests/ModuleSimpleKeyboardInputMask.test.js

@@ -1,37 +0,0 @@
-import Keyboard from '../../lib';
-import SimpleKeyboardInputMask from 'simple-keyboard-input-mask';
-
-test('Module simple-keyboard-input-mask runs without crashing', () => {
-  const div = document.createElement('div');
-  
-  div.className += "simple-keyboard";
-  document.body.appendChild(div);
-
-  const keyboard = new Keyboard({
-    debug: true,
-    onChange: input => input,
-    onKeyPress: button => button,
-    inputMask: "(99) 9999-9999",
-    useMouseEvents: true,
-    modules: [
-      SimpleKeyboardInputMask
-    ],
-  });
-
-  keyboard.getButtonElement("d").onclick();
-  keyboard.getButtonElement("o").onclick();
-  keyboard.getButtonElement("{space}").onclick();
-  keyboard.getButtonElement("1").onclick();
-  keyboard.getButtonElement("2").onclick();
-  keyboard.getButtonElement("3").onclick();
-  keyboard.getButtonElement("c").onclick();
-  keyboard.getButtonElement("4").onclick();
-  keyboard.getButtonElement("5").onclick();
-  keyboard.getButtonElement("6").onclick();
-  keyboard.getButtonElement("7").onclick();
-  keyboard.getButtonElement("8").onclick();
-  keyboard.getButtonElement("9").onclick();
-  keyboard.getButtonElement("0").onclick();
-
-  expect(keyboard.getInput()).toBe("(12) 3456-7890");
-});

src/demo/tests/ModuleSimpleKeyboardKeyNavigation.test.js

@@ -1,25 +0,0 @@
-import Keyboard from '../../lib';
-import SimpleKeyboardKeyNavigation from 'simple-keyboard-key-navigation';
-
-test('Module simple-keyboard-key-navigation runs without crashing', () => {
-  const div = document.createElement('div');
-  
-  div.className = "simple-keyboard";
-  document.body.appendChild(div);
-
-  const keyboard = new Keyboard({
-    debug: true,
-    onChange: input => input,
-    onKeyPress: button => button,
-    enableKeyNavigation: true,
-    modules: [
-      SimpleKeyboardKeyNavigation
-    ]
-  });
-
-  keyboard.modules.keyNavigation.right();
-  keyboard.modules.keyNavigation.down();
-  keyboard.modules.keyNavigation.press();
-
-  expect(keyboard.getInput()).toBe("q");
-});

src/demo/tests/ModuleSimpleKeyboardSwipe.test.js

@@ -1,23 +0,0 @@
-import Keyboard from '../../lib';
-import SimpleKeyboardSwipe from 'swipe-keyboard';
-
-test('Module swipe-keyboard runs without crashing', () => {
-  const containerDiv = document.createElement('div');
-  containerDiv.className = "keyboardContainer";
-
-  const keyboardDiv = document.createElement('div');
-  keyboardDiv.className = "simple-keyboard";
-
-  containerDiv.appendChild(keyboardDiv);
-  document.body.appendChild(containerDiv);
-
-  new Keyboard({
-    debug: true,
-    onChange: input => input,
-    onKeyPress: button => button,
-    useMouseEvents: true,
-    modules: [
-      SimpleKeyboardSwipe
-    ]
-  });
-});

src/lib/@types/index.d.ts

@@ -183,10 +183,16 @@ declare module 'simple-keyboard' {
      * Executes the callback function on input change. Returns the input object with all defined inputs.
      */
     onChangeAll?: (inputs: any) => any;
+
+    /**
+     * Module classes to be loaded by simple-keyboard.
+     */
+    modules?: any[];
   }
 
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
+    constructor(selector: HTMLDivElement, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
 
     /**

src/lib/components/Keyboard.css

@@ -24,7 +24,7 @@
 .hg-theme-default {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
     Helvetica, Arial, "Lucida Grande", sans-serif;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: #ececec;
   padding: 5px;
   border-radius: 5px;
 }

src/lib/components/Keyboard.js

@@ -48,8 +48,8 @@ class SimpleKeyboard {
      * @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).
      * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
      * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
-     * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
-     * @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.
+     * @property {array} buttonTheme A prop to add your own css classes to one or several buttons.
+     * @property {array} buttonAttributes A prop to add your own attributes to one or several buttons.
      * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
      * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
      * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
@@ -76,6 +76,7 @@ class SimpleKeyboard {
      * @property {function} destroy Clears keyboard listeners and DOM elements.
      * @property {boolean} disableButtonHold Disable button hold action.
      * @property {function} onKeyReleased Executes the callback function on key release.
+     * @property {array} modules Module classes to be loaded by simple-keyboard.
      */
     this.options = options;
     this.options.layoutName = this.options.layoutName || "default";
@@ -467,19 +468,37 @@ class SimpleKeyboard {
    * Set new option or modify existing ones after initialization.
    * @param  {object} options The options to set
    */
-  setOptions(options) {
-    options = options || {};
+  setOptions(options = {}) {
+    const changedOptions = this.changedOptions(options);
     this.options = Object.assign(this.options, options);
 
-    /**
-     * Some option changes require adjustments before re-render
-     */
-    this.onSetOptions(options);
+    if (changedOptions.length) {
+      if (this.options.debug) {
+        console.log("changedOptions", changedOptions);
+      }
 
-    /**
-     * Rendering
-     */
-    this.render();
+      /**
+       * Some option changes require adjustments before re-render
+       */
+      this.onSetOptions(options);
+
+      /**
+       * Rendering
+       */
+      this.render();
+    }
+  }
+
+  /**
+   * Detecting changes to non-function options
+   * This allows us to ascertain whether a button re-render is needed
+   */
+  changedOptions(newOptions) {
+    return Object.keys(newOptions).filter(
+      optionName =>
+        JSON.stringify(newOptions[optionName]) !==
+        JSON.stringify(this.options[optionName])
+    );
   }
 
   /**