Added physicalKeyboardHighlightPress option. Fixes #735

Bumps [resolve](https://github.com/browserify/resolve) from 1.17.0 to 1.18.1.
- [Release notes](https://github.com/browserify/resolve/releases)
- [Commits](https://github.com/browserify/resolve/compare/v1.17.0...v1.18.1)

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

.eslintignore

@@ -0,0 +1 @@
+build/*

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true,
+            "modules": true,
+            "experimentalObjectRestSpread": true
+        }
+    },
+    "plugins": [
+        "react"
+    ],
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "rules": {
+        "comma-dangle": 0,
+        "no-unused-vars": "warn",
+        "no-unexpected-multiline": "warn",
+        "prefer-const": "warn"
+    },
+    "settings": {
+        "react": {
+            "pragma": "React",
+            "version": "15.6.1"
+        }
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "jasmine": true,
+        "jest": true,
+        "es6": true
+    }
+}

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: hodgef

.github/pull_request_template.md

@@ -5,4 +5,3 @@ A few sentences describing the overall goals of the pull request's commits.
 ## Checks
 
 - [ ] Tests ( `npm run test -- --coverage` ) Coverage at `./coverage/lcov-report/index.html` should be 100%
-- [ ] Documentation ( `npm run docs` ) Coverage at `./docs/source.html` should be 100%

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 5
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 2
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: Stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/main.yml

@@ -0,0 +1,44 @@
+name: Build
+on: [push]
+
+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
+    - uses: codecov/codecov-action@v1.0.2
+      with:
+        token: ${{secrets.CODECOV_TOKEN}}
+      env:
+        CI: true
+        
+    - name: Discord notification
+      if: success()
+      env:
+        DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+      uses: Ilshidur/action-discord@master
+      with:
+        args: 'simple-keyboard - CI Build Passed'
+        
+    - name: Discord notification
+      if: failure()
+      env:
+        DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+      uses: Ilshidur/action-discord@master
+      with:
+        args: 'simple-keyboard - CI Build Failed'
+        

.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm install
+      - run: npm run test -- --coverage --watchAll=false
+        
+      - name: Setup GIT
+        run: |
+          git reset --hard
+          git config --local --list
+          git checkout master
+          git config user.email "$GH_EMAIL"
+          git config user.name "Francisco Hodge"
+        env:
+            GH_EMAIL: ${{secrets.GH_EMAIL}}
+          
+      - name: Bump version
+        run: |
+          git reset --hard
+          npm version patch
+          npm run build
+          git add . || true
+          git commit -m "Build update" || true
+          git push "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY"
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          
+      - name: npm publish
+        run: |
+          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
+          npm run trypublish
+        env:
+            NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.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

@@ -1,19 +1,22 @@
 <p>
   <a href="https://simple-keyboard.com/demo">
-	<img alt="simple-keyboard: Javscript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
+	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
   </a>
-
+	
   <a href="https://www.npmjs.com/package/simple-keyboard">
     <img src="https://badgen.net/npm/v/simple-keyboard?color=blue" alt="npm version">
   </a>
 
-  <a href="https://bundlephobia.com/result?p=simple-keyboard">
-    <img src="https://badgen.net/bundlephobia/minzip/simple-keyboard/?color=green" alt="install size">
+  <a href="https://github.com/hodgef/simple-keyboard/actions">
+     <img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg?color=green" />
+  </a>
+  
+  <a href="https://github.com/hodgef/simple-keyboard/actions">
+     <img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg?color=green" />
   </a>
 
-  <a href="https://travis-ci.org/hodgef/simple-keyboard">
-    <img src="https://api.travis-ci.org/hodgef/simple-keyboard.svg?branch=master"
-         alt="build status">
+  <a href="https://bundlephobia.com/result?p=simple-keyboard">
+    <img src="https://badgen.net/bundlephobia/minzip/simple-keyboard/?color=green" alt="install size">
   </a>
   
   <a href="https://david-dm.org/hodgef/simple-keyboard">
@@ -25,20 +28,20 @@
   </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 🚀 
 [Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)
 
-## 📦 Installation & Usage
+## Installation & Usage 📦 
 You can use simple-keyboard as a `<script>` tag from a CDN, or install it from npm.
   
 Check out the [Getting Started](https://simple-keyboard.com/getting-started) docs to begin.
 
-## 📖 Documentation
+## Documentation 📖 
 Check out the [simple-keyboard documentation](https://simple-keyboard.com/documentation) site.
 
-Feel free to browse the [Q&A / Use-cases](https://simple-keyboard.com/qa-use-cases/) page for advanced use-cases.
+Feel free to browse the [Questions & Answers (FAQ)](https://simple-keyboard.com/qa-use-cases/) page for common use-cases.
 
 
 ### To run demo on your own computer
@@ -54,11 +57,29 @@ Feel free to browse the [Q&A / Use-cases](https://simple-keyboard.com/qa-use-cas
 * [Angular](https://simple-keyboard.com/demo)
 * [Vue.js](https://simple-keyboard.com/demo)
 
-### Questions?
+### Questions? Join the chat
 
-<a href="http://franciscohodge.com/simple-keyboard/chat/join" title="Join our Discord chat" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/discord.png" align="center" width="200"></a>
+<a href="https://discordapp.com/invite/SJexsCG" title="Join our Discord chat" target="_blank"><img src="https://discordapp.com/api/guilds/498978399801573396/widget.png?style=banner2" align="center"></a>
 
-## ✅ Contributing
+## Modules ✳️ 
 
-PR's and issues are welcome. Feel free to submit any issues you have at:
+You can extend simple-keyboard's functionality with [modules](https://hodgef.com/simple-keyboard/modules/). Such as:
+
+* [Autocorrect](https://hodgef.com/simple-keyboard/modules/autocorrect/)
+* [Input Mask](https://hodgef.com/simple-keyboard/modules/input-mask/)
+* [Key Navigation](https://hodgef.com/simple-keyboard/modules/key-navigation/)
+* [Swipe Keyboard](https://hodgef.com/simple-keyboard/modules/swipe-keyboard/)
+
+Want to create your own module? Check out the [Modules page](https://hodgef.com/simple-keyboard/modules/) for instructions.
+
+## Compatibility 🎯 
+
+> Simple-keyboard is intended for modern, standards-compliant browsers.
+> Internet Explorer is sadly not one of them, and since its market-share is negligible (~2% for IE11), resources won't be spent in trying to support it.
+>
+> For more information, check out [this Q&A entry](https://hodgef.com/simple-keyboard/questions-answers/internet-explorer-not-supported/).
+
+## Contributing ✅ 
+
+PRs and issues are always welcome. Feel free to submit any issues you have at:
 [https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.26.0
+ *   simple-keyboard v2.32.0
  *   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.
  *   
- */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;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}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.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}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.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

@@ -1,7 +1,5 @@
 declare module 'simple-keyboard' {
   interface KeyboardLayoutObject {
-    default: string[];
-    shift?: any;
     [key: string]: string[];
   }
 
@@ -90,9 +88,9 @@ declare module 'simple-keyboard' {
     physicalKeyboardHighlight?: boolean;
 
     /**
-     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     * Presses keys highlighted by physicalKeyboardHighlight
      */
-    preventMouseDownDefault?: boolean;
+    physicalKeyboardHighlightPress?: boolean;
 
     /**
      * Define the text color that the physical keyboard highlighted key should have.
@@ -104,6 +102,26 @@ declare module 'simple-keyboard' {
      */
     physicalKeyboardHighlightBgColor?: string;
 
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+
+    /**
+     * Calling preventDefault for the mouseup events.
+     */
+    preventMouseUpDefault?: boolean;
+    
+    /**
+     * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseDownPropagation?: boolean;
+
+    /**
+     * Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseUpPropagation?: boolean;
+
     /**
      * Render buttons as a button element instead of a div element.
      */
@@ -139,6 +157,11 @@ declare module 'simple-keyboard' {
      */
     disableButtonHold?: boolean;
 
+    /**
+     * Adds unicode right-to-left control characters to input return values.
+     */
+    rtl?: boolean;
+
     /**
      * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
      */
@@ -180,13 +203,19 @@ declare module 'simple-keyboard' {
     onChangeAll?: (inputs: any) => any;
 
     /**
-     * Executes the callback function on key release.
+     * Module classes to be loaded by simple-keyboard.
      */
-    onKeyReleased?: () => void;
+    modules?: any[];
+
+    /**
+     * Module options can have any format
+     */
+    [name: string]: any;
   }
 
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
+    constructor(selector: HTMLDivElement, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
 
     /**
@@ -204,6 +233,29 @@ declare module 'simple-keyboard' {
      */
     caretPosition?: number;
 
+
+    /**
+     * caretPositionEnd
+     */
+    caretPositionEnd?: number;
+
+    /**
+     * Changes the internal caret position
+     * @param {number} position The caret's start position
+     * @param {number} positionEnd The caret's end position
+     */
+    setCaretPosition(position: number, positionEnd?: number): void;
+
+    /**
+     * Retrieves the internal caret position
+     */
+    getCaretPosition(): number;
+
+    /**
+     * Retrieves the internal end caret position
+     */
+    getCaretPositionEnd(): number;
+
     /**
      * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
      * @param  {string} buttons List of buttons to select (separated by a space).

config/env.js

@@ -15,7 +15,7 @@ if (!NODE_ENV) {
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
+const dotenvFiles = [
   `${paths.dotenv}.${NODE_ENV}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   // Don't include `.env.local` for `test` environment
@@ -46,7 +46,7 @@ dotenvFiles.forEach(dotenvFile => {
 // It works similar to `NODE_PATH` in Node itself:
 // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
 // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
@@ -57,7 +57,7 @@ process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
+// injected into the application via DefinePlugin in webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
@@ -77,9 +77,17 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
+        // We support configuring the sockjs pathname during development.
+        // These settings let a developer run multiple simultaneous projects.
+        // They are used as the connection `hostname`, `pathname` and `port`
+        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+        // and `sockPort` options in webpack-dev-server.
+        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
       }
     );
-  // Stringify all values so we can feed into Webpack DefinePlugin
+  // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
     'process.env': Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);

config/getHttpsConfig.js

@@ -0,0 +1,66 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+  let encrypted;
+  try {
+    // publicEncrypt will throw an error with an invalid cert
+    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+  } catch (err) {
+    throw new Error(
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+    );
+  }
+
+  try {
+    // privateDecrypt will throw an error with an invalid key
+    crypto.privateDecrypt(key, encrypted);
+  } catch (err) {
+    throw new Error(
+      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+        err.message
+      }`
+    );
+  }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+  if (!fs.existsSync(file)) {
+    throw new Error(
+      `You specified ${chalk.cyan(
+        type
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+    );
+  }
+  return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+  const isHttps = HTTPS === 'true';
+
+  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+    const config = {
+      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+    };
+
+    validateKeyAndCerts({ ...config, keyFile, crtFile });
+    return config;
+  }
+  return isHttps;
+}
+
+module.exports = getHttpsConfig;

config/jest/fileTransform.js

@@ -13,10 +13,10 @@ module.exports = {
     if (filename.match(/\.svg$/)) {
       // Based on how SVGR generates a component name:
       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFileName = camelcase(path.parse(filename).name, {
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
         pascalCase: true,
       });
-      const componentName = `Svg${pascalCaseFileName}`;
+      const componentName = `Svg${pascalCaseFilename}`;
       return `const React = require('react');
       module.exports = {
         __esModule: true,

config/modules.js

@@ -7,7 +7,7 @@ const chalk = require('react-dev-utils/chalk');
 const resolve = require('resolve');
 
 /**
- * Get the baseUrl of a compilerOptions object.
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
  *
  * @param {Object} options
  */
@@ -38,6 +38,15 @@ function getAdditionalModulePaths(options = {}) {
     return [paths.appSrc];
   }
 
+  // If the path is equal to the root directory we ignore it here.
+  // We don't want to allow importing from the root directly as source files are
+  // not transpiled outside of `src`. We do allow importing them with the
+  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+  // an alias.
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return null;
+  }
+
   // Otherwise, throw an error.
   throw new Error(
     chalk.red.bold(
@@ -47,6 +56,48 @@ function getAdditionalModulePaths(options = {}) {
   );
 }
 
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      src: paths.appSrc,
+    };
+  }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      '^src/(.*)$': '<rootDir>/src/$1',
+    };
+  }
+}
+
 function getModules() {
   // Check if TypeScript is setup
   const hasTsConfig = fs.existsSync(paths.appTsConfig);
@@ -81,6 +132,8 @@ function getModules() {
 
   return {
     additionalModulePaths: additionalModulePaths,
+    webpackAliases: getWebpackAliases(options),
+    jestAliases: getJestAliases(options),
     hasTsConfig,
   };
 }

config/paths.js

@@ -1,42 +1,22 @@
-'use strict';
+
 
 const path = require('path');
 const fs = require('fs');
-const url = require('url');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(inputPath, needsSlash) {
-  const hasSlash = inputPath.endsWith('/');
-  if (hasSlash && !needsSlash) {
-    return inputPath.substr(0, inputPath.length - 1);
-  } else if (!hasSlash && needsSlash) {
-    return `${inputPath}/`;
-  } else {
-    return inputPath;
-  }
-}
-
-const getPublicUrl = appPackageJson =>
-  envPublicUrl || require(appPackageJson).homepage;
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 // "public path" at which the app is served.
-// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// webpack needs to know it to put the right <script> hrefs into HTML even in
 // single-page apps that may serve index.html for nested URLs like /todos/42.
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-function getServedPath(appPackageJson) {
-  const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl =
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
-  return ensureSlash(servedUrl, true);
-}
+const publicUrlOrPath = '/';
 
 const moduleFileExtensions = [
   'web.mjs',
@@ -87,9 +67,7 @@ module.exports = {
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
-  publicUrl: getPublicUrl(resolveApp('package.json')),
-  //servedPath: getServedPath(resolveApp('package.json')),
-  servedPath: ''
+  publicUrlOrPath
 };
 
 module.exports.moduleFileExtensions = moduleFileExtensions;

config/webpack.config.demo.js

@@ -1,7 +1,4 @@
-'use strict';
-
 const fs = require('fs');
-const isWsl = require('is-wsl');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
@@ -38,6 +35,8 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
+const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
+
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -57,20 +56,16 @@ module.exports = function(webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
-  // Webpack uses `publicPath` to determine where the app is being served from.
-  // It requires a trailing slash, or the file assets will get an incorrect path.
-  // In development, we always serve from the root. This makes config easier.
-  const publicPath = paths.servedPath
-  // Some apps do not use client-side routing with pushState.
-  // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
 
-  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // We will provide `paths.publicUrlOrPath` to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = publicPath.slice(0, -1);
   // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
+  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
@@ -78,7 +73,11 @@ module.exports = function(webpackEnv) {
       isEnvDevelopment && require.resolve('style-loader'),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
-        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
+        // css is located in `static/css`, use '../../' to locate index.html folder
+        // in production `paths.publicUrlOrPath` can be a relative path
+        options: paths.publicUrlOrPath.startsWith('.')
+          ? { publicPath: '../../' }
+          : {},
       },
       {
         loader: require.resolve('css-loader'),
@@ -114,16 +113,16 @@ module.exports = function(webpackEnv) {
       loaders.push(
         {
           loader: require.resolve('resolve-url-loader'),
-        options: {
-          sourceMap: isEnvProduction && shouldUseSourceMap,
-        },
+          options: {
+            sourceMap: isEnvProduction && shouldUseSourceMap,
+          },
         },
         {
           loader: require.resolve(preProcessor),
           options: {
             sourceMap: true,
           },
-    }
+        }
       );
     }
     return loaders;
@@ -170,10 +169,13 @@ module.exports = function(webpackEnv) {
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
       // We inferred the "public path" (such as / or /my-project) from homepage.
-      // We use "/" in development.
-      publicPath: publicPath,
+      publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
         ? info =>
@@ -182,9 +184,12 @@ module.exports = function(webpackEnv) {
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple Webpack runtimes (from different apps)
+      // Prevents conflicts when multiple webpack runtimes (from different apps)
       // are used on the same page.
       jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+      // this defaults to 'window', but by setting it to 'this' then
+      // module chunks which are built will work in web workers as well.
+      globalObject: 'this',
     },
     optimization: {
       minimize: isEnvProduction,
@@ -228,12 +233,6 @@ module.exports = function(webpackEnv) {
               ascii_only: true,
             },
           },
-          // Use multi-process parallel running to improve the build speed
-          // Default number of concurrent runs: os.cpus().length - 1
-          // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
-          // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
-          parallel: !isWsl,
-          // Enable file caching
           cache: true,
           sourceMap: shouldUseSourceMap,
         }),
@@ -251,24 +250,26 @@ module.exports = function(webpackEnv) {
                 }
               : false,
           },
+          cssProcessorPluginOptions: {
+            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+          },
         }),
       ],
       // Automatically split vendor and commons
       // https://twitter.com/wSokra/status/969633336732905474
       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
       splitChunks: {
-      /*chunks: 'all',
-      name: false,*/
-      cacheGroups: {
-        default: false,
-      }
+        cacheGroups: {
+          default: false,
+        }
       },
       // Keep the runtime chunk separated to enable long term caching
       // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: false,
