@gadgetinc/react-shopify-app-bridge - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

dist/src/Provider.d.ts

 /// <reference types="react" />
 import { AnyClient } from "@gadgetinc/api-client-core";
+import { History, LocationOrHref } from "@shopify/app-bridge-react";
 export declare enum AppType {
@@ -7,3 +8,3 @@ Standalone = 0,
 }
-export declare const Provider: ({ type, children, shopifyApiKey, api, }: {
+export declare const Provider: ({ type, children, shopifyApiKey, api, router, }: {
     type?: AppType | undefined;
@@ -13,2 +14,6 @@ children: JSX.Element | JSX.Element[];
     api: AnyClient;
+    router?: {
+        location: LocationOrHref;
+        history: History;
+    } | undefined;
 }) => JSX.Element;

dist/src/Provider.js

@@ -131,3 +131,3 @@ "use strict";
 });
-const Provider = ({ type, children, shopifyApiKey, api, }) => {
+const Provider = ({ type, children, shopifyApiKey, api, router, }) => {
     const [location, setLocation] = (0, react_2.useState)(null);
@@ -166,3 +166,3 @@ const isReady = !!location;
                 forceRedirect,
-            } }, app));
+            }, router: router }, app));
     }
@@ -169,0 +169,0 @@ return app;

package.json

 {
   "name": "@gadgetinc/react-shopify-app-bridge",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "source": "src/index.ts",
@@ -22,3 +22,3 @@ "main": "dist/src/index.js",
   "dependencies": {
-    "@gadgetinc/api-client-core": "^0.9.0",
+    "@gadgetinc/api-client-core": "^0.10.0",
     "@shopify/app-bridge-utils": "^3.1.1",
@@ -37,7 +37,6 @@ "crypto-js": "^4.1.1",
     "cross-fetch": "^3.1.5",
-    "jest": "^27.5.1",
+    "jest": "^29.0.3",
     "nock": "^13.2.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "ts-jest": "^28.0.8"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
@@ -44,0 +43,0 @@ "peerDependencies": {

README.md

@@ -139,1 +139,53 @@ <div align="center">
 ```
+
+## Custom router
+
+`@shopify/app-bridge-react` allows you to specify a custom router configuration to manage client-side routing. Similarly, the Gadget provider will allow you to specify a custom router which will be forwarded to the App Bridge.
+
+```tsx
+// import Gadget's react hooks for accessing data from your Gadget app
+import { useAction, useFindMany } from "@gadgetinc/react";
+// import the Gadget<->Shopify bindings that manage the auth process with Shopify
+import { AppType, Provider as GadgetProvider, useGadget } from "@gadgetinc/react-shopify-app-bridge";
+// import and use Shopify's react components like you might in other Shopify app
+import { Button, Redirect, TitleBar } from "@shopify/app-bridge/actions";
+import React, { useMemo } from "react";
+// import the instance of the Gadget API client for this app constructed in the other file
+import { api } from "./api";
+import { useLocation, useNavigate, BrowserRouter } from 'react-router-dom';
+// import your app's custom routes
+import Routes from './Routes';
+
+function App() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const history = useMemo(
+    () => ({replace: (path) => navigate(path, {replace: true})}),
+    [navigate],
+  );
+
+  const router = useMemo(
+    () => ({
+      location,
+      history,
+    }),
+    [location, history],
+  );
+
+  return (
+    // Wrap our main application's react components in the `<GadgetProvider/>` component to interface with Shopify
+    // This wrapper sets up the Shopify App Bridge, and will automatically redirect to perform the OAuth authentication if the shopify shop doesn't yet have the store installed.
+    <GadgetProvider type={AppType.Embedded} shopifyApiKey="REPLACE ME with api key from Shopify partners dashboard" api={api} router={router}>
+      <Routes />
+    </GadgetProvider>
+  );
+}
+
+export default function AppWrapper() {
+  return (
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  );
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

36368

6.69%

Dev dependency count

12

-7.69%

Lines of code

244

2.09%

Number of lines in readme file

191

37.41%

Dependency changes

• + Added

  @gadgetinc/api-client-core@0.10.1
  (transitive)

• + Added

  graphql@16.11.0
  (transitive)

• Updated

  @gadgetinc/api-client-core@^0.10.0