@shopify/app-bridge-react 2.0.22 → 2.0.25

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.25](https://github.com/Shopify/app-bridge/compare/v2.0.24...v2.0.25) (2022-04-20)
+
+
+### Bug Fixes
+
+* **app-bridge-react:** prevent Resource Picker from sending unecessary updates ([62abe7f](https://github.com/Shopify/app-bridge/commit/62abe7f4116bf4c78934b8eb86e9a74fc0ea03d5))
+* refactor useFeaturesAvailable to always return state ([2634016](https://github.com/Shopify/app-bridge/commit/2634016ccc9b883dd979c82585833b0fdf73d6d0))
+* **app-bridge-react:** ensure useAppState only modifies the state when it has actually changed ([0a2f017](https://github.com/Shopify/app-bridge/commit/0a2f017c35e7d5dda8642eb68801d25158cb7539))
+
+
+### Features
+
+* Add optional router prop to Provider ([4d032b1](https://github.com/Shopify/app-bridge/commit/4d032b1e0cc940ab02a07339ed48cc23e21e26ae))
+* **app-bridge-react:** add useFeatureRequest hook ([adc03c9](https://github.com/Shopify/app-bridge/commit/adc03c9c4d1b2b9e3a2ea44a9ed2eaf4b75b99bf))
+* useFeature hook, refactor React playground ([e1b7c71](https://github.com/Shopify/app-bridge/commit/e1b7c71a4e3f3fb3a6b0373ea6aedc05a34baaea))
+
+
+
+
+
+## [2.0.24](https://github.com/Shopify/app-bridge/compare/v2.0.23...v2.0.24) (2022-04-08)
+
+
+### Features
+
+* **app-bridge-react:** add useNavigate hook ([ae818cb](https://github.com/Shopify/app-bridge/commit/ae818cb7b26e4f416bf9dfa9153940775bdf98df))
+
+
+
+
+
+## [2.0.23](https://github.com/Shopify/app-bridge/compare/v2.0.22...v2.0.23) (2022-04-07)
+
+
+### Features
+
+* NavigationMenu component ([0205cb3](https://github.com/Shopify/app-bridge/commit/0205cb396d8b4ed679dd465348a6dc45227cedb9))
+* **app-bridge-react:** add useAppBridgeState hook ([1fc64f1](https://github.com/Shopify/app-bridge/commit/1fc64f142cbd0a72adccb75fec36d31cde1ed552))
+* **app-bridge-react:** add useLocale hook ([e17dbad](https://github.com/Shopify/app-bridge/commit/e17dbadedbded9d274744738821bef49e52eb43b))
+
+
+
+
+
 ## [2.0.22](https://github.com/Shopify/app-bridge/compare/v2.0.21...v2.0.22) (2022-03-30)
 
 

package/components/ClientRouter/ClientRouter.js

@@ -36,7 +36,7 @@ var ClientRouter = /** @class */ (function (_super) {
     }
     ClientRouter.prototype.componentDidMount = function () {
         var history = this.props.history;
-        this.unsubscribe = (0, router_1.handleRouteChange)(this.context, history);
+        this.unsubscribe = router_1.handleRouteChange(this.context, history);
     };
     ClientRouter.prototype.componentWillUnmount = function () {
         if (this.unsubscribe) {

package/components/ClientRouter/hook.js

@@ -12,9 +12,9 @@ var router_1 = require("./router");
  * @public
  */
 function useClientRouting(history) {
-    var app = (0, useAppBridge_1.useAppBridge)();
-    (0, react_1.useEffect)(function () {
-        return (0, router_1.handleRouteChange)(app, history);
+    var app = useAppBridge_1.useAppBridge();
+    react_1.useEffect(function () {
+        return router_1.handleRouteChange(app, history);
     }, [app, history]);
 }
 exports.default = useClientRouting;

package/components/ContextualSaveBar/ContextualSaveBar.js

@@ -17,10 +17,10 @@ var useAppBridge_1 = require("../../useAppBridge");
 var Action = actions_1.ContextualSaveBar.Action, create = actions_1.ContextualSaveBar.create;
 function ContextualSaveBar(_a) {
     var discardAction = _a.discardAction, saveAction = _a.saveAction, fullWidth = _a.fullWidth, leaveConfirmationDisable = _a.leaveConfirmationDisable, visible = _a.visible;
-    var app = (0, useAppBridge_1.useAppBridge)();
+    var app = useAppBridge_1.useAppBridge();
     var onSaveAction = saveAction.onAction, saveActionProps = __rest(saveAction, ["onAction"]);
     var onDiscardAction = discardAction.onAction, discardActionProps = __rest(discardAction, ["onAction"]);
-    var contextualSaveBar = (0, react_1.useMemo)(function () {
+    var contextualSaveBar = react_1.useMemo(function () {
         return create(app, {
             saveAction: saveActionProps,
             discardAction: discardActionProps,
@@ -28,7 +28,7 @@ function ContextualSaveBar(_a) {
             leaveConfirmationDisable: leaveConfirmationDisable,
         });
     }, [app]);
-    (0, react_1.useEffect)(function () {
+    react_1.useEffect(function () {
         contextualSaveBar.set({
             saveAction: saveActionProps,
             discardAction: discardActionProps,
@@ -44,14 +44,14 @@ function ContextualSaveBar(_a) {
         leaveConfirmationDisable,
         visible,
     ]);
-    (0, react_1.useEffect)(function () {
+    react_1.useEffect(function () {
         contextualSaveBar.subscribe(Action.DISCARD, onDiscardAction);
         contextualSaveBar.subscribe(Action.SAVE, onSaveAction);
         return function () {
             contextualSaveBar.unsubscribe();
         };
     }, [contextualSaveBar]);
-    (0, react_1.useEffect)(function () {
+    react_1.useEffect(function () {
         if (visible) {
             contextualSaveBar.dispatch(Action.SHOW);
         }

package/components/Modal/Modal.js

@@ -116,7 +116,7 @@ var Modal = /** @class */ (function (_super) {
             }
         }
         return __assign(__assign({ title: title, message: message, size: safeSize }, srcPayload), { footer: {
-                buttons: (0, transformers_1.transformActions)(app, {
+                buttons: transformers_1.transformActions(app, {
                     primaryAction: primaryAction,
                     secondaryActions: secondaryActions,
                 }),

package/components/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,17 @@
+export interface NavigationLink {
+    label: string;
+    destination: string;
+}
+export interface Props {
+    /**
+     * List of links in navigation menu
+     */
+    navigationLinks: NavigationLink[];
+    /**
+     * Custom matcher to set active link.
+     * This function will be called with each link and the current location.
+     * If it returns true the current link will be set to the active link.
+     */
+    matcher?: (link: NavigationLink, location: Location) => boolean;
+}
+export default function NavigationMenu({ navigationLinks, matcher }: Props): null;

package/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var AppBridgeAppLinks = __importStar(require("@shopify/app-bridge/actions/Link/AppLink"));
+var AppBridgeNavigationMenu = __importStar(require("@shopify/app-bridge/actions/Menu/NavigationMenu"));
+var useAppBridge_1 = require("../../useAppBridge");
+function NavigationMenu(_a) {
+    var navigationLinks = _a.navigationLinks, matcher = _a.matcher;
+    var app = useAppBridge_1.useAppBridge();
+    var _b = react_1.useState(), activeLink = _b[0], setActiveLink = _b[1];
+    var items = react_1.useMemo(function () {
+        return navigationLinks.map(function (link) {
+            var appLink = AppBridgeAppLinks.create(app, link);
+            if ((matcher === null || matcher === void 0 ? void 0 : matcher(link, location)) || link.destination === location.pathname) {
+                setActiveLink(appLink);
+            }
+            return appLink;
+        });
+    }, [app, location.pathname, matcher, navigationLinks]);
+    var navigationMenu = react_1.useMemo(function () {
+        return AppBridgeNavigationMenu.create(app, {
+            items: items,
+            active: activeLink,
+        });
+        /* We want to reuse the same NavigationMenu instance, even when props change
+         * (so we don't include all the props in the dependency array).
+         * Instead of recreating the component on every change, we use the set method,
+         * in the useEffect block below, to dispatch updates when props change.
+         */
+    }, [app]);
+    react_1.useEffect(function () {
+        navigationMenu.set({ items: items, active: activeLink });
+    }, [activeLink, items]);
+    return null;
+}
+exports.default = NavigationMenu;

package/components/NavigationMenu/index.d.ts

@@ -0,0 +1,3 @@
+import NavigationMenu from './NavigationMenu';
+export { Props } from './NavigationMenu';
+export default NavigationMenu;

package/components/NavigationMenu/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var NavigationMenu_1 = __importDefault(require("./NavigationMenu"));
+exports.default = NavigationMenu_1.default;

package/components/Provider/Provider.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-import { DispatchActionHook } from '@shopify/app-bridge';
-import { AppConfigV2 } from '@shopify/app-bridge/client';
+import React, { PropsWithChildren } from 'react';
+import type { AppConfigV2, DispatchActionHook } from '@shopify/app-bridge/client';
+import type { History } from '../ClientRouter';
+import type { LocationOrHref } from '../RoutePropagator';
 /**
  * Provider props
  *
@@ -11,26 +12,70 @@ export interface Props {
     config: AppConfigV2;
     /** The child elements to render. */
     children?: React.ReactNode;
+    /**
+     * Option to set up client routing and route propagation automatically.
+     * Passing in a router will allow you to bypass setting these
+     * utilities up yourself.
+     *
+     * If you are using React Router, ensure that the Provider is a child
+     * of the router component. For example:
+     *
+     * import {useMemo} from 'react';
+     * import {useLocation, useNavigate, BrowserRouter} from 'react-router-dom';
+     * import {Provider} from '@shopify/app-bridge-react';
+     * import Routes from './Routes';
+     *
+     * export function App() {
+     *   const navigate = useNavigate();
+     *   const location = useLocation();
+     *   const history = useMemo(
+     *     () => ({replace: (path: string) => navigate(path, {replace: true})}),
+     *     [navigate],
+     *   );
+     *   const router = useMemo(
+     *     () => ({
+     *       location,
+     *       history,
+     *     }),
+     *     [location, navigate],
+     *   );
+     *   return (
+     *     <Provider
+     *       apiKey={{
+     *         apiKey: 'API key from Shopify Partner Dashboard',
+     *         host: host,
+     *       }}
+     *       router={router}
+     *     >
+     *       <Routes />
+     *     </Provider>
+     *   );
+     * }
+     *
+     * export default function AppWrapper() {
+     *   return (
+     *     <BrowserRouter>
+     *       <App />
+     *     </BrowserRouter>
+     *   );
+     * }
+     */
+    router?: {
+        location: LocationOrHref;
+        history: History;
+    };
 }
 /**
  * Create an App Bridge client application from a config and pass it as the
  * value to the context provider.
  *
- * @remarks
- * You'll probably want something a little more robust than storing the current
- * app instance in a module-level global.
- *
  * @public
  */
-declare class Provider extends React.Component<Props> {
-    private app;
-    private get appInstance();
-    render(): JSX.Element;
-}
-export default Provider;
+declare function Provider({ config, router, children }: PropsWithChildren<Props>): JSX.Element;
 /**
  * Augment actions with clientInterface metadata, identifying use of this library
  *
  * @internal
  */
 export declare const setClientInterfaceHook: DispatchActionHook;
+export default Provider;

package/components/Provider/Provider.js

@@ -1,26 +1,7 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -37,52 +18,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setClientInterfaceHook = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var app_bridge_1 = __importStar(require("@shopify/app-bridge"));
 var context_1 = require("../../context");
+var ClientRouter_1 = require("../ClientRouter");
+var RoutePropagator_1 = require("../RoutePropagator");
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 var packageJson = require('../../package.json');
 /**
  * Create an App Bridge client application from a config and pass it as the
  * value to the context provider.
  *
- * @remarks
- * You'll probably want something a little more robust than storing the current
- * app instance in a module-level global.
- *
  * @public
  */
-var Provider = /** @class */ (function (_super) {
-    __extends(Provider, _super);
-    function Provider() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.app = _this.appInstance;
-        return _this;
-    }
-    Object.defineProperty(Provider.prototype, "appInstance", {
-        get: function () {
-            if (!this.app) {
-                this.app = (0, app_bridge_1.default)(this.props.config);
-                if (this.app && this.app.hooks) {
-                    this.app.hooks.set(app_bridge_1.LifecycleHook.DispatchAction, exports.setClientInterfaceHook);
-                }
-            }
-            return this.app;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Provider.prototype.render = function () {
-        return (react_1.default.createElement(context_1.AppBridgeContext.Provider, { value: this.appInstance }, this.props.children));
-    };
-    return Provider;
-}(react_1.default.Component));
-exports.default = Provider;
+function Provider(_a) {
+    var config = _a.config, router = _a.router, children = _a.children;
+    var app = react_1.useMemo(function () { return app_bridge_1.default(config); }, [JSON.stringify(config)]);
+    react_1.useEffect(function () {
+        if (app === null || app === void 0 ? void 0 : app.hooks) {
+            app.hooks.set(app_bridge_1.LifecycleHook.DispatchAction, exports.setClientInterfaceHook);
+        }
+    }, [app]);
+    var routerMarkup = (router === null || router === void 0 ? void 0 : router.history) && (router === null || router === void 0 ? void 0 : router.location) ? (react_1.default.createElement(Router, { history: router.history, location: router.location })) : null;
+    return (react_1.default.createElement(context_1.AppBridgeContext.Provider, { value: app },
+        routerMarkup,
+        children));
+}
 /**
  * Augment actions with clientInterface metadata, identifying use of this library
  *
@@ -98,3 +61,10 @@ var setClientInterfaceHook = function (next) {
     };
 };
 exports.setClientInterfaceHook = setClientInterfaceHook;
+function Router(_a) {
+    var history = _a.history, location = _a.location;
+    ClientRouter_1.useClientRouting(history);
+    RoutePropagator_1.useRoutePropagation(location);
+    return null;
+}
+exports.default = Provider;

package/components/ResourcePicker/ResourcePicker.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
-import { ResourcePicker as AppBridgeResourcePicker } from '@shopify/app-bridge/actions';
-import { BaseResource } from '@shopify/app-bridge/actions/ResourcePicker';
+import { ActionVerb, ResourceType } from '@shopify/app-bridge/actions/ResourcePicker';
+import type { BaseResource, Options, ResourceSelection, ProductOptions } from '@shopify/app-bridge/actions/ResourcePicker';
 export interface SelectPayload {
     /** The selected resources
      * @see {@link https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/resourcepicker|resource picker documentation} for more information
      */
-    selection: AppBridgeResourcePicker.ResourceSelection[];
+    selection: ResourceSelection[];
 }
 interface BaseProps {
     /** Whether the picker is open or not */
@@ -26,7 +25,7 @@ interface BaseProps {
     /** Whether to allow selection of multiple items, or the maximum number of selected items */
     selectMultiple?: boolean | number;
     /** Override default action verb `Add`. The actionVerb appears in the title `<actionVerb>` `<resourceType>` and as the primary action of the resource picker. */
-    actionVerb?: AppBridgeResourcePicker.ActionVerb;
+    actionVerb?: ActionVerb;
     /** Callback when a selection has been made */
     onSelection?(selectPayload: SelectPayload): void;
     /** Callback when the picker is closed without selection */
@@ -63,15 +62,7 @@ export declare type Props = ProductPickerProps | ProductVariantProps | Collectio
  *
  * @public
  */
-declare class ResourcePicker extends React.PureComponent<Props, never> {
-    static contextType: React.Context<import("../../context").IAppBridgeContext>;
-    static ActionVerb: typeof AppBridgeResourcePicker.ActionVerb;
-    private focusReturnPoint;
-    private picker;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    componentWillUnmount(): void;
-    render(): null;
-    getActionOptions(): AppBridgeResourcePicker.Options | AppBridgeResourcePicker.ProductOptions;
-}
+declare function ResourcePicker(props: Props): null;
 export default ResourcePicker;
+export type { BaseResource, Options, ProductOptions };
+export { ActionVerb, ResourceType };