Merge pull request #29 from snowcoders/k2snowman69/webpackBuild

Move to webpack build

Author: k2snowman69

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@snowcoders/react-popover",
   "description": "Wrapper around react-popper that handles ~95% of popper scenarios",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "keywords": [
     "Popper",
     "popper.js",
@@ -21,9 +21,9 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "npm run build-scss && npm run build-typescript",
+    "build": "npm run build-scss && npm run build-webpack",
     "build-scss": "node-sass src/styles.scss dist/styles.css",
-    "build-typescript": "tsc",
+    "build-webpack": "webpack --mode production",
     "clean": "rimraf coverage dist",
     "cover": "nyc npm run test",
     "precommit": "lint-staged",
@@ -67,6 +67,7 @@
     "@types/react": "^16.4.6",
     "@types/react-dom": "^16.0.6",
     "@types/react-resize-detector": "^2.2.0",
+    "awesome-typescript-loader": "^5.2.0",
     "classnames": "^2.2.6",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -75,15 +76,19 @@
     "jsdom": "^11.12.0",
     "lint-staged": "^7.2.0",
     "node-sass": "^4.9.2",
-    "prettier": "^1.13.7",
-    "react": "^16.4.1",
+    "prettier": "^1.14.0",
+    "react": "16.4.1",
     "react-dom": "^16.4.1",
     "react-popper": "^1.0.0",
-    "react-resize-detector": ">=2.0.0",
+    "react-resize-detector": "^3.1.0",
     "rimraf": "^2.6.2",
+    "source-map-loader": "^0.2.3",
     "source-map-support": "^0.5.6",
-    "ts-jest": "^23.0.1",
+    "ts-jest": "^23.1.2",
+    "ts-loader": "^4.4.2",
     "tslib": "^1.9.3",
-    "typescript": "^3.0.0"
+    "typescript": "^3.0.1",
+    "webpack": "^4.16.4",
+    "webpack-command": "^0.4.1"
   }
 }

readme.md

@@ -45,6 +45,9 @@ To see a live example, go to our demo site https://snowcoders.github.io/react-ui
 
 # Change log
 
+- 1.1.4
+  - Reduced javascript output from ~20k to ~10k by moving to webpack
+  - Enabled resize listener for React 15
 - 1.1.3
   - Fixed initial position of popper
   - Disabled resize listener for React 15 due to complaints of errors

renovate.json

@@ -1,5 +1,3 @@
 {
-  "extends": [
-    "snowcoders"
-  ]
+  "extends": ["snowcoders"]
 }

src/popper.blur.tsx

@@ -54,7 +54,13 @@ export class PopperBlur extends React.Component<PopperBlurProps> {
                 data-placement={placement}
                 onClick={this.onPopperClick}
               >
-                {this.renderChildren()}
+                <ReactResizeDetector
+                  handleHeight
+                  handleWidth
+                  onResize={this.onResize}
+                  skipOnMount
+                />
+                {children}
                 <span
                   ref={arrowProps.ref}
                   style={arrowProps.style}
@@ -76,24 +82,6 @@ export class PopperBlur extends React.Component<PopperBlurProps> {
     }
   };
 
-  private renderChildren() {
-    const { children } = this.props;
-    if (React.version.indexOf("15.") === 0) {
-      return children;
-    } else {
-      return (
-        <ReactResizeDetector
-          handleHeight
-          handleWidth
-          onResize={this.onResize}
-          skipOnMount
-        >
-          {children}
-        </ReactResizeDetector>
-      );
-    }
-  }
-
   private onRef = (ref: HTMLElement | null) => {
     this.contentRef = ref;
   };

src/popper.click.tsx

@@ -43,7 +43,13 @@ export class PopperClick extends React.Component<PopperClickProps> {
                 data-placement={placement}
                 onClick={this.onPopperClick}
               >
-                {this.renderChildren()}
+                <ReactResizeDetector
+                  handleHeight
+                  handleWidth
+                  onResize={this.onResize}
+                  skipOnMount
+                />
+                {children}
                 <span
                   ref={arrowProps.ref}
                   style={arrowProps.style}
@@ -65,24 +71,6 @@ export class PopperClick extends React.Component<PopperClickProps> {
     }
   };
 
