Add modern browser bundle

build/types/components/KeyboardModern.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "simple-keyboard/build/css/index.css";
+import { KeyboardReactInterface } from "../interfaces";
+declare const KeyboardReact: (props: KeyboardReactInterface["options"]) => JSX.Element;
+export default KeyboardReact;

build/types/index.modern.d.ts

@@ -0,0 +1,3 @@
+import KeyboardReact from "./components/KeyboardModern";
+export * from "./interfaces";
+export default KeyboardReact;

package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-simple-keyboard",
-  "version": "3.2.108",
+  "version": "3.3.0",
   "description": "React.js 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 && npm run build-modern && tsc",
+    "build-modern": "webpack --config webpack.config.modern.js",
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
     "prepare": "npm run build",
@@ -74,7 +75,7 @@
     "prettier-webpack-plugin": "^1.2.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
-    "simple-keyboard": "3.2.69",
+    "simple-keyboard": "3.3.2",
     "style-loader": "^3.2.1",
     "terser-webpack-plugin": "^5.2.4",
     "typescript": "^4.4.3",

scripts/loaderMock.js

@@ -0,0 +1 @@
+module.exports = () => "";

src/demo/App.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import SimpleKeyboard from "simple-keyboard";
 import Keyboard from "../lib";
 import "./css/App.css";
 
@@ -8,7 +9,7 @@ class App extends React.Component {
     layoutName: "default",
   };
 
-  keyboard;
+  keyboard: SimpleKeyboard;
 
   onChange = (input) =>
     this.setState({ input }, () => console.log("Input changed", input));

src/demo/index.tsx

@@ -3,4 +3,9 @@ import ReactDOM from "react-dom";
 
 import App from "./App";
 
-ReactDOM.render(<App />, document.body);
+const root = document.createElement("div");
+root.className = "root";
+
+document.body.appendChild(root);
+
+ReactDOM.render(<App />, root);

src/lib/components/KeyboardModern.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable no-unused-vars */
+import * as React from "react";
+import { parseProps, changedProps } from "../services/Utilities";
+import "simple-keyboard/build/css/index.css";
+import { KeyboardReactInterface } from "../interfaces";
+
+const Keyboard = require("simple-keyboard/build/index.modern").default as {
+  new (
+    selector: string,
+    options: KeyboardReactInterface["options"]
+  ): KeyboardReactInterface["options"];
+};
+
+const KeyboardReact = (props: KeyboardReactInterface["options"]) => {
+  const cssClass = props.baseClass || "react-simple-keyboard";
+  const initRef = React.useRef(null) as React.MutableRefObject<null | boolean>;
+  const keyboardRef = React.useRef(null) as React.MutableRefObject<
+    null | KeyboardReactInterface["options"]
+  >;
+  const previousProps = React.useRef(props);
+
+  React.useEffect(() => {
+    const parsedProps = parseProps(props);
+
+    /**
+     * Initialize simple-keyboard
+     */
+    if (!initRef.current) {
+      initRef.current = true;
+      parsedProps.debug && console.log("ReactSimpleKeyboard: Init");
+      keyboardRef.current = new Keyboard(
+        `.${cssClass}`,
+        parsedProps
+      ) as KeyboardReactInterface["options"];
+      parsedProps.keyboardRef && parsedProps.keyboardRef(keyboardRef.current);
+    }
+
+    const updatedProps = changedProps(previousProps.current, parsedProps);
+
+    /**
+     * Only trigger render if props changed
+     */
+    if (updatedProps.length) {
+      const keyboard = keyboardRef.current;
+      previousProps.current = parsedProps;
+      keyboard?.setOptions(parsedProps);
+      parsedProps.debug &&
+        console.log(
+          "ReactSimpleKeyboard - setOptions called due to updated props:",
+          updatedProps
+        );
+    }
+  }, [initRef, cssClass, previousProps, props]);
+
+  return <div className={cssClass} />;
+};
+
+export default KeyboardReact;

src/lib/index.modern.ts

@@ -0,0 +1,3 @@
+import KeyboardReact from "./components/KeyboardModern";
+export * from "./interfaces";
+export default KeyboardReact;

webpack.config.modern.js

@@ -0,0 +1,94 @@
+/**
+ * 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: "ReactSimpleKeyboard",
+    libraryTarget: 'umd',
+    globalObject: 'this'
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+    ],
+  },
+  externals: {
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react'
+    },
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|json|ts|tsx)$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              "@babel/preset-react",
+              "@babel/env",
+              "@babel/preset-typescript"
+            ],
+            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', '.tsx', '.js', '.json']
+  }
+};