Merge pull request #22 from alfg/feature/npm-module

alfg · web-flow · commit dd2fae4fcea2 · 2018-03-10T19:06:00.000-08:00
Add module export to support importing as an npm module.
diff --git a/README.md b/README.md
@@ -11,6 +11,8 @@ Example in jQuery: http://jsfiddle.net/alfg/xjqbvt2o/
 
 ## Usage
 
+* Download the distribution files in `dist` to your project.
+
 ```javascript
 var p = new Ping();
 
@@ -24,6 +26,18 @@ p.ping("https://github.com", function(err, data) {
 });
 ```
 
+or import as a module:
+
+```bash
+$ npm install ping.js
+```
+
+```javascript
+import Ping from 'ping.js';
+```
+
+See [demo/react-example](demo/react-example) for an example in React.
+
 ## API
 
 ```javascript
diff --git a/demo/react-example/ping.html b/demo/react-example/ping.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+  <div id="root"></div>
+  <script src="./ping.js"></script>
+</body>
+</html>
+
+
diff --git a/demo/react-example/ping.js b/demo/react-example/ping.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Ping from '../ping.js';
+
+class App extends React.Component {
+  constructor() {
+    super();
+
+    this.p = new Ping();
+
+    this.state = {
+      google: 0,
+      apple: 0,
+      microsoft: 0
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.p.ping("http://google.com", (err, data) => {
+      if (err) {
+        console.log("error loading resource", err);
+      }
+      this.setState({ google: data });
+    });
+
+    this.p.ping("http://apple.com", (err, data) => {
+      if (err) {
+        console.log("error loading resource", err);
+      }
+      this.setState({ apple: data });
+    });
+
+    this.p.ping("http://microsoft.com", (err, data) => {
+      if (err) {
+        console.log("error loading resource", err);
+      }
+      this.setState({ microsoft: data });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.handleClick}>Get Pings</button>
+        <ul>
+          <li>google.com <span>{this.state.google}</span></li>
+          <li>apple.com <span>{this.state.apple}</span></li>
+          <li>microsoft.com <span>{this.state.microsoft}</span></li>
+        </ul>
+
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/dist/ping.js b/dist/ping.js
@@ -50,3 +50,11 @@ Ping.prototype.ping = function(source, callback) {
 
     this.img.src = source + this.favicon + "?" + (+new Date()); // Trigger image load with cache buster
 };
+
+if (typeof exports !== "undefined") {
+    if (typeof module !== "undefined" && module.exports) {
+        module.exports = Ping;
+    }
+} else {
+    window.Ping = Ping;
+}
diff --git a/dist/ping.min.js b/dist/ping.min.js
diff --git a/index.js b/index.js
@@ -0,0 +1,2 @@
+const Ping = require('./src/ping');
+module.exports = Ping;
diff --git a/package.json b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "ping.js",
   "description": "Ping Utilities with Javascript",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "author": "Alf <alf.g.jr@gmail.com>",
+  "main": "index.js",
   "devDependencies": {
     "grunt": "~0.4.5",
     "grunt-cli": "~0.1.13",
@@ -13,6 +14,10 @@
   "scripts": {
     "start": "grunt"
   },
-  "keywords": ["javascript", "ping", "utilities"],
+  "keywords": [
+    "javascript",
+    "ping",
+    "utilities"
+  ],
   "repository": "git://github.com/alfg/ping.js"
 }
diff --git a/src/ping.js b/src/ping.js
@@ -42,3 +42,11 @@ Ping.prototype.ping = function(source, callback) {
 
     this.img.src = source + this.favicon + "?" + (+new Date()); // Trigger image load with cache buster
 };
+
+if (typeof exports !== "undefined") {
+    if (typeof module !== "undefined" && module.exports) {
+        module.exports = Ping;
+    }
+} else {
+    window.Ping = Ping;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,8 @@ @@
 +<html>
 +<body>
 +  <div id="root"></div>
 +  <script src="./ping.js"></script>
 +</body>
 +</html>
++
++
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+const Ping = require('./src/ping');`
	`2`	`+module.exports = Ping;`