Merge pull request #47 from xmtp/rygine/updates

Fix webpack bundler issues with React SDK, upgrade dependencies, other fixes
xmtp · Jul 6, 2023 · 6a99730 · 6a99730
2 parents e81bd35 + fc04490
commit 6a99730
Show file tree

Hide file tree

Showing 14 changed files with 1,217 additions and 1,156 deletions.
diff --git a/examples/react-quickstart/index.html b/examples/react-quickstart/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/react-quickstart/package.json b/examples/react-quickstart/package.json
@@ -16,25 +16,25 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@rainbow-me/rainbowkit": "^0.12.15",
+    "@rainbow-me/rainbowkit": "^0.12.16",
     "@xmtp/react-components": "workspace:*",
     "@xmtp/react-sdk": "workspace:*",
     "ethers": "5.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "wagmi": "^0.12.17"
+    "wagmi": "^0.12.18"
   },
   "devDependencies": {
-    "@types/react": "^18.2.13",
+    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.0.2",
     "@xmtp/tsconfig": "workspace:*",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.0",
     "eslint-config-xmtp-web": "workspace:*",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.25",
     "postcss-preset-env": "^8.5.1",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.1"
   }
 }
diff --git a/examples/react-quickstart/src/polyfills.ts b/examples/react-quickstart/src/polyfills.ts
@@ -1,3 +1,4 @@
 import { Buffer } from "buffer";
 
 window.Buffer = window.Buffer ?? Buffer;
+window.global = window.global ?? window;
diff --git a/package.json b/package.json
@@ -19,15 +19,15 @@
     "typecheck": "FORCE_COLOR=1 turbo run typecheck"
   },
   "devDependencies": {
-    "prettier": "^2.8.8",
-    "turbo": "^1.10.4"
+    "prettier": "^3.0.0",
+    "turbo": "^1.10.7"
   },
   "packageManager": "yarn@3.4.1",
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
     "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.26.1"
+    "@changesets/cli": "^2.26.2"
   }
 }
diff --git a/packages/eslint-config-xmtp-web/package.json b/packages/eslint-config-xmtp-web/package.json
@@ -22,21 +22,21 @@
     "xmtp"
   ],
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
-    "eslint": "^8.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "eslint": "^8.44.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^35.0.0",
+    "eslint-config-standard-with-typescript": "^36.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0"
   },
   "devDependencies": {
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.6"
   }
 }
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -79,35 +79,35 @@
     "react-18-blockies": "^1.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
+    "@babel/core": "^7.22.8",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-essentials": "^7.0.23",
-    "@storybook/addon-interactions": "^7.0.23",
-    "@storybook/addon-links": "^7.0.23",
-    "@storybook/blocks": "^7.0.23",
-    "@storybook/react": "^7.0.23",
-    "@storybook/react-vite": "^7.0.23",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/blocks": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-vite": "^7.0.26",
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.13",
+    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.0.2",
     "@xmtp/tsconfig": "workspace:*",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.0",
     "eslint-config-xmtp-web": "workspace:*",
     "eslint-plugin-storybook": "^0.6.12",
     "jsdom": "^21.1.2",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.25",
     "postcss-modules": "^6.0.0",
     "postcss-preset-env": "^8.5.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
     "prop-types": "^15.8.1",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.23",
