Add toJSON for easy serialization

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 1.1.0
+
+- Also accept the Request object as first argument of the constructor.
+- Add toJSON method to the instance for easy serialization.
+
 ## 1.0.0
 
 Stable release: No breaking changes

README.md

@@ -9,13 +9,19 @@ import { ClientHints } from "client-hints";
 import { userAgentParser } from "some-user-agent-parser-library";
 
 app.get("/api-endpoint", (req, res) => {
-  const hints = new ClientHints(req.headers);
+  const hints = new ClientHints(req);
 
   const isMobile =
     hints.mobile ?? // cheap
     userAgentParser(req.get("user-agent")).device?.type === "mobile"; // more expensive
 
-  res.send(isMobile ? "Mobile page" : "Desktop page");
+  const browserName =
+    hints.vendorName ?? // cheap
+    userAgentParser(req.get("user-agent")).browser?.name; // more expensive
+
+  console.log(JSON.stringify(hints, null, 2)); // Serialises all available hints
+
+  res.send(`${isMobile ? "Mobile" : "Desktop"} browser: ${browserName}`);
 });
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "client-hints",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "🕵️‍♂️ Parse client hints headers",
   "keywords": [
     "client-hints",

src/__snapshots__/test.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`client-hints general pases to JSON 1`] = `
+"{
+  "mobile": false,
+  "vendorName": "Google Chrome",
+  "vendorVersion": "117.0.5938.132",
+  "platform": "macOS",
+  "platformVersion": "12.5.1",
+  "fetchSite": "none",
+  "fetchMode": "navigate",
+  "fetchDest": "document",
+  "fetchDestination": "document",
+  "fetchUser": true
+}"
+`;

src/index.ts

@@ -30,20 +30,15 @@ const HEADERS = {
   WIDTH: "width",
 };
 
-interface Headers {
-  entries(): Iterable<[string, string]>;
-}
-
 export class ClientHints {
   entries: [string, string][];
-  constructor(headers: Headers | object) {
+  constructor(input: Request | Headers | object) {
+    const headers =
+      input instanceof Request ? (input as Request).headers : input;
     const entries =
-      Symbol.iterator in headers
-        ? Array.from(
-            (headers as Headers).entries() as Iterable<[string, string]>,
-          )
+      headers instanceof Headers
+        ? Array.from((headers as globalThis.Headers).entries())
         : Object.entries(headers);
-
     this.entries = entries.map(([key, value]) => [key.toLowerCase(), value]);
   }
 
@@ -74,6 +69,16 @@ export class ClientHints {
     return this.#store.get("uaVendorsList");
   }
 
+  toJSON(): Record<string, string | number | boolean> {
+    return Object.getOwnPropertyNames(Object.getPrototypeOf(this))
+      .filter((name) => name !== "constructor")
+      .reduce(
+        (acc, name) =>
+          this[name] !== "" ? Object.assign(acc, { [name]: this[name] }) : acc,
+        {},
+      );
+  }
+
   get mobile(): boolean {
     return this.#get(HEADERS.MOBILE)?.includes("?1");
   }

src/test.ts

@@ -83,6 +83,7 @@ describe("client-hints", () => {
       ["downlink", "Downlink", "1.7", 1.7],
       ["platform", "Sec-CH-UA-Platform", '"macOS"', "macOS"],
       ["platformVersion", "Sec-CH-UA-Platform-Version", '"12.1.0"', "12.1.0"],
+      ["purpose", "Sec-Purpose", "prefetch", "prefetch"],
     ].forEach(
       ([feature, header, value, expected]: [string, string, string, any]) => {
         it([feature, header].join(": "), () => {
@@ -94,5 +95,33 @@ describe("client-hints", () => {
         });
       },
     );
+    it("accepts request object", () => {
+      const request = new Request("https://example.com", {
+        headers: {
+          "Sec-CH-UA-Platform": "macOS",
+        },
+      });
+      const hints = new ClientHints(request);
+      assert.equal(hints.platform, "macOS");
+    });
+    it("pases to JSON", () => {
+      const headers = new Headers({
+        "sec-ch-ua":
+          '"Google Chrome";v="117", "Not;A=Brand";v="8", "Chromium";v="117"',
+        "sec-ch-ua-full-version": '"117.0.5938.132"',
+        "sec-ch-ua-full-version-list":
+          '"Google Chrome";v="117.0.5938.132", "Not;A=Brand";v="8.0.0.0", "Chromium";v="117.0.5938.132"',
+        "sec-ch-ua-mobile": "?0",
+        "sec-ch-ua-model": '""',
+        "sec-ch-ua-platform": '"macOS"',
+        "sec-ch-ua-platform-version": '"12.5.1"',
+        "sec-fetch-dest": "document",
+        "sec-fetch-mode": "navigate",
+        "sec-fetch-site": "none",
+        "sec-fetch-user": "?1",
+      });
+      const hints = new ClientHints(headers);
+      expect(JSON.stringify(hints, null, 2)).toMatchSnapshot();
+    });
   });
 });

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "lib": ["esnext", "dom"],
+    "lib": ["esnext", "dom", "dom.iterable"],
     "module": "esnext",
     "types": ["@types/node", "@types/jest"],
     "esModuleInterop": true,