fontdue-js 2.0.0-alpha1 → 2.0.0-alpha10

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__/CharacterViewerIDQuery.graphql.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @generated SignedSource<<69f8d5b289fee407e93d680fe4b2cd46>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CharacterViewerIDQuery$variables = {
+    collectionId: string;
+};
+export type CharacterViewerIDQuery$data = {
+    readonly node: {
+        readonly " $fragmentSpreads": FragmentRefs<"CharacterViewer_collection">;
+    } | null;
+};
+export type CharacterViewerIDQuery = {
+    response: CharacterViewerIDQuery$data;
+    variables: CharacterViewerIDQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CharacterViewerIDQuery.graphql.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<69f8d5b289fee407e93d680fe4b2cd46>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "collectionId"
+    }],
+    v1 = [{
+      "kind": "Variable",
+      "name": "id",
+      "variableName": "collectionId"
+    }],
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "VariableInstance",
+      "kind": "LinkedField",
+      "name": "variableInstances",
+      "plural": true,
+      "selections": [v3 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "VariableSetting",
+        "kind": "LinkedField",
+        "name": "coordinates",
+        "plural": true,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "axis",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "value",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    },
+    v5 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "isVariableFont",
+      "storageKey": null
+    },
+    v6 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssUrl",
+      "storageKey": null
+    },
+    v7 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "collectionType",
+      "storageKey": null
+    },
+    v8 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "characters",
+      "storageKey": null
+    },
+    v9 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v2 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssFamily",
+        "storageKey": null
+      }, v3 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "CharacterBlock",
+        "kind": "LinkedField",
+        "name": "characterBlocks",
+        "plural": true,
+        "selections": [v3 /*: any*/, v8 /*: any*/],
+
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FeatureCharacters",
+        "kind": "LinkedField",
+        "name": "featureCharacters",
+        "plural": true,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "feature",
+          "storageKey": null
+        }, v3 /*: any*/, v8 /*: any*/],
+
+        "storageKey": null
+      }, v4 /*: any*/],
+
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CharacterViewerIDQuery",
+      "selections": [{
+        "alias": null,
+        "args": v1 /*: any*/,
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [{
+          "args": null,
+          "kind": "FragmentSpread",
+          "name": "CharacterViewer_collection"
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "CharacterViewerIDQuery",
+      "selections": [{
+        "alias": null,
+        "args": v1 /*: any*/,
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "__typename",
+          "storageKey": null
+        }, v2 /*: any*/, {
+          "kind": "InlineFragment",
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "featureStyle",
+            "plural": false,
+            "selections": [v2 /*: any*/, v4 /*: any*/],
+
+            "storageKey": null
+          }, v3 /*: any*/, v5 /*: any*/, v6 /*: any*/, v7 /*: any*/, v9 /*: any*/, {
+            "alias": null,
+            "args": [{
+              "kind": "Literal",
+              "name": "collectionTypes",
+              "value": ["FAMILY"]
+            }],
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "children",
+            "plural": true,
+            "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/, v6 /*: any*/, v7 /*: any*/, v9 /*: any*/],
+
+            "storageKey": "children(collectionTypes:[\"FAMILY\"])"
+          }],
+          "type": "FontCollection",
+          "abstractKey": null
+        }],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "eb952d4de5e478c504522c7067344953",
+      "id": null,
+      "metadata": {},
+      "name": "CharacterViewerIDQuery",
+      "operationKind": "query",
+      "text": "query CharacterViewerIDQuery(\n  $collectionId: ID!\n) {\n  node(id: $collectionId) {\n    __typename\n    ...CharacterViewer_collection\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  featureStyle {\n    id\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  id\n  name\n  isVariableFont\n  cssUrl\n  collectionType\n  fontStyles {\n    id\n    cssFamily\n    name\n    characterBlocks {\n      name\n      characters\n    }\n    featureCharacters {\n      feature\n      name\n      characters\n    }\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    isVariableFont\n    cssUrl\n    collectionType\n    fontStyles {\n      id\n      cssFamily\n      name\n      characterBlocks {\n        name\n        characters\n      }\n      featureCharacters {\n        feature\n        name\n        characters\n      }\n      variableInstances {\n        name\n        coordinates {\n          axis\n          value\n        }\n      }\n    }\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "f90b09a4df6d95307b0a5d5fda487cdc";
+var _default = node;
+exports.default = _default;

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

@@ -0,0 +1,25 @@
+/**
+ * @generated SignedSource<<4f2a4f7087c9b01053899ee96a81db5c>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CharacterViewerSlugQuery$variables = {
+    collectionSlug: string;
+};
+export type CharacterViewerSlugQuery$data = {
+    readonly viewer: {
+        readonly slug: {
+            readonly fontCollection: {
+                readonly " $fragmentSpreads": FragmentRefs<"CharacterViewer_collection">;
+            } | null;
+        } | null;
+    };
+};
+export type CharacterViewerSlugQuery = {
+    response: CharacterViewerSlugQuery$data;
+    variables: CharacterViewerSlugQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CharacterViewerSlugQuery.graphql.js

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<4f2a4f7087c9b01053899ee96a81db5c>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "collectionSlug"
+    }],
+    v1 = [{
+      "kind": "Variable",
+      "name": "name",
+      "variableName": "collectionSlug"
+    }],
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "VariableInstance",
+      "kind": "LinkedField",
+      "name": "variableInstances",
+      "plural": true,
+      "selections": [v3 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "VariableSetting",
+        "kind": "LinkedField",
+        "name": "coordinates",
+        "plural": true,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "axis",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "value",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    },
+    v5 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "isVariableFont",
+      "storageKey": null
+    },
+    v6 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssUrl",
+      "storageKey": null
+    },
+    v7 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "collectionType",
+      "storageKey": null
+    },
+    v8 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "characters",
+      "storageKey": null
+    },
+    v9 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v2 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssFamily",
+        "storageKey": null
+      }, v3 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "CharacterBlock",
+        "kind": "LinkedField",
+        "name": "characterBlocks",
+        "plural": true,
+        "selections": [v3 /*: any*/, v8 /*: any*/],
+
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FeatureCharacters",
+        "kind": "LinkedField",
+        "name": "featureCharacters",
+        "plural": true,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "feature",
+          "storageKey": null
+        }, v3 /*: any*/, v8 /*: any*/],
+
+        "storageKey": null
+      }, v4 /*: any*/],
+
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CharacterViewerSlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1 /*: any*/,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "fontCollection",
+            "plural": false,
+            "selections": [{
+              "args": null,
+              "kind": "FragmentSpread",
+              "name": "CharacterViewer_collection"
+            }],
+            "storageKey": null
+          }],
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "CharacterViewerSlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1 /*: any*/,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollection",
+            "kind": "LinkedField",
+            "name": "fontCollection",
+            "plural": false,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "concreteType": "FontStyle",
+              "kind": "LinkedField",
+              "name": "featureStyle",
+              "plural": false,
+              "selections": [v2 /*: any*/, v4 /*: any*/],
+
+              "storageKey": null
+            }, v2 /*: any*/, v3 /*: any*/, v5 /*: any*/, v6 /*: any*/, v7 /*: any*/, v9 /*: any*/, {
+              "alias": null,
+              "args": [{
+                "kind": "Literal",
+                "name": "collectionTypes",
+                "value": ["FAMILY"]
+              }],
+              "concreteType": "FontCollection",
+              "kind": "LinkedField",
+              "name": "children",
+              "plural": true,
+              "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/, v6 /*: any*/, v7 /*: any*/, v9 /*: any*/],
+
+              "storageKey": "children(collectionTypes:[\"FAMILY\"])"
+            }],
+            "storageKey": null
+          }, v2 /*: any*/],
+
+          "storageKey": null
+        }, v2 /*: any*/],
+
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "2164428019c5b0a380eebfeaadf9c46f",
+      "id": null,
+      "metadata": {},
+      "name": "CharacterViewerSlugQuery",
+      "operationKind": "query",
+      "text": "query CharacterViewerSlugQuery(\n  $collectionSlug: String!\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      fontCollection {\n        ...CharacterViewer_collection\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  featureStyle {\n    id\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  id\n  name\n  isVariableFont\n  cssUrl\n  collectionType\n  fontStyles {\n    id\n    cssFamily\n    name\n    characterBlocks {\n      name\n      characters\n    }\n    featureCharacters {\n      feature\n      name\n      characters\n    }\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    isVariableFont\n    cssUrl\n    collectionType\n    fontStyles {\n      id\n      cssFamily\n      name\n      characterBlocks {\n        name\n        characters\n      }\n      featureCharacters {\n        feature\n        name\n        characters\n      }\n      variableInstances {\n        name\n        coordinates {\n          axis\n          value\n        }\n      }\n    }\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "afa08a8f050e0434308892fea6e3c267";
+var _default = node;
+exports.default = _default;

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

@@ -0,0 +1,21 @@
+/**
+ * @generated SignedSource<<33db2c8d84dc0be9a8d30203d8664d37>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export type NewsletterSignupQuery$variables = {};
+export type NewsletterSignupQuery$data = {
+    readonly viewer: {
+        readonly settings: {
+            readonly newsletterOptInLabel: string | null;
+            readonly newsletterSuccessLabel: string | null;
+        } | null;
+    };
+};
+export type NewsletterSignupQuery = {
+    response: NewsletterSignupQuery$data;
+    variables: NewsletterSignupQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;