-    "tsup": "^7.0.0",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "storybook": "^7.0.26",
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.1",
+    "vitest": "^0.33.0"
   },
   "peerDependencies": {
     "react": ">=16.14"

diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
@@ -71,26 +71,26 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@xmtp/xmtp-js": "^9.1.7",
+    "@xmtp/xmtp-js": "^9.2.0",
     "date-fns": "^2.30.0",
     "dexie": "^3.2.4",
     "react": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.13",
+    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.0.2",
     "@xmtp/tsconfig": "workspace:*",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.0",
     "eslint-config-xmtp-web": "workspace:*",
     "jsdom": "^21.1.2",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
     "react-dom": "^18.2.0",
-    "tsup": "^7.0.0",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.1",
+    "vitest": "^0.33.0"
   },
   "peerDependencies": {
     "@xmtp/xmtp-js": "^9.1.6",

diff --git a/packages/react-sdk/src/helpers/messagesDb.ts b/packages/react-sdk/src/helpers/messagesDb.ts
@@ -1,6 +1,6 @@
 import type { DecodedMessage } from "@xmtp/xmtp-js";
 import type { Table } from "dexie";
-import { Dexie } from "dexie";
+import Dexie from "dexie";
 import { getConversationId } from "./getConversationId";
 
 export type CachedMessage = {
@@ -12,31 +12,39 @@ export type CachedMessage = {
   sent: Date;
 };
 
-export class MessagesDB extends Dexie {
-  messages!: Table<CachedMessage>;
+/**
+ * This must be a getter function as certain configurations of webpack
+ * (i.e. Next.js) will flag Dexie as an unused import and incorrectly transpile
+ * this code replacing Dexie with null.
+ */
+const getMessagesDb = () => {
+  class MessagesDB extends Dexie {
+    messages!: Table<CachedMessage>;
 
-  constructor() {
-    super("__XMTP__");
-    this.version(1).stores({
-      messages: "id, [cId+sent]",
-    });
-  }
+    constructor() {
+      super("__XMTP__");
+      this.version(1).stores({
+        messages: "id, [cId+sent]",
+      });
+    }
 
-  // persist message to cache
-  async persistMessage(message: DecodedMessage) {
-    const { id, sent, recipientAddress, senderAddress } = message;
-    await this.messages.put(
-      {
-        id,
-        cId: getConversationId(message.conversation),
-        bytes: message.toBytes(),
-        recipientAddress,
-        senderAddress,
-        sent,
-      },
-      [id, sent],
-    );
+    // persist message to cache
+    async persistMessage(message: DecodedMessage) {
+      const { id, sent, recipientAddress, senderAddress } = message;
+      await this.messages.put(
+        {
+          id,
+          cId: getConversationId(message.conversation),
+          bytes: message.toBytes(),
+          recipientAddress,
+          senderAddress,
+          sent,
+        },
+        [id, sent],
+      );
+    }
   }
-}
+  return new MessagesDB();
+};
 
-export const messagesDb = new MessagesDB();
+export default getMessagesDb();
diff --git a/packages/react-sdk/src/hooks/useCachedMessages.ts b/packages/react-sdk/src/hooks/useCachedMessages.ts
@@ -3,7 +3,7 @@ import { DecodedMessage, SortDirection } from "@xmtp/xmtp-js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Dexie, type Collection, type IndexableType } from "dexie";
 import type { CachedMessage } from "../helpers/messagesDb";
-import { messagesDb } from "../helpers/messagesDb";
+import messagesDb from "../helpers/messagesDb";
 import { getConversationId } from "../helpers/getConversationId";
 import { useClient } from "./useClient";
 import { updateLastEntry } from "../helpers/updateLastEntry";

diff --git a/packages/react-sdk/src/hooks/useSendMessage.ts b/packages/react-sdk/src/hooks/useSendMessage.ts
@@ -1,7 +1,7 @@
 import type { Conversation, DecodedMessage, SendOptions } from "@xmtp/xmtp-js";
 import { useCallback, useState } from "react";
 import type { OnError } from "../sharedTypes";
-import { messagesDb } from "../helpers/messagesDb";
+import messagesDb from "../helpers/messagesDb";
 
 export type UseSendMessageOptions = SendOptions &
   OnError & {

diff --git a/packages/react-sdk/src/index.ts b/packages/react-sdk/src/index.ts
@@ -3,7 +3,7 @@ export { XMTPProvider } from "./contexts/XMTPContext";
 
 // helpers
 export { isValidAddress } from "./helpers/isValidAddress";
-export { messagesDb } from "./helpers/messagesDb";
+export { default as messagesDb } from "./helpers/messagesDb";
 
 // hooks
 export { useCanMessage } from "./hooks/useCanMessage";

diff --git a/packages/react-sdk/tsconfig.eslint.json b/packages/react-sdk/tsconfig.eslint.json
@@ -1,5 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "include": [".", ".eslintrc.cjs", ".storybook/*"],
+  "include": [".", ".eslintrc.cjs"],
   "exclude": ["lib", "node_modules"]
 }
diff --git a/packages/react-sdk/tsconfig.json b/packages/react-sdk/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "@xmtp/tsconfig/react-sdk.json",
-  "include": ["src", ".eslintrc.cjs", ".storybook/*"]
+  "include": ["src", ".eslintrc.cjs"]
 }