fontdue-js 3.2.5 → 3.3.0

package/dist/components/Tracking/index.js

@@ -4,6 +4,7 @@ import { useContext, useEffect } from 'react';
 import ConfigContext from '../ConfigContext.js';
 import { useFontdueUrl } from '../UrlContext.js';
 import { hasConsent, onConsent, setClientAnonymousId, setEntryAttribution } from '../ConsentBanner/consent.js';
+import { trackRouteChanges } from './routeChanges.js';
 function getCampaignDataFromUrl() {
   const urlParams = new URLSearchParams(window.location.search);
   const campaign = {};
@@ -155,26 +156,17 @@ const Tracking = () => {
     }
 
     // Track client-side route changes
-    const originalPushState = history.pushState.bind(history);
-    const originalReplaceState = history.replaceState.bind(history);
-    const handleRouteChange = () => {
-      // Defer slightly to let document.title update
-      setTimeout(() => sendPageView(url), 0);
-    };
-    history.pushState = function () {
-      originalPushState(...arguments);
-      handleRouteChange();
-    };
-    history.replaceState = function () {
-      originalReplaceState(...arguments);
-      handleRouteChange();
-    };
-    window.addEventListener('popstate', handleRouteChange);
+    const untrackRouteChanges = trackRouteChanges({
+      history,
+      window,
+      currentUrl: () => window.location.href,
+      onNavigate: () => {
+        sendPageView(url);
+      }
+    });
     return () => {
       var _consentCleanup;
-      history.pushState = originalPushState;
-      history.replaceState = originalReplaceState;
-      window.removeEventListener('popstate', handleRouteChange);
+      untrackRouteChanges();
       (_consentCleanup = consentCleanup) === null || _consentCleanup === void 0 ? void 0 : _consentCleanup();
     };
   }, []);

package/dist/components/Tracking/routeChanges.d.ts

@@ -0,0 +1,19 @@
+type HistoryLike = Pick<History, 'pushState' | 'replaceState'>;
+type WindowLike = Pick<Window, 'addEventListener' | 'removeEventListener'>;
+export type RouteChangeOptions = {
+    history: HistoryLike;
+    window: WindowLike;
+    /** The URL as it stands right now, e.g. `() => window.location.href`. */
+    currentUrl: () => string;
+    /** Called once per navigation to a URL different from the previous one. */
+    onNavigate: () => void;
+    /** Overridable so tests can run the check synchronously. */
+    defer?: (callback: () => void) => void;
+};
+/**
+ * Wrap `pushState`/`replaceState` and call `onNavigate` when the URL changes.
+ *
+ * Returns a cleanup function that restores the original History methods.
+ */
+export declare function trackRouteChanges({ history, window: windowLike, currentUrl, onNavigate, defer, }: RouteChangeOptions): () => void;
+export {};

package/dist/components/Tracking/routeChanges.js

@@ -0,0 +1,62 @@
+// Client-side route-change detection for the Tracking component.
+//
+// There is no navigation event a page can listen to for SPA routing, so the
+// only way to notice one is to wrap the History API and watch for the URL
+// changing underneath us. Kept in its own module — and taking its history,
+// window and clock as arguments — so the wrapping and the de-duplication can
+// be tested without a DOM.
+
+/**
+ * Wrap `pushState`/`replaceState` and call `onNavigate` when the URL changes.
+ *
+ * Returns a cleanup function that restores the original History methods.
+ */
+export function trackRouteChanges(_ref) {
+  let {
+    history,
+    window: windowLike,
+    currentUrl,
+    onNavigate,
+    defer = callback => {
+      setTimeout(callback, 0);
+    }
+  } = _ref;
+  // The caller has already reported the URL we start on, so it is the first
+  // thing we compare against.
+  let lastUrl = currentUrl();
+  const handleRouteChange = () => {
+    // Defer slightly to let document.title update
+    defer(() => {
+      const url = currentUrl();
+
+      // A history entry gets rewritten in place for all sorts of reasons that
+      // are not navigation: saving scroll position, stashing UI state, marking
+      // how the entry was reached. Phoenix LiveView, for one, calls
+      // `history.replaceState(state, "", window.location.href)` 100ms after
+      // every scroll stop to remember the scroll offset — which billed a page
+      // view per scroll pause on the site of anyone running LiveView. Only a
+      // URL that actually differs from the last one we reported can be a new
+      // page view. Note this compares against the *previous* URL rather than
+      // every URL seen, so A → B → A is three page views, as it should be.
+      if (url === lastUrl) return;
+      lastUrl = url;
+      onNavigate();
+    });
+  };
+  const originalPushState = history.pushState.bind(history);
+  const originalReplaceState = history.replaceState.bind(history);
+  history.pushState = function () {
+    originalPushState(...arguments);
+    handleRouteChange();
+  };
+  history.replaceState = function () {
+    originalReplaceState(...arguments);
+    handleRouteChange();
+  };
+  windowLike.addEventListener('popstate', handleRouteChange);
+  return () => {
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    windowLike.removeEventListener('popstate', handleRouteChange);
+  };
+}

