@shopify/shopify-app-remix 2.7.0 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/shopify-app-remix",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "Shopify Remix - to simplify the building of Shopify Apps with Remix",
   "repository": {
     "type": "git",
@@ -9,30 +9,56 @@
   "bugs": {
     "url": "https://github.com/Shopify/shopify-app-js/issues"
   },
-  "homepage": "https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix",
+  "homepage": "https://github.com/Shopify/shopify-app-js/tree/main/packages/apps/shopify-app-remix",
   "author": "Shopify Inc.",
   "license": "MIT",
-  "types": "./build/ts/server/index.d.ts",
-  "main": "./build/cjs/server/index.js",
+  "main": "./dist/cjs/server/index.js",
+  "module": "./dist/esm/server/index.mjs",
+  "types": "./dist/ts/server/index.d.ts",
   "exports": {
     ".": {
-      "types": "./build/ts/server/index.d.ts",
-      "default": "./build/cjs/server/index.js"
+      "types": "./dist/ts/server/index.d.ts",
+      "require": "./dist/cjs/server/index.js",
+      "import": "./dist/esm/server/index.mjs",
+      "default": "./dist/cjs/server/index.js"
+    },
+    "./adapters/*": {
+      "types": "./dist/ts/server/adapters/*/index.d.ts",
+      "require": "./dist/cjs/server/adapters/*/index.js",
+      "import": "./dist/esm/server/adapters/*/index.mjs",
+      "default": "./dist/cjs/server/adapters/*/index.js"
+    },
+    "./server/adapters/*": {
+      "types": "./dist/ts/server/adapters/*/index.d.ts",
+      "require": "./dist/cjs/server/adapters/*/index.js",
+      "import": "./dist/esm/server/adapters/*/index.mjs",
+      "default": "./dist/cjs/server/adapters/*/index.js"
     },
-    "./adapters/*": "./build/cjs/server/adapters/*/index.js",
     "./server": {
-      "types": "./build/ts/server/index.d.ts",
-      "default": "./build/cjs/server/index.js"
+      "types": "./dist/ts/server/index.d.ts",
+      "require": "./dist/cjs/server/index.js",
+      "import": "./dist/esm/server/index.mjs",
+      "default": "./dist/cjs/server/index.js"
     },
-    "./server/adapters/*": "./build/cjs/server/adapters/*/index.js",
     "./react": {
-      "types": "./build/ts/react/index.d.ts",
-      "default": "./build/cjs/react/index.js"
+      "types": "./dist/ts/react/index.d.ts",
+      "require": "./dist/cjs/react/index.js",
+      "import": "./dist/esm/react/index.mjs",
+      "default": "./dist/cjs/react/index.js"
     }
   },
   "scripts": {
     "build-docs": "sh docs/build-docs.sh",
-    "validate-docs": "sh ./docs/build-docs.sh isTest && yarn compare-docs"
+    "validate-docs": "sh ./docs/build-docs.sh isTest && yarn compare-docs",
+    "lint": "eslint . --ext .js,.ts",
+    "build": "yarn run rollup && yarn tsc -p ./tsconfig.build.json",
+    "test": "jest",
+    "test:ci": "yarn test",
+    "rollup": "rollup -c rollup.config.js --bundleConfigAsCjs",
+    "clean": "rimraf .rollup.cache dist",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "yarn build && changeset publish"
   },
   "publishConfig": {
     "access": "public"
@@ -50,27 +76,28 @@
     "Storefront API"
   ],
   "devDependencies": {
-    "@remix-run/react": "^2.6.0",
-    "@shopify/generate-docs": "^0.13.2",
+    "@remix-run/react": "^2.8.1",
+    "@shopify/generate-docs": "^0.15.2",
     "@shopify/polaris": "^12.18.0",
     "@shopify/react-testing": "^5.1.3",
-    "@shopify/shopify-app-session-storage-memory": "^3.0.2",
+    "@shopify/shopify-app-session-storage-memory": "^3.0.4",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/react": "^18.2.18",
-    "@types/semver": "^7.5.7",
+    "@types/semver": "^7.5.8",
     "jest-fetch-mock": "^3.0.3",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "dependencies": {
     "@remix-run/node": "^2.6.0",
     "@remix-run/server-runtime": "^2.5.1",
-    "@shopify/admin-api-client": "^0.2.3",
-    "@shopify/shopify-api": "^9.5.1",
-    "@shopify/shopify-app-session-storage": "^2.1.2",
-    "@shopify/storefront-api-client": "^0.2.3",
-    "isbot": "^3.7.1",
+    "@shopify/admin-api-client": "^0.2.8",
+    "@shopify/shopify-api": "^9.7.2",
+    "@shopify/shopify-app-session-storage": "^2.1.4",
+    "@shopify/storefront-api-client": "^0.3.3",
+    "isbot": "^5.1.4",
     "semver": "^7.6.0"
   },
   "peerDependencies": {
@@ -84,9 +111,8 @@
     }
   },
   "files": [
-    "build/*",
+    "dist/*",
     "!build/**/__tests__",
-    "!bundle/*",
     "!tsconfig.tsbuildinfo",
     "!node_modules"
   ]

package/build/cjs/react/components/AppProvider/AppProvider.js

@@ -1,98 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var polaris = require('@shopify/polaris');
-var englishI18n = require('@shopify/polaris/locales/en.json');
-var _const = require('../../const.js');
-var RemixPolarisLink = require('../RemixPolarisLink.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var englishI18n__default = /*#__PURE__*/_interopDefaultLegacy(englishI18n);
-
-/**
- * Sets up the Polaris `AppProvider` and injects the App Bridge script.
- *
- * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component
- * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`
- * component.
- *
- * {@link https://polaris.shopify.com/components/utilities/app-provider}
- * {@link https://shopify.dev/tools/app-bridge}
- *
- * @example
- * <caption>Set up AppProvider.</caption>
- * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
- * ```ts
- * import {authenticate} from '~/shopify.server';
- * import {AppProvider} from '@shopify/shopify-app-remix/react';
- *
- * export async function loader({ request }) {
- *   await authenticate.admin(request);
- *
- *   return json({ apiKey: process.env.SHOPIFY_API_KEY });
- * }
- *
- * export default function App() {
- *   const { apiKey } = useLoaderData();
- *
- *   return (
- *     <AppProvider isEmbeddedApp apiKey={apiKey}>
- *       <Outlet />
- *     </AppProvider>
- *   );
- * }
- * ```
- *
- * @example
- * <caption>Localize Polaris components.</caption>
- * <description>Pass in a different locale for Polaris to translate its components.</description>
- * ```ts
- * import {authenticate} from '~/shopify.server';
- * import {AppProvider} from '@shopify/shopify-app-remix/react';
- *
- * export async function loader({ request }) {
- *   await authenticate.admin(request);
- *
- *   return json({
- *     apiKey: process.env.SHOPIFY_API_KEY,
- *     polarisTranslations: require("@shopify/polaris/locales/fr.json"),
- *   });
- * }
- *
- * export default function App() {
- *   const { apiKey, polarisTranslations } = useLoaderData();
- *
- *   return (
- *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
- *       <Outlet />
- *     </AppProvider>
- *   );
- * }
- * ```
- */
-function AppProvider(props) {
-  const {
-    children,
-    apiKey,
-    i18n,
-    isEmbeddedApp = true,
-    __APP_BRIDGE_URL = _const.APP_BRIDGE_URL,
-    ...polarisProps
-  } = props;
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [isEmbeddedApp && /*#__PURE__*/jsxRuntime.jsx("script", {
-      src: __APP_BRIDGE_URL,
-      "data-api-key": apiKey
-    }), /*#__PURE__*/jsxRuntime.jsx(polaris.AppProvider, {
-      ...polarisProps,
-      linkComponent: RemixPolarisLink.RemixPolarisLink,
-      i18n: i18n || englishI18n__default["default"],
-      children: children
-    })]
-  });
-}
-
-exports.AppProvider = AppProvider;