-  private renderChildren() {
-    const { children } = this.props;
-    if (React.version.indexOf("15.") === 0) {
-      return children;
-    } else {
-      return (
-        <ReactResizeDetector
-          handleHeight
-          handleWidth
-          onResize={this.onResize}
-          skipOnMount
-        >
-          {children}
-        </ReactResizeDetector>
-      );
-    }
-  }
-
   private onResize = () => {
     if (this.scheduleUpdate) {
       this.scheduleUpdate();

src/popper.hover.tsx

@@ -59,7 +59,13 @@ export class PopperHover extends React.Component<
                 style={style}
                 data-placement={placement}
               >
-                {this.renderChildren()}
+                <ReactResizeDetector
+                  handleHeight
+                  handleWidth
+                  onResize={this.onResize}
+                  skipOnMount
+                />
+                {children}
                 <span
                   ref={arrowProps.ref}
                   style={arrowProps.style}
@@ -81,24 +87,6 @@ export class PopperHover extends React.Component<
     }
   };
 
-  private renderChildren() {
-    const { children } = this.props;
-    if (React.version.indexOf("15.") === 0) {
-      return children;
-    } else {
-      return (
-        <ReactResizeDetector
-          handleHeight
-          handleWidth
-          onResize={this.onResize}
-          skipOnMount
-        >
-          {children}
-        </ReactResizeDetector>
-      );
-    }
-  }
-
   private onResize = () => {
     if (this.scheduleUpdate) {
       this.scheduleUpdate();

tsconfig.json

@@ -1,28 +1,22 @@
 {
-    "compilerOptions": {
-        "declaration": true,
-        "experimentalDecorators": true,
-        "forceConsistentCasingInFileNames": true,
-        "importHelpers": true,
-        "jsx": "react",
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "noImplicitThis": true,
-        "noUnusedLocals": false,
-        "outDir": "./dist/",
-        "preserveConstEnums": true,
-        "sourceMap": true,
-        "strictNullChecks": true,
-        "target": "es5"
-    },
-    "include": [
-        "./src/**/*.ts",
-        "./src/**/*.tsx"
-    ],
-    "exclude": [
-        "./src/**/*.test.ts",
-        "./src/**/*.test.tsx"
-    ]
-}
+  "compilerOptions": {
+    "declaration": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "jsx": "react",
+    "module": "es6",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": false,
+    "outDir": "./",
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es5"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./src/**/*.test.ts", "./src/**/*.test.tsx"]
+}

webpack.config.js

@@ -0,0 +1,63 @@
+// import * as webpack from "webpack";
+let webpack = require("webpack");
+const path = require("path");
+
+const config /*: webpack.Configuration*/ = {
+  entry: {
+    main: "./src/index.ts"
+  },
+  output: {
+    chunkFilename: "index.js",
+    filename: "index.js",
+    library: "@snowcoders/react-popover",
+    libraryTarget: "umd",
+    path: path.resolve(__dirname, "dist"),
+    publicPath: "/dist/"
+  },
+
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        test: /\.tsx?$/,
+        use: "ts-loader"
+      }
+    ]
+  },
+
+  resolve: {
+    // Add '.ts' and '.tsx' as resolvable extensions.
+    extensions: [".ts", ".tsx", ".js", ".json"]
+  },
+
+  // Here is a list of our peer-dependencies that we will not include but need to have access to
+  // Specifically because we use umd, we have to specify more information
+  // https://stackoverflow.com/questions/34252424/webpack-umd-lib-and-external-files
+  externals: {
+    "@snowcoders/react-unstyled-button": "@snowcoders/react-unstyled-button",
+    "react-dom": {
+      amd: "react-dom",
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      root: "ReactDOM"
+    },
+    "react-popper": "react-popper",
+    "react-resize-detector": {
+      amd: "react-resize-detector",
+      commonjs: "react-resize-detector",
+      commonjs2: "react-resize-detector",
+      root: "ResizeDetector"
+    },
+    classnames: "classnames",
+    react: {
+      amd: "react",
+      commonjs: "react",
+      commonjs2: "react",
+      root: "React"
+    },
+    tslib: "tslib"
+  }
+};
+
+// export default config;
+module.exports = config;