Add build for modern browsers (index.modern.js)

Bump css-loader from 6.2.0 to 6.4.0

.github/workflows/main.yml

@@ -1,8 +1,6 @@
 name: Build
 on:
   push:
-    branches:
-      - master
     paths-ignore:
       - README.md
       - .gitignore
@@ -11,6 +9,7 @@ on:
 jobs:
   build:
     runs-on: ${{ matrix.os }}
+    if: contains(github.ref, 'master')
     strategy:
       matrix:
         node-version: [12.x]

.github/workflows/mirroring.yml

@@ -1,15 +1,19 @@
 name: Mirroring
 
-on: [push, delete]
+on:
+  push:
+    branches:
+      - master
+  delete:
+    branches:
+      - master
 
 jobs:
   mirroring:
     runs-on: ubuntu-18.04
     steps:
-    - uses: actions/checkout@v1
-    - uses: pixta-dev/repository-mirroring-action@v1
-      with:
-        target_repo_url:
-          git@gitlab.com:hodgef/simple-keyboard.git
-        ssh_private_key:
-          ${{ secrets.GL_KEY }}
+      - uses: actions/checkout@v1
+      - uses: pixta-dev/repository-mirroring-action@v1
+        with:
+          target_repo_url: git@gitlab.com:hodgef/simple-keyboard.git
+          ssh_private_key: ${{ secrets.GL_KEY }}

.github/workflows/publish.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: 12
       - run: npm install
       - run: npm run test -- --coverage --watchAll=false
-        
+
       - name: Setup GIT
         run: |
           git reset --hard
@@ -28,8 +28,8 @@ jobs:
           git config user.email "$GH_EMAIL"
           git config user.name "Francisco Hodge"
         env:
-            GH_EMAIL: ${{secrets.GH_EMAIL}}
-          
+          GH_EMAIL: ${{secrets.GH_EMAIL}}
+
       - name: Bump version
         run: |
           git reset --hard
@@ -40,10 +40,10 @@ jobs:
           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}}
+          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.github/workflows/pull_request.yml

@@ -1,23 +1,24 @@
 name: Build PR (Standard)
-on: [pull_request]
+
+on: pull_request
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
-    if: ${{ github.actor != 'dependabot[bot]' && !contains(github.event.pull_request.labels.*.name, 'dependencies') }}
+    if: ${{ github.actor != 'dependabot[bot]' }}
     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 coverage
-      env:
-        CI: true
+      - 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 coverage
+        env:
+          CI: true

.github/workflows/pull_request_dependabot.yml

@@ -1,38 +1,48 @@
 name: Build PR (Dependabot)
 
-on:
-  pull_request_target
+on: pull_request_target
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
-    if: contains(github.event.pull_request.labels.*.name, 'dependencies')
+    if: ${{ github.actor == 'dependabot[bot]' }}
     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 coverage
-      env:
-        CI: true
-    - name: Merge PR
-      if: success()
-      uses: "pascalgn/automerge-action@v0.14.2"
-      env:
-        GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
-        MERGE_LABELS: "dependencies"
-    - name: Reject PR
-      if: failure()
-      uses: peter-evans/close-pull@v1
-      with:
-        pull-request-number: ${{github.event.number}}
-        comment: PR closed due to failing tests
-        delete-branch: true
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - 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 coverage
+        env:
+          CI: true
+      - name: Merge PR
+        if: success()
+        uses: "actions/github-script@v2"
+        with:
+          github-token: "${{ secrets.GH_KEY }}"
+          script: |
+            const pullRequest = context.payload.pull_request
+            const repository = context.repo
+
+            await github.pulls.merge({
+              merge_method: "merge",
+              owner: repository.owner,
+              pull_number: pullRequest.number,
+              repo: repository.repo,
+            })
+      - name: Reject PR
+        if: failure()
+        uses: peter-evans/close-pull@v1
+        with:
+          pull-request-number: ${{github.event.number}}
+          comment: "Closing PR due to failing tests."
+          delete-branch: true

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v3.2.32
+ *   simple-keyboard v3.3.0
  *   https://github.com/hodgef/simple-keyboard
  *
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.

build/types/index.modern.d.ts

@@ -0,0 +1,2 @@
+import SimpleKeyboard from "./components/Keyboard";
+export default SimpleKeyboard;

package.json

@@ -1,12 +1,13 @@
 {
   "name": "simple-keyboard",
-  "version": "3.2.32",
+  "version": "3.3.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/types/index.d.ts",
   "scripts": {
     "start": "webpack serve --config webpack.config.demo.js",
-    "build": "webpack && tsc",
+    "build": "webpack && tsc && npm run build-modern",
+    "build-modern": "webpack --config webpack.config.modern.js",
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
     "prepare": "npm run build",
@@ -39,38 +40,38 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.14.8",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-typescript": "^7.14.6",
+    "@babel/plugin-transform-typescript": "^7.15.8",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.14.8",
-    "@types/jest": "^26.0.24",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
-    "autoprefixer": "^10.3.1",
+    "@babel/preset-env": "^7.15.8",
+    "@types/jest": "^27.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.33.0",
+    "autoprefixer": "^10.3.6",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-preset-minify": "^0.5.0",
-    "core-js": "^3.16.0",
-    "css-loader": "^6.2.0",
+    "core-js": "^3.18.2",
+    "css-loader": "^6.4.0",
     "eslint": "^7.31.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
-    "jest": "^27.0.6",
-    "mini-css-extract-plugin": "^2.1.0",
+    "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^2.4.2",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.6",
+    "postcss": "^8.3.9",
     "postcss-loader": "^6.1.1",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "prettier-webpack-plugin": "^1.2.0",
-    "style-loader": "^3.2.1",
-    "terser-webpack-plugin": "^5.1.4",
-    "typescript": "^4.3.5",
+    "style-loader": "^3.3.0",
+    "terser-webpack-plugin": "^5.2.4",
+    "typescript": "^4.4.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.40.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "4.0.0-rc.0"
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "4.3.1"
   },
   "jest": {
     "roots": [

src/lib/index.modern.ts

@@ -0,0 +1,2 @@
+import SimpleKeyboard from "./components/Keyboard";
+export default SimpleKeyboard;

webpack.config.modern.js

@@ -0,0 +1,75 @@
+/**
+ * Config to support modern browsers only (build/index.modern.js)
+ */
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const getPackageJson = require('./scripts/getPackageJson');
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author,
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version} (index.modern.js - Modern Browsers bundle)
+  ${repository.url}
+
+  NOTE: This modern browsers bundle (index.modern.js) removes all polyfills
+  included in the standard version. Use this if you are supporting
+  modern browsers only. Otherwise, use the standard version (index.js).
+
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")} and project contributors.
+
+  This source code is licensed under the ${license} license found in the
+  LICENSE file in the root directory of this source tree.
+`;
+
+module.exports = {
+  mode: "production",
+  entry: './src/lib/index.modern.ts',
+  target: 'es5',
+  output: {
+    filename: 'index.modern.js',
+    path: path.resolve(__dirname, 'build'),
+    library: "SimpleKeyboard",
+    libraryTarget: 'umd',
+    globalObject: 'this'
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+    ],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?(j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ["@babel/env"]
+            ],
+            plugins: [
+              ["@babel/plugin-proposal-class-properties"],
+              ["@babel/plugin-transform-typescript"]
+            ]
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.IgnorePlugin({ resourceRegExp: /\.(sa|sc|c)ss$/ }),
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};