fontdue-js 3.0.0-alpha4 → 3.0.0-alpha5

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

@@ -1,10 +1,17 @@
-import React from 'react';
-import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
-import { ThemeConfigPreloadedQueryRenderer } from './index.js';
-import ThemeConfigQueryNode from '../../__generated__/ThemeConfigQuery.graphql.js';
-export default async function ThemeConfig() {
-  const preloadedQuery = await loadSerializableQuery(ThemeConfigQueryNode, {});
-  return /*#__PURE__*/React.createElement(ThemeConfigPreloadedQueryRenderer, {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ThemeConfig;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _ThemeConfigQuery = _interopRequireDefault(require("../../__generated__/ThemeConfigQuery.graphql"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+async function ThemeConfig() {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_ThemeConfigQuery.default, {});
+  return /*#__PURE__*/_react.default.createElement(_index.ThemeConfigPreloadedQueryRenderer, {
     preloadedQuery: preloadedQuery
   });
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alignment, Direction, FeaturesProp } from './types.js';
-import { LoadSerializableQueryOptions, SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
 import { TypeTesterStandaloneQuery } from '../../__generated__/TypeTesterStandaloneQuery.graphql.js';
 interface TypeTesterStandaloneComponent_props {
     lineHeight?: number | null;
@@ -30,7 +30,7 @@ export interface LoadTypeTesterQueryVariables {
     styleName: string;
     selectable?: boolean;
 }
-export declare function loadTypeTesterQuery(variables: LoadTypeTesterQueryVariables, options?: LoadSerializableQueryOptions): Promise<TypeTesterPreloadedQuery>;
+export declare function loadTypeTesterQuery(variables: LoadTypeTesterQueryVariables): Promise<TypeTesterPreloadedQuery>;
 export declare function TypeTesterStandalonePreloadedQueryRenderer({ preloadedQuery, ...rest }: TypeTesterStandaloneComponent_props & {
     preloadedQuery: TypeTesterPreloadedQuery;
 }): React.JSX.Element;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -101,12 +101,12 @@ function TypeTesterStandaloneComponent(_ref) {
   }));
 }
 const query = (_TypeTesterStandaloneQuery.hash && _TypeTesterStandaloneQuery.hash !== "57916b8e26a166271a80c5df1b3f68ec" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery);
-export async function loadTypeTesterQuery(variables, options) {
+export async function loadTypeTesterQuery(variables) {
   return loadSerializableQuery(TypeTesterStandaloneQueryNode, {
     familyName: variables.familyName,
     styleName: variables.styleName,
     selectable: variables.selectable ?? true
-  }, options);
+  });
 }
 export function TypeTesterStandalonePreloadedQueryRenderer(_ref3) {
   let {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { TypeTestersIDQuery } from '../../__generated__/TypeTestersIDQuery.graphql.js';
 import { TypeTestersSlugQuery } from '../../__generated__/TypeTestersSlugQuery.graphql.js';
 import { FeaturesProp } from '../TypeTester/types.js';
-import { LoadSerializableQueryOptions, SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
 export interface TypeTesters_props {
     collectionId?: string;
     collectionSlug?: string;
@@ -33,7 +33,7 @@ export type LoadTypeTestersQueryVariables = ({
     excludeTags?: string[] | null;
     selectable?: boolean;
 };
-export declare function loadTypeTestersQuery(variables: LoadTypeTestersQueryVariables, options?: LoadSerializableQueryOptions): Promise<TypeTestersPreloadedQuery>;
+export declare function loadTypeTestersQuery(variables: LoadTypeTestersQueryVariables): Promise<TypeTestersPreloadedQuery>;
 export type TypeTesters_unifiedProps = TypeTesters_props & {
     preloadedQuery?: TypeTestersPreloadedQuery;
 };

package/dist/components/TypeTesters/index.js

@@ -259,7 +259,7 @@ function TypeTestersSlugQueryRenderer(_ref6) {
     excludeTags: excludeTags
   }));
 }
-export async function loadTypeTestersQuery(variables, options) {
+export async function loadTypeTestersQuery(variables) {
   const tags = variables.tags ?? null;
   const excludeTags = variables.excludeTags ?? null;
   const selectable = variables.selectable ?? true;
@@ -269,7 +269,7 @@ export async function loadTypeTestersQuery(variables, options) {
       tags,
       excludeTags,
       selectable
-    }, options);
+    });
   }
   if (variables.collectionSlug) {
     return loadSerializableQuery(TypeTestersSlugQueryNode, {
@@ -277,7 +277,7 @@ export async function loadTypeTestersQuery(variables, options) {
       tags,
       excludeTags,
       selectable
-    }, options);
+    });
   }
   throw new Error('loadTypeTestersQuery expected either collectionId or collectionSlug');
 }

