fontdue-js 1.12.4 → 2.0.0-alpha10

package/.depcheckrc

@@ -0,0 +1,3 @@
+specials: ["babel"]
+ignores: ["sass"]
+ignore-bin-package: true

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.0.0
+
+- __Breaking change__: This is a major upgrade to support React 18 concurrent mode, including changes to how we resolve data using Suspense via Relay. Upgrading meant we require some new features only available in React 18. But this change also means that Fontdue components can now fully resolve during server-side rendering (e.g. in Next.js), making for much smoother initial page loads.
+
 ## 1.12.3
 
 - Fix Stripe integration for Apple Pay

package/README.md

@@ -2,35 +2,20 @@
 
 This package exports [Fontdue.js](https://docs.fontdue.com/fontduejs) components for React projects.
 
+## Installation
+
+``` shell
+npm install fontdue-js@latest
+```
+
 ## Usage
 
-1. Wrap the root of your project with the [`FontdueProvider`](#fontdueprovider) component. For example in a Next.js app, add it to your `_app.tsx`.
+1. Wrap the root of your project with the [`FontdueProvider`](#fontdueprovider) component. For example in a Next.js app, add it to your `app/layout.tsx` or `pages/_app.tsx`.
 2. Include the `url` property with your Fontdue store URL.
 3. Render the [`StoreModal`](#storemodal) component so that is it available on every page.
 4. Import the `fontdue-js/fontdue.css` CSS file. (This example uses Next.js)
 
-### Example
-
-```tsx
-import type { AppProps } from 'next/app';
-import Head from 'next/head';
-import React from 'react';
-import FontdueProvider from 'fontdue-js/FontdueProvider';
-import StoreModal from 'fontdue-js/StoreModal';
-import 'fontdue-js/fontdue.css';
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <FontdueProvider url="https://example.fontdue.com" config={{}}>
-      <Component {...pageProps} />
-
-      <StoreModal />
-    </FontdueProvider>
-  );
-}
-
-export default MyApp;
-```
+For details on integrating into your Next.js app, read our [Next.js guide](https://docs.fontdue.com/nextjs)
 
 ## IDs
 
@@ -45,7 +30,7 @@ You may alternatively specify a `collectionSlug` for these components, which can
 
 ## `FontdueProvider`
 
-The FontdueProvider provides necessary context for all the other Fontdue.js components, so it must be an ancestor of all other components. See example above for usage.
+The FontdueProvider provides necessary context for all the other Fontdue.js components, so it must be an ancestor of all other components. See example in our [guide](https://docs.fontdue.com/nextjs).
 
 ```tsx
 import FontdueProvider from 'fontdue-js/FontdueProvider';

package/dist/__generated__/AddToCartBannerQuery.graphql.d.ts

@@ -1,16 +1,21 @@
-import { ConcreteRequest } from "relay-runtime";
+/**
+ * @generated SignedSource<<d27273aa63e4dff52b2fe69a3446fb81>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
-export declare type AddToCartBannerQueryVariables = {};
-export declare type AddToCartBannerQueryResponse = {
+export type AddToCartBannerQuery$variables = {};
+export type AddToCartBannerQuery$data = {
     readonly viewer: {
         readonly currentOrder: {
-            readonly " $fragmentRefs": FragmentRefs<"AddToCartBanner_order">;
+            readonly " $fragmentSpreads": FragmentRefs<"AddToCartBanner_order">;
         } | null;
     };
 };
-export declare type AddToCartBannerQuery = {
-    readonly response: AddToCartBannerQueryResponse;
-    readonly variables: AddToCartBannerQueryVariables;
+export type AddToCartBannerQuery = {
+    response: AddToCartBannerQuery$data;
+    variables: AddToCartBannerQuery$variables;
 };
 declare const node: ConcreteRequest;
 export default node;

package/dist/__generated__/AddToCartBannerQuery.graphql.js

@@ -4,51 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/**
+ * @generated SignedSource<<d27273aa63e4dff52b2fe69a3446fb81>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
 /* tslint:disable */
 /* eslint-disable */
 // @ts-nocheck
 
-/*
-query AddToCartBannerQuery {
-  viewer {
-    currentOrder {
-      ...AddToCartBanner_order
-      id
-    }
-    id
-  }
-}
-
-fragment AddToCartBanner_order on Order {
-  stripeCharge {
-    paid
-  }
-  orderItems {
-    id
-    sku {
-      product {
-        __typename
-        ... on FontCollection {
-          name
-        }
-        ... on FontStyle {
-          name
-          family {
-            name
-            id
-          }
-        }
-        ... on Node {
-          __isNode: __typename
-          id
-        }
-      }
-      id
-    }
-  }
-}
-*/
-
 const node = function () {
   var v0 = {
       "alias": null,
@@ -63,7 +28,9 @@ const node = function () {
       "kind": "ScalarField",
       "name": "name",
       "storageKey": null
-    };
+    },
+    v2 = [v1 /*: any*/];
+
   return {
     "fragment": {
       "argumentDefinitions": [],
@@ -159,8 +126,7 @@ const node = function () {
                   "storageKey": null
                 }, {
                   "kind": "InlineFragment",
-                  "selections": [v1 /*: any*/],
-
+                  "selections": v2 /*: any*/,
                   "type": "FontCollection",
                   "abstractKey": null
                 }, {
@@ -178,6 +144,11 @@ const node = function () {
                   }],
                   "type": "FontStyle",
                   "abstractKey": null
+                }, {
+                  "kind": "InlineFragment",
+                  "selections": v2 /*: any*/,
+                  "type": "Bundle",
+                  "abstractKey": null
                 }, {
                   "kind": "InlineFragment",
                   "selections": [v0 /*: any*/],
@@ -200,15 +171,15 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "8e3acb7d4fa0c98e4ef519db87072ddb",
+      "cacheID": "3c6913ace21dce3b4029e441db3f4088",
       "id": null,
       "metadata": {},
       "name": "AddToCartBannerQuery",
       "operationKind": "query",
-      "text": "query AddToCartBannerQuery {\n  viewer {\n    currentOrder {\n      ...AddToCartBanner_order\n      id\n    }\n    id\n  }\n}\n\nfragment AddToCartBanner_order on Order {\n  stripeCharge {\n    paid\n  }\n  orderItems {\n    id\n    sku {\n      product {\n        __typename\n        ... on FontCollection {\n          name\n        }\n        ... on FontStyle {\n          name\n          family {\n            name\n            id\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n  }\n}\n"
+      "text": "query AddToCartBannerQuery {\n  viewer {\n    currentOrder {\n      ...AddToCartBanner_order\n      id\n    }\n    id\n  }\n}\n\nfragment AddToCartBanner_order on Order {\n  stripeCharge {\n    paid\n  }\n  orderItems {\n    id\n    sku {\n      product {\n        __typename\n        ... on FontCollection {\n          name\n        }\n        ... on FontStyle {\n          name\n          family {\n            name\n            id\n          }\n        }\n        ... on Bundle {\n          name\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n  }\n}\n"
     }
   };
 }();
-node.hash = '0ece6678652384f7938caf18b2a40be9';
+node.hash = "0ece6678652384f7938caf18b2a40be9";
 var _default = node;
 exports.default = _default;

package/dist/__generated__/AddToCartBanner_item.graphql.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @generated SignedSource<<ce9b36bc5349fdf65271b1ed67391564>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type AddToCartBanner_item$data = {
+    readonly id: string;
+    readonly sku: {
+        readonly product: {
+            readonly __typename: "Bundle";
+            readonly name: string;
+        } | {
+            readonly __typename: "FontCollection";
+            readonly name: string;
+        } | {
+            readonly __typename: "FontStyle";
+            readonly family: {
+                readonly name: string;
+            } | null;
+            readonly name: string;
+        } | {
+            readonly __typename: "%other";
+        } | null;
+    } | null;
+    readonly " $fragmentType": "AddToCartBanner_item";
+};
+export type AddToCartBanner_item$key = {
+    readonly " $data"?: AddToCartBanner_item$data;
+    readonly " $fragmentSpreads": FragmentRefs<"AddToCartBanner_item">;
+};
+declare const node: ReaderFragment;
+export default node;

package/dist/__generated__/AddToCartBanner_item.graphql.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<ce9b36bc5349fdf65271b1ed67391564>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v1 = [v0 /*: any*/];
+
+  return {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "AddToCartBanner_item",
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "concreteType": "Sku",
+      "kind": "LinkedField",
+      "name": "sku",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "product",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "__typename",
+          "storageKey": null
+        }, {
+          "kind": "InlineFragment",
+          "selections": v1 /*: any*/,
+          "type": "FontCollection",
+          "abstractKey": null
+        }, {
+          "kind": "InlineFragment",
+          "selections": [v0 /*: any*/, {
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "family",
+            "plural": false,
+            "selections": v1 /*: any*/,
+            "storageKey": null
+          }],
+          "type": "FontStyle",
+          "abstractKey": null
+        }, {
+          "kind": "InlineFragment",
+          "selections": v1 /*: any*/,
+          "type": "Bundle",
+          "abstractKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    }],
+    "type": "OrderItem",
+    "abstractKey": null
+  };
+}();
+node.hash = "ebcfac33759865770c15e1efe0777e91";
+var _default = node;
+exports.default = _default;

package/dist/__generated__/AddToCartBanner_order.graphql.d.ts

@@ -1,32 +1,39 @@
-import { ReaderFragment } from "relay-runtime";
+/**
+ * @generated SignedSource<<bcb5f0fd150277ae9e809374b5a16809>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
-export declare type AddToCartBanner_order = {
-    readonly stripeCharge: {
-        readonly paid: boolean | null;
-    } | null;
+export type AddToCartBanner_order$data = {
     readonly orderItems: ReadonlyArray<{
         readonly id: string;
         readonly sku: {
-            readonly product: ({
+            readonly product: {
+                readonly __typename: "Bundle";
+                readonly name: string;
+            } | {
                 readonly __typename: "FontCollection";
                 readonly name: string;
             } | {
                 readonly __typename: "FontStyle";
-                readonly name: string;
                 readonly family: {
                     readonly name: string;
                 } | null;
+                readonly name: string;
             } | {
                 readonly __typename: "%other";
-            }) | null;
+            } | null;
         } | null;
     }> | null;
-    readonly " $refType": "AddToCartBanner_order";
+    readonly stripeCharge: {
+        readonly paid: boolean | null;
+    } | null;
+    readonly " $fragmentType": "AddToCartBanner_order";
 };
-export declare type AddToCartBanner_order$data = AddToCartBanner_order;
-export declare type AddToCartBanner_order$key = {
+export type AddToCartBanner_order$key = {
     readonly " $data"?: AddToCartBanner_order$data;
-    readonly " $fragmentRefs": FragmentRefs<"AddToCartBanner_order">;
+    readonly " $fragmentSpreads": FragmentRefs<"AddToCartBanner_order">;
 };
 declare const node: ReaderFragment;
 export default node;

package/dist/__generated__/AddToCartBanner_order.graphql.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/**
+ * @generated SignedSource<<bcb5f0fd150277ae9e809374b5a16809>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
 /* tslint:disable */
 /* eslint-disable */
 // @ts-nocheck
@@ -90,6 +96,11 @@ const node = function () {
             }],
             "type": "FontStyle",
             "abstractKey": null
+          }, {
+            "kind": "InlineFragment",
+            "selections": v1 /*: any*/,
+            "type": "Bundle",
+            "abstractKey": null
           }],
           "storageKey": null
         }],
@@ -101,6 +112,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = '044abe5fe0f10944daa302e8849cb142';
+node.hash = "29516fe27686b4937b1856979f13d22b";
 var _default = node;
 exports.default = _default;

package/dist/__generated__/AddressFieldsRefetchQuery.graphql.d.ts

@@ -1,17 +1,22 @@
-import { ConcreteRequest } from "relay-runtime";
+/**
+ * @generated SignedSource<<a506bdcc29016daca8d821a215e058fc>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
-export declare type AddressFieldsRefetchQueryVariables = {
-    countryCode: string;
+export type AddressFieldsRefetchQuery$variables = {
+    countryCode?: string | null;
     includeCountryCode?: boolean | null;
 };
-export declare type AddressFieldsRefetchQueryResponse = {
+export type AddressFieldsRefetchQuery$data = {
     readonly viewer: {
-        readonly " $fragmentRefs": FragmentRefs<"AddressFields_viewer">;
+        readonly " $fragmentSpreads": FragmentRefs<"AddressFields_viewer">;
     };
 };
-export declare type AddressFieldsRefetchQuery = {
-    readonly response: AddressFieldsRefetchQueryResponse;
-    readonly variables: AddressFieldsRefetchQueryVariables;
+export type AddressFieldsRefetchQuery = {
+    response: AddressFieldsRefetchQuery$data;
+    variables: AddressFieldsRefetchQuery$variables;
 };
 declare const node: ConcreteRequest;
 export default node;

package/dist/__generated__/AddressFieldsRefetchQuery.graphql.js

@@ -4,45 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/**
+ * @generated SignedSource<<a506bdcc29016daca8d821a215e058fc>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
 /* tslint:disable */
 /* eslint-disable */
 // @ts-nocheck
 
-/*
-query AddressFieldsRefetchQuery(
-  $countryCode: String! = ""
-  $includeCountryCode: Boolean = false
-) {
-  viewer {
-    ...AddressFields_viewer_4626Te
-    id
-  }
-}
-
-fragment AddressFields_viewer_4626Te on Viewer {
-  countries {
-    code
-    name
-  }
-  countryData(countryCode: $countryCode) @include(if: $includeCountryCode) {
-    response {
-      require
-      stateNameType
-      localityNameType
-      sublocalityNameType
-      zipNameType
-      valid
-      subRegions {
-        key
-        name
-      }
-      isEuCountry
-      vatCountryCode
-    }
-  }
-}
-*/
-
 const node = function () {
   var v0 = [{
       "defaultValue": "",
@@ -119,12 +90,6 @@ const node = function () {
             "storageKey": null
           }, v2 /*: any*/],
 
-          "storageKey": null
-        }, {
-          "alias": null,
-          "args": null,
-          "kind": "ScalarField",
-          "name": "id",
           "storageKey": null
         }, {
           "condition": "includeCountryCode",
@@ -214,20 +179,26 @@ const node = function () {
             }],
             "storageKey": null
           }]
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
         }],
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "64155a1289c393b56d3baebb06f8f4e5",
+      "cacheID": "361d313f7fe8fd60fe1e65bc68526040",
       "id": null,
       "metadata": {},
       "name": "AddressFieldsRefetchQuery",
       "operationKind": "query",
-      "text": "query AddressFieldsRefetchQuery(\n  $countryCode: String! = \"\"\n  $includeCountryCode: Boolean = false\n) {\n  viewer {\n    ...AddressFields_viewer_4626Te\n    id\n  }\n}\n\nfragment AddressFields_viewer_4626Te on Viewer {\n  countries {\n    code\n    name\n  }\n  countryData(countryCode: $countryCode) @include(if: $includeCountryCode) {\n    response {\n      require\n      stateNameType\n      localityNameType\n      sublocalityNameType\n      zipNameType\n      valid\n      subRegions {\n        key\n        name\n      }\n      isEuCountry\n      vatCountryCode\n    }\n  }\n}\n"
+      "text": "query AddressFieldsRefetchQuery(\n  $countryCode: String = \"\"\n  $includeCountryCode: Boolean = false\n) {\n  viewer {\n    ...AddressFields_viewer_4626Te\n    id\n  }\n}\n\nfragment AddressFields_viewer_4626Te on Viewer {\n  countries {\n    code\n    name\n  }\n  countryData(countryCode: $countryCode) @include(if: $includeCountryCode) {\n    response {\n      require\n      stateNameType\n      localityNameType\n      sublocalityNameType\n      zipNameType\n      valid\n      subRegions {\n        key\n        name\n      }\n      isEuCountry\n      vatCountryCode\n    }\n  }\n}\n"
     }
   };
 }();
-node.hash = 'f4433ebc3e6d0bf87e70b488cde24227';
+node.hash = "6918328bf81519373ac576a147dbfd62";
 var _default = node;
 exports.default = _default;

package/dist/__generated__/AddressFields_viewer.graphql.d.ts

@@ -1,32 +1,36 @@
-import { ReaderFragment } from "relay-runtime";
+/**
+ * @generated SignedSource<<4d77c1ffb30775969f066346936c3537>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
-export declare type AddressFields_viewer = {
+export type AddressFields_viewer$data = {
     readonly countries: ReadonlyArray<{
         readonly code: string;
         readonly name: string;
     } | null>;
     readonly countryData?: {
         readonly response: {
+            readonly isEuCountry: boolean;
+            readonly localityNameType: string | null;
             readonly require: ReadonlyArray<string> | null;
             readonly stateNameType: string | null;
-            readonly localityNameType: string | null;
-            readonly sublocalityNameType: string | null;
-            readonly zipNameType: string | null;
-            readonly valid: ReadonlyArray<string> | null;
             readonly subRegions: ReadonlyArray<{
                 readonly key: string;
                 readonly name: string;
             }> | null;
-            readonly isEuCountry: boolean;
+            readonly sublocalityNameType: string | null;
+            readonly valid: ReadonlyArray<string> | null;
             readonly vatCountryCode: string | null;
+            readonly zipNameType: string | null;
         } | null;
     } | null;
-    readonly " $refType": "AddressFields_viewer";
+    readonly " $fragmentType": "AddressFields_viewer";
 };
-export declare type AddressFields_viewer$data = AddressFields_viewer;
-export declare type AddressFields_viewer$key = {
+export type AddressFields_viewer$key = {
     readonly " $data"?: AddressFields_viewer$data;
-    readonly " $fragmentRefs": FragmentRefs<"AddressFields_viewer">;
+    readonly " $fragmentSpreads": FragmentRefs<"AddressFields_viewer">;
 };
 declare const node: ReaderFragment;
 export default node;

package/dist/__generated__/AddressFields_viewer.graphql.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/**
+ * @generated SignedSource<<4d77c1ffb30775969f066346936c3537>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
 /* tslint:disable */
 /* eslint-disable */
 // @ts-nocheck
@@ -147,6 +153,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = 'f4433ebc3e6d0bf87e70b488cde24227';
+node.hash = "6918328bf81519373ac576a147dbfd62";
 var _default = node;
 exports.default = _default;

package/dist/__generated__/BuyButtonIDQuery.graphql.d.ts

@@ -1,16 +1,21 @@
-import { ConcreteRequest } from "relay-runtime";
+/**
+ * @generated SignedSource<<14c760d6aa3cf32e3bdc35ea8a9ec274>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
-export declare type BuyButtonIDQueryVariables = {
+export type BuyButtonIDQuery$variables = {
     collectionId: string;
 };
-export declare type BuyButtonIDQueryResponse = {
+export type BuyButtonIDQuery$data = {
     readonly collection: {
-        readonly " $fragmentRefs": FragmentRefs<"BuyButton_collection">;
+        readonly " $fragmentSpreads": FragmentRefs<"BuyButton_collection">;
     } | null;
 };
-export declare type BuyButtonIDQuery = {
-    readonly response: BuyButtonIDQueryResponse;
-    readonly variables: BuyButtonIDQueryVariables;
+export type BuyButtonIDQuery = {
+    response: BuyButtonIDQuery$data;
+    variables: BuyButtonIDQuery$variables;
 };
 declare const node: ConcreteRequest;
 export default node;