fontdue-js 3.0.6 → 3.1.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 3.1.0
+
+- **New `FeatureTesters` component** (`fontdue-js/FeatureTesters`) — renders a collection's *feature tester* cards, each showcasing an OpenType feature by toggling it on and off and tinting exactly the characters the feature changes. Pass `collectionId` or `collectionSlug`; in a React Server Component the server entry preloads its own query, and in a client tree (`preloadedQuery` or inside a `<FontdueProvider>`) it hydrates or lazy-loads like the other collection components. Collection-level props override the per-card dashboard settings: `highlightColor`, `toggle` (`'button'` or `'hover'`), and `autofit`. Requires a Fontdue backend that exposes `FontCollection.featureTesters` and the `FeatureTester` node. See [Feature Testers](https://www.fontdue.com/docs/reference/feature-testers).
+- **Password-protected collections now work on server-rendered storefronts** (see [Password-protected collections](https://www.fontdue.com/docs/develop/password-protected-collections)), not just the `<fontdue-node-password-form>` custom element:
+  - New `NodePasswordForm` component (`fontdue-js/NodePasswordForm`) — a presentational password form to render when a collection comes back password-protected. It commits the `accessNode` mutation, stores the returned access token in a first-party cookie, and reloads so the now-unlocked collection renders. It does no data fetching of its own (no Suspense flash) and self-wraps its Fontdue context, so it also works as a standalone island.
+  - `createFontdueFetch` (`fontdue-js/server`) now throws a typed `FontduePasswordProtectedError` (GraphQL code `password_protected`) rather than a generic error, so a server-rendered page can branch on the locked state. In Next.js it additionally auto-recovers: on a `password_protected` error it folds the visitor's unlock token into the per-render config and retries, so a protected page and its embedded components' server preloads render unlocked with no host-app plumbing.
+  - New `fontdue-js/server/middleware` module exporting `runWithNodeAccess` (forwards a visitor's unlock token through a request) and `runWithFontdue` (composes preview- and node-access forwarding) for non-Next SSR frameworks (Astro, React Router 7, TanStack Start). `runWithPreview` is unchanged and still re-exported from `fontdue-js/preview/server`.
+  - New `nodeAccessHeaders()` from `fontdue-js/next`.
+  - Requires a Fontdue backend that returns `token` on `AccessNodePayload` and accepts the `fontdue-node-access` request header.
+
 ## 3.0.6
 
 - `TypeTesters` now honours a per-tester text `alignment` (`left`, `center`, or `right`) set in the admin dashboard, overriding the config's `initialAlignment` default. Testers with no explicit alignment keep the previous behaviour — the `initialAlignment` config, or `right` for right-to-left testers. Requires a Fontdue backend that exposes the `alignment` field on type testers.

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

@@ -0,0 +1,23 @@
+/**
+ * @generated SignedSource<<2bcd7d635b37208eb99537239a6aae76>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type FeatureTesterCard_fontStyle$data = {
+    readonly cssFamily: string | null;
+    readonly glyphNames: ReadonlyArray<{
+        readonly characters: string;
+        readonly features: ReadonlyArray<string> | null;
+    }> | null;
+    readonly name: string;
+    readonly " $fragmentSpreads": FragmentRefs<"FontStyle_fontStyle" | "useFeaturesData_fontStyle">;
+    readonly " $fragmentType": "FeatureTesterCard_fontStyle";
+};
+export type FeatureTesterCard_fontStyle$key = {
+    readonly " $data"?: FeatureTesterCard_fontStyle$data;
+    readonly " $fragmentSpreads": FragmentRefs<"FeatureTesterCard_fontStyle">;
+};
+declare const node: ReaderFragment;
+export default node;

package/dist/__generated__/FeatureTesterCard_fontStyle.graphql.js

@@ -0,0 +1,62 @@
+/**
+ * @generated SignedSource<<2bcd7d635b37208eb99537239a6aae76>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "FeatureTesterCard_fontStyle",
+  "selections": [{
+    "args": null,
+    "kind": "FragmentSpread",
+    "name": "FontStyle_fontStyle"
+  }, {
+    "args": null,
+    "kind": "FragmentSpread",
+    "name": "useFeaturesData_fontStyle"
+  }, {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "cssFamily",
+    "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "name",
+    "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "concreteType": "GlyphName",
+    "kind": "LinkedField",
+    "name": "glyphNames",
+    "plural": true,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "characters",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "features",
+      "storageKey": null
+    }],
+    "storageKey": null
+  }],
+  "type": "FontStyle",
+  "abstractKey": null
+};
+node.hash = "687d8afca93d615ed0794f963702d082";
+export default node;

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

@@ -0,0 +1,25 @@
+/**
+ * @generated SignedSource<<f2ab2286dcf091bd52af2d5bc336b434>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type FeatureTesterStandaloneQuery$variables = {
+    familyName: string;
+    styleName: string;
+};
+export type FeatureTesterStandaloneQuery$data = {
+    readonly viewer: {
+        readonly fontStyle: {
+            readonly id: string;
+            readonly " $fragmentSpreads": FragmentRefs<"FeatureTesterCard_fontStyle">;
+        } | null;
+    };
+};
+export type FeatureTesterStandaloneQuery = {
+    response: FeatureTesterStandaloneQuery$data;
+    variables: FeatureTesterStandaloneQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/FeatureTesterStandaloneQuery.graphql.js

@@ -0,0 +1,240 @@
+/**
+ * @generated SignedSource<<f2ab2286dcf091bd52af2d5bc336b434>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "familyName"
+    }, {
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "styleName"
+    }],
+    v1 = [{
+      "kind": "Variable",
+      "name": "familyName",
+      "variableName": "familyName"
+    }, {
+      "kind": "Variable",
+      "name": "styleName",
+      "variableName": "styleName"
+    }],
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "FeatureTesterStandaloneQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1 /*: any*/,
+          "concreteType": "FontStyle",
+          "kind": "LinkedField",
+          "name": "fontStyle",
+          "plural": false,
+          "selections": [v2 /*: any*/, {
+            "args": null,
+            "kind": "FragmentSpread",
+            "name": "FeatureTesterCard_fontStyle"
+          }],
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "FeatureTesterStandaloneQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1 /*: any*/,
+          "concreteType": "FontStyle",
+          "kind": "LinkedField",
+          "name": "fontStyle",
+          "plural": false,
+          "selections": [v2 /*: any*/, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "cssFamily",
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "WebfontSource",
+            "kind": "LinkedField",
+            "name": "webfontSources",
+            "plural": true,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "url",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "format",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "tech",
+              "storageKey": null
+            }],
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "VerticalMetrics",
+            "kind": "LinkedField",
+            "name": "verticalMetrics",
+            "plural": false,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "unitsPerEm",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "ascender",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "descender",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "lineGap",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "avgCharWidth",
+              "storageKey": null
+            }],
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "FontFeatures",
+            "kind": "LinkedField",
+            "name": "fontFeatures",
+            "plural": false,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "supportedFeatures",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "concreteType": "StylisticSetName",
+              "kind": "LinkedField",
+              "name": "stylisticSetNames",
+              "plural": true,
+              "selections": [{
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "featureName",
+                "storageKey": null
+              }, {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "humanName",
+                "storageKey": null
+              }],
+              "storageKey": null
+            }],
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "GlyphName",
+            "kind": "LinkedField",
+            "name": "glyphNames",
+            "plural": true,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "characters",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "features",
+              "storageKey": null
+            }],
+            "storageKey": null
+          }],
+          "storageKey": null
+        }, v2 /*: any*/],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "5982e90168f8a77ba758d70535cbb32a",
+      "id": null,
+      "metadata": {},
+      "name": "FeatureTesterStandaloneQuery",
+      "operationKind": "query",
+      "text": "query FeatureTesterStandaloneQuery(\n  $familyName: String!\n  $styleName: String!\n) {\n  viewer {\n    fontStyle(familyName: $familyName, styleName: $styleName) {\n      id\n      ...FeatureTesterCard_fontStyle\n    }\n    id\n  }\n}\n\nfragment FeatureTesterCard_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "eddba300b2fd5e283ab1f8f787edc518";
+export default node;

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

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