+      // https://github.com/facebook/create-react-app/issues/5358
+      runtimeChunk: false,
     },
     resolve: {
-      // This allows you to set a fallback for where Webpack should look for modules.
+      // This allows you to set a fallback for where webpack should look for modules.
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
@@ -288,6 +289,12 @@ module.exports = function(webpackEnv) {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -303,7 +310,7 @@ module.exports = function(webpackEnv) {
     },
     resolveLoader: {
       plugins: [
-        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
         // from the current package.
         PnpWebpackPlugin.moduleLoader(module),
       ],
@@ -322,6 +329,7 @@ module.exports = function(webpackEnv) {
           use: [
             {
               options: {
+                cache: true,
                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint'),
                 resolvePluginsRelativeTo: __dirname,
@@ -330,7 +338,7 @@ module.exports = function(webpackEnv) {
               loader: require.resolve('eslint-loader'),
             },
           ],
-        include: paths.appSrcDemo,
+          include: paths.appSrcDemo,
         },
         {
           // "oneOf" will traverse all following loaders until one will
@@ -352,7 +360,7 @@ module.exports = function(webpackEnv) {
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
             {
               test: /\.(js|mjs|jsx|ts|tsx)$/,
-            include: paths.appSrcDemo,
+              include: paths.appSrcDemo,
               loader: require.resolve('babel-loader'),
               options: {
                 customize: require.resolve(
@@ -365,7 +373,8 @@ module.exports = function(webpackEnv) {
                     {
                       loaderMap: {
                         svg: {
-                          ReactComponent: '@svgr/webpack?-prettier,-svgo,+ref![path]',
+                          ReactComponent:
+                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                         },
                       },
                     },
@@ -375,7 +384,8 @@ module.exports = function(webpackEnv) {
                 // It enables caching results in ./node_modules/.cache/babel-loader/
                 // directory for faster rebuilds.
                 cacheDirectory: true,
-                cacheCompression: isEnvProduction,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
                 compact: isEnvProduction,
               },
             },
@@ -394,6 +404,8 @@ module.exports = function(webpackEnv) {
                     require.resolve('babel-preset-react-app/dependencies'),
                     { helpers: true },
                   ],
+                  "@babel/preset-env",
+                  "@babel/preset-react"
                 ],
                 plugins: [
                   [
@@ -401,13 +413,14 @@ module.exports = function(webpackEnv) {
                   ]
                 ],
                 cacheDirectory: true,
-                cacheCompression: isEnvProduction,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
                 
-                // If an error happens in a package, it's possible to be
-                // because it was compiled. Thus, we don't want the browser
-                // debugger to show the original code. Instead, the code
-                // being evaluated would be much more helpful.
-                sourceMaps: false,
+                // Babel sourcemaps are needed for debugging into node_modules
+                // code.  Without the options below, debuggers like VSCode
+                // show incorrect code and set breakpoints on the wrong lines.
+                sourceMaps: shouldUseSourceMap,
+                inputSourceMap: shouldUseSourceMap,
               },
             },
             // "postcss" loader applies autoprefixer to our CSS.
@@ -437,8 +450,9 @@ module.exports = function(webpackEnv) {
               use: getStyleLoaders({
                 importLoaders: 1,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
+                modules: {
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
               }),
             },
             // Opt-in support for SASS (using .scss or .sass extensions).
@@ -449,7 +463,7 @@ module.exports = function(webpackEnv) {
               exclude: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  importLoaders: 2,
+                  importLoaders: 3,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
                 },
                 'sass-loader'
@@ -466,10 +480,11 @@ module.exports = function(webpackEnv) {
               test: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  importLoaders: 2,
+                  importLoaders: 3,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
-                  modules: true,
-                  getLocalIdent: getCSSModuleLocalIdent,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
                 },
                 'sass-loader'
               ),
@@ -503,7 +518,7 @@ module.exports = function(webpackEnv) {
           {},
           {
             inject: true,
-            template: paths.appHtml
+            template: paths.appHtml,
           },
           isEnvProduction
             ? {
@@ -525,15 +540,15 @@ module.exports = function(webpackEnv) {
       ),
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
+      // https://github.com/facebook/create-react-app/issues/5358
       isEnvProduction &&
         shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
       // Makes some environment variables available in index.html.
       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-      // In production, it will be an empty string unless you specify "homepage"
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // It will be an empty string unless you specify "homepage"
       // in `package.json`, in which case it will be the pathname of that URL.
-      // In development, this will be an empty string.
       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
       // This gives some necessary context to module not found errors, such as
       // the requesting resource.
@@ -551,7 +566,7 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/240
       isEnvDevelopment && new CaseSensitivePathsPlugin(),
       // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for Webpack to discover it. This plugin
+      // to restart the development server for webpack to discover it. This plugin
       // makes the discovery automatic so you don't have to restart.
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
@@ -563,43 +578,52 @@ module.exports = function(webpackEnv) {
           filename: 'index.css',
           chunkFilename: 'index.[contenthash:8].chunk.css',
         }),
-      // Generate a manifest file which contains a mapping of all asset filenames
-      // to their corresponding output file so that tools can pick it up without
-      // having to parse `index.html`.
-    /*new ManifestPlugin({
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      // - "entrypoints" key: Array of files which are included in `index.html`,
+      //   can be used to reconstruct the HTML if necessary
+      /*new ManifestPlugin({
         fileName: 'asset-manifest.json',
-        publicPath: publicPath,
-        generate: (seed, files) => {
-          const manifestFiles = files.reduce(function(manifest, file) {
+        publicPath: paths.publicUrlOrPath,
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
             manifest[file.name] = file.path;
             return manifest;
           }, seed);
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
 
           return {
             files: manifestFiles,
+            entrypoints: entrypointFiles,
           };
         },
       }),*/
       // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how Webpack interprets its code. This is a practical
+      // by default due to how webpack interprets its code. This is a practical
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       // You can remove this if you don't use Moment.js:
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
+      // the HTML & assets that are part of the webpack build.
       /*isEnvProduction &&
         new WorkboxWebpackPlugin.GenerateSW({
           clientsClaim: true,
           exclude: [/\.map$/, /asset-manifest\.json$/],
           importWorkboxFrom: 'cdn',
-          navigateFallback: publicUrl + '/index.html',
+          navigateFallback: paths.publicUrlOrPath + 'index.html',
           navigateFallbackBlacklist: [
             // Exclude URLs starting with /_, as they're likely an API call
             new RegExp('^/_'),
-            // Exclude URLs containing a dot, as they're likely a resource in
-            // public/ and not a SPA route
-            new RegExp('/[^/]+\\.[^/]+$'),
+            // Exclude any URLs whose last part seems to be a file extension
+            // as they're likely a resource and not a SPA route.
+            // URLs containing a "?" character won't be blacklisted as they're likely
+            // a route with query params (e.g. auth callbacks).
+            new RegExp('/[^/?]+\\.[^/]+$'),
           ],
         }),*/
       // TypeScript type checking
@@ -608,6 +632,7 @@ module.exports = function(webpackEnv) {
           typescript: resolve.sync('typescript', {
             basedir: paths.appNodeModules,
           }),
+          async: isEnvDevelopment,
           useTypescriptIncrementalApi: true,
           checkSyntacticErrors: true,
           resolveModuleNameModule: process.versions.pnp
@@ -631,7 +656,7 @@ module.exports = function(webpackEnv) {
         }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
+    // Tell webpack to provide empty mocks for them so importing them works.
     node: {
       module: 'empty',
       dgram: 'empty',

config/webpack.config.js

@@ -1,7 +1,4 @@
-'use strict';
-
 const fs = require('fs');
-const isWsl = require('is-wsl');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
@@ -29,9 +26,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const getPackageJson = require('./getPackageJson');
 const PrettierPlugin = require("prettier-webpack-plugin");
 const eslint = require('eslint');
-
 const postcssNormalize = require('postcss-normalize');
-
 const appPackageJson = require(paths.appPackageJson);
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -40,6 +35,8 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
+const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
+
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -65,7 +62,7 @@ const banner = `
   ${name} v${version}
   ${repository.url}
 
-  Copyright (c) ${author.replace(/ *\<[^)]*\> */g, " ")}
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")}
 
   This source code is licensed under the ${license} license found in the
   LICENSE file in the root directory of this source tree.
@@ -77,24 +74,16 @@ module.exports = function(webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
-  // Webpack uses `publicPath` to determine where the app is being served from.
-  // It requires a trailing slash, or the file assets will get an incorrect path.
-  // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction
-    ? paths.servedPath
-    : isEnvDevelopment && '/';
-  // Some apps do not use client-side routing with pushState.
-  // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
 
-  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // We will provide `paths.publicUrlOrPath` to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = isEnvProduction
-    ? publicPath.slice(0, -1)
-    : isEnvDevelopment && '';
   // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
+  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
@@ -102,7 +91,11 @@ module.exports = function(webpackEnv) {
       isEnvDevelopment && require.resolve('style-loader'),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
-        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
+        // css is located in `static/css`, use '../../' to locate index.html folder
+        // in production `paths.publicUrlOrPath` can be a relative path
+        options: paths.publicUrlOrPath.startsWith('.')
+          ? { publicPath: '../../' }
+          : {},
       },
       {
         loader: require.resolve('css-loader'),
@@ -138,16 +131,16 @@ module.exports = function(webpackEnv) {
       loaders.push(
         {
           loader: require.resolve('resolve-url-loader'),
-        options: {
-          sourceMap: isEnvProduction && shouldUseSourceMap,
-        },
+          options: {
+            sourceMap: isEnvProduction && shouldUseSourceMap,
+          },
         },
         {
           loader: require.resolve(preProcessor),
           options: {
             sourceMap: true,
           },
-    }
+        }
       );
     }
     return loaders;
@@ -199,9 +192,10 @@ module.exports = function(webpackEnv) {
       chunkFilename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].chunk.js'
         : isEnvDevelopment && 'static/js/[name].chunk.js',
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
       // We inferred the "public path" (such as / or /my-project) from homepage.
-      // We use "/" in development.
-      publicPath: publicPath,
+      publicPath: paths.publicUrlOrPath,
       library: "SimpleKeyboard",
       libraryTarget: 'umd',
       umdNamedDefine: true,
@@ -213,9 +207,12 @@ module.exports = function(webpackEnv) {
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple Webpack runtimes (from different apps)
+      // Prevents conflicts when multiple webpack runtimes (from different apps)
       // are used on the same page.
       jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+      // this defaults to 'window', but by setting it to 'this' then
+      // module chunks which are built will work in web workers as well.
+      globalObject: 'this',
     },
     optimization: {
       minimize: isEnvProduction,
@@ -251,6 +248,9 @@ module.exports = function(webpackEnv) {
               keep_fnames: true,
               module: true
             },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
             output: {
               ecma: 5,
               comments: false,
@@ -259,15 +259,10 @@ module.exports = function(webpackEnv) {
               ascii_only: true,
             },
           },
-          // Use multi-process parallel running to improve the build speed
-          // Default number of concurrent runs: os.cpus().length - 1
-          // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
-          // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
-          parallel: !isWsl,
-          // Enable file caching
           cache: true,
           sourceMap: shouldUseSourceMap,
         }),
+        // This is only used in production mode
         new webpack.BannerPlugin({ 
           banner: banner, 
           entryOnly: true 
@@ -286,23 +281,26 @@ module.exports = function(webpackEnv) {
                 }
               : false,
           },
+          cssProcessorPluginOptions: {
+            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+          },
         }),
       ],
       // Automatically split vendor and commons
       // https://twitter.com/wSokra/status/969633336732905474
       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
       splitChunks: {
-      //chunks: 'all',
-      cacheGroups: {
-        default: false,
-      }
+        cacheGroups: {
+          default: false,
+        }
       },
       // Keep the runtime chunk separated to enable long term caching
       // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: false,
+      // https://github.com/facebook/create-react-app/issues/5358
+      runtimeChunk: false,
     },
     resolve: {
-      // This allows you to set a fallback for where Webpack should look for modules.
+      // This allows you to set a fallback for where webpack should look for modules.
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
@@ -322,6 +320,12 @@ module.exports = function(webpackEnv) {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -337,7 +341,7 @@ module.exports = function(webpackEnv) {
     },
     resolveLoader: {
       plugins: [
-        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
         // from the current package.
         PnpWebpackPlugin.moduleLoader(module),
       ],
@@ -356,6 +360,7 @@ module.exports = function(webpackEnv) {
           use: [
             {
               options: {
+                cache: true,
                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint'),
                 resolvePluginsRelativeTo: __dirname,
@@ -364,7 +369,7 @@ module.exports = function(webpackEnv) {
               loader: require.resolve('eslint-loader'),
             },
           ],
-        include: paths.appSrcLib,
+          include: paths.appSrcLib,
         },
         {
           // "oneOf" will traverse all following loaders until one will
@@ -399,7 +404,8 @@ module.exports = function(webpackEnv) {
                     {
                       loaderMap: {
                         svg: {
-                          ReactComponent: '@svgr/webpack?-prettier,-svgo,+ref![path]',
+                          ReactComponent:
+                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                         },
                       },
                     },
@@ -409,7 +415,8 @@ module.exports = function(webpackEnv) {
                 // It enables caching results in ./node_modules/.cache/babel-loader/
                 // directory for faster rebuilds.
                 cacheDirectory: true,
-                cacheCompression: isEnvProduction,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
                 compact: isEnvProduction,
               },
             },
@@ -428,6 +435,8 @@ module.exports = function(webpackEnv) {
                     require.resolve('babel-preset-react-app/dependencies'),
                     { helpers: true },
                   ],
+                  "@babel/preset-env",
+                  "@babel/preset-react"
                 ],
                 plugins: [
                   [
@@ -435,13 +444,14 @@ module.exports = function(webpackEnv) {
                   ]
                 ],
                 cacheDirectory: true,
-                cacheCompression: isEnvProduction,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
                 
-                // If an error happens in a package, it's possible to be
-                // because it was compiled. Thus, we don't want the browser
-                // debugger to show the original code. Instead, the code
-                // being evaluated would be much more helpful.
-                sourceMaps: false,
+                // Babel sourcemaps are needed for debugging into node_modules
+                // code.  Without the options below, debuggers like VSCode
+                // show incorrect code and set breakpoints on the wrong lines.
+                sourceMaps: shouldUseSourceMap,
+                inputSourceMap: shouldUseSourceMap,
               },
             },
             // "postcss" loader applies autoprefixer to our CSS.
@@ -471,8 +481,9 @@ module.exports = function(webpackEnv) {
               use: getStyleLoaders({
                 importLoaders: 1,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
+                modules: {
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
               }),
             },
             // Opt-in support for SASS (using .scss or .sass extensions).
@@ -483,7 +494,7 @@ module.exports = function(webpackEnv) {
               exclude: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  importLoaders: 2,
+                  importLoaders: 3,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
                 },
                 'sass-loader'
@@ -500,10 +511,11 @@ module.exports = function(webpackEnv) {
               test: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  importLoaders: 2,
+                  importLoaders: 3,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
-                  modules: true,
-                  getLocalIdent: getCSSModuleLocalIdent,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
                 },
                 'sass-loader'
               ),
@@ -560,15 +572,15 @@ module.exports = function(webpackEnv) {
       ),
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
+      // https://github.com/facebook/create-react-app/issues/5358
       isEnvProduction &&
         shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
       // Makes some environment variables available in index.html.
       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-      // In production, it will be an empty string unless you specify "homepage"
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // It will be an empty string unless you specify "homepage"
       // in `package.json`, in which case it will be the pathname of that URL.
-      // In development, this will be an empty string.
       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
       // This gives some necessary context to module not found errors, such as
       // the requesting resource.
@@ -586,7 +598,7 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/240
       isEnvDevelopment && new CaseSensitivePathsPlugin(),
       // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for Webpack to discover it. This plugin
+      // to restart the development server for webpack to discover it. This plugin
       // makes the discovery automatic so you don't have to restart.
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
@@ -598,25 +610,32 @@ module.exports = function(webpackEnv) {
           filename: 'css/index.css',
           chunkFilename: 'css/index.[contenthash:8].chunk.css',
         }),
-      // Generate a manifest file which contains a mapping of all asset filenames
-      // to their corresponding output file so that tools can pick it up without
-      // having to parse `index.html`.
-    /*new ManifestPlugin({
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      // - "entrypoints" key: Array of files which are included in `index.html`,
+      //   can be used to reconstruct the HTML if necessary
+      /*new ManifestPlugin({
         fileName: 'asset-manifest.json',
-        publicPath: publicPath,
-        generate: (seed, files) => {
-          const manifestFiles = files.reduce(function(manifest, file) {
+        publicPath: paths.publicUrlOrPath,
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
             manifest[file.name] = file.path;
             return manifest;
           }, seed);
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
 
           return {
             files: manifestFiles,
+            entrypoints: entrypointFiles,
           };
         },
       }),*/
       // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how Webpack interprets its code. This is a practical
+      // by default due to how webpack interprets its code. This is a practical
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       // You can remove this if you don't use Moment.js:
@@ -629,19 +648,21 @@ module.exports = function(webpackEnv) {
       ]),
       new PrettierPlugin(),
       // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
+      // the HTML & assets that are part of the webpack build.
       /*isEnvProduction &&
         new WorkboxWebpackPlugin.GenerateSW({
           clientsClaim: true,
           exclude: [/\.map$/, /asset-manifest\.json$/],
           importWorkboxFrom: 'cdn',
-          navigateFallback: publicUrl + '/index.html',
+          navigateFallback: paths.publicUrlOrPath + 'index.html',
           navigateFallbackBlacklist: [
             // Exclude URLs starting with /_, as they're likely an API call
             new RegExp('^/_'),
-            // Exclude URLs containing a dot, as they're likely a resource in
-            // public/ and not a SPA route
-            new RegExp('/[^/]+\\.[^/]+$'),
+            // Exclude any URLs whose last part seems to be a file extension
+            // as they're likely a resource and not a SPA route.
+            // URLs containing a "?" character won't be blacklisted as they're likely
+            // a route with query params (e.g. auth callbacks).
+            new RegExp('/[^/?]+\\.[^/]+$'),
           ],
         }),*/
       // TypeScript type checking
@@ -667,14 +688,13 @@ module.exports = function(webpackEnv) {
             '!**/src/setupProxy.*',
             '!**/src/setupTests.*',
           ],
-          watch: paths.appSrcLib,
           silent: true,
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
+    // Tell webpack to provide empty mocks for them so importing them works.
     node: {
       module: 'empty',
       dgram: 'empty',

config/webpack.config.unminified.js

@@ -1,579 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const isWsl = require('is-wsl');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const modules = require('./modules');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const getPackageJson = require('./getPackageJson');
-
-const postcssNormalize = require('postcss-normalize');
-
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = false;
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-const {
-  version,
-  name,
-  license,
-  repository,
-  author,
-} = getPackageJson('version', 'name', 'license', 'repository', 'author');
-
-const banner = `
-  ${name} v${version} (Non-minified build)
-  ${repository.url}
-
-  Copyright (c) ${author.replace(/ *\<[^)]*\> */g, " ")}
-
-  This source code is licensed under the ${license} license found in the
-  LICENSE file in the root directory of this source tree.
-  `;
-
-// This is the production and development configuration.
-// It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
-  const isEnvDevelopment = webpackEnv === 'development';
-  const isEnvProduction = webpackEnv === 'production';
-
-  // Webpack uses `publicPath` to determine where the app is being served from.
-  // It requires a trailing slash, or the file assets will get an incorrect path.
-  // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction
-    ? paths.servedPath
-    : isEnvDevelopment && '/';
-  // Some apps do not use client-side routing with pushState.
-  // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
-
-  // `publicUrl` is just like `publicPath`, but we will provide it to our app
-  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = isEnvProduction
-    ? publicPath.slice(0, -1)
-    : isEnvDevelopment && '';
-  // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-      {
-      loader: MiniCssExtractPlugin.loader,
-      options: Object.assign(
-        {},
-        shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
-      ),
-    },
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-            // Adds PostCSS Normalize as the reset css with default options,
-            // so that it honors browserslist config in package.json
-            // which in turn let's users customize the target behavior as per their needs.
-            postcssNormalize(),
-        ],
-          sourceMap: shouldUseSourceMap,
-      },
-    },
-    ].filter(Boolean);
-  if (preProcessor) {
-    loaders.push({
-      loader: require.resolve(preProcessor),
-      options: {
-          sourceMap: shouldUseSourceMap,
-      },
-    });
-  }
-  return loaders;
-};
-
-  return {
-    mode: 'production',
-    // Stop compilation early in production
-    bail: true,
-    devtool: false,
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-  entry: [paths.appLibIndexJs],
-  output: {
-    // The build folder.
-      path: paths.appBuild,
-      // Add /* filename */ comments to generated require()s in the output.
-      pathinfo: isEnvDevelopment,
-    // There will be one main bundle, and one file per asynchronous chunk.
-      // In development, it does not produce real files.
-      filename: 'simple-keyboard.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: 'index.[chunkhash:8].chunk.js',
-    // We inferred the "public path" (such as / or /my-project) from homepage.
-      // We use "/" in development.
-    publicPath: publicPath,
-    library: "SimpleKeyboard",
-    libraryTarget: 'umd',
-    umdNamedDefine: true,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: info =>
-        path
-          .relative(paths.appSrcLib, info.absoluteResourcePath)
-          .replace(/\\/g, '/'),
-  },
-  optimization: {
-    minimizer: [
-        // we specify a custom UglifyJsPlugin here to get source maps in production
-      new UglifyJsPlugin({
-        cache: false,
-        parallel: false,
-        uglifyOptions: {
-          output: {
-            comments: true,
-            beautify: true,
-            braces: true,
-            indent_level: 2
-          },
-          mangle: false,
-          compress: false
-        },
-        // Use multi-process parallel running to improve the build speed
-        // Default number of concurrent runs: os.cpus().length - 1
-        // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
-        // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
-        parallel: !isWsl,
-        // Enable file caching
-        cache: true,
-        sourceMap: false,
-      }),
-      new webpack.BannerPlugin({ 
-        banner: banner, 
-        entryOnly: true 
-        }),
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
-          },
-        }),
-      ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-      //chunks: 'all',
-      cacheGroups: {
-        default: false,
-      }
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: false,
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebook/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: paths.moduleFileExtensions
-      .map(ext => `.${ext}`)
-      .filter(ext => useTypeScript || !ext.includes('ts')),
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-      // guards against forgotten dependencies and such.
-      PnpWebpackPlugin,
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  resolveLoader: {
-    plugins: [
-      // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-      // from the current package.
-      PnpWebpackPlugin.moduleLoader(module),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // Disable require.ensure as it's not a standard language feature.
-      { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-          test: /\.(js|mjs|jsx|ts|tsx)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: require.resolve('react-dev-utils/eslintFormatter'),
-              eslintPath: require.resolve('eslint'),
-              
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrcLib,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-            // "url" loader works like "file" loader except that it embeds assets
-            // smaller than specified limit in bytes as data URLs to avoid requests.
-            // A missing `test` is equivalent to a match.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // Process application JS with Babel.
-            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
-          {
-            test: /\.(js|mjs|jsx|ts|tsx)$/,
-            include: paths.appSrcLib,
-            loader: require.resolve('babel-loader'),
-            options: {
-              customize: require.resolve(
-                'babel-preset-react-app/webpack-overrides'
-              ),
-              
-              plugins: [
-                [
-                  require.resolve('babel-plugin-named-asset-import'),
-                  {
-                    loaderMap: {
-                      svg: {
-                          ReactComponent: '@svgr/webpack?-prettier,-svgo,+ref![path]',
-                      },
-                    },
-                  },
-                ],
-              ],
-                // This is a feature of `babel-loader` for webpack (not Babel itself).
-                // It enables caching results in ./node_modules/.cache/babel-loader/
-                // directory for faster rebuilds.
-              cacheDirectory: true,
-                cacheCompression: true,
-                compact: true,
-            },
-          },
-          // Process any JS outside of the app with Babel.
-          // Unlike the application JS, we only compile the standard ES features.
-          {
-            test: /\.(js|mjs)$/,
-            exclude: /@babel(?:\/|\\{1,2})runtime/,
-            loader: require.resolve('babel-loader'),
-            options: {
-              babelrc: false,
-              configFile: false,
-              compact: false,
-              presets: [
-                [
-                  require.resolve('babel-preset-react-app/dependencies'),
-                  { helpers: true },
-                ],
-              ],
-              cacheDirectory: true,
-                cacheCompression: true,
-              
-              // If an error happens in a package, it's possible to be
-              // because it was compiled. Thus, we don't want the browser
-              // debugger to show the original code. Instead, the code
-              // being evaluated would be much more helpful.
-              sourceMaps: false,
-            },
-          },
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-            // "style" loader turns CSS into JS modules that inject <style> tags.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
-          // By default we support CSS Modules with the extension .module.css
-          {
-            test: cssRegex,
-            exclude: cssModuleRegex,
-              use: getStyleLoaders({
-              importLoaders: 1,
-                sourceMap: shouldUseSourceMap,
-            }),
-            // Don't consider CSS imports dead code even if the
-            // containing package claims to have no side effects.
-            // Remove this when webpack adds a warning or an error for this.
-            // See https://github.com/webpack/webpack/issues/6571
-            sideEffects: true,
-          },
-          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-          // using the extension .module.css
-          {
-            test: cssModuleRegex,
-              use: getStyleLoaders({
-              importLoaders: 1,
-                sourceMap: shouldUseSourceMap,
-              modules: true,
-              getLocalIdent: getCSSModuleLocalIdent,
-            }),
-          },
-            // Opt-in support for SASS (using .scss or .sass extensions).
-          // By default we support SASS Modules with the
-          // extensions .module.scss or .module.sass
-          {
-            test: sassRegex,
-            exclude: sassModuleRegex,
-              use: getStyleLoaders(
-              {
-                importLoaders: 2,
-                  sourceMap: shouldUseSourceMap,
-              },
-              'sass-loader'
-            ),
-            // Don't consider CSS imports dead code even if the
-            // containing package claims to have no side effects.
-            // Remove this when webpack adds a warning or an error for this.
-            // See https://github.com/webpack/webpack/issues/6571
-            sideEffects: true,
-          },
-          // Adds support for CSS Modules, but using SASS
-          // using the extension .module.scss or .module.sass
-          {
-            test: sassModuleRegex,
-              use: getStyleLoaders(
-              {
-                importLoaders: 2,
-                  sourceMap: shouldUseSourceMap,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
-              },
-              'sass-loader'
-            ),
-          },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            loader: require.resolve('file-loader'),
-            // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise be processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // ** STOP ** Are you adding a new loader?
-          // Make sure to add the new loader(s) before the "file" loader.
-        ],
-      },
-    ],
-  },
-  plugins: [
-    // Generates an `index.html` file with the <script> injected.
-      /*new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-      inject: true,
-      template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true,
-      },
-              }
-            : undefined
-        )
-      ),*/
-    // Inlines the webpack runtime script. This script is too small to warrant
-    // a network request.
-    shouldInlineRuntimeChunk &&
-      new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In production, it will be an empty string unless you specify "homepage"
-    // in `package.json`, in which case it will be the pathname of that URL.
-      // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-    // This gives some necessary context to module not found errors, such as
-    // the requesting resource.
-    new ModuleNotFoundPlugin(paths.appPath),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-      // It is absolutely essential that NODE_ENV is set to production
-      // during a production build.
-    // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env.stringified),
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-          filename: 'css/simple-keyboard.css',
-          chunkFilename: 'css/index.[contenthash:8].chunk.css',
-    }),
-    // Generate a manifest file which contains a mapping of all asset filenames
-    // to their corresponding output file so that tools can pick it up without
-    // having to parse `index.html`.
-    /*new ManifestPlugin({
-      fileName: 'asset-manifest.json',
-      publicPath: publicPath,
-        generate: (seed, files) => {
-          const manifestFiles = files.reduce(function(manifest, file) {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
-
-          return {
-            files: manifestFiles,
-          };
-        },
-    }),*/
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    // Generate a service worker script that will precache, and keep up to date,
-    // the HTML & assets that are part of the Webpack build.
-      /*isEnvProduction &&
-        new WorkboxWebpackPlugin.GenerateSW({
-      clientsClaim: true,
-      exclude: [/\.map$/, /asset-manifest\.json$/],
-      importWorkboxFrom: 'cdn',
-      navigateFallback: publicUrl + '/index.html',
-      navigateFallbackBlacklist: [
-        // Exclude URLs starting with /_, as they're likely an API call
-        new RegExp('^/_'),
-        // Exclude URLs containing a dot, as they're likely a resource in
-        // public/ and not a SPA route
-        new RegExp('/[^/]+\\.[^/]+$'),
-      ],
-    }),*/
-    // TypeScript type checking
-      useTypeScript &&
-      new ForkTsCheckerWebpackPlugin({
-        typescript: resolve.sync('typescript', {
-          basedir: paths.appNodeModules,
-        }),
-          async: false,
-          useTypescriptIncrementalApi: true,
-        checkSyntacticErrors: true,
-        tsconfig: paths.appTsConfig,
-        reportFiles: [
-          '**',
-          '!**/__tests__/**',
-          '!**/?(*.)(spec|test).*',
-            '!**/src/setupProxy.*',
-            '!**/src/setupTests.*',
-        ],
-        watch: paths.appSrcLib,
-        silent: true,
-          // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
-      }),
-  ].filter(Boolean),
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-      module: 'empty',
-    dgram: 'empty',
-      dns: 'mock',
-    fs: 'empty',
-      http2: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance processing because we utilize
-  // our own hints via the FileSizeReporter
-  performance: false,
-};
-};

config/webpackDevServer.config.js

@@ -1,14 +1,18 @@
 'use strict';
 
+const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
 const paths = require('./paths');
-const fs = require('fs');
+const getHttpsConfig = require('./getHttpsConfig');
 
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
+const sockHost = process.env.WDS_SOCKET_HOST;
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function(proxy, allowedHost) {
   return {
@@ -43,24 +47,39 @@ module.exports = function(proxy, allowedHost) {
     // Instead, we establish a convention that only files in `public` directory
     // get served. Our build script will copy `public` into the `build` folder.
     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
     // Note that we only recommend to use `public` folder as an escape hatch
     // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through Webpack. If you just want to
+    // for some reason broken when imported through webpack. If you just want to
     // use an image, put it in `src` and `import` it from JavaScript instead.
     contentBase: paths.appPublic,
+    contentBasePublicPath: paths.publicUrlOrPath,
     // By default files from `contentBase` will not trigger a page reload.
     watchContentBase: true,
-    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
     // for the WebpackDevServer client so it can learn when the files were
     // updated. The WebpackDevServer client is included as an entry point
-    // in the Webpack development configuration. Note that only changes
+    // in the webpack development configuration. Note that only changes
     // to CSS are currently hot reloaded. JS changes will refresh the browser.
     hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: '/',
+    // Use 'ws' instead of 'sockjs-node' on server since we're using native
+    // websockets in `webpackHotDevClient`.
+    transportMode: 'ws',
+    // Prevent a WS client from getting injected as we're already including
+    // `webpackHotDevClient`.
+    injectClient: false,
+    // Enable custom sockjs pathname for websocket connection to hot reloading server.
+    // Enable custom sockjs hostname, pathname and port for websocket connection
+    // to hot reloading server.
+    sockHost,
+    sockPath,
+    sockPort,
+    // It is important to tell WebpackDevServer to use the same "publicPath" path as
+    // we specified in the webpack config. When homepage is '.', default to serving
+    // from the root.
+    // remove last slash so user can land on `/test` instead of `/test/`
+    publicPath: paths.publicUrlOrPath.slice(0, -1),
     // WebpackDevServer is noisy by default so we emit custom message instead
     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
     quiet: true,
@@ -71,34 +90,41 @@ module.exports = function(proxy, allowedHost) {
     watchOptions: {
       ignored: ignoredFiles(paths.appSrc),
     },
-    // Enable HTTPS if the HTTPS environment variable is set to 'true'
-    https: protocol === 'https',
+    https: getHttpsConfig(),
     host,
     overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
+      index: paths.publicUrlOrPath,
     },
     public: allowedHost,
+    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
     before(app, server) {
-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
-      }
-
+      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
+      // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
       app.use(evalSourceMapMiddleware(server));
       // This lets us open files from the runtime error overlay.
       app.use(errorOverlayMiddleware());
 
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(app);
+      }
+    },
+    after(app) {
+      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+      app.use(redirectServedPath(paths.publicUrlOrPath));
+
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
+      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
   };
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.26.0",
+  "version": "2.32.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -10,7 +10,8 @@
     "demo": "node scripts/demo.js",
     "test": "node scripts/test.js",
     "coverage": "node scripts/test.js --coverage --watchAll=false",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "trypublish": "npm publish || true"
   },
   "repository": {
     "type": "git",
@@ -39,66 +40,70 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@svgr/webpack": "4.3.2",
-    "@typescript-eslint/eslint-plugin": "1.13.0",
-    "@typescript-eslint/parser": "1.13.0",
-    "babel-eslint": "10.0.2",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-named-asset-import": "^0.3.3",
-    "babel-preset-react-app": "^9.0.1",
-    "camelcase": "^5.2.0",
-    "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "2.1.1",
-    "dotenv": "6.2.0",
-    "dotenv-expand": "4.2.0",
-    "eslint": "^6.1.0",
+    "@babel/core": "7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
+    "@svgr/webpack": "5.4.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.8",
+    "@typescript-eslint/eslint-plugin": "^2.10.0",
+    "@typescript-eslint/parser": "^2.10.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-named-asset-import": "^0.3.6",
+    "babel-preset-react-app": "^9.1.2",
+    "camelcase": "^6.1.0",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "copy-webpack-plugin": "^5.1.2",
+    "css-loader": "5.0.0",
+    "dotenv": "8.2.0",
+    "dotenv-expand": "5.1.0",
+    "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.1",
-    "eslint-loader": "2.2.1",
-    "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "file-loader": "3.0.1",
-    "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-beta.5",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-flowtype": "4.7.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsx-a11y": "6.3.1",
+    "eslint-plugin-react": "7.21.4",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "file-loader": "6.1.1",
+    "fs-extra": "9.0.1",
+    "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
-    "is-wsl": "^1.1.0",
-    "jest": "24.8.0",
-    "jest-environment-jsdom-fourteen": "0.1.0",
-    "jest-resolve": "24.9.0",
-    "jest-watch-typeahead": "0.3.1",
-    "mini-css-extract-plugin": "0.5.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "pnp-webpack-plugin": "1.5.0",
-    "prettier": "^1.17.0",
-    "prettier-webpack-plugin": "^1.2.0",
-    "postcss-flexbugs-fixes": "4.1.0",
+    "jest": "26.6.0",
+    "jest-environment-jsdom-fourteen": "1.0.1",
+    "jest-resolve": "26.6.0",
+    "jest-watch-typeahead": "0.6.1",
+    "mini-css-extract-plugin": "1.1.0",
+    "optimize-css-assets-webpack-plugin": "5.0.4",
+    "pnp-webpack-plugin": "1.6.4",
+    "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "3.0.0",
-    "postcss-normalize": "7.0.1",
+    "postcss-normalize": "9.0.0",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.1",
-    "react": "^16.9.0",
-    "react-app-polyfill": "^1.0.2",
-    "react-dev-utils": "^9.0.3",
-    "react-dom": "^16.9.0",
-    "resolve": "1.12.0",
-    "resolve-url-loader": "3.1.0",
-    "sass-loader": "7.2.0",
-    "semver": "6.3.0",
-    "style-loader": "1.0.0",
-    "terser-webpack-plugin": "1.4.1",
-    "ts-pnp": "1.1.2",
-    "uglifyjs-webpack-plugin": "^2.1.2",
-    "url-loader": "2.1.0",
-    "webpack": "4.39.1",
-    "webpack-dev-server": "3.2.1",
-    "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "4.3.1"
+    "postcss-safe-parser": "5.0.2",
+    "prettier": "^1.19.1",
+    "prettier-webpack-plugin": "^1.2.0",
+    "react": "^16.14.0",
+    "react-app-polyfill": "^1.0.6",
+    "react-dev-utils": "^10.2.1",
+    "react-dom": "^16.14.0",
+    "resolve": "1.18.1",
+    "resolve-url-loader": "3.1.1",
+    "sass-loader": "10.0.3",
+    "semver": "7.3.2",
+    "style-loader": "2.0.0",
+    "terser-webpack-plugin": "4.2.3",
+    "ts-pnp": "1.2.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "4.1.1",
+    "webpack": "4.44.2",
+    "webpack-dev-server": "3.11.0",
+    "webpack-manifest-plugin": "2.2.0",
+    "workbox-webpack-plugin": "5.1.4"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -131,7 +136,9 @@
     "setupFiles": [
       "react-app-polyfill/jsdom"
     ],
-    "setupFilesAfterEnv": [],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
@@ -170,7 +177,8 @@
   },
   "babel": {
     "presets": [
-      "react-app"
+      "@babel/preset-env",
+      "@babel/preset-react"
     ],
     "plugins": [
       [

scripts/build.js

@@ -1,5 +1,3 @@
-'use strict';
-
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
@@ -94,7 +92,7 @@ checkBrowsers(paths.appPath, isInteractive)
       console.log();
 
       const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
+      const publicUrl = paths.publicUrlOrPath;
       const publicPath = config.output.publicPath;
       const buildFolder = path.relative(process.cwd(), paths.appBuild);
       printHostingInstructions(
@@ -106,9 +104,19 @@ checkBrowsers(paths.appPath, isInteractive)
       );
     },
     err => {
-      printBuildError(err);
-      throw new Error('Failed to compile');
-      process.exit(1);
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(
+          chalk.yellow(
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
+        );
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
     }
   )
   .catch(err => {
@@ -142,8 +150,18 @@ function build(previousFileSizes) {
         if (!err.message) {
           return reject(err);
         }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
+        }
+
         messages = formatWebpackMessages({
-          errors: [err.message],
+          errors: [errMessage],
           warnings: [],
         });
       } else {

scripts/demo.js

@@ -1,5 +1,3 @@
-'use strict';
-
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
@@ -94,7 +92,7 @@ checkBrowsers(paths.appPath, isInteractive)
       console.log();
 
       const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
+      const publicUrl = paths.publicUrlOrPath;
       const publicPath = config.output.publicPath;
       const buildFolder = path.relative(process.cwd(), paths.appDemo);
       printHostingInstructions(
@@ -106,9 +104,19 @@ checkBrowsers(paths.appPath, isInteractive)
       );
     },
     err => {
-      printBuildError(err);
-      throw new Error('Failed to compile');
-      process.exit(1);
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(
+          chalk.yellow(
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
+        );
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
     }
   )
   .catch(err => {
@@ -142,8 +150,18 @@ function build(previousFileSizes) {
         if (!err.message) {
           return reject(err);
         }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
+        }
+
         messages = formatWebpackMessages({
-          errors: [err.message],
+          errors: [errMessage],
           warnings: [],
         });
       } else {

scripts/start.js

@@ -1,4 +1,4 @@
-'use strict';
+
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'development';
@@ -81,7 +81,13 @@ checkBrowsers(paths.appPath, isInteractive)
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
     const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const urls = prepareUrls(protocol, HOST, port);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
     const devSocket = {
       warnings: warnings =>
         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
@@ -96,11 +102,15 @@ checkBrowsers(paths.appPath, isInteractive)
       urls,
       useYarn,
       useTypeScript,
+      tscCompileOnError,
       webpack,
     });
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic
+    );
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
@@ -139,11 +149,12 @@ checkBrowsers(paths.appPath, isInteractive)
           stats = stats.toJson();
       
           if (stats.errors && stats.errors.length > 0) {
-              return;
+              devServer.close();
+              process.exit(1);
           }
   
           console.warn("App started in test mode. Closing in 5 seconds.");
-          let closeTimeout = setTimeout(() => {
+          const closeTimeout = setTimeout(() => {
             clearTimeout(closeTimeout);
             devServer.close();
             process.exit();
@@ -158,6 +169,15 @@ checkBrowsers(paths.appPath, isInteractive)
         process.exit();
       });
     });
+
+    if (isInteractive || process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function() {
+        devServer.close();
+        process.exit();
+      });
+      process.stdin.resume();
+    }
   })
   .catch(err => {
     if (err && err.message) {

src/demo/BasicDemo.js

@@ -43,8 +43,8 @@ class Demo {
   }
 
   handleShift() {
-    let currentLayout = this.keyboard.options.layoutName;
-    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
 
     this.keyboard.setOptions({
       layoutName: shiftToggle

src/demo/ButtonThemeDemo.js

@@ -61,8 +61,8 @@ class Demo {
   }
 
   handleShift() {
-    let currentLayout = this.keyboard.options.layoutName;
-    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
 
     this.keyboard.setOptions({
       layoutName: shiftToggle

src/demo/DOMElementDemo.js

@@ -0,0 +1,31 @@
+import Keyboard from "../lib";
+import "./css/DOMElementDemo.css";
+
+class Demo {
+  constructor() {
+    const rootDOM =
+      document.querySelector("#root") || document.createElement("div");
+
+    const keyboard1DOM = document.createElement("div");
+    keyboard1DOM.className = "my-keyboard";
+
+    const keyboard2DOM = document.createElement("div");
+    keyboard2DOM.className = "my-keyboard2";
+
+    /**
+     * Demo Start
+     */
+    this.keyboard1 = new Keyboard(keyboard1DOM, {
+      onChange: input => console.log(this.keyboard1.keyboardDOMClass, input)
+    });
+
+    this.keyboard2 = new Keyboard(keyboard2DOM, {
+      onChange: input => console.log(this.keyboard2.keyboardDOMClass, input)
+    });
+
+    rootDOM.appendChild(keyboard1DOM);
+    rootDOM.appendChild(keyboard2DOM);
+  }
+}
+
+export default Demo;

src/demo/FullKeyboardDemo.js

@@ -27,7 +27,7 @@ class Demo {
     /**
      * Demo Start
      */
-    let commonKeyboardOptions = {
+    const commonKeyboardOptions = {
       onChange: input => this.onChange(input),
       onKeyPress: button => this.onKeyPress(button),
       theme: "simple-keyboard hg-theme-default hg-layout-default",
@@ -116,8 +116,8 @@ class Demo {
       }
     });
 
-    document.querySelector(".input").addEventListener("input", event => {
-      let input = document.querySelector(".input").value;
+    document.querySelector(".input").addEventListener("input", () => {
+      const input = document.querySelector(".input").value;
       this.keyboard.setInput(input);
     });
   }
@@ -145,8 +145,8 @@ class Demo {
   }
 
   handleShift() {
-    let currentLayout = this.keyboard.options.layoutName;
-    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
 
     this.keyboard.setOptions({
       layoutName: shiftToggle

src/demo/MultipleKeyboardsDestroyDemo.js

@@ -0,0 +1,92 @@
+import Keyboard from "../lib";
+import "./css/MultipleKeyboardsDestroyDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+
+    <input class="input2" placeholder="Tap on the virtual keyboard to start" />
+    <div class="keyboard2"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      debug: true
+    });
+
+    this.keyboard2 = new Keyboard(".keyboard2", {
+      theme: "simple-keyboard hg-theme-default",
+      onChange: input => this.onChange(input, "input2"),
+      onKeyPress: button => this.onKeyPress(button, "keyboard2"),
+      debug: true
+    });
+
+    console.log(this.keyboard);
+    setTimeout(() => {
+      this.keyboard.destroy();
+      document.querySelector(".input").value = "";
+    }, 10000);
+    setTimeout(() => {
+      this.keyboard = new Keyboard({
+        theme: "hg-theme-default myTheme",
+        onChange: input => this.onChange(input),
+        onKeyPress: button => this.onKeyPress(button),
+        debug: true,
+        onInit: () => {
+          console.log(
+            "Reinitialized simple-keyboard instance:",
+            this.keyboard.keyboardDOMClass
+          );
+        }
+      });
+    }, 15000);
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+
+    document.querySelector(".input2").addEventListener("input", event => {
+      this.keyboard2.setInput(event.target.value);
+    });
+  }
+
+  onChange(input, inputClass) {
+    document.querySelector(`.${inputClass || "input"}`).value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button, keyboardInstanceKey) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}")
+      this.handleShift(keyboardInstanceKey);
+  }
+
+  handleShift(keyboardInstanceKey) {
+    const keyboard = this[keyboardInstanceKey || "keyboard"];
+    const currentLayout = keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/RTLDemo.js

@@ -0,0 +1,72 @@
+import Keyboard from "../lib";
+import "./css/RTLDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      rtl: true,
+      layout: {
+        default: [
+          "\u05e5 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
+          "{tab} \u05e3 \u05df \u05e7 \u05e8 \u05d0 \u05d8 \u05d5 \u05ea \u05dd \u05e4 ] [ \\",
+          "{lock} \u05e9 \u05d3 \u05d2 \u05db \u05e2 \u05d9 \u05d7 \u05dc \u05da : ' {enter}",
+          "{shift} \u05d6 \u05e1 \u05d1 \u05d4 \u05e0 \u05de \u05e6 , . / {shift}",
+          ".com @ {space}"
+        ],
+        shift: [
+          "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
+          "{tab} Q W E R T Y U I O P { } |",
+          '{lock} A S D F G H J K L : " {enter}',
+          "{shift} Z X C V B N M < > ? {shift}",
+          ".com @ {space}"
+        ]
+      }
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input, input.split(""));
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/css/DOMElementDemo.css

@@ -0,0 +1,14 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.my-keyboard,
+.my-keyboard2 {
+  max-width: 850px;
+  margin-top: 20px;
+}

src/demo/css/MultipleKeyboardsDestroyDemo.css

@@ -0,0 +1,16 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}
+
+.simple-keyboard.hg-theme-default.myTheme {
+  background-color: #bde6c6;
+}

src/demo/css/RTLDemo.css

@@ -0,0 +1,13 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+  direction: rtl;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}

src/demo/index.js

@@ -4,8 +4,11 @@ import "./css/index.css";
  * Demos
  */
 import BasicDemo from "./BasicDemo";
-//import FullKeyboardDemo from "./FullKeyboardDemo";
+//import RTLDemo from "./RTLDemo";
 //import ButtonThemeDemo from "./ButtonThemeDemo";
+//import DOMElementDemo from "./DOMElementDemo";
+//import FullKeyboardDemo from "./FullKeyboardDemo";
+//import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
 
 /**
  * Selected demo

src/demo/tests/BasicDemo.test.js

@@ -1,26 +1,24 @@
-import TestUtility from '../../utils/TestUtility';
+import { setDOM } from '../../utils/TestUtility';
 import BasicDemo from '../BasicDemo';
 
-let testUtil = new TestUtility();
-
 it('Demo will load', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new BasicDemo();
+  new BasicDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
 
 it('Demo onChange will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   demo.onChange("test");
   
@@ -28,9 +26,9 @@ it('Demo onChange will work', () => {
 });
 
 it('Demo onChange will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -38,9 +36,9 @@ it('Demo onChange will work', () => {
 });
 
 it('Demo input change will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -49,9 +47,9 @@ it('Demo input change will work', () => {
 });
 
 it('Demo handleShiftButton will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   demo.keyboard.getButtonElement("{shift}")[0].onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");

src/demo/tests/ButtonThemeDemo.test.js

@@ -1,26 +1,24 @@
-import TestUtility from '../../utils/TestUtility';
+import { setDOM } from '../../utils/TestUtility';
 import ButtonThemeDemo from '../ButtonThemeDemo';
 
-let testUtil = new TestUtility();
-
 it('Demo will load', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new ButtonThemeDemo();
+  new ButtonThemeDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
 
 it('Demo onChange will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   demo.onChange("test");
   
@@ -28,9 +26,9 @@ it('Demo onChange will work', () => {
 });
 
 it('Demo onChange will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -38,9 +36,9 @@ it('Demo onChange will work', () => {
 });
 
 it('Demo input change will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -49,9 +47,9 @@ it('Demo input change will work', () => {
 });
 
 it('Demo handleShiftButton will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   demo.keyboard.getButtonElement("{shift}")[0].onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");
@@ -61,17 +59,17 @@ it('Demo handleShiftButton will work', () => {
 });
 
 it('Demo buttons will have proper attributes and classes', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
-  let buttonDOM = demo.keyboard.getButtonElement("b");
+  const buttonDOM = demo.keyboard.getButtonElement("b");
 
   console.log("buttonDOM", buttonDOM.outerHTML);
 
-  let hasAttribute = buttonDOM.hasAttribute("aria-label");
+  const hasAttribute = buttonDOM.hasAttribute("aria-label");
   expect(hasAttribute).toBeTruthy();
 
-  let hasClass = buttonDOM.classList.contains("my-button-outline");
+  const hasClass = buttonDOM.classList.contains("my-button-outline");
   expect(hasClass).toBeTruthy();
 });

src/demo/tests/DOMElementDemo.test.js

@@ -0,0 +1,22 @@
+import DOMElementDemo from '../DOMElementDemo';
+import Keyboard from '../../lib/components/Keyboard';
+
+it('Demo will load', () => {
+  new DOMElementDemo();
+});
+
+it('Demo keyboards will be instantiated', () => {
+  const demo = new DOMElementDemo();
+  expect(demo.keyboard1).toBeInstanceOf(Keyboard);
+  expect(demo.keyboard2).toBeInstanceOf(Keyboard);
+});
+
+it('Demo input change will work', () => {
+  const demo = new DOMElementDemo();
+
+  demo.keyboard1.getButtonElement("q").onclick();
+  demo.keyboard2.getButtonElement("e").onclick();
+  
+  expect(demo.keyboard1.getInput()).toBe("q");
+  expect(demo.keyboard2.getInput()).toBe("e");
+});

src/demo/tests/FullKeyboardDemo.test.js

@@ -1,26 +1,23 @@
-import TestUtility from '../../utils/TestUtility';
+import { setDOM } from '../../utils/TestUtility';
 import FullKeyboardDemo from '../FullKeyboardDemo';
 
-let testUtil = new TestUtility();
-
 it('Demo will load', () => {
-  testUtil.setDOM();
-
-  let demo = new FullKeyboardDemo();
+  setDOM();
+  new FullKeyboardDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
 
 it('Demo onChange will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   demo.onChange("test");
   
@@ -28,9 +25,9 @@ it('Demo onChange will work', () => {
 });
 
 it('Demo onChange will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -38,9 +35,9 @@ it('Demo onChange will work', () => {
 });
 
 it('Demo input change will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -50,9 +47,9 @@ it('Demo input change will work', () => {
 });
 
 it('Demo handleShiftButton will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   demo.keyboard.getButtonElement("{shiftleft}").onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");

src/demo/tests/MultipleKeyboardsDestroyDemo.test.js

@@ -0,0 +1,82 @@
+import { setDOM } from '../../utils/TestUtility';
+import MultipleKeyboardsDestroyDemo from '../MultipleKeyboardsDestroyDemo';
+
+jest.useFakeTimers();
+
+it('Demo will load', () => {
+  setDOM();
+
+  new MultipleKeyboardsDestroyDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  demo.onChange("test");
+  demo.keyboard2.getButtonElement("q").click();
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+  expect(document.body.querySelector('.input2').value).toBe("q");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+
+  document.body.querySelector('.input2').value = "test2";
+  document.body.querySelector('.input2').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+  expect(demo.keyboard2.getInput()).toBe("test2");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("default");
+});
+
+it('MultipleKeyboardsDestroyDemo will run all timers', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+  jest.runAllTimers();
+
+  expect(demo.keyboard.options.theme).toBe("hg-theme-default myTheme");
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("A").onclick();
+  expect(demo.keyboard.input.default).toBe("A");
+});

src/demo/tests/RTLDemo.test.js

@@ -0,0 +1,72 @@
+import { setDOM, removeRTLControls } from '../../utils/TestUtility';
+import RTLDemo from '../RTLDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new RTLDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.onChange("test");
+  
+  expect(removeRTLControls(document.body.querySelector('.input').value)).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement(".").onclick();
+  
+  expect(removeRTLControls(document.body.querySelector('.input').value)).toBe(".");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(removeRTLControls(demo.keyboard.getInput())).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("default");
+});
+
+it('RTL control caracters will be added to ', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement("פ").onclick();
+  demo.keyboard.getButtonElement("ם").onclick();
+  demo.keyboard.getButtonElement("[").onclick();
+
+  expect(demo.keyboard.getInput()).toBe("‫פם[‬");
+  expect(demo.keyboard.input[demo.keyboard.options.inputName]).toBe("פם[");
+});

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

@@ -1,7 +1,5 @@
 declare module 'simple-keyboard' {
   interface KeyboardLayoutObject {
-    default: string[];
-    shift?: any;
     [key: string]: string[];
   }
 
@@ -90,9 +88,9 @@ declare module 'simple-keyboard' {
     physicalKeyboardHighlight?: boolean;
 
     /**
-     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     * Presses keys highlighted by physicalKeyboardHighlight
      */
-    preventMouseDownDefault?: boolean;
+    physicalKeyboardHighlightPress?: boolean;
 
     /**
      * Define the text color that the physical keyboard highlighted key should have.
@@ -104,6 +102,26 @@ declare module 'simple-keyboard' {
      */
     physicalKeyboardHighlightBgColor?: string;
 
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+
+    /**
+     * Calling preventDefault for the mouseup events.
+     */
+    preventMouseUpDefault?: boolean;
+    
+    /**
+     * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseDownPropagation?: boolean;
+
+    /**
+     * Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseUpPropagation?: boolean;
+
     /**
      * Render buttons as a button element instead of a div element.
      */
@@ -139,6 +157,11 @@ declare module 'simple-keyboard' {
      */
     disableButtonHold?: boolean;
 
+    /**
+     * Adds unicode right-to-left control characters to input return values.
+     */
+    rtl?: boolean;
+
     /**
      * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
      */
@@ -180,13 +203,19 @@ declare module 'simple-keyboard' {
     onChangeAll?: (inputs: any) => any;
 
     /**
-     * Executes the callback function on key release.
+     * Module classes to be loaded by simple-keyboard.
      */
-    onKeyReleased?: () => void;
+    modules?: any[];
+
+    /**
+     * Module options can have any format
+     */
+    [name: string]: any;
   }
 
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
+    constructor(selector: HTMLDivElement, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
 
     /**
@@ -204,6 +233,29 @@ declare module 'simple-keyboard' {
      */
     caretPosition?: number;
 
+
+    /**
+     * caretPositionEnd
+     */
+    caretPositionEnd?: number;
+
+    /**
+     * Changes the internal caret position
+     * @param {number} position The caret's start position
+     * @param {number} positionEnd The caret's end position
+     */
+    setCaretPosition(position: number, positionEnd?: number): void;
+
+    /**
+     * Retrieves the internal caret position
+     */
+    getCaretPosition(): number;
+
+    /**
+     * Retrieves the internal end caret position
+     */
+    getCaretPositionEnd(): number;
+
     /**
      * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
      * @param  {string} buttons List of buttons to select (separated by a space).

src/lib/components/Keyboard.css

@@ -1,12 +1,8 @@
-body,
-html {
-  margin: 0;
-  padding: 0;
-}
-
-.simple-keyboard {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
-    Helvetica, Arial, "Lucida Grande", sans-serif;
+/**
+ * simple-keyboard
+ * Theme: hg-theme-default
+ */
+.hg-theme-default {
   width: 100%;
   user-select: none;
   box-sizing: border-box;
@@ -14,50 +10,56 @@ html {
   touch-action: manipulation;
 }
 
-.simple-keyboard .hg-row {
-  display: flex;
+.hg-theme-default .hg-button span {
+  pointer-events: none;
 }
 
-.simple-keyboard .hg-row:not(:last-child) {
-  margin-bottom: 5px;
+/* When using option "useButtonTag" */
+.hg-theme-default button.hg-button {
+  border-width: 0;
+  outline: 0;
+  font-size: inherit;
 }
 
-.simple-keyboard .hg-row .hg-button:not(:last-child) {
-  margin-right: 5px;
+.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;
 }
 
-.simple-keyboard .hg-row .hg-button-container {
-  margin-right: 5px;
-}
-
-.simple-keyboard .hg-row > div:last-child {
-  margin-right: 0;
-}
-
-.simple-keyboard .hg-row .hg-button-container {
-  display: flex;
-}
-
-.simple-keyboard .hg-button {
+.hg-theme-default .hg-button {
   display: inline-block;
   flex-grow: 1;
   cursor: pointer;
 }
 
-.simple-keyboard .hg-button span {
-  pointer-events: none;
+.hg-theme-default .hg-row {
+  display: flex;
 }
 
-/**
- * hg-theme-default theme
- */
-.simple-keyboard.hg-theme-default {
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 5px;
-  border-radius: 5px;
+.hg-theme-default .hg-row:not(:last-child) {
+  margin-bottom: 5px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button {
+.hg-theme-default .hg-row .hg-button:not(:last-child) {
+  margin-right: 5px;
+}
+
+.hg-theme-default .hg-row .hg-button-container {
+  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: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
   height: 40px;
   border-radius: 5px;
@@ -69,16 +71,14 @@ html {
   display: flex;
   align-items: center;
   justify-content: center;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* When using option "useButtonTag" */
-.simple-keyboard button.hg-button {
-  border-width: 0;
-  outline: 0;
-  font-size: inherit;
+.hg-theme-default .hg-button.hg-activeButton {
+  background: #efefef;
 }
 
-.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
+.hg-theme-default.hg-layout-numeric .hg-button {
   width: 33.3%;
   height: 60px;
   align-items: center;
@@ -86,35 +86,35 @@ html {
   justify-content: center;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {
+.hg-theme-default .hg-button.hg-button-numpadadd {
   height: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {
+.hg-theme-default .hg-button.hg-button-numpadenter {
   height: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {
+.hg-theme-default .hg-button.hg-button-numpad0 {
   width: 105px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-com {
+.hg-theme-default .hg-button.hg-button-com {
   max-width: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
+.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
   max-width: 45px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
+.hg-theme-default .hg-button.hg-selectedButton {
   background: rgba(5, 25, 70, 0.53);
   color: white;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
   max-width: 82px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
   max-width: 60px;
 }

src/lib/components/Keyboard.js

@@ -1,8 +1,8 @@
 import "./Keyboard.css";
 
 // Services
+import { getDefaultLayout } from "../services/KeyboardLayout";
 import PhysicalKeyboard from "../services/PhysicalKeyboard";
-import KeyboardLayout from "../services/KeyboardLayout";
 import Utilities from "../services/Utilities";
 
 /**
@@ -18,11 +18,9 @@ class SimpleKeyboard {
    * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
    */
   constructor(...params) {
-    let keyboardDOMQuery =
-      typeof params[0] === "string" ? params[0] : ".simple-keyboard";
-    let options = typeof params[0] === "object" ? params[0] : params[1];
-
-    if (!options) options = {};
+    const { keyboardDOMClass, keyboardDOM, options = {} } = this.handleParams(
+      params
+    );
 
     /**
      * Initializing Utilities
@@ -30,6 +28,7 @@ class SimpleKeyboard {
     this.utilities = new Utilities({
       getOptions: this.getOptions,
       getCaretPosition: this.getCaretPosition,
+      getCaretPositionEnd: this.getCaretPositionEnd,
       dispatch: this.dispatch
     });
 
@@ -38,10 +37,15 @@ class SimpleKeyboard {
      */
     this.caretPosition = null;
 
+    /**
+     * Caret position end
+     */
+    this.caretPositionEnd = null;
+
     /**
      * Processing options
      */
-    this.keyboardDOM = document.querySelector(keyboardDOMQuery);
+    this.keyboardDOM = keyboardDOM;
 
     /**
      * @type {object}
@@ -50,8 +54,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.
@@ -60,9 +64,13 @@ class SimpleKeyboard {
      * @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
      * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
      * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
-     * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
+     * @property {boolean} physicalKeyboardHighlightPress Presses keys highlighted by physicalKeyboardHighlight
      * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
      * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
+     * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
+     * @property {boolean} preventMouseUpDefault Calling preventDefault for the mouseup events.
+     * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     * @property {boolean} stopMouseUpPropagation Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
      * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
      * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
      * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
@@ -76,7 +84,9 @@ class SimpleKeyboard {
      * @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.
      * @property {function} destroy Clears keyboard listeners and DOM elements.
      * @property {boolean} disableButtonHold Disable button hold action.
+     * @property {boolean} rtl Adds unicode right-to-left control characters to input return values.
      * @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";
@@ -100,7 +110,7 @@ class SimpleKeyboard {
      * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.
      * @example
      * // To get entered input
-     * let input = keyboard.getInput();
+     * const input = keyboard.getInput();
      *
      * // To clear entered input.
      * keyboard.clearInput();
@@ -115,7 +125,7 @@ class SimpleKeyboard {
     /**
      * @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
      */
-    this.keyboardDOMClass = keyboardDOMQuery.split(".").join("");
+    this.keyboardDOMClass = keyboardDOMClass;
 
     /**
      * @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: "{enter}").
@@ -129,15 +139,13 @@ class SimpleKeyboard {
     if (!window["SimpleKeyboardInstances"])
       window["SimpleKeyboardInstances"] = {};
 
-    window["SimpleKeyboardInstances"][
-      this.utilities.camelCase(this.keyboardDOMClass)
-    ] = this;
+    this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
+    window["SimpleKeyboardInstances"][this.currentInstanceName] = this;
 
     /**
      * Instance vars
      */
     this.allKeyboardInstances = window["SimpleKeyboardInstances"];
-    this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
     this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
     this.isFirstKeyboardInstance =
       this.keyboardInstanceNames[0] === this.currentInstanceName;
@@ -155,7 +163,7 @@ class SimpleKeyboard {
      */
     if (this.keyboardDOM) this.render();
     else {
-      console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
+      console.warn(`".${keyboardDOMClass}" was not found in the DOM.`);
       throw new Error("KEYBOARD_DOM_ERROR");
     }
 
@@ -166,18 +174,77 @@ class SimpleKeyboard {
     this.loadModules();
   }
 
+  /**
+   * parseParams
+   */
+  handleParams = params => {
+    let keyboardDOMClass;
+    let keyboardDOM;
+    let options;
+
+    /**
+     * If first parameter is a string:
+     * Consider it as an element's class
+     */
+    if (typeof params[0] === "string") {
+      keyboardDOMClass = params[0].split(".").join("");
+      keyboardDOM = document.querySelector(`.${keyboardDOMClass}`);
+      options = params[1];
+
+      /**
+       * If first parameter is an HTMLDivElement
+       * Consider it as the keyboard DOM element
+       */
+    } else if (params[0] instanceof HTMLDivElement) {
+      /**
+       * This element must have a class, otherwise throw
+       */
+      if (!params[0].className) {
+        console.warn("Any DOM element passed as parameter must have a class.");
+        throw new Error("KEYBOARD_DOM_CLASS_ERROR");
+      }
+
+      keyboardDOMClass = params[0].className.split(" ")[0];
+      keyboardDOM = params[0];
+      options = params[1];
+
+      /**
+       * Otherwise, search for .simple-keyboard DOM element
+       */
+    } else {
+      keyboardDOMClass = "simple-keyboard";
+      keyboardDOM = document.querySelector(`.${keyboardDOMClass}`);
+      options = params[0];
+    }
+
+    return {
+      keyboardDOMClass,
+      keyboardDOM,
+      options
+    };
+  };
+
   /**
    * Getters
    */
   getOptions = () => this.options;
   getCaretPosition = () => this.caretPosition;
+  getCaretPositionEnd = () => this.caretPositionEnd;
+
+  /**
+   * Setters
+   */
+  setCaretPosition(position, endPosition) {
+    this.caretPosition = position;
+    this.caretPositionEnd = endPosition || position;
+  }
 
   /**
    * Handles clicks made to keyboard buttons
    * @param  {string} button The button's layout name.
    */
   handleButtonClicked(button) {
-    let debug = this.options.debug;
+    const debug = this.options.debug;
 
     /**
      * Ignoring placeholder buttons
@@ -193,10 +260,11 @@ class SimpleKeyboard {
     if (!this.input[this.options.inputName])
       this.input[this.options.inputName] = "";
 
-    let updatedInput = this.utilities.getUpdatedInput(
+    const updatedInput = this.utilities.getUpdatedInput(
       button,
       this.input[this.options.inputName],
-      this.caretPosition
+      this.caretPosition,
+      this.caretPositionEnd
     );
 
     if (
@@ -222,27 +290,37 @@ class SimpleKeyboard {
         button,
         this.input[this.options.inputName],
         this.caretPosition,
+        this.caretPositionEnd,
         true
       );
 
-      if (debug) console.log("Input changed:", this.input);
+      if (debug) console.log("Input changed:", this.getAllInputs());
+
+      if (this.options.debug) {
+        console.log(
+          "Caret at: ",
+          this.getCaretPosition(),
+          this.getCaretPositionEnd(),
+          `(${this.keyboardDOMClass})`
+        );
+      }
 
       /**
        * Enforce syncInstanceInputs, if set
        */
-      if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
+      if (this.options.syncInstanceInputs) this.syncInstanceInputs();
 
       /**
        * Calling onChange
        */
       if (typeof this.options.onChange === "function")
-        this.options.onChange(this.input[this.options.inputName]);
+        this.options.onChange(this.getInput(this.options.inputName, true));
 
       /**
        * Calling onChangeAll
        */
       if (typeof this.options.onChangeAll === "function")
-        this.options.onChangeAll(this.input);
+        this.options.onChangeAll(this.getAllInputs());
     }
 
     if (debug) {
@@ -261,28 +339,37 @@ class SimpleKeyboard {
     if (this.options.preventMouseDownDefault) e.preventDefault();
     if (this.options.stopMouseDownPropagation) e.stopPropagation();
 
+    /**
+     * Add active class
+     */
+    if (e) e.target.classList.add(this.activeButtonClass);
+
+    if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
+    if (this.holdTimeout) clearTimeout(this.holdTimeout);
+
     /**
      * @type {boolean} Whether the mouse is being held onKeyPress
      */
     this.isMouseHold = true;
 
-    if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
-
-    if (this.holdTimeout) clearTimeout(this.holdTimeout);
-
     /**
      * @type {object} Time to wait until a key hold is detected
      */
     if (!this.options.disableButtonHold) {
       this.holdTimeout = setTimeout(() => {
         if (
-          this.isMouseHold &&
-          ((!button.includes("{") && !button.includes("}")) ||
-            button === "{delete}" ||
-            button === "{backspace}" ||
-            button === "{bksp}" ||
-            button === "{space}" ||
-            button === "{tab}")
+          (this.isMouseHold &&
+            // TODO: This needs to be configurable through options
+            ((!button.includes("{") && !button.includes("}")) ||
+              button === "{delete}" ||
+              button === "{backspace}" ||
+              button === "{bksp}" ||
+              button === "{space}" ||
+              button === "{tab}")) ||
+          button === "{arrowright}" ||
+          button === "{arrowleft}" ||
+          button === "{arrowup}" ||
+          button === "{arrowdown}"
         ) {
           if (this.options.debug) console.log("Button held:", button);
 
@@ -296,7 +383,22 @@ class SimpleKeyboard {
   /**
    * Handles button mouseup
    */
-  handleButtonMouseUp(button) {
+  handleButtonMouseUp(button = null, e = null) {
+    if (e) {
+      /**
+       * Handle event options
+       */
+      if (this.options.preventMouseUpDefault) e.preventDefault();
+      if (this.options.stopMouseUpPropagation) e.stopPropagation();
+    }
+
+    /**
+     * Remove active class
+     */
+    this.recurseButtons(buttonElement => {
+      buttonElement.classList.remove(this.activeButtonClass);
+    });
+
     this.isMouseHold = false;
     if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
 
@@ -307,6 +409,16 @@ class SimpleKeyboard {
       this.options.onKeyReleased(button);
   }
 
+  /**
+   * Handles container mousedown
+   */
+  handleKeyboardContainerMouseDown(e) {
+    /**
+     * Handle event options
+     */
+    if (this.options.preventMouseDownDefault) e.preventDefault();
+  }
+
   /**
    * Handles button hold
    */
@@ -333,7 +445,7 @@ class SimpleKeyboard {
   syncInstanceInputs() {
     this.dispatch(instance => {
       instance.replaceInput(this.input);
-      instance.caretPosition = this.caretPosition;
+      instance.setCaretPosition(this.caretPosition, this.caretPositionEnd);
     });
   }
 
@@ -348,27 +460,50 @@ class SimpleKeyboard {
     /**
      * Reset caretPosition
      */
-    this.caretPosition = 0;
+    this.setCaretPosition(0);
 
     /**
      * Enforce syncInstanceInputs, if set
      */
-    if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
+    if (this.options.syncInstanceInputs) this.syncInstanceInputs();
   }
 
   /**
    * Get the keyboard’s input (You can also get it from the onChange prop).
    * @param  {string} [inputName] optional - the internal input to select
    */
-  getInput(inputName) {
+  getInput(inputName, skipSync = false) {
     inputName = inputName || this.options.inputName;
 
     /**
      * Enforce syncInstanceInputs, if set
      */
-    if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
+    if (this.options.syncInstanceInputs && !skipSync) this.syncInstanceInputs();
 
-    return this.input[inputName];
+    if (this.options.rtl) {
+      // Remove existing control chars
+      const inputWithoutRTLControl = this.input[inputName]
+        .replace("\u202B", "")
+        .replace("\u202C", "");
+
+      return "\u202B" + inputWithoutRTLControl + "\u202C";
+    } else {
+      return this.input[inputName];
+    }
+  }
+
+  /**
+   * Get all simple-keyboard inputs
+   */
+  getAllInputs() {
+    const output = {};
+    const inputNames = Object.keys(this.input);
+
+    inputNames.forEach(inputName => {
+      output[inputName] = this.getInput(inputName, true);
+    });
+
+    return output;
   }
 
   /**
@@ -383,7 +518,7 @@ class SimpleKeyboard {
     /**
      * Enforce syncInstanceInputs, if set
      */
-    if (this.options.syncInstanceInputs) this.syncInstanceInputs(this.input);
+    if (this.options.syncInstanceInputs) this.syncInstanceInputs();
   }
 
   /**
@@ -398,19 +533,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])
+    );
   }
 
   /**
@@ -425,14 +578,13 @@ class SimpleKeyboard {
       if (this.options.debug) {
         console.log("inputName changed. caretPosition reset.");
       }
-
-      this.caretPosition = null;
+      this.setCaretPosition(null);
     }
   }
 
   /**
    * Remove all keyboard rows and reset keyboard values.
-   * Used interally between re-renders.
+   * Used internally between re-renders.
    */
   clear() {
     this.keyboardDOM.innerHTML = "";
@@ -478,7 +630,7 @@ class SimpleKeyboard {
           if (buttonTheme.class.split(" ").includes(classNameItem)) {
             classNameFound = true;
 
-            let buttonThemeArray = buttonTheme.buttons.split(" ");
+            const buttonThemeArray = buttonTheme.buttons.split(" ");
             if (!buttonThemeArray.includes(button)) {
               classNameFound = true;
               buttonThemeArray.push(button);
@@ -526,8 +678,8 @@ class SimpleKeyboard {
       Array.isArray(this.options.buttonTheme) &&
       this.options.buttonTheme.length
     ) {
-      let buttonArray = buttons.split(" ");
-      buttonArray.forEach((button, key) => {
+      const buttonArray = buttons.split(" ");
+      buttonArray.forEach(button => {
         this.options.buttonTheme.map((buttonTheme, index) => {
           /**
            * If className is set, we affect the buttons only for that class
@@ -537,7 +689,7 @@ class SimpleKeyboard {
             (className && className.includes(buttonTheme.class)) ||
             !className
           ) {
-            let filteredButtonArray = buttonTheme.buttons
+            const filteredButtonArray = buttonTheme.buttons
               .split(" ")
               .filter(item => item !== button);
 
@@ -567,7 +719,7 @@ class SimpleKeyboard {
   getButtonElement(button) {
     let output;
 
-    let buttonArr = this.buttonElements[button];
+    const buttonArr = this.buttonElements[button];
     if (buttonArr) {
       if (buttonArr.length > 1) {
         output = buttonArr;
@@ -584,7 +736,7 @@ class SimpleKeyboard {
    * by checking if the provided inputPattern passes
    */
   inputPatternIsValid(inputVal) {
-    let inputPatternRaw = this.options.inputPattern;
+    const inputPatternRaw = this.options.inputPattern;
     let inputPattern;
 
     /**
@@ -597,7 +749,7 @@ class SimpleKeyboard {
     }
 
     if (inputPattern && inputVal) {
-      let didInputMatch = inputPattern.test(inputVal);
+      const didInputMatch = inputPattern.test(inputVal);
 
       if (this.options.debug) {
         console.log(
@@ -668,6 +820,7 @@ class SimpleKeyboard {
   /**
    * Event Handler: TouchEnd
    */
+  /* istanbul ignore next */
   handleTouchEnd(event) {
     this.caretEventHandler(event);
   }
@@ -682,6 +835,10 @@ class SimpleKeyboard {
     }
 
     this.dispatch(instance => {
+      const isKeyboard =
+        event.target === instance.keyboardDOM ||
+        (event.target && instance.keyboardDOM.contains(event.target));
+
       if (instance.isMouseHold) {
         instance.isMouseHold = false;
       }
@@ -694,48 +851,113 @@ class SimpleKeyboard {
          * Tracks current cursor position
          * As keys are pressed, text will be added/removed at that position within the input.
          */
-        instance.caretPosition = event.target.selectionStart;
+        instance.setCaretPosition(
+          event.target.selectionStart,
+          event.target.selectionEnd
+        );
 
         if (instance.options.debug) {
           console.log(
             "Caret at: ",
-            event.target.selectionStart,
-            event.target.tagName.toLowerCase(),
+            instance.getCaretPosition(),
+            instance.getCaretPositionEnd(),
+            event && event.target.tagName.toLowerCase(),
             `(${instance.keyboardDOMClass})`
           );
         }
-      } else if (instance.options.disableCaretPositioning) {
+      } else if (instance.options.disableCaretPositioning || !isKeyboard) {
         /**
          * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
          */
-        instance.caretPosition = null;
+        instance.setCaretPosition(null);
       }
     });
   }
 
+  /**
+   * Execute an operation on each button
+   */
+  recurseButtons(fn) {
+    if (!fn) return false;
+
+    Object.keys(this.buttonElements).forEach(buttonName =>
+      this.buttonElements[buttonName].forEach(fn)
+    );
+  }
+
   /**
    * Destroy keyboard listeners and DOM elements
    */
   destroy() {
+    if (this.options.debug)
+      console.log(
+        `Destroying simple-keyboard instance: ${this.currentInstanceName}`
+      );
+
     /**
-     * Remove listeners
+     * Remove document listeners
      */
     document.removeEventListener("keyup", this.handleKeyUp);
     document.removeEventListener("keydown", this.handleKeyDown);
     document.removeEventListener("mouseup", this.handleMouseUp);
     document.removeEventListener("touchend", this.handleTouchEnd);
+    document.onpointerup = null;
+    document.ontouchend = null;
+    document.ontouchcancel = null;
+    document.onmouseup = null;
 
     /**
-     * Clear DOM
+     * Remove buttons
+     */
+    let deleteButton = buttonElement => {
+      buttonElement.onpointerdown = null;
+      buttonElement.onpointerup = null;
+      buttonElement.onpointercancel = null;
+      buttonElement.ontouchstart = null;
+      buttonElement.ontouchend = null;
+      buttonElement.ontouchcancel = null;
+      buttonElement.onclick = null;
+      buttonElement.onmousedown = null;
+      buttonElement.onmouseup = null;
+
+      buttonElement.remove();
+      buttonElement = null;
+    };
+
+    this.recurseButtons(deleteButton);
+
+    this.recurseButtons = null;
+    deleteButton = null;
+
+    /**
+     * Remove wrapper events
+     */
+    this.keyboardDOM.onpointerdown = null;
+    this.keyboardDOM.ontouchstart = null;
+    this.keyboardDOM.onmousedown = null;
+
+    /**
+     * Clearing keyboard wrapper
      */
     this.clear();
+
+    /**
+     * Remove instance
+     */
+    window["SimpleKeyboardInstances"][this.currentInstanceName] = null;
+    delete window["SimpleKeyboardInstances"][this.currentInstanceName];
+
+    /**
+     * Reset initialized flag
+     */
+    this.initialized = false;
   }
 
   /**
    * Process buttonTheme option
    */
   getButtonThemeClasses(button) {
-    let buttonTheme = this.options.buttonTheme;
+    const buttonTheme = this.options.buttonTheme;
     let buttonClasses = [];
 
     if (Array.isArray(buttonTheme)) {
@@ -743,10 +965,11 @@ class SimpleKeyboard {
         if (
           themeObj.class &&
           typeof themeObj.class === "string" &&
-          (themeObj.buttons && typeof themeObj.buttons === "string")
+          themeObj.buttons &&
+          typeof themeObj.buttons === "string"
         ) {
-          let themeObjClasses = themeObj.class.split(" ");
-          let themeObjButtons = themeObj.buttons.split(" ");
+          const themeObjClasses = themeObj.class.split(" ");
+          const themeObjButtons = themeObj.buttons.split(" ");
 
           if (themeObjButtons.includes(button)) {
             buttonClasses = [...buttonClasses, ...themeObjClasses];
@@ -767,17 +990,19 @@ class SimpleKeyboard {
    * Process buttonAttributes option
    */
   setDOMButtonAttributes(button, callback) {
-    let buttonAttributes = this.options.buttonAttributes;
+    const buttonAttributes = this.options.buttonAttributes;
 
     if (Array.isArray(buttonAttributes)) {
       buttonAttributes.forEach(attrObj => {
         if (
           attrObj.attribute &&
           typeof attrObj.attribute === "string" &&
-          (attrObj.value && typeof attrObj.value === "string") &&
-          (attrObj.buttons && typeof attrObj.buttons === "string")
+          attrObj.value &&
+          typeof attrObj.value === "string" &&
+          attrObj.buttons &&
+          typeof attrObj.buttons === "string"
         ) {
-          let attrObjButtons = attrObj.buttons.split(" ");
+          const attrObjButtons = attrObj.buttons.split(" ");
 
           if (attrObjButtons.includes(button)) {
             callback(attrObj.attribute, attrObj.value);
@@ -909,7 +1134,7 @@ class SimpleKeyboard {
    */
   onModulesLoaded() {
     if (typeof this.options.onModulesLoaded === "function")
-      this.options.onModulesLoaded();
+      this.options.onModulesLoaded(this);
   }
 
   /**
@@ -926,19 +1151,22 @@ class SimpleKeyboard {
    */
   loadModules() {
     if (Array.isArray(this.options.modules)) {
-      this.options.modules.forEach(Module => {
-        let module = new Module();
+      this.options.modules.forEach(KeyboardModule => {
+        const keyboardModule = new KeyboardModule();
 
         /* istanbul ignore next */
-        if (module.constructor.name && module.constructor.name !== "Function") {
-          let classStr = `module-${this.utilities.camelCase(
-            module.constructor.name
+        if (
+          keyboardModule.constructor.name &&
+          keyboardModule.constructor.name !== "Function"
+        ) {
+          const classStr = `module-${this.utilities.camelCase(
+            keyboardModule.constructor.name
           )}`;
           this.keyboardPluginClasses =
             this.keyboardPluginClasses + ` ${classStr}`;
         }
 
-        module.init(this);
+        keyboardModule.init(this);
       });
 
       this.keyboardPluginClasses =
@@ -974,12 +1202,12 @@ class SimpleKeyboard {
     containerStartIndexes,
     containerEndIndexes
   ) {
-    let rowDOMArray = Array.from(rowDOM.children);
+    const rowDOMArray = Array.from(rowDOM.children);
     let removedElements = 0;
 
     if (rowDOMArray.length) {
       containerStartIndexes.forEach((startIndex, arrIndex) => {
-        let endIndex = containerEndIndexes[arrIndex];
+        const endIndex = containerEndIndexes[arrIndex];
 
         /**
          * If there exists a respective end index
@@ -994,21 +1222,21 @@ class SimpleKeyboard {
          * This is since the removal of buttons to place a single button container
          * results in a modified array size
          */
-        let updated_startIndex = startIndex - removedElements;
-        let updated_endIndex = endIndex - removedElements;
+        const updated_startIndex = startIndex - removedElements;
+        const updated_endIndex = endIndex - removedElements;
 
         /**
          * Create button container
          */
-        let containerDOM = document.createElement("div");
+        const containerDOM = document.createElement("div");
         containerDOM.className += "hg-button-container";
-        let containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;
+        const containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;
         containerDOM.setAttribute("data-skUID", containerUID);
 
         /**
          * Taking elements due to be inserted into container
          */
-        let containedElements = rowDOMArray.splice(
+        const containedElements = rowDOMArray.splice(
           updated_startIndex,
           updated_endIndex - updated_startIndex + 1
         );
@@ -1049,6 +1277,17 @@ class SimpleKeyboard {
     return rowDOM;
   }
 
+  /**
+   * getKeyboardClassString
+   */
+  getKeyboardClassString = (...baseDOMClasses) => {
+    const keyboardClasses = [this.keyboardDOMClass, ...baseDOMClasses].filter(
+      DOMClass => !!DOMClass
+    );
+
+    return keyboardClasses.join(" ");
+  };
+
   /**
    * Renders rows and buttons as per options
    */
@@ -1070,23 +1309,28 @@ class SimpleKeyboard {
      */
     this.beforeRender();
 
-    let layoutClass = `hg-layout-${this.options.layoutName}`;
-    let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
-    let useTouchEvents = this.options.useTouchEvents || false;
-    let useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
-    let useMouseEvents = this.options.useMouseEvents || false;
-    let disableRowButtonContainers = this.options.disableRowButtonContainers;
+    const layoutClass = `hg-layout-${this.options.layoutName}`;
+    const layout = this.options.layout || getDefaultLayout();
+    const useTouchEvents = this.options.useTouchEvents || false;
+    const useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
+    const useMouseEvents = this.options.useMouseEvents || false;
+    const disableRowButtonContainers = this.options.disableRowButtonContainers;
 
     /**
      * Adding themeClass, layoutClass to keyboardDOM
      */
-    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses} ${useTouchEventsClass}`;
+    this.keyboardDOM.className = this.getKeyboardClassString(
+      this.options.theme,
+      layoutClass,
+      this.keyboardPluginClasses,
+      useTouchEventsClass
+    );
 
     /**
      * Iterating through each row
      */
     layout[this.options.layoutName].forEach((row, rIndex) => {
-      let rowArray = row.split(" ");
+      const rowArray = row.split(" ");
 
       /**
        * Creating empty row
@@ -1097,8 +1341,8 @@ class SimpleKeyboard {
       /**
        * Tracking container indicators in rows
        */
-      let containerStartIndexes = [];
-      let containerEndIndexes = [];
+      const containerStartIndexes = [];
+      const containerEndIndexes = [];
 
       /**
        * Iterating through each button in row
@@ -1107,14 +1351,17 @@ class SimpleKeyboard {
         /**
          * Check if button has a container indicator
          */
-        let buttonHasContainerStart =
+        const buttonHasContainerStart =
           !disableRowButtonContainers &&
-          button.includes("[") &&
-          button.length > 1;
-        let buttonHasContainerEnd =
+          typeof button === "string" &&
+          button.length > 1 &&
+          button.indexOf("[") === 0;
+
+        const buttonHasContainerEnd =
           !disableRowButtonContainers &&
-          button.includes("]") &&
-          button.length > 1;
+          typeof button === "string" &&
+          button.length > 1 &&
+          button.indexOf("]") === button.length - 1;
 
         /**
          * Save container start index, if applicable
@@ -1140,8 +1387,8 @@ class SimpleKeyboard {
         /**
          * Processing button options
          */
-        let fctBtnClass = this.utilities.getButtonClass(button);
-        let buttonDisplayName = this.utilities.getButtonDisplayName(
+        const fctBtnClass = this.utilities.getButtonClass(button);
+        const buttonDisplayName = this.utilities.getButtonDisplayName(
           button,
           this.options.display,
           this.options.mergeDisplay
@@ -1150,8 +1397,8 @@ class SimpleKeyboard {
         /**
          * Creating button
          */
-        let buttonType = this.options.useButtonTag ? "button" : "div";
-        let buttonDOM = document.createElement(buttonType);
+        const buttonType = this.options.useButtonTag ? "button" : "div";
+        const buttonDOM = document.createElement(buttonType);
         buttonDOM.className += `hg-button ${fctBtnClass}`;
 
         /**
@@ -1166,6 +1413,8 @@ class SimpleKeyboard {
           buttonDOM.setAttribute(attribute, value);
         });
 
+        this.activeButtonClass = "hg-activeButton";
+
         /**
          * Handle button click event
          */
@@ -1182,8 +1431,12 @@ class SimpleKeyboard {
             this.handleButtonClicked(button);
             this.handleButtonMouseDown(button, e);
           };
-          buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
-          buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
+          buttonDOM.onpointerup = e => {
+            this.handleButtonMouseUp(button, e);
+          };
+          buttonDOM.onpointercancel = e => {
+            this.handleButtonMouseUp(button, e);
+          };
         } else {
           /**
            * Fallback for browsers not supporting PointerEvents
@@ -1196,8 +1449,12 @@ class SimpleKeyboard {
               this.handleButtonClicked(button);
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
-            buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
+            buttonDOM.ontouchend = e => {
+              this.handleButtonMouseUp(button, e);
+            };
+            buttonDOM.ontouchcancel = e => {
+              this.handleButtonMouseUp(button, e);
+            };
           } else {
             /**
              * Handle mouse events
@@ -1206,8 +1463,12 @@ class SimpleKeyboard {
               this.isMouseHold = false;
               this.handleButtonClicked(button);
             };
-            buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
-            buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
+            buttonDOM.onmousedown = e => {
+              this.handleButtonMouseDown(button, e);
+            };
+            buttonDOM.onmouseup = e => {
+              this.handleButtonMouseUp(button, e);
+            };
           }
         }
 
@@ -1220,13 +1481,13 @@ class SimpleKeyboard {
          * Adding unique id
          * Since there's no limit on spawning same buttons, the unique id ensures you can style every button
          */
-        let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
+        const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
         buttonDOM.setAttribute("data-skBtnUID", buttonUID);
 
         /**
          * Adding button label to button
          */
-        let buttonSpanDOM = document.createElement("span");
+        const buttonSpanDOM = document.createElement("span");
         buttonSpanDOM.innerHTML = buttonDisplayName;
         buttonDOM.appendChild(buttonSpanDOM);
 
@@ -1271,7 +1532,7 @@ class SimpleKeyboard {
       this.initialized = true;
 
       /**
-       * Handling onpointerup
+       * Handling parent events
        */
       /* istanbul ignore next */
       if (
@@ -1280,17 +1541,24 @@ class SimpleKeyboard {
         !useMouseEvents
       ) {
         document.onpointerup = () => this.handleButtonMouseUp();
+        this.keyboardDOM.onpointerdown = e =>
+          this.handleKeyboardContainerMouseDown(e);
       } else if (useTouchEvents) {
         /**
          * Handling ontouchend, ontouchcancel
          */
         document.ontouchend = () => this.handleButtonMouseUp();
         document.ontouchcancel = () => this.handleButtonMouseUp();
+
+        this.keyboardDOM.ontouchstart = e =>
+          this.handleKeyboardContainerMouseDown(e);
       } else if (!useTouchEvents) {
         /**
          * Handling mouseup
          */
         document.onmouseup = () => this.handleButtonMouseUp();
+        this.keyboardDOM.onmousedown = e =>
+          this.handleKeyboardContainerMouseDown(e);
       }
 
       /**

src/lib/services/KeyboardLayout.js

@@ -1,29 +1,18 @@
-/**
- * Keyboard Layout Service
- */
-class KeyboardLayout {
-  /**
-   * Get default simple-keyboard layout
-   * @return {object} The default layout (US-QWERTY)
-   */
-  static getDefaultLayout() {
-    return {
-      default: [
-        "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
-        "{tab} q w e r t y u i o p [ ] \\",
-        "{lock} a s d f g h j k l ; ' {enter}",
-        "{shift} z x c v b n m , . / {shift}",
-        ".com @ {space}"
-      ],
-      shift: [
-        "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
-        "{tab} Q W E R T Y U I O P { } |",
-        '{lock} A S D F G H J K L : " {enter}',
-        "{shift} Z X C V B N M < > ? {shift}",
-        ".com @ {space}"
-      ]
-    };
-  }
-}
-
-export default KeyboardLayout;
+export const getDefaultLayout = () => {
+  return {
+    default: [
+      "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
+      "{tab} q w e r t y u i o p [ ] \\",
+      "{lock} a s d f g h j k l ; ' {enter}",
+      "{shift} z x c v b n m , . / {shift}",
+      ".com @ {space}"
+    ],
+    shift: [
+      "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
+      "{tab} Q W E R T Y U I O P { } |",
+      '{lock} A S D F G H J K L : " {enter}',
+      "{shift} Z X C V B N M < > ? {shift}",
+      ".com @ {space}"
+    ]
+  };
+};

src/lib/services/PhysicalKeyboard.js

@@ -21,33 +21,58 @@ class PhysicalKeyboard {
   }
 
   handleHighlightKeyDown(event) {
-    let options = this.getOptions();
-    let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+    const options = this.getOptions();
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch(instance => {
-      let buttonDOM =
+      const buttonDOM =
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
       if (buttonDOM) {
         buttonDOM.style.backgroundColor =
-          options.physicalKeyboardHighlightBgColor || "#9ab4d0";
+          options.physicalKeyboardHighlightBgColor || "#dadce4";
         buttonDOM.style.color =
-          options.physicalKeyboardHighlightTextColor || "white";
+          options.physicalKeyboardHighlightTextColor || "black";
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger mousedown
+           */
+          (
+            buttonDOM.onpointerdown ||
+            buttonDOM.onmousedown ||
+            buttonDOM.ontouchstart ||
+            Utilities.noop
+          )();
+        }
       }
     });
   }
 
   handleHighlightKeyUp(event) {
-    let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+    const options = this.getOptions();
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch(instance => {
-      let buttonDOM =
+      const buttonDOM =
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
       if (buttonDOM && buttonDOM.removeAttribute) {
         buttonDOM.removeAttribute("style");
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger mousedown
+           */
+          (
+            buttonDOM.onpointerup ||
+            buttonDOM.onmouseup ||
+            buttonDOM.ontouchend ||
+            Utilities.noop
+          )();
+        }
       }
     });
   }

src/lib/services/Utilities.js

@@ -5,9 +5,10 @@ class Utilities {
   /**
    * Creates an instance of the Utility service
    */
-  constructor({ getOptions, getCaretPosition, dispatch }) {
+  constructor({ getOptions, getCaretPosition, getCaretPositionEnd, dispatch }) {
     this.getOptions = getOptions;
     this.getCaretPosition = getCaretPosition;
+    this.getCaretPositionEnd = getCaretPositionEnd;
     this.dispatch = dispatch;
 
     /**
@@ -23,11 +24,11 @@ class Utilities {
    * @return {string} The classes to be added to the button
    */
   getButtonClass(button) {
-    let buttonTypeClass =
+    const buttonTypeClass =
       button.includes("{") && button.includes("}") && button !== "{//}"
         ? "functionBtn"
         : "standardBtn";
-    let buttonWithoutBraces = button.replace("{", "").replace("}", "");
+    const buttonWithoutBraces = button.replace("{", "").replace("}", "");
     let buttonNormalized = "";
 
     if (buttonTypeClass !== "standardBtn")
@@ -125,19 +126,28 @@ class Utilities {
    * @param  {string} button The button's layout name
    * @param  {string} input The input string
    * @param  {number} caretPos The cursor's current position
+   * @param  {number} caretPosEnd The cursor's current end position
    * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
-  getUpdatedInput(button, input, caretPos, moveCaret) {
-    let options = this.getOptions();
+  getUpdatedInput(
+    button,
+    input,
+    caretPos,
+    caretPosEnd = caretPos,
+    moveCaret = false
+  ) {
+    const options = this.getOptions();
+    const commonParams = [caretPos, caretPosEnd, moveCaret];
+
     let output = input;
 
     if (
       (button === "{bksp}" || button === "{backspace}") &&
       output.length > 0
     ) {
-      output = this.removeAt(output, caretPos, moveCaret);
+      output = this.removeAt(output, ...commonParams);
     } else if (button === "{space}")
-      output = this.addStringAt(output, " ", caretPos, moveCaret);
+      output = this.addStringAt(output, " ", ...commonParams);
     else if (
       button === "{tab}" &&
       !(
@@ -145,12 +155,12 @@ class Utilities {
         options.tabCharOnTab === false
       )
     ) {
-      output = this.addStringAt(output, "\t", caretPos, moveCaret);
+      output = this.addStringAt(output, "\t", ...commonParams);
     } else if (
       (button === "{enter}" || button === "{numpadenter}") &&
       options.newLineOnEnter
     )
-      output = this.addStringAt(output, "\n", caretPos, moveCaret);
+      output = this.addStringAt(output, "\n", ...commonParams);
     else if (
       button.includes("numpad") &&
       Number.isInteger(Number(button[button.length - 2]))
@@ -158,23 +168,22 @@ class Utilities {
       output = this.addStringAt(
         output,
         button[button.length - 2],
-        caretPos,
-        moveCaret
+        ...commonParams
       );
     } else if (button === "{numpaddivide}")
-      output = this.addStringAt(output, "/", caretPos, moveCaret);
+      output = this.addStringAt(output, "/", ...commonParams);
     else if (button === "{numpadmultiply}")
-      output = this.addStringAt(output, "*", caretPos, moveCaret);
+      output = this.addStringAt(output, "*", ...commonParams);
     else if (button === "{numpadsubtract}")
-      output = this.addStringAt(output, "-", caretPos, moveCaret);
+      output = this.addStringAt(output, "-", ...commonParams);
     else if (button === "{numpadadd}")
-      output = this.addStringAt(output, "+", caretPos, moveCaret);
+      output = this.addStringAt(output, "+", ...commonParams);
     else if (button === "{numpaddecimal}")
-      output = this.addStringAt(output, ".", caretPos, moveCaret);
+      output = this.addStringAt(output, ".", ...commonParams);
     else if (button === "{" || button === "}")
-      output = this.addStringAt(output, button, caretPos, moveCaret);
+      output = this.addStringAt(output, button, ...commonParams);
     else if (!button.includes("{") && !button.includes("}"))
-      output = this.addStringAt(output, button, caretPos, moveCaret);
+      output = this.addStringAt(output, button, ...commonParams);
 
     return output;
   }
@@ -186,10 +195,10 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPos(length, minus) {
-    let newCaretPos = this.updateCaretPosAction(length, minus);
+    const newCaretPos = this.updateCaretPosAction(length, minus);
 
     this.dispatch(instance => {
-      instance.caretPosition = newCaretPos;
+      instance.setCaretPosition(newCaretPos);
     });
   }
 
@@ -200,7 +209,7 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPosAction(length, minus) {
-    let options = this.getOptions();
+    const options = this.getOptions();
     let caretPosition = this.getCaretPosition();
 
     if (minus) {
@@ -220,17 +229,23 @@ class Utilities {
    * Adds a string to the input at a given position
    *
    * @param  {string} source The source input
-   * @param  {string} string The string to add
+   * @param  {string} str The string to add
    * @param  {number} position The (cursor) position where the string should be added
    * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
-  addStringAt(source, string, position, moveCaret) {
+  addStringAt(
+    source,
+    str,
+    position = source.length,
+    positionEnd = source.length,
+    moveCaret = false
+  ) {
     let output;
 
     if (!position && position !== 0) {
-      output = source + string;
+      output = source + str;
     } else {
-      output = [source.slice(0, position), string, source.slice(position)].join(
+      output = [source.slice(0, position), str, source.slice(positionEnd)].join(
         ""
       );
 
@@ -238,7 +253,7 @@ class Utilities {
        * Avoid caret position change when maxLength is set
        */
       if (!this.isMaxLengthReached()) {
-        if (moveCaret) this.updateCaretPos(string.length);
+        if (moveCaret) this.updateCaretPos(str.length);
       }
     }
 
@@ -252,43 +267,56 @@ class Utilities {
    * @param  {number} position The (cursor) position from where the characters should be removed
    * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
-  removeAt(source, position, moveCaret) {
-    let caretPosition = this.getCaretPosition();
-
-    if (caretPosition === 0) {
+  removeAt(
+    source,
+    position = source.length,
+    positionEnd = source.length,
+    moveCaret = false
+  ) {
+    if (position === 0 && positionEnd === 0) {
       return source;
     }
 
     let output;
-    let prevTwoChars;
-    let emojiMatched;
-    let emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
 
-    /**
-     * Emojis are made out of two characters, so we must take a custom approach to trim them.
-     * For more info: https://mathiasbynens.be/notes/javascript-unicode
-     */
-    if (position && position >= 0) {
-      prevTwoChars = source.substring(position - 2, position);
-      emojiMatched = prevTwoChars.match(emojiMatchedReg);
+    if (position === positionEnd) {
+      let prevTwoChars;
+      let emojiMatched;
+      const emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
 
-      if (emojiMatched) {
-        output = source.substr(0, position - 2) + source.substr(position);
-        if (moveCaret) this.updateCaretPos(2, true);
+      /**
+       * Emojis are made out of two characters, so we must take a custom approach to trim them.
+       * For more info: https://mathiasbynens.be/notes/javascript-unicode
+       */
+      if (position && position >= 0) {
+        prevTwoChars = source.substring(position - 2, position);
+        emojiMatched = prevTwoChars.match(emojiMatchedReg);
+
+        if (emojiMatched) {
+          output = source.substr(0, position - 2) + source.substr(position);
+          if (moveCaret) this.updateCaretPos(2, true);
+        } else {
+          output = source.substr(0, position - 1) + source.substr(position);
+          if (moveCaret) this.updateCaretPos(1, true);
+        }
       } else {
-        output = source.substr(0, position - 1) + source.substr(position);
-        if (moveCaret) this.updateCaretPos(1, true);
+        prevTwoChars = source.slice(-2);
+        emojiMatched = prevTwoChars.match(emojiMatchedReg);
+
+        if (emojiMatched) {
+          output = source.slice(0, -2);
+          if (moveCaret) this.updateCaretPos(2, true);
+        } else {
+          output = source.slice(0, -1);
+          if (moveCaret) this.updateCaretPos(1, true);
+        }
       }
     } else {
-      prevTwoChars = source.slice(-2);
-      emojiMatched = prevTwoChars.match(emojiMatchedReg);
-
-      if (emojiMatched) {
-        output = source.slice(0, -2);
-        if (moveCaret) this.updateCaretPos(2, true);
-      } else {
-        output = source.slice(0, -1);
-        if (moveCaret) this.updateCaretPos(1, true);
+      output = source.slice(0, position) + source.slice(positionEnd);
+      if (moveCaret) {
+        this.dispatch(instance => {
+          instance.setCaretPosition(position);
+        });
       }
     }
 
@@ -301,10 +329,10 @@ class Utilities {
    * @param  {string} updatedInput
    */
   handleMaxLength(inputObj, updatedInput) {
-    let options = this.getOptions();
-    let maxLength = options.maxLength;
-    let currentInput = inputObj[options.inputName];
-    let condition = currentInput.length === maxLength;
+    const options = this.getOptions();
+    const maxLength = options.maxLength;
+    const currentInput = inputObj[options.inputName];
+    const condition = updatedInput.length - 1 >= maxLength;
 
     if (
       /**
@@ -334,7 +362,7 @@ class Utilities {
     }
 
     if (typeof maxLength === "object") {
-      let condition = currentInput.length === maxLength[options.inputName];
+      const condition = currentInput.length === maxLength[options.inputName];
 
       if (options.debug) {
         console.log("maxLength (obj) reached:", condition);
@@ -376,8 +404,9 @@ class Utilities {
    */
 
   static bindMethods(myClass, instance) {
-    for (let myMethod of Object.getOwnPropertyNames(myClass.prototype)) {
-      let excludeMethod =
+    // eslint-disable-next-line no-unused-vars
+    for (const myMethod of Object.getOwnPropertyNames(myClass.prototype)) {
+      const excludeMethod =
         myMethod === "constructor" || myMethod === "bindMethods";
       if (!excludeMethod) {
         instance[myMethod] = instance[myMethod].bind(instance);
@@ -388,19 +417,21 @@ class Utilities {
   /**
    * Transforms an arbitrary string to camelCase
    *
-   * @param  {string} string The string to transform.
+   * @param  {string} str The string to transform.
    */
-  camelCase(string) {
-    if (!string) return false;
+  camelCase(str) {
+    if (!str) return false;
 
-    return string
+    return str
       .toLowerCase()
       .trim()
       .split(/[.\-_\s]/g)
-      .reduce((string, word) =>
-        word.length ? string + word[0].toUpperCase() + word.slice(1) : string
+      .reduce((str, word) =>
+        word.length ? str + word[0].toUpperCase() + word.slice(1) : str
       );
   }
+
+  static noop = () => {};
 }
 
 export default Utilities;

src/lib/services/tests/PhysicalKeyboard.test.js

@@ -1,12 +1,10 @@
 import Keyboard from '../../components/Keyboard';
-import TestUtility from '../../../utils/TestUtility';
-
-let testUtil = new TestUtility();
+import { setDOM } from '../../../utils/TestUtility';
 
 it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -20,9 +18,9 @@ it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', ()
 });
 
 it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: false
   });
 
@@ -36,9 +34,9 @@ it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight',
 });
 
 it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -52,9 +50,9 @@ it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
 });
 
 it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -68,9 +66,9 @@ it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () =
 });
 
 it('PhysicalKeyboard keyup will be handle special buttons', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -84,9 +82,9 @@ it('PhysicalKeyboard keyup will be handle special buttons', () => {
 });
 
 it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true,
     debug: true
   });
@@ -101,9 +99,9 @@ it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
 });
 
 it('PhysicalKeyboard will work with F1-F12 keys', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true,
     debug: true
   });
@@ -115,4 +113,57 @@ it('PhysicalKeyboard will work with F1-F12 keys', () => {
       tagName: "input"
     }
   }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress (touch)', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    useTouchEvents: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
 });

src/lib/services/tests/Utilities.test.js

@@ -1,12 +1,10 @@
 import Keyboard from '../../components/Keyboard';
-import TestUtility from '../../../utils/TestUtility';
-
-let testUtil = new TestUtility();
+import { setDOM, clearDOM, testLayoutFctButtons } from '../../../utils/TestUtility';
 
 it('Keyboard mergeDisplay will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     mergeDisplay: true,
     display: {
       "q": "qreplaced"
@@ -17,154 +15,154 @@ it('Keyboard mergeDisplay will work', () => {
 });
 
 it('Keyboard function buttons will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
   new Keyboard();
   
-  testUtil.testLayoutFctButtons((fctBtnCount, fctBtnHasOnclickCount) => {
+  testLayoutFctButtons((fctBtnCount, fctBtnHasOnclickCount) => {
     expect(fctBtnCount).toBe(fctBtnHasOnclickCount);
   });
 });
 
 it('Keyboard {bksp} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{bksp}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{bksp}", "test");
   
   expect(output).toBe("tes");
 });
 
 it('Keyboard {space} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{space}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{space}", "test");
   
   expect(output).toBe("test ");
 });
 
 it('Keyboard {tab} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{tab}", "test");
   
   expect(output).toBe("test\t");
 });
 
 it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     tabCharOnTab: false
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{tab}", "test");
   
   expect(output).toBe("test");
 });
 
 it('Keyboard {enter} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{enter}", "test");
   
   expect(output).toBe("test");
 });
 
 it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     newLineOnEnter: true
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{enter}", "test");
   
   expect(output).toBe("test\n");
 });
 
 it('Keyboard {numpadX} buttons will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   for(let i = 0;i<=9;i++){
-    let output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test");
+    const output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test");
     expect(output).toBe(`test${i}`);
   }
 });
 
 it('Keyboard {numpaddivide} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test");
   
   expect(output).toBe("test/");
 });
 
 it('Keyboard {numpadmultiply} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test");
   
   expect(output).toBe("test*");
 });
 
 it('Keyboard {numpadsubtract} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test");
   
   expect(output).toBe("test-");
 });
 
 it('Keyboard {numpadadd} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
   
   expect(output).toBe("test+");
 });
 
 it('Keyboard {numpadadd} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
   
   expect(output).toBe("test+");
 });
 
 it('Keyboard {numpaddecimal} button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test");
   
   expect(output).toBe("test.");
 });
 
 it('Keyboard custom function buttons will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     layout: {
       default: [
         "{randombuttontest}"
@@ -172,83 +170,83 @@ it('Keyboard custom function buttons will work', () => {
     }
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test");
   
   expect(output).toBe("test");
   expect(keyboard.getButtonElement("{randombuttontest}").onclick).toBeTruthy();
 });
 
 it('Keyboard "{" button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{", "test");
+  const output = keyboard.utilities.getUpdatedInput("{", "test");
   
   expect(output).toBe("test{");
 });
 
 it('Keyboard "}" button will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("}", "test");
+  const output = keyboard.utilities.getUpdatedInput("}", "test");
   
   expect(output).toBe("test}");
 });
 
 it('Keyboard standard button will affect input', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   for (let i = 65; i <= 90; i++) {
-    let char = String.fromCharCode(i);
-    let output = keyboard.utilities.getUpdatedInput(char, "test");
+    const char = String.fromCharCode(i);
+    const output = keyboard.utilities.getUpdatedInput(char, "test");
     expect(output).toBe(`test${char}`);
   }
 });
 
 it('Keyboard updateCaretPos will work with minus', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     syncInstanceInputs: true
   });
 
-  keyboard.caretPosition = 5;
+  keyboard.setCaretPosition(5);
   keyboard.utilities.updateCaretPos(2, true);
 
   expect(keyboard.caretPosition).toBe(3);
 });
 
 it('Keyboard updateCaretPos will work with minus', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  keyboard.caretPosition = 5;
+  keyboard.setCaretPosition(5);
   keyboard.utilities.updateCaretPos(2, true);
 
   expect(keyboard.caretPosition).toBe(3);
 });
 
 it('Keyboard updateCaretPos will work with plus', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  keyboard.caretPosition = 5;
+  keyboard.setCaretPosition(5);
   keyboard.utilities.updateCaretPos(2);
 
   expect(keyboard.caretPosition).toBe(7);
 });
 
 it('Keyboard addStringAt will work with debug', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
@@ -258,14 +256,14 @@ it('Keyboard addStringAt will work with debug', () => {
 });
 
 it('Keyboard addStringAt will work with position', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
   keyboard.setInput("test");
-  keyboard.caretPosition = 4;
+  keyboard.setCaretPosition(5);
 
   keyboard.getButtonElement("q").onclick();
 
@@ -273,40 +271,41 @@ it('Keyboard addStringAt will work with position', () => {
 });
 
 it('Keyboard addStringAt will respect maxLength', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true,
     maxLength: 4
   });
 
   keyboard.setInput("test");
-  keyboard.caretPosition = 4;
+
+  keyboard.setCaretPosition(4);
 
   keyboard.utilities.handleMaxLength(keyboard.input, "testq")
-  keyboard.utilities.addStringAt("test", "q", 4);
+  keyboard.utilities.addStringAt("test", "q", 4, 4);
 
   expect(keyboard.caretPosition).toBe(4);
 });
 
 it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
   keyboard.setInput("test");
 
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "test")
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "test")
 
   expect(output).toBeFalsy();
 });
 
 it('Keyboard handleMaxLength will work with object maxLength', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: {
       default: 4
     }
@@ -314,15 +313,15 @@ it('Keyboard handleMaxLength will work with object maxLength', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
 
 it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: {
       default: 4
     },
@@ -331,15 +330,15 @@ it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
 
 it('Keyboard handleMaxLength will return false if obj maxLength not reached', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: {
       default: 7
     }
@@ -347,147 +346,242 @@ it('Keyboard handleMaxLength will return false if obj maxLength not reached', ()
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
 
 
 it('Keyboard handleMaxLength will work without debug', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: 4
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
 
 
 it('Keyboard handleMaxLength will work with numeric maxLength', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: 3
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
-  expect(output).toBeFalsy();
+  expect(output).toBe(true);
 });
 
 it('Keyboard handleMaxLength wont work with non numeric or object maxLength', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: "wrong"
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
 
 it('Keyboard handleMaxLength wont work with non numeric or object maxLength (with debug)', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: "wrong",
     debug: true
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
 
 it('Keyboard isMaxLengthReached will work', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: 5
   });
 
-  let output = keyboard.utilities.isMaxLengthReached();
+  const output = keyboard.utilities.isMaxLengthReached();
 
   expect(output).toBeFalsy();
 });
 
 it('Keyboard removeAt will exit out on caretPosition:0', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.setInput("test");
-  keyboard.caretPosition = 0;
+
+  keyboard.setCaretPosition(0);
   keyboard.utilities.removeAt(keyboard.getInput(), 0);
   expect(keyboard.getInput()).toBe("test");
 
   keyboard.setInput("test");
-  keyboard.caretPosition = 5;
-  keyboard.utilities.removeAt(keyboard.getInput(), 0, true);
-  expect(keyboard.caretPosition).toBe(4);
+
+  keyboard.setCaretPosition(5);
+  keyboard.utilities.removeAt(keyboard.getInput(), 0, 0, true);
+  expect(keyboard.caretPosition).toBe(5);
 });
 
 it('Keyboard removeAt will remove multi-byte unicodes with caretPos>0', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  keyboard.caretPosition = 6;
-  let output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6);
+  keyboard.setCaretPosition(6);
+  let output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, 6);
   expect(output).toBe("test");
 
-  keyboard.caretPosition = 6;
-  output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, true);
+  keyboard.setCaretPosition(6);
+  output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, 6, true);
   expect(keyboard.caretPosition).toBe(4);
 });
 
 it('Keyboard removeAt will not remove multi-byte unicodes with caretPos:0', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
   let output = keyboard.utilities.removeAt("\uD83D\uDE00");
   expect(output).toBeFalsy();
 
-  output = keyboard.utilities.removeAt("\uD83D\uDE00", 0,  true);
-  expect(output).toBeFalsy();
+  output = keyboard.utilities.removeAt("\uD83D\uDE00", 0, 0, true);
+  expect(output).toBe("\uD83D\uDE00");
+});
+
+it('Keyboard removeAt will propagate caretPosition', () => {
+  clearDOM();
+
+  document.body.innerHTML = `
+    <div class="simple-keyboard"></div>
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard = new Keyboard({ useMouseEvents: true });
+  const keyboard2 = new Keyboard('.keyboard2');
+
+  keyboard.input.default = "hello";
+  keyboard2.input.default = "world"
+  
+  keyboard.setCaretPosition(1);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  
+  keyboard.setCaretPosition(1, 3);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(3);
+
+  keyboard.getButtonElement('{bksp}').onclick();
+  
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard2.getCaretPosition()).toBe(1);
+
+  expect(keyboard.getInput()).toBe('hlo');
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  expect(keyboard2.getCaretPositionEnd()).toBe(1);
+});
+
+it('Keyboard removeAt will propagate caretPosition in a syncInstanceInputs setting', () => {
+  clearDOM();
+
+  document.body.innerHTML = `
+    <div class="simple-keyboard"></div>
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard = new Keyboard({ useMouseEvents: true, syncInstanceInputs: true });
+  const keyboard2 = new Keyboard('.keyboard2');
+
+  keyboard.input.default = "hello"
+  
+  keyboard.setCaretPosition(1);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  
+  keyboard.setCaretPosition(1, 3);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(3);
+
+  keyboard.getButtonElement('{bksp}').onclick();
+  
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard2.getCaretPosition()).toBe(1);
+
+  expect(keyboard.getInput()).toBe('hlo');
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  expect(keyboard2.getCaretPositionEnd()).toBe(1);
 });
 
 it('Keyboard removeAt will remove regular strings', () => {
-  testUtil.setDOM();
+  setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
-  keyboard.caretPosition = 6;
-  let output = keyboard.utilities.removeAt("testie", 6);
+  keyboard.setCaretPosition(6);
+  let output = keyboard.utilities.removeAt("testie", 6, 6);
   expect(output).toBe("testi");
 
-  keyboard.caretPosition = 6;
-  output = keyboard.utilities.removeAt("testie", 6, true);
+  keyboard.setCaretPosition(6);
+  output = keyboard.utilities.removeAt("testie", 6, 6, true);
   expect(keyboard.caretPosition).toBe(5);
 });
 
+it('Keyboard removeAt will work with unset or start caretPosition', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  let output = keyboard.utilities.removeAt("test");
+  expect(output).toBe("tes");
+
+  output = keyboard.utilities.removeAt("test", null, null);
+  expect(output).toBe("tes");
+
+  output = keyboard.utilities.removeAt("😀", null, null);
+  expect(output).toBe("");
+
+  /**
+   * Will also work with moveCaret
+   */
+  keyboard.setCaretPosition(3);
+  output = keyboard.utilities.removeAt("test", null, null, true);
+  expect(output).toBe("tes");
+  expect(keyboard.getCaretPosition()).toBe(2);
+
+  keyboard.setCaretPosition(2);
+  output = keyboard.utilities.removeAt("😀", null, null, true);
+  expect(output).toBe("");
+  expect(keyboard.getCaretPosition()).toBe(0);
+});
+
 it('Keyboard will work with custom (and weird) class', () => {
-  testUtil.setDOM("my--weird--class");
-  let keyboard = new Keyboard(".my--weird--class");
+  setDOM("my--weird--class");
+  const keyboard = new Keyboard(".my--weird--class");
   expect(keyboard.keyboardDOMClass).toBe("my--weird--class");
 });
 
 it('Keyboard camelCase will work with empty strings', () => {
-  testUtil.setDOM();
-  let keyboard = new Keyboard();
+  setDOM();
+  const keyboard = new Keyboard();
   expect(keyboard.utilities.camelCase()).toBeFalsy();
-});
+});

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

src/utils/TestUtility.js

@@ -1,12 +1,11 @@
 /**
  * Test Utility Functions
  */
-export default class TestUtility {
   /**
-   * Set's a basic DOM structure to test in
+   * Sets a basic DOM structure to test in
    */
-  setDOM = (divClass) => {
-    this.clear();
+  export const setDOM = (divClass) => {
+    clearDOM();
     const wrapperDOM = document.createElement('div');
     wrapperDOM.setAttribute("id", "root");
 
@@ -20,19 +19,33 @@ export default class TestUtility {
   /**
    * Clears DOM structure
    */
-  clear = () => {
+  export const clearDOM = () => {
     document.body.innerHTML = "";
   }
 
+  /**
+   * Trigger pointerup
+   */
+  export const triggerDocumentPointerUp = (e = {}) => {
+    document.dispatchEvent(new MouseEvent('mouseup', e));
+  };
+
+  /**
+   * Trigger pointerdown
+   */
+  export const triggerDocumentPointerDown = (e = {}) => {
+    document.dispatchEvent(new MouseEvent('mousedown', e));
+  };
+ 
   /**
    * Test if standard buttons respect maxLength and do input a value
    */
-  testLayoutStdButtons = (keyboard) => {
+  export const testLayoutStdButtons = (keyboard) => {
     let stdBtnCount = 0;
     let fullInput = '';
 
-    this.iterateButtons((button) => {
-      let label = button.getAttribute("data-skbtn");
+    iterateButtons((button) => {
+      const label = button.getAttribute("data-skbtn");
 
       if(label.includes("{"))
         return false;
@@ -41,7 +54,7 @@ export default class TestUtility {
       button.onclick();
 
       // Recording fullInput, bypasses maxLength
-      fullInput = keyboard.utilities.getUpdatedInput(label, fullInput, keyboard.options, null);
+      fullInput = keyboard.utilities.getUpdatedInput(label, fullInput);
 
       stdBtnCount += label.length;
     });
@@ -76,12 +89,12 @@ export default class TestUtility {
   /**
    * Test if function buttons are interactive (have an onclick)
    */
-  testLayoutFctButtons = (callback) => {
+  export const testLayoutFctButtons = (callback) => {
     let fctBtnCount = 0;
     let fctBtnHasOnclickCount = 0;
 
-    this.iterateButtons((button) => {
-      let label = button.getAttribute("data-skbtn");
+    iterateButtons((button) => {
+      const label = button.getAttribute("data-skbtn");
 
       if(!label.includes("{") && !label.includes("}"))
         return false;
@@ -100,8 +113,8 @@ export default class TestUtility {
   /**
    * Iterates on the keyboard buttons
    */
-  iterateButtons = (callback, selector) => {
-    let rows = document.body.querySelector(selector || '.simple-keyboard').children;
+  export const iterateButtons = (callback, selector) => {
+    const rows = document.body.querySelector(selector || '.simple-keyboard').children;
 
     Array.from(rows).forEach(row => {
       Array.from(row.children).forEach((button) => {
@@ -109,4 +122,10 @@ export default class TestUtility {
       });
     });
   }
-}
+
+  /**
+   * Remove RTL control chars
+   */
+  export const removeRTLControls = (input) => {
+    return input.replace("\u202B", "").replace("\u202C", "");
+  }