fontdue-js 2.15.0 → 2.15.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.15.1
+
+- Fixes SSR hydration issues
+
+## 2.15.0
+
+- Compatibility with React 19
+
 ## 2.14.0
 
 - Adds stripe.appearance to the config

package/dist/components/CharacterViewer/index.js

@@ -33,13 +33,20 @@ function useSize() {
     if (!ref.current) return;
     setSize(ref.current.getBoundingClientRect());
   }, [ref]);
-  (0, _resizeObserver.default)(ref, entry => setSize(entry.contentRect));
+  (0, _resizeObserver.default)(ref, entry => setSize(entry.contentRect), {
+    polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
+  });
   return {
     ref,
     width: size === null || size === void 0 ? void 0 : size.width,
     height: size === null || size === void 0 ? void 0 : size.height
   };
 }
+class ServerSideResizeObserverPolyfill {
+  constructor(_callback) {}
+  observe(_target, _options) {}
+  unobserve(_target) {}
+}
 function Character(props) {
   const ref = (0, _react.useRef)(null);
   const [size, setSize] = (0, _react.useState)(1);
@@ -47,6 +54,8 @@ function Character(props) {
     if (entry.target.scrollWidth > entry.target.clientWidth) {
       setSize(size + 1);
     }
+  }, {
+    polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     ref: ref

package/dist/components/TypeTesters/index.d.ts

@@ -7,8 +7,8 @@ export interface TypeTesters_props {
     collectionSlug?: string;
     defaultMode?: 'group' | 'local';
     autofit?: boolean;
-    tags?: string[];
-    excludeTags?: string[];
+    tags?: string[] | null;
+    excludeTags?: string[] | null;
     onFocus?: () => void;
     onBlur?: () => void;
     onToolbarOpenClose?: (open: boolean) => void;

package/dist/components/TypeTesters/index.server.js

@@ -15,8 +15,8 @@ async function TypeTesters(_ref) {
   let {
     collectionId,
     collectionSlug,
-    tags,
-    excludeTags,
+    tags = null,
+    excludeTags = null,
     ...rest
   } = _ref;
   if (collectionId) {

package/dist/relay/environment.js

@@ -30,7 +30,11 @@ function createNetworkFetch(options) {
       body: JSON.stringify({
         query: request.text,
         variables
-      })
+      }),
+      // @ts-ignore
+      next: {
+        tags: ['graphql', `operation:${request.name}`]
+      }
     });
     const json = await resp.json();
 

package/dist/relay/loadSerializableQuery.d.ts

@@ -4,4 +4,44 @@ export interface SerializablePreloadedQuery<TQuery extends OperationType> {
     variables: VariablesOf<TQuery>;
     response: GraphQLResponse;
 }
-export default function loadSerializableQuery<TQuery extends OperationType>(query: GraphQLTaggedNode, variables: VariablesOf<TQuery>): Promise<SerializablePreloadedQuery<TQuery>>;
+/**
+ * RELAY CACHE KEY NORMALIZATION
+ *
+ * This type transformation is required to fix a cache key inconsistency issue in Relay.
+ *
+ * THE PROBLEM:
+ * Relay's `getOperationVariables()` function always includes ALL argumentDefinitions
+ * from the GraphQL operation, even optional ones, setting them to their defaultValue
+ * (typically null). This means when Relay generates cache keys, it creates entries like:
+ *
+ * Cache Key A: { collectionId: "123", tags: null, excludeTags: null, selectable: true }
+ * Cache Key B: { collectionId: "123", selectable: true }  // when optional vars omitted
+ *
+ * Even though these represent the same logical query, they produce different cache keys
+ * because `JSON.stringify(stableCopy(variables))` serializes them differently.
+ *
+ *  (This is possibly caused by NextJS RSC data serialization and hydration)
+ *
+ * THE ROOT CAUSE:
+ * - GraphQL schema defines: `$tags: [String!], $excludeTags: [String!]` (optional)
+ * - TypeScript generates: `tags?: ReadonlyArray<string> | null`
+ * - Relay's argumentDefinitions include: `{ name: "tags", defaultValue: null }`
+ * - getOperationVariables() always sets: `operationVariables[def.name] = def.defaultValue`
+ *
+ * THE SOLUTION:
+ * RequireAllWithNull<T> transforms optional properties to required properties with
+ * explicit null values, forcing callers to be consistent. This ensures server-side
+ * preloaded queries and client-side cache lookups use identical variable structures.
+ *
+ * USAGE:
+ * Instead of: { tags, excludeTags } // undefined values
+ * Use:        { tags: tags ?? null, excludeTags: excludeTags ?? null } // explicit nulls
+ *
+ * This eliminates cache misses caused by variable structure inconsistencies between
+ * server-side rendering and client-side Relay operations.
+ */
+type RequireAllWithNull<T> = {
+    [K in keyof T]-?: T[K] | null;
+};
+export default function loadSerializableQuery<TQuery extends OperationType>(query: GraphQLTaggedNode, variables: RequireAllWithNull<VariablesOf<TQuery>>): Promise<SerializablePreloadedQuery<TQuery>>;
+export {};

package/dist/relay/loadSerializableQuery.js

@@ -5,6 +5,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = loadSerializableQuery;
 var _environment = require("./environment");
+/**
+ * RELAY CACHE KEY NORMALIZATION
+ *
+ * This type transformation is required to fix a cache key inconsistency issue in Relay.
+ *
+ * THE PROBLEM:
+ * Relay's `getOperationVariables()` function always includes ALL argumentDefinitions
+ * from the GraphQL operation, even optional ones, setting them to their defaultValue
+ * (typically null). This means when Relay generates cache keys, it creates entries like:
+ *
+ * Cache Key A: { collectionId: "123", tags: null, excludeTags: null, selectable: true }
+ * Cache Key B: { collectionId: "123", selectable: true }  // when optional vars omitted
+ *
+ * Even though these represent the same logical query, they produce different cache keys
+ * because `JSON.stringify(stableCopy(variables))` serializes them differently.
+ *
+ *  (This is possibly caused by NextJS RSC data serialization and hydration)
+ *
+ * THE ROOT CAUSE:
+ * - GraphQL schema defines: `$tags: [String!], $excludeTags: [String!]` (optional)
+ * - TypeScript generates: `tags?: ReadonlyArray<string> | null`
+ * - Relay's argumentDefinitions include: `{ name: "tags", defaultValue: null }`
+ * - getOperationVariables() always sets: `operationVariables[def.name] = def.defaultValue`
+ *
+ * THE SOLUTION:
+ * RequireAllWithNull<T> transforms optional properties to required properties with
+ * explicit null values, forcing callers to be consistent. This ensures server-side
+ * preloaded queries and client-side cache lookups use identical variable structures.
+ *
+ * USAGE:
+ * Instead of: { tags, excludeTags } // undefined values
+ * Use:        { tags: tags ?? null, excludeTags: excludeTags ?? null } // explicit nulls
+ *
+ * This eliminates cache misses caused by variable structure inconsistencies between
+ * server-side rendering and client-side Relay operations.
+ */
+
 // Call into raw network fetch to get serializable GraphQL query response
 // This response will be sent to the client to "warm" the QueryResponseCache
 // to avoid the client fetches.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",
@@ -30,9 +30,9 @@
     "react-device-detect": "^2.2.3",
     "react-error-boundary": "^4.1.2",
     "react-redux": "^9",
-    "react-relay": "^19.0.0",
+    "react-relay": "^20.0.0",
     "redux": "^5.0.0",
-    "relay-runtime": "^19.0.0",
+    "relay-runtime": "^20.0.0",
     "store": "^2.0.12",
     "uuid": "^8.3.2"
   },
@@ -44,10 +44,11 @@
     "@babel/preset-typescript": "^7.18.0",
     "@types/draft-js": "^0.10.44",
     "@types/fontfaceobserver": "^2.1.0",
+    "@types/node": "^24.1.0",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@types/react-relay": "^16.0.0",
-    "@types/relay-runtime": "^17.0.0",
+    "@types/react-relay": "^18.0.0",
+    "@types/relay-runtime": "^19.0.0",
     "@types/uuid": "^8.3.3",
     "babel-plugin-relay": "^18.0.0",
     "npm-run-all": "^4.1.5",