fontdue-js 3.2.4 → 3.2.6

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 3.2.6
+
+- **Fixed `TypeTesters` crashing when `tags` or `excludeTags` is set on a server-rendered page.** In a React Server Component the server entry preloaded the filtered testers but rendered the client component as though no filter had been given, so the refetch that runs once the page hydrates pulled in the collection's *whole* tester list. Rendering a tester the filter had excluded then threw `Cannot destructure property 'content' of … as it is undefined` and took the page down with it. Both filters now reach the client component on the preloaded path, as they already did when the component fetches its own query in the browser. No public API change.
+
+## 3.2.5
+
+- **`CartButton` is back in the server-rendered HTML.** Since 3.0.0 it rendered nothing at all until its cart query resolved in the browser, so the button was absent from the initial HTML and only appeared after hydration and a network round-trip — missing for crawlers, and a visible pop-in for everyone else. It now server-renders its empty state (`data-count="0"`) and fills in the count once the cart loads, as it did on 2.x. No public API change.
+
 ## 3.2.4
 
 - **The `StoreModal` checkout no longer advances past the customer step when the customer fails to save.** A rejected save — an invalid email, a duplicate record — previously moved the buyer on to payment with their details unsaved. The step now holds and shows the field errors. No public API change.

package/dist/__tests__/typeTestersServerEntry.test.js

@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+// The <TypeTesters> react-server entrypoint's whole job is to run the preload
+// on the server and hand *both* the response and the caller's props to the
+// client renderer. Stub the network preload, and the client module with it —
+// it's a 'use client' module that pulls in Relay and Redux — so these tests
+// observe exactly that handoff.
+const loadSerializableQuery = vi.fn(async (query, variables) => ({
+  params: query.params,
+  variables,
+  response: {
+    data: {}
+  }
+}));
+vi.mock('../relay/loadSerializableQuery.js', () => ({
+  default: function () {
+    return loadSerializableQuery(...arguments);
+  }
+}));
+vi.mock('../components/TypeTesters/index.js', () => ({
+  TypeTestersPreloadedIDQueryRenderer: function TypeTestersPreloadedIDQueryRenderer() {
+    return null;
+  },
+  TypeTestersPreloadedSlugQueryRenderer: function TypeTestersPreloadedSlugQueryRenderer() {
+    return null;
+  }
+}));
+import TypeTestersServer from '../components/TypeTesters/index.server.js';
+import { TypeTestersPreloadedIDQueryRenderer, TypeTestersPreloadedSlugQueryRenderer } from '../components/TypeTesters/index.js';
+const render = props => TypeTestersServer(props);
+describe('TypeTesters react-server entrypoint', () => {
+  beforeEach(() => {
+    loadSerializableQuery.mockClear();
+  });
+  it('forwards tags and excludeTags to the preloaded ID renderer', async () => {
+    const element = await render({
+      collectionId: 'collection-1',
+      excludeTags: ['homepage', 'specimen'],
+      autofit: true
+    });
+    expect(element === null || element === void 0 ? void 0 : element.type).toBe(TypeTestersPreloadedIDQueryRenderer);
+    // The client component needs these to rebuild the refetch variables it
+    // hands to useRefetchOnLicenseChanges. Dropping them made a licence-change
+    // refetch return the *unfiltered* tester list, which the tester state was
+    // never seeded with.
+    expect(element === null || element === void 0 ? void 0 : element.props.excludeTags).toEqual(['homepage', 'specimen']);
+    expect(element === null || element === void 0 ? void 0 : element.props.tags).toBeNull();
+    // Everything else still rides along.
+    expect(element === null || element === void 0 ? void 0 : element.props.autofit).toBe(true);
+    expect(element === null || element === void 0 ? void 0 : element.props.preloadedQuery).toBeDefined();
+  });
+  it('forwards tags and excludeTags to the preloaded slug renderer', async () => {
+    const element = await render({
+      collectionSlug: 'my-collection',
+      tags: ['specimen'],
+      excludeTags: ['homepage']
+    });
+    expect(element === null || element === void 0 ? void 0 : element.type).toBe(TypeTestersPreloadedSlugQueryRenderer);
+    expect(element === null || element === void 0 ? void 0 : element.props.tags).toEqual(['specimen']);
+    expect(element === null || element === void 0 ? void 0 : element.props.excludeTags).toEqual(['homepage']);
+    expect(element === null || element === void 0 ? void 0 : element.props.preloadedQuery).toBeDefined();
+  });
+  it('preloads with the same tag filters it forwards', async () => {
+    const element = await render({
+      collectionId: 'collection-1',
+      tags: ['specimen'],
+      excludeTags: ['homepage']
+    });
+    expect(loadSerializableQuery).toHaveBeenCalledTimes(1);
+    const [, variables] = loadSerializableQuery.mock.calls[0];
+    expect(variables).toEqual({
+      collectionId: 'collection-1',
+      tags: ['specimen'],
+      excludeTags: ['homepage']
+    });
+    expect(element === null || element === void 0 ? void 0 : element.props.tags).toEqual(variables.tags);
+    expect(element === null || element === void 0 ? void 0 : element.props.excludeTags).toEqual(variables.excludeTags);
+  });
+  it('defaults both filters to null when the caller passes neither', async () => {
+    const element = await render({
+      collectionId: 'collection-1'
+    });
+
+    // Explicit nulls, not undefined: the preload normalizes optional variables
+    // to null so the server and client Relay cache keys match, and the
+    // forwarded props have to agree with the variables the payload was
+    // fetched under.
+    const [, variables] = loadSerializableQuery.mock.calls[0];
+    expect(variables.tags).toBeNull();
+    expect(variables.excludeTags).toBeNull();
+    expect(element === null || element === void 0 ? void 0 : element.props.tags).toBeNull();
+    expect(element === null || element === void 0 ? void 0 : element.props.excludeTags).toBeNull();
+  });
+  it('renders nothing without a collection id or slug', async () => {
+    expect(await render({})).toBeNull();
+    expect(loadSerializableQuery).not.toHaveBeenCalled();
+  });
+});