package/dist/components/TypeTester/useFeaturesData.d.ts

@@ -1,18 +1,18 @@
 import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql.js';
 interface useFeatures_props {
-    fontStyle: useFeaturesData_fontStyle$key;
+    fontStyle: useFeaturesData_fontStyle$key | null | undefined;
 }
+export type FeatureNames = {
+    [feature: string]: string;
+};
 declare const useFeaturesData: ({ fontStyle }: useFeatures_props) => {
-    featureNames: {
-        [feature: string]: string;
-    };
     fontFeatures: {
-        readonly stylisticSetNames: ReadonlyArray<{
-            readonly featureName: string;
-            readonly humanName: string;
+        readonly featureNames: ReadonlyArray<{
+            readonly name: string;
+            readonly tag: string;
         }>;
         readonly supportedFeatures: ReadonlyArray<string>;
-    };
-    " $fragmentType": "useFeaturesData_fontStyle";
+    } | null;
+    featureNames: FeatureNames;
 };
 export default useFeaturesData;

package/dist/components/TypeTester/useFeaturesData.js

@@ -1,32 +1,22 @@
 import _useFeaturesData_fontStyle from "../../__generated__/useFeaturesData_fontStyle.graphql.js";
+import { useMemo } from 'react';
 import { graphql, useFragment } from 'react-relay';
-import featureNameData from './features.js';
-const getStylisticSetName = (feature, stylisticSetNames) => stylisticSetNames.find(_ref => {
-  let {
-    featureName
-  } = _ref;
-  return featureName === feature;
-});
-const useFeaturesData = _ref2 => {
-  var _data$fontFeatures;
+const useFeaturesData = _ref => {
   let {
     fontStyle
-  } = _ref2;
-  const data = useFragment((_useFeaturesData_fontStyle.hash && _useFeaturesData_fontStyle.hash !== "3c48a87b1b19f52e3dda10fc11f0030a" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle), fontStyle);
-  const featureNames = ((_data$fontFeatures = data.fontFeatures) === null || _data$fontFeatures === void 0 ? void 0 : _data$fontFeatures.supportedFeatures.reduce((acc, feature) => {
-    let featureName = feature;
-    if (featureNameData.hasOwnProperty(feature)) {
-      featureName = featureNameData[feature];
-    }
-    const stylisticSetName = getStylisticSetName(feature, data.fontFeatures.stylisticSetNames);
-    if (stylisticSetName) {
-      featureName = stylisticSetName.humanName;
-    }
-    acc[feature] = featureName;
+  } = _ref;
+  const data = useFragment((_useFeaturesData_fontStyle.hash && _useFeaturesData_fontStyle.hash !== "6a05a092096a4a0c1dd10fc0610bbee2" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle), fontStyle);
+  const fontFeatures = (data === null || data === void 0 ? void 0 : data.fontFeatures) ?? null;
+  const featureNames = useMemo(() => (fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.featureNames.reduce((acc, _ref2) => {
+    let {
+      tag,
+      name
+    } = _ref2;
+    acc[tag] = name;
     return acc;
-  }, {})) ?? [];
+  }, {})) ?? {}, [fontFeatures]);
   return {
-    ...data,
+    fontFeatures,
     featureNames
   };
 };

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.5";
+export const version = "3.3.0";
 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.5",
+  "version": "3.3.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",