package/dist/fontdue.css

@@ -941,14 +941,6 @@ div[data-component=TypeTesters] {
   border-color: var(--button_hover_border_color, transparent);
 }
 
-:root {
-  --section_spacing: 60px;
-}
-
-.price {
-  font-variant-numeric: tabular-nums;
-}
-
 .character-viewer {
   --size: calc(var(--monitor-width) * 1 / 2);
   --half-gap: calc(var(--line-gap) / 2);
@@ -1209,10 +1201,6 @@ input:checked + .checkbox__icon {
   margin-left: 0;
 }
 
-body[data-fontdue-store-modal=open] {
-  overflow: hidden;
-}
-
 .button {
   background: none;
   color: inherit;
@@ -2304,6 +2292,10 @@ body[data-fontdue-store-modal=open] {
   font-size: 20px;
 }
 
+body[data-fontdue-store-modal=open] {
+  overflow: hidden;
+}
+
 .empty-cart__message {
   font-size: 20px;
   margin-bottom: 60px;
@@ -3205,6 +3197,14 @@ textarea.text-field__input {
   display: block;
 }
 
+:root {
+  --section_spacing: 60px;
+}
+
+.price {
+  font-variant-numeric: tabular-nums;
+}
+
 fontdue-test-fonts-form,
 fontdue-newsletter-signup,
 fontdue-customer-login-form {

package/dist/loadFontdueProviderQuery.d.ts

@@ -1,4 +1,3 @@
-import { LoadSerializableQueryOptions } from './relay/loadSerializableQuery.js';
 import type { FontdueProviderPreloadedQuery } from './components/FontdueProvider/index.js';
 export type { FontdueProviderPreloadedQuery };
-export default function loadFontdueProviderQuery(options?: LoadSerializableQueryOptions): Promise<FontdueProviderPreloadedQuery>;
+export default function loadFontdueProviderQuery(): Promise<FontdueProviderPreloadedQuery>;

package/dist/loadFontdueProviderQuery.js

@@ -5,6 +5,6 @@ import FontdueProviderQueryNode from './__generated__/FontdueProviderQuery.graph
 // `<FontdueProvider preloadedQuery={…}>` in your layout. Without it, aux UI
 // falls back to lazy-fetching on first client render — which causes a visible
 // theming flash because `ThemeConfig` injects CSS variables.
-export default async function loadFontdueProviderQuery(options) {
-  return loadSerializableQuery(FontdueProviderQueryNode, {}, options);
+export default async function loadFontdueProviderQuery() {
+  return loadSerializableQuery(FontdueProviderQueryNode, {});
 }

package/dist/relay/environment.js

@@ -3,7 +3,7 @@ import { handlePossibleCorsError } from '../corsError.js';
 
 // `__FONTDUE_JS_VERSION__` is replaced by an inline babel plugin
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
-const version = "3.0.0-alpha4";
+const version = "3.0.0-alpha5";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Read env from either process.env (Node/Next.js) or import.meta.env (Vite/Astro).

package/dist/relay/loadSerializableQuery.d.ts

@@ -43,9 +43,5 @@ export interface SerializablePreloadedQuery<TQuery extends OperationType> {
 type RequireAllWithNull<T> = {
     [K in keyof T]-?: T[K] | null;
 };
-export interface LoadSerializableQueryOptions {
-    url?: string;
-    stripeIntegration?: 'card-element' | 'dynamic';
-}
-export default function loadSerializableQuery<TQuery extends OperationType>(query: GraphQLTaggedNode, variables: RequireAllWithNull<VariablesOf<TQuery>>, options?: LoadSerializableQueryOptions): Promise<SerializablePreloadedQuery<TQuery>>;
+export default function loadSerializableQuery<TQuery extends OperationType>(query: GraphQLTaggedNode, variables: RequireAllWithNull<VariablesOf<TQuery>>): Promise<SerializablePreloadedQuery<TQuery>>;
 export {};

package/dist/relay/loadSerializableQuery.js

@@ -40,9 +40,9 @@ import { createNetworkFetch } from './environment.js';
 // 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.
-export default async function loadSerializableQuery(query, variables, options) {
+export default async function loadSerializableQuery(query, variables) {
   if (!('params' in query)) throw new Error('Params not found in query, is it a fragment instead of a query?');
-  const fetcher = createNetworkFetch(options);
+  const fetcher = createNetworkFetch();
   const response = await fetcher(query.params, variables);
   return {
     params: query.params,

package/dist/vite.js

@@ -23,6 +23,8 @@
 // @ts-ignore — vite-plugin-cjs-interop has no bundled types but exports
 // cjsInterop at runtime.
 import { cjsInterop } from 'vite-plugin-cjs-interop';
+import { createRequire } from 'node:module';
+
 // Packages whose imports cjsInterop should rewrite to default-import +
 // destructure shape. Limit this to packages that genuinely ship as CJS-only
 // with `module.exports = require('./lib')` shapes that defeat named-import
@@ -43,9 +45,47 @@ const CJS_DEPS = ['react-relay', 'relay-runtime', 'draft-js', 'fbjs'];
 // the optimizer's auto-generated wrapper omits a `default` export. Including
 // the consumers + setting `needsInterop` on `prop-types` forces Vite to
 // synthesize a default export so `import PropTypes from 'prop-types'` resolves.
-const CLIENT_OPTIMIZE = [...CJS_DEPS, 'react-redux', 'react-google-recaptcha', '@stripe/react-stripe-js', 'prop-types'];
+const CLIENT_OPTIMIZE = [...CJS_DEPS, 'react-redux', 'react-google-recaptcha', '@stripe/react-stripe-js', 'prop-types',
+// Transitive deps that Vite would otherwise discover late, after fontdue-js
+// subpaths are first imported. Each late discovery triggers a re-optimize
+// and a new browserHash for `react`, which produces the dual-React bug
+// described above `getFontdueJsSubpaths`. Pinning them here keeps the
+// initial scan complete.
+'@sentry/react', '@stripe/stripe-js', 'react-error-boundary', 'redux'];
 const NEEDS_INTEROP = ['prop-types'];
+
+// Every public `fontdue-js/*` entry from package.json `exports`. Pre-including
+// them in `optimizeDeps` forces Vite to scan them on the first dev startup
+// instead of discovering them later when a route lazy-loads.
+//
+// Why this matters: when Vite finds a new dep mid-session it re-runs the
+// optimizer, which mints a new `?v=` browserHash for every dep chunk. Chunks
+// already loaded in the page keep their old `?v=` baked into their imports,
+// so a freshly-fetched chunk that imports `react?v=NEW` ends up coexisting
+// with the previously-loaded `react?v=OLD`. Two physical React modules in
+// the same page → two `ReactCurrentDispatcher`s → `useContext` returns null
+// → "Invalid hook call" on first navigation to an uncached route.
+//
+// Frameworks that lazy-load modules (RR7's route splitter, Astro's per-island
+// hydration) make this near-certain unless the optimizer sees the full set
+// up front. Vite's glob form (`fontdue-js/*`) walks the filesystem and gets
+// confused by our `exports`-mapped layout (the dist files don't sit at the
+// subpath names), so we read `exports` directly — that's the authoritative
+// list.
+function getFontdueJsSubpaths() {
+  const require = createRequire(import.meta.url);
+  const pkg = require('../package.json');
+  const out = [];
+  for (const key of Object.keys(pkg.exports ?? {})) {
+    if (!key.startsWith('./')) continue;
+    if (key.endsWith('.css')) continue;
+    if (key === './vite') continue;
+    out.push(`fontdue-js/${key.slice(2)}`);
+  }
+  return out;
+}
 export default function fontdueJs() {
+  const fontdueSubpaths = getFontdueJsSubpaths();
   return [cjsInterop({
     dependencies: CJS_DEPS
   }), {
@@ -58,7 +98,7 @@ export default function fontdueJs() {
         // its `module.exports = require('./lib/index.js')` shape can't
         // be statically analyzed for named exports.
         optimizeDeps: {
-          include: [...CLIENT_OPTIMIZE],
+          include: [...fontdueSubpaths, ...CLIENT_OPTIMIZE],
           needsInterop: [...NEEDS_INTEROP]
         },
         // fbjs (transitive via draft-js) references Node's `global` at

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.0.0-alpha4",
+  "version": "3.0.0-alpha5",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
@@ -61,7 +61,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "relay-compiler": "^18.0.0",
-    "sass": "^1.62",
+    "sass": "^1.99.0",
     "typescript": "^5.9",
     "vite": "^8.0.10",
     "vitest": "^4.1.1"
@@ -86,10 +86,7 @@
       "react-server": "./dist/components/BuyButton/index.server.js",
       "default": "./dist/components/BuyButton/index.js"
     },
-    "./CartButton": {
-      "react-server": "./dist/components/CartButton/index.server.js",
-      "default": "./dist/components/CartButton/index.js"
-    },
+    "./CartButton": "./dist/components/CartButton/index.js",
     "./CharacterViewer": {
       "react-server": "./dist/components/CharacterViewer/index.server.js",
       "default": "./dist/components/CharacterViewer/index.js"