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

Comparing version 0.2.4 to 0.2.5

dist/src/context.d.ts

@@ -19,4 +19,6 @@ /// <reference types="react" />
     isAuthenticated: boolean;
+    /** Is the app being rendered outside of a Shopify admin flow, this only applies if type is set to AppType.Embedded. e.g. navigating to this page through a link */
+    isRootFrameRequest: boolean;
 };
 export declare const GadgetAuthContext: import("react").Context<GadgetAuthContextValue>;
 export declare const useGadget: () => GadgetAuthContextValue;

dist/src/context.js

@@ -11,2 +11,3 @@ "use strict";
     appBridge: null,
+    isRootFrameRequest: false,
 });
@@ -13,0 +14,0 @@ const useGadget = () => (0, react_1.useContext)(exports.GadgetAuthContext);

dist/src/Provider.js

@@ -51,3 +51,3 @@ "use strict";
 // inner component that exists in order to ask for the app bridge
-const InnerGadgetProvider = (0, react_2.memo)(({ children, forceRedirect, isEmbedded, gadgetAppUrl, originalQueryParams, api }) => {
+const InnerGadgetProvider = (0, react_2.memo)(({ children, forceRedirect, isEmbedded, gadgetAppUrl, originalQueryParams, api, isRootFrameRequest }) => {
     const appBridge = (0, react_2.useContext)(context_1.AppBridgeContext);
@@ -60,2 +60,3 @@ const [context, setContext] = (0, react_2.useState)({
         appBridge,
+        isRootFrameRequest: false,
     });
@@ -109,3 +110,3 @@ (0, react_2.useEffect)(() => {
     (0, react_2.useEffect)(() => {
-        if (!runningShopifyAuth)
+        if (!runningShopifyAuth || isRootFrameRequest)
             return;
@@ -123,3 +124,3 @@ // redirect to gadget app root pages url with oauth params
     }, [appBridge, gadgetAppUrl, isEmbedded, originalQueryParams, runningShopifyAuth]);
-    const loading = forceRedirect || runningShopifyAuth || sessionFetching;
+    const loading = (forceRedirect || runningShopifyAuth || sessionFetching) && !isRootFrameRequest;
     (0, react_2.useEffect)(() => {
@@ -133,2 +134,3 @@ return setContext({
             error,
+            isRootFrameRequest,
         });
@@ -154,2 +156,4 @@ }, [loading, isEmbedded, appBridge, isAuthenticated, error]);
     const inDestinationContext = isEmbedded == ((type ?? AppType.Embedded) == AppType.Embedded);
+    // We need to inform developers if the component is being rendered in a non embedded context when it should be AND we're not in an interstitial installation state. This is determined for now by the absence of both hmac and shop. This will generally occur when someone visits the app url while not in the Shopify admin.
+    const isRootFrameRequest = !query?.has("hmac") && !query?.has("shop") && (type ?? AppType.Embedded) == AppType.Embedded;
     const forceRedirect = isReady && !(0, lodash_1.isUndefined)(host) && !inDestinationContext;
@@ -164,3 +168,3 @@ const gadgetAppUrl = new URL(api.connection.options.endpoint).origin;
     let app = (react_2.default.createElement(react_1.Provider, { value: api.connection.currentClient },
-        react_2.default.createElement(InnerGadgetProvider, { forceRedirect: forceRedirect, isEmbedded: isEmbedded, gadgetAppUrl: gadgetAppUrl, api: api, originalQueryParams: originalQueryParams }, children)));
+        react_2.default.createElement(InnerGadgetProvider, { forceRedirect: forceRedirect, isEmbedded: isEmbedded, gadgetAppUrl: gadgetAppUrl, api: api, originalQueryParams: originalQueryParams, isRootFrameRequest: isRootFrameRequest }, children)));
     // app bridge provider seems to prevent urql from sending graphql requests when it cannot communicate using postMessage when not embedded so we must skip using the app bridge provider on the very first redirect from shopify
@@ -167,0 +171,0 @@ if (host && (!isInstallRequest || inDestinationContext)) {

package.json

 {
   "name": "@gadgetinc/react-shopify-app-bridge",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "source": "src/index.ts",
@@ -5,0 +5,0 @@ "main": "dist/src/index.js",

README.md

@@ -99,3 +99,3 @@ <div align="center">
 function ProductManager() {
-  const { loading, appBridge } = useGadget();
+  const { loading, appBridge, isRootFrameRequest, isAuthenticated } = useGadget();
   const [, deleteProduct] = useAction(api.shopifyProduct.delete);
@@ -123,3 +123,5 @@ const [{ data, fetching, error }, refresh] = useFindMany(api.shopifyProduct);
       {loading && <span>Loading...</span>}
-      {!loading &&
+      {/* A user is viewing this page from a direct link so show them the home page! */}
+      {!loading && isRootFrameRequest && <div>Welcome to my cool app's webpage!</div>}
+      {!loading && isAuthenticated &&
         data.map((product) => (
@@ -126,0 +128,0 @@ <button

No alert changes

Improved metrics

Total package byte prevSize

34232

7.71%

Lines of code

239

3.46%

Number of lines in readme file

139

1.46%

No dependency changes