package/dist/components/CartButton/index.js

@@ -22,12 +22,14 @@ const openCart = () => ({
   type: 'OPEN_CART'
 });
 function CartButtonComponent(_ref) {
+  var _orderData$stripeChar;
   let {
     label,
     buttonStyle = 'inline',
     order: orderKey,
     children,
-    suffix
+    suffix,
+    pending = false
   } = _ref;
   const orderData = useFragment((_CartButton_order.hash && _CartButton_order.hash !== "26a092d7efb579c98adda18413349b3b" && console.error("The definition of 'CartButton_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButton_order), orderKey);
   const [count, setCount] = useState(0);
@@ -71,8 +73,8 @@ function CartButtonComponent(_ref) {
   useEffect(() => {
     setCount(cartButtonCount(orderData));
   }, [orderData, setCount]);
-  if (!orderData) return null;
-  if (orderData.stripeCharge && orderData.stripeCharge.paid) return null;
+  if (!orderData && !pending) return null;
+  if (orderData !== null && orderData !== void 0 && (_orderData$stripeChar = orderData.stripeCharge) !== null && _orderData$stripeChar !== void 0 && _orderData$stripeChar.paid) return null;
   const suffixNodes = formatSuffix();
   return /*#__PURE__*/React.createElement(ComponentsContext.Consumer, null, components => components.CartButton ? /*#__PURE__*/React.createElement(components.CartButton, {
     count: count,
@@ -118,9 +120,11 @@ export default function CartButton(_ref2) {
     config: config
   }, mounted ? /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement(CartButtonComponent, _extends({}, props, {
-      order: null
+      order: null,
+      pending: true
     }))
   }, /*#__PURE__*/React.createElement(CartButtonLazyQueryRenderer, props)) : /*#__PURE__*/React.createElement(CartButtonComponent, _extends({}, props, {
-    order: null
+    order: null,
+    pending: true
   })));
 }

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

@@ -14,6 +14,14 @@ export function loadTypeTestersQuery() {
 // the client `*PreloadedQueryRenderer`. Lets pages just write
 // `<TypeTesters collectionId={id} />` in an RSC without manually invoking
 // `loadTypeTestersQuery` + threading `preloadedQuery` through props.
+//
+// `tags`/`excludeTags` are both query variables *and* component props: the
+// client component needs them to build the refetch variables it hands to
+// `useRefetchOnLicenseChanges`. Destructuring them here takes them out of
+// `...rest`, so both branches pass them on explicitly — otherwise a
+// licence-change refetch re-runs the filtered query unfiltered and the
+// tester list no longer matches the state seeded from the preload. The lazy
+// `TypeTesters*QueryRenderer`s do the same for the same reason.
 export default async function TypeTesters(_ref) {
   let {
     collectionId,
@@ -29,7 +37,9 @@ export default async function TypeTesters(_ref) {
       excludeTags
     });
     return /*#__PURE__*/React.createElement(TypeTestersPreloadedIDQueryRenderer, _extends({
-      preloadedQuery: preloadedQuery
+      preloadedQuery: preloadedQuery,
+      tags: tags,
+      excludeTags: excludeTags
     }, rest));
   }
   if (collectionSlug) {
@@ -39,7 +49,9 @@ export default async function TypeTesters(_ref) {
       excludeTags
     });
     return /*#__PURE__*/React.createElement(TypeTestersPreloadedSlugQueryRenderer, _extends({
-      preloadedQuery: preloadedQuery
+      preloadedQuery: preloadedQuery,
+      tags: tags,
+      excludeTags: excludeTags
     }, rest));
   }
   return null;

package/dist/relay/environment.js

@@ -8,7 +8,7 @@ import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
 // Exported so UI (the admin toolbar) can surface it without re-reading the
 // build-time global in a 'use client' module.
-export const version = "3.2.4";
+export const version = "3.2.6";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.2.4",
+  "version": "3.2.6",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",