Merge pull request #54 from grandeurdev/nodejs-support

Nodejs support complete, with example and readme.
grandeurdev · Apr 10, 2023 · edb75c3 · edb75c3
2 parents 6fa38bd + 16125af
commit edb75c3
Show file tree

Hide file tree

Showing 33 changed files with 2,572 additions and 1,535 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -69,7 +69,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+
 .env.test
 
 # parcel-bundler cache (https://parceljs.org/)

diff --git a/README.md b/README.md
@@ -1,12 +1,11 @@
 Grandeur client for browsers. Check full docs at https://docs.grandeur.dev
 
-[![NPM](https://img.shields.io/npm/v/grandeur-js.svg)](https://www.npmjs.com/package/grandeur-js)
-[![Downloads/week](https://img.shields.io/npm/dw/grandeur-js.svg)](https://npmjs.org/package/grandeur-js.svg)
-[![License](https://img.shields.io/npm/l/grandeur-js.svg)](https://github.com/grandeurtech/js-sdk/blob/master/package.json)
+[![NPM](https://img.shields.io/npm/v/grandeur-js.svg)](https://www.npmjs.com/package/grandeur-js) [![Downloads/week](https://img.shields.io/npm/dw/grandeur-js.svg)](https://npmjs.org/package/grandeur-js.svg) [![License](https://img.shields.io/npm/l/grandeur-js.svg)](https://github.com/grandeurtech/js-sdk/blob/master/package.json)
 
 Here is how you can integrate Grandeur in your project.
 
-### React
+## React
+
 Just simply download the package from npm and use it in your react project
 
 ```bash
@@ -27,14 +26,14 @@ import ReactDOM from "react-dom";
 import App from "./app";
 
 // and Import Grandeur Component
-import { Grandeur } from "grandeur-js/react";
+import {Grandeur} from "grandeur-js/react";
 
 // Render app
 const page = (
-  <Grandeur apiKey="YOUR-APIKEY" secretKey="SECRET-KEY" credentials={credentials}>
-    {/* Your app code*/}
-    <App />
-  </Grandeur>
+	<Grandeur apiKey="YOUR-APIKEY" secretKey="SECRET-KEY" credentials={credentials}>
+		{/* Your app code*/}
+		<App />
+	</Grandeur>
 );
 
 // Finally render
@@ -48,41 +47,42 @@ Then inside your `app.js`
 // The App Component
 
 // Libraries
-import React, { Component } from "react";
+import React, {Component} from "react";
 
 // Import Grandeur HOC
-import { withGrandeur } from "grandeur-js/react";
+import {withGrandeur} from "grandeur-js/react";
 
 // Component
 class App extends Component {
-  // Constructor
-  constructor(props) {
-    super(props);
-
-    // State of the Component
-    this.state = {};
-  }
-
-  componentDidMount() {
-    // Component is Mounted
-    // get reference to the grandeur
-    // through props. Which can be used to
-    // access all the features of Grandeur
-    var project = this.props.grandeur;
-  }
-
-  // Render
-  render() {
-    // Render the Component
-    return <p>Hello World</p>;
-  }
+	// Constructor
+	constructor(props) {
+		super(props);
+
+		// State of the Component
+		this.state = {};
+	}
+
+	componentDidMount() {
+		// Component is Mounted
+		// get reference to the grandeur
+		// through props. Which can be used to
+		// access all the features of Grandeur
+		var project = this.props.grandeur;
+	}
+
+	// Render
+	render() {
+		// Render the Component
+		return <p>Hello World</p>;
+	}
 }
 
 // Export the Component after wrapping in HOC
 export default withGrandeur(App);
 ```
 
-### Browser
+## Browser
+
 Just simply drop the link of JavaScript SDK in a script tag inside your web app using our [CDN](https://unpkg.com/grandeur-js).
 
 ```html
@@ -100,4 +100,26 @@ This will give you access to the global `Grandeur` object, through which you can
 var project = grandeur.init("API-KEY", "SECRET-KEY");
 ```
 
-Check full sdk references from [documentation](https://docs.grandeur.dev/references/client-sdk/installation). Or check full [examples](https://github.com/grandeurdev/js-sdk/tree/master/examples).
+Check full sdk references from [documentation](https://docs.grandeur.dev/references/client-sdk/installation). Or check full [examples](https://github.com/grandeurdev/js-sdk/tree/master/examples).
+
+## Node.js
+
+After downloading the package from npm, you can use it in your node project.
+
+```js
+import grandeur from "grandeur-js";
+```
+
+This will give you access to the global `Grandeur` object, through which you can initialize the SDK and get a reference to your project as shown below
+
+```javascript
+// The init the SDK with API key 
+// and get reference to your project
+var project = grandeur.init("API-KEY", "SECRET-KEY");
+```
+
+For User Authorization, generate a token from Grandeur Dahsboard and use as shown below.
+
+```js
+var response = await project.auth().token("AUTH_TOKEN");
+```
diff --git a/dist/grandeur-cjs.js b/dist/grandeur-cjs.js
diff --git a/dist/grandeur-cjs.js.LICENSE.txt b/dist/grandeur-cjs.js.LICENSE.txt
@@ -0,0 +1,10 @@
+/*
+ * [hi-base32]{@link https://github.com/emn178/hi-base32}
+ *
+ * @version 0.5.0
+ * @author Chen, Yi-Cyuan [emn178@gmail.com]
+ * @copyright Chen, Yi-Cyuan 2015-2018
+ * @license MIT
+ */
+
+/*! noble-hashes - MIT License (c) 2022 Paul Miller (paulmillr.com) */
diff --git a/dist/grandeur-react.js b/dist/grandeur-react.js
diff --git a/dist/grandeur-react.js.LICENSE.txt b/dist/grandeur-react.js.LICENSE.txt
@@ -7,6 +7,8 @@
  * @license MIT
  */
 
+/*! noble-hashes - MIT License (c) 2022 Paul Miller (paulmillr.com) */
+
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
 /**

diff --git a/dist/grandeur.js b/dist/grandeur.js
diff --git a/dist/grandeur.js.LICENSE.txt b/dist/grandeur.js.LICENSE.txt
@@ -7,4 +7,6 @@
  * @license MIT
  */
 
+/*! noble-hashes - MIT License (c) 2022 Paul Miller (paulmillr.com) */
+
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
diff --git a/distributions/react.js b/distributions/react.js
@@ -27,9 +27,7 @@ const GrandeurContext = React.createContext(null);
 // Default Grandeur Provider Component
 export function Grandeur(props) {
   // Pass the plugins to sdk
-  grandeur.extend
-    ? grandeur.extend(props.extensions ? props.extensions : {})
-    : null;
+  grandeur.extend ? grandeur.extend(props.extensions ? props.extensions : {}) : null;
 
   // init
   var project = grandeur.init(props.apiKey, props.secretKey);
@@ -39,15 +37,7 @@ export function Grandeur(props) {
     grandeur: project,
   };
 
-  return (
-    <GrandeurContext.Provider value={state.grandeur}>
-      {props.children}
-    </GrandeurContext.Provider>
-  );
+  return <GrandeurContext.Provider value={state.grandeur}>{props.children}</GrandeurContext.Provider>;
 }
 
-export const withGrandeur = (Component) => (props) => (
-  <GrandeurContext.Consumer>
-    {(grandeur) => <Component {...props} grandeur={grandeur} />}
-  </GrandeurContext.Consumer>
-);
+export const withGrandeur = (Component) => (props) => <GrandeurContext.Consumer>{(grandeur) => <Component {...props} grandeur={grandeur} />}</GrandeurContext.Consumer>;
diff --git a/examples/.DS_Store b/examples/.DS_Store
diff --git a/examples/create-react-app/package-lock.json b/examples/create-react-app/package-lock.json
diff --git a/examples/create-react-app/src/components/Devices/Devices.js b/examples/create-react-app/src/components/Devices/Devices.js
@@ -7,84 +7,78 @@ import ButtonOn from "../../buttonOn.svg";
 import { useNavigate } from "react-router-dom";
 
 function Device(props) {
-  const deviceID = "DeviceID";
-  const navigate = useNavigate();
-  const [deviceName, setDeviceNameState] = useState("");
-  const [data, setButtonState] = useState(0);
+	const deviceID = "DeviceID";
+	const navigate = useNavigate();
+	const [deviceName, setDeviceNameState] = useState("");
+	const [data, setButtonState] = useState(0);
 
-  useEffect(() => {
-    displayDevice();
+	useEffect(() => {
+		displayDevice();
 
-    async function displayDevice() {
-      var res = await props.grandeur.auth().isAuthenticated();
+		async function displayDevice() {
+			var res = await props.grandeur.auth().isAuthenticated();
 
-      //  Then if the user isn't authorized then show the login screen
-      if (res.code === "AUTH-UNAUTHORIZED") {
-        navigate("/", { replace: true });
-      }
+			//  Then if the user isn't authorized then show the login screen
+			if (res.code === "AUTH-UNAUTHORIZED") {
+				navigate("/", { replace: true });
+			}
 
-      var devices = props.grandeur.devices();
+			var devices = props.grandeur.devices();
 
-      //  Get device name
-      var { device } = await devices.device(deviceID).get("name");
+			//  Get device name
+			var { device } = await devices.device(deviceID).get("name");
 
-      if (device.name) setDeviceNameState(device.name);
+			if (device.name) setDeviceNameState(device.name);
 
-      var { data } = await devices
-        .device(deviceID)
-        .data()
-        .get("led");
+			var { data } = await devices
+				.device(deviceID)
+				.data()
+				.get("led");
 
-      data ? setButtonState(data) : setButtonState(0);
+			data ? setButtonState(data) : setButtonState(0);
 
-      devices
-        .device(deviceID)
-        .data()
-        .on("led", (path, state) => {
-          setButtonState(state);
-        });
-    }
-  });
+			devices
+				.device(deviceID)
+				.data()
+				.on("led", (path, state) => {
+					setButtonState(state);
+				});
+		}
+	});
 
-  async function updateState() {
-    //  Use the devices class of sdk to report the upgrade
-    await props.grandeur
-      .devices()
-      .device(deviceID)
-      .data()
-      .set("led", data ? 0 : 1);
-  }
+	async function updateState() {
+		//  Use the devices class of sdk to report the upgrade
+		await props.grandeur
+			.devices()
+			.device(deviceID)
+			.data()
+			.set("led", data ? 0 : 1);
+	}
 
-  return (
-    <>
-      <Header></Header>
-      <div className="flex w-screen h-screen bg-gray-50  justify-center items-center">
-        <div
-          id="device"
-          className="h-96 w-96 flex flex-col justify-center items-center content-around"
-        >
-          {!deviceName ? (
-            <div id="device-loading" className="w-20 h-auto">
-              <img src={Loading} alt="ReactLogo" />
-            </div>
-          ) : (
-            <div id="device-button" onClick={updateState}>
-              <div className="h-44 w-44 bg-gray-400 drop-shadow-lg rounded-2xl flex items-center justify-center cursor-pointer">
-                <img src={!data ? ButtonOff : ButtonOn} alt="" />
-              </div>
+	return (
+		<>
+			<Header></Header>
+			<div className="flex w-screen h-screen bg-gray-50  justify-center items-center">
+				<div id="device" className="h-96 w-96 flex flex-col justify-center items-center content-around">
+					{!deviceName ? (
+						<div id="device-loading" className="w-20 h-auto">
+							<img src={Loading} alt="ReactLogo" />
+						</div>
+					) : (
+						<div id="device-button" onClick={updateState}>
+							<div className="h-44 w-44 bg-gray-400 drop-shadow-lg rounded-2xl flex items-center justify-center cursor-pointer">
+								<img src={!data ? ButtonOff : ButtonOn} alt="" />
+							</div>
 
-              <div
-                className="text-gray-900 font-sans text-md font-bold mt-10 text-center"
-                id="device-name"
-              >
-                {!deviceName ? "Device" : deviceName}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
+							<div className="text-gray-900 font-sans text-md font-bold mt-10 text-center" id="device-name">
+								{!deviceName ? "Device" : deviceName}
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</>
+	);
 }
 
 export default withGrandeur(Device);