Add modern.esm bundle. Fixes #2070

Bump postcss from 8.4.27 to 8.4.28

.github/ISSUE_TEMPLATE/bug_report.md

@@ -8,10 +8,13 @@ assignees: hodgef
 ---
 
 **Simple-keyboard version**
-As some bugs have been addressed in later versions, please ensure you are running the latest.
+Some bugs are addressed in newer versions, therefore please ensure you are running the latest.
 
 **Describe the bug**
-A clear and concise description of what the bug is. Providing a [sandbox example](https://codesandbox.io/s/vanilla) or code depicting the issue is important, as this will help us reproduce the issue.
+A short and clear description of what the bug is.
+
+**Provide a repro**
+Providing a [sandbox example](https://codesandbox.io/s/vanilla) is important, as this will help us reproduce the issue. You can also provide a sample git repository. Without a full repro of your issue, we will not be able to debug and the ticket will be closed early.
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.

.npmignore

@@ -35,7 +35,5 @@ CONTRIBUTING.md
 tsconfig.json
 .eslintignore
 .eslintrc.json
-webpack.config.js
-webpack.config.demo.js
-webpack.config.modern.js
+webpack.config.*
 babel.config.js

build/css/index.css

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

build/index.d.ts

@@ -1,4 +1,5 @@
 import "./polyfills";
 import SimpleKeyboard from "./components/Keyboard";
+export * from "./interfaces";
 export { SimpleKeyboard };
 export default SimpleKeyboard;

package.json

@@ -1,12 +1,13 @@
 {
   "name": "simple-keyboard",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve --config webpack.config.demo.js",
-    "build": "webpack && npm run build-modern && tsc",
+    "build": "webpack && npm run build-modern && npm run build-modern-esm && tsc",
     "build-modern": "webpack --config webpack.config.modern.js",
+    "build-modern-esm": "webpack --config webpack.config.modern_esm.js",
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
     "prepare": "npm run build",
@@ -39,35 +40,35 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.21.8",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.10",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-transform-typescript": "^7.21.3",
+    "@babel/plugin-transform-typescript": "^7.22.10",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-env": "^7.22.10",
     "@types/jest": "^27.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.7",
-    "autoprefixer": "^10.4.14",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.15",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
     "babel-preset-minify": "^0.5.2",
-    "core-js": "^3.30.2",
-    "css-loader": "^6.7.4",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "eslint": "^8.41.0",
+    "core-js": "^3.32.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "eslint": "^8.47.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.1",
+    "html-webpack-plugin": "^5.5.3",
     "jest": "^26.6.3",
     "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.23",
-    "postcss-loader": "^7.3.0",
+    "postcss": "^8.4.28",
+    "postcss-loader": "^7.3.3",
     "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.9",
     "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
-    "webpack": "^5.84.0",
-    "webpack-cli": "^5.1.1",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.3",
     "webpack-dev-server": "4.15.0"
   },
   "jest": {

src/lib/index.ts

@@ -1,4 +1,5 @@
 import "./polyfills";
 import SimpleKeyboard from "./components/Keyboard";
+export * from "./interfaces";
 export { SimpleKeyboard };
 export default SimpleKeyboard;

webpack.config.js

@@ -1,3 +1,4 @@
+// Configuration
 const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');

webpack.config.modern_esm.js

@@ -0,0 +1,89 @@
+/**
+ * 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.esm.js - Modern Browsers bundle, ESM output)
+  ${repository.url}
+
+  NOTE: This modern browsers bundle (index.modern.esm.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: [
+    'web',
+    'es2020'
+  ],
+  output: {
+    filename: 'index.modern.esm.js',
+    path: path.resolve(__dirname, 'build'),
+    globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
+    library: {
+      type: 'module'
+    }
+  },
+  experiments: {
+    outputModule: true
+  },
+  externalsType: 'module',
+  devtool: 'source-map',
+  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"]
+            ]
+          }
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: path.resolve('scripts/loaderMock.js')
+      }
+    ]
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};