package/build/cjs/react/components/RemixPolarisLink.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var react = require('@remix-run/react');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const RemixPolarisLink = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  var _props$url;
-  return /*#__PURE__*/jsxRuntime.jsx(react.Link, {
-    ...props,
-    to: (_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : props.to,
-    ref: ref
-  });
-});
-
-exports.RemixPolarisLink = RemixPolarisLink;

package/build/cjs/react/const.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const APP_BRIDGE_URL = 'https://cdn.shopify.com/shopifycloud/app-bridge.js';
-
-exports.APP_BRIDGE_URL = APP_BRIDGE_URL;

package/build/cjs/react/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var AppProvider = require('./components/AppProvider/AppProvider.js');
-
-
-
-exports.AppProvider = AppProvider.AppProvider;

package/build/cjs/server/adapters/node/index.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var crypto = require('crypto');
-var runtime = require('@shopify/shopify-api/runtime');
-var appBridgeUrl = require('../../authenticate/helpers/app-bridge-url.js');
-require('isbot');
-require('@remix-run/server-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var crypto__default = /*#__PURE__*/_interopDefaultLegacy(crypto);
-
-runtime.setCrypto(crypto__default["default"]);
-runtime.setAbstractRuntimeString(() => {
-  return `Remix (Node)`;
-});
-
-/* eslint-disable no-process-env */
-if (process.env.APP_BRIDGE_URL) {
-  appBridgeUrl.setAppBridgeUrlOverride(process.env.APP_BRIDGE_URL);
-}
-/* eslint-enable no-process-env */

package/build/cjs/server/adapters/vercel/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var runtime = require('@shopify/shopify-api/runtime');
-var node = require('@remix-run/node');
-require('../node/index.js');
-
-node.installGlobals();
-const fetchFunc = fetch;
-runtime.setAbstractFetchFunc(async (...args) => {
-  const response = await fetchFunc.apply(undefined, args);
-  return response;
-});

package/build/cjs/server/authenticate/admin/authenticate.js

@@ -1,174 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ensureCorsHeaders = require('../helpers/ensure-cors-headers.js');
-var validateSessionToken = require('../helpers/validate-session-token.js');
-var getSessionTokenHeader = require('../helpers/get-session-token-header.js');
-var rejectBotRequest = require('../helpers/reject-bot-request.js');
-var respondToOptionsRequest = require('../helpers/respond-to-options-request.js');
-require('@remix-run/server-runtime');
-var cancel = require('./billing/cancel.js');
-var require$1 = require('./billing/require.js');
-var request = require('./billing/request.js');
-var check = require('./billing/check.js');
-var createAdminApiContext = require('./helpers/create-admin-api-context.js');
-var ensureAppIsEmbeddedIfRequired = require('./helpers/ensure-app-is-embedded-if-required.js');
-var ensureSessionTokenSearchParamIfRequired = require('./helpers/ensure-session-token-search-param-if-required.js');
-require('@shopify/shopify-api');
-var redirect = require('./helpers/redirect.js');
-var renderAppBridge = require('./helpers/render-app-bridge.js');
-var validateShopAndHostParams = require('./helpers/validate-shop-and-host-params.js');
-
-function authStrategyFactory({
-  strategy,
-  ...params
-}) {
-  const {
-    api,
-    logger,
-    config
-  } = params;
-  async function respondToBouncePageRequest(request) {
-    const url = new URL(request.url);
-    if (url.pathname === config.auth.patchSessionTokenPath) {
-      logger.debug('Rendering bounce page');
-      throw renderAppBridge.renderAppBridge({
-        config,
-        logger,
-        api
-      }, request);
-    }
-  }
-  async function respondToExitIframeRequest(request) {
-    const url = new URL(request.url);
-    if (url.pathname === config.auth.exitIframePath) {
-      const destination = url.searchParams.get('exitIframe');
-      logger.debug('Rendering exit iframe page', {
-        destination
-      });
-      throw renderAppBridge.renderAppBridge({
-        config,
-        logger,
-        api
-      }, request, {
-        url: destination
-      });
-    }
-  }
-  function createContext(request$1, session, authStrategy, sessionToken) {
-    const context = {
-      admin: createAdminApiContext.createAdminApiContext(session, params, authStrategy.handleClientError(request$1)),
-      billing: {
-        require: require$1.requireBillingFactory(params, request$1, session),
-        check: check.checkBillingFactory(params, request$1, session),
-        request: request.requestBillingFactory(params, request$1, session),
-        cancel: cancel.cancelBillingFactory(params, request$1, session)
-      },
-      session,
-      cors: ensureCorsHeaders.ensureCORSHeadersFactory(params, request$1)
-    };
-    if (config.isEmbeddedApp) {
-      return {
-        ...context,
-        sessionToken,
-        redirect: redirect.redirectFactory(params, request$1)
-      };
-    } else {
-      return context;
-    }
-  }
-  return async function authenticateAdmin(request) {
-    try {
-      rejectBotRequest.respondToBotRequest(params, request);
-      respondToOptionsRequest.respondToOptionsRequest(params, request);
-      await respondToBouncePageRequest(request);
-      await respondToExitIframeRequest(request);
-      await strategy.respondToOAuthRequests(request);
-
-      // If this is a valid request, but it doesn't have a session token header, this is a document request. We need to
-      // ensure we're embedded if needed and we have the information needed to load the session.
-      if (!getSessionTokenHeader.getSessionTokenHeader(request)) {
-        validateShopAndHostParams.validateShopAndHostParams(params, request);
-        await ensureAppIsEmbeddedIfRequired.ensureAppIsEmbeddedIfRequired(params, request);
-        await ensureSessionTokenSearchParamIfRequired.ensureSessionTokenSearchParamIfRequired(params, request);
-      }
-      logger.info('Authenticating admin request');
-      const {
-        payload,
-        shop,
-        sessionId,
-        sessionToken
-      } = await getSessionTokenContext(params, request);
-      logger.debug('Loading session from storage', {
-        sessionId
-      });
-      const existingSession = sessionId ? await config.sessionStorage.loadSession(sessionId) : undefined;
-      const session = await strategy.authenticate(request, {
-        session: existingSession,
-        sessionToken,
-        shop
-      });
-      logger.debug('Request is valid, loaded session from session token', {
-        shop: session.shop,
-        isOnline: session.isOnline
-      });
-      return createContext(request, session, strategy, payload);
-    } catch (errorOrResponse) {
-      if (errorOrResponse instanceof Response) {
-        ensureCorsHeaders.ensureCORSHeadersFactory(params, request)(errorOrResponse);
-      }
-      throw errorOrResponse;
-    }
-  };
-}
-async function getSessionTokenContext(params, request) {
-  const {
-    api,
-    config,
-    logger
-  } = params;
-  const headerSessionToken = getSessionTokenHeader.getSessionTokenHeader(request);
-  const searchParamSessionToken = getSessionTokenHeader.getSessionTokenFromUrlParam(request);
-  const sessionToken = headerSessionToken || searchParamSessionToken;
-  logger.debug('Attempting to authenticate session token', {
-    sessionToken: JSON.stringify({
-      header: headerSessionToken,
-      search: searchParamSessionToken
-    })
-  });
-  if (config.isEmbeddedApp) {
-    const payload = await validateSessionToken.validateSessionToken({
-      config,
-      logger,
-      api
-    }, sessionToken);
-    const dest = new URL(payload.dest);
-    const shop = dest.hostname;
-    logger.debug('Session token is valid', {
-      shop,
-      payload
-    });
-    const sessionId = config.useOnlineTokens ? api.session.getJwtSessionId(shop, payload.sub) : api.session.getOfflineId(shop);
-    return {
-      shop,
-      payload,
-      sessionId,
-      sessionToken
-    };
-  }
-  const url = new URL(request.url);
-  const shop = url.searchParams.get('shop');
-  const sessionId = await api.session.getCurrentId({
-    isOnline: config.useOnlineTokens,
-    rawRequest: request
-  });
-  return {
-    shop,
-    sessionId,
-    payload: undefined,
-    sessionToken
-  };
-}
-
-exports.authStrategyFactory = authStrategyFactory;

package/build/cjs/server/authenticate/admin/billing/cancel.js

@@ -1,41 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var shopifyApi = require('@shopify/shopify-api');
-require('@remix-run/server-runtime');
-var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
-
-function cancelBillingFactory(params, request, session) {
-  return async function cancelBilling(options) {
-    const {
-      api,
-      logger,
-      config
-    } = params;
-    logger.debug('Cancelling billing', {
-      shop: session.shop,
-      ...options
-    });
-    try {
-      return await api.billing.cancel({
-        session,
-        subscriptionId: options.subscriptionId,
-        isTest: options.isTest,
-        prorate: options.prorate
-      });
-    } catch (error) {
-      if (error instanceof shopifyApi.HttpResponseError && error.response.code === 401) {
-        logger.debug('API token was invalid, redirecting to OAuth', {
-          shop: session.shop
-        });
-        await config.sessionStorage.deleteSession(session.id);
-        throw await redirectToAuthPage.redirectToAuthPage(params, request, session.shop);
-      } else {
-        throw error;
-      }
-    }
-  };
-}
-
-exports.cancelBillingFactory = cancelBillingFactory;

package/build/cjs/server/authenticate/admin/billing/check.js

@@ -1,41 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var shopifyApi = require('@shopify/shopify-api');
-require('@remix-run/server-runtime');
-var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
-
-function checkBillingFactory(params, request, session) {
-  return async function checkBilling(options) {
-    const {
-      api,
-      logger,
-      config
-    } = params;
-    logger.debug('Checking billing plans', {
-      shop: session.shop,
-      ...options
-    });
-    try {
-      return await api.billing.check({
-        session,
-        plans: options.plans,
-        isTest: options.isTest,
-        returnObject: true
-      });
-    } catch (error) {
-      if (error instanceof shopifyApi.HttpResponseError && error.response.code === 401) {
-        logger.debug('API token was invalid, redirecting to OAuth', {
-          shop: session.shop
-        });
-        await config.sessionStorage.deleteSession(session.id);
-        throw await redirectToAuthPage.redirectToAuthPage(params, request, session.shop);
-      } else {
-        throw error;
-      }
-    }
-  };
-}
-
-exports.checkBillingFactory = checkBillingFactory;

package/build/cjs/server/authenticate/admin/billing/request.js

@@ -1,86 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var shopifyApi = require('@shopify/shopify-api');
-var serverRuntime = require('@remix-run/server-runtime');
-var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
-var redirectWithAppBridgeHeaders = require('../helpers/redirect-with-app-bridge-headers.js');
-
-function requestBillingFactory(params, request, session) {
-  return async function requestBilling({
-    plan,
-    isTest,
-    returnUrl,
-    ...overrides
-  }) {
-    const {
-      api,
-      logger,
-      config
-    } = params;
-    logger.info('Requesting billing', {
-      shop: session.shop,
-      plan,
-      isTest,
-      returnUrl
-    });
-    let result;
-    try {
-      result = await api.billing.request({
-        plan: plan,
-        session,
-        isTest,
-        returnUrl,
-        returnObject: true,
-        ...overrides
-      });
-    } catch (error) {
-      if (error instanceof shopifyApi.HttpResponseError && error.response.code === 401) {
-        logger.debug('API token was invalid, redirecting to OAuth', {
-          shop: session.shop
-        });
-        await config.sessionStorage.deleteSession(session.id);
-        throw await redirectToAuthPage.redirectToAuthPage(params, request, session.shop);
-      } else {
-        throw error;
-      }
-    }
-    throw redirectOutOfApp(params, request, result.confirmationUrl, session.shop);
-  };
-}
-function redirectOutOfApp(params, request, url, shop) {
-  const {
-    config,
-    logger
-  } = params;
-  logger.debug('Redirecting out of app', {
-    url
-  });
-  const requestUrl = new URL(request.url);
-  const isEmbeddedRequest = requestUrl.searchParams.get('embedded') === '1';
-  const isXhrRequest = request.headers.get('authorization');
-  if (isXhrRequest) {
-    // eslint-disable-next-line no-warning-comments
-    // TODO Check this with the beta flag disabled (with the bounce page)
-    // Remix is not including the X-Shopify-API-Request-Failure-Reauthorize-Url when throwing a Response
-    // https://github.com/remix-run/remix/issues/5356
-    throw new Response(undefined, {
-      status: 401,
-      statusText: 'Unauthorized',
-      headers: redirectWithAppBridgeHeaders.getAppBridgeHeaders(url)
-    });
-  } else if (isEmbeddedRequest) {
-    const params = new URLSearchParams({
-      shop,
-      host: requestUrl.searchParams.get('host'),
-      exitIframe: url
-    });
-    throw serverRuntime.redirect(`${config.auth.exitIframePath}?${params.toString()}`);
-  } else {
-    // This will only ever happen for non-embedded apps, because the authenticator will stop before reaching this point
-    throw serverRuntime.redirect(url);
-  }
-}
-
-exports.requestBillingFactory = requestBillingFactory;