fontdue-js 2.22.4 → 2.23.0

package/dist/components/TypeTester/TypeTesterStandalone.preload.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import loadSerializableQuery from '../../relay/loadSerializableQuery';
-import TypeTesterStandaloneQueryNode from '../../__generated__/TypeTesterStandaloneQuery.graphql';
-import FontdueProvider from '../FontdueProvider';
-import { TypeTesterStandalonePreloadedQueryRenderer } from './TypeTesterStandalone';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import TypeTesterStandaloneQueryNode from '../../__generated__/TypeTesterStandaloneQuery.graphql.js';
+import FontdueContextProvider from '../FontdueContextProvider/index.js';
+import { TypeTesterStandalonePreloadedQueryRenderer } from './TypeTesterStandalone.js';
 export async function loadTypeTesterQuery(variables, options) {
   return loadSerializableQuery(TypeTesterStandaloneQueryNode, {
     familyName: variables.familyName,
@@ -10,10 +10,11 @@ export async function loadTypeTesterQuery(variables, options) {
     selectable: variables.selectable ?? true
   }, options);
 }
-// Self-wraps with FontdueProvider so consumers don't need to. The provider
-// state is a module-level singleton under the hood, so multiple
-// TypeTesterPreloaded (or other *Preloaded) components on a page all share
-// one Relay env + Redux store + auxiliary UI.
+// Self-wraps with FontdueContextProvider so consumers don't need to wire up
+// Relay env / Redux store / contexts at the call site. Aux UI (theme,
+// test-mode banner, consent, tracking) is NOT rendered here — that belongs
+// to a single layout-level `<FontdueProvider>` per page. State is shared
+// across multiple preloaded components on a page via module-level singletons.
 export function TypeTesterPreloaded(props) {
-  return /*#__PURE__*/React.createElement(FontdueProvider, null, /*#__PURE__*/React.createElement(TypeTesterStandalonePreloadedQueryRenderer, props));
+  return /*#__PURE__*/React.createElement(FontdueContextProvider, null, /*#__PURE__*/React.createElement(TypeTesterStandalonePreloadedQueryRenderer, props));
 }

package/dist/config.d.ts

@@ -1,4 +1,5 @@
-export interface FontdueConfig {
+import type { Config } from './components/ConfigContext.js';
+export interface FontdueConfig extends Config {
     url?: string;
     stripeIntegration?: 'card-element' | 'dynamic';
 }

package/dist/config.js

@@ -1,14 +1,25 @@
 // Module-level global configuration. Consumers call `configure()` once at
-// app startup (e.g. Astro middleware, Next layout, Vite entry) and every
-// fontdue-js entry point reads defaults from here. Explicit options passed
-// to loadSerializableQuery / FontdueProvider still override.
+// app startup (Astro layout, Next layout, Vite entry) and every fontdue-js
+// entry point reads defaults from here.
+//
+// Precedence (low to high):
+//   1. Server admin config (from the tenant dashboard, fetched via Relay)
+//   2. configure({...})  — module-level code defaults
+//   3. <FontdueProvider config={...}>  — per-instance prop override
 //
 // Per-request isolation note: `configure` sets module-level state. That's
-// fine for single-tenant apps (one URL for the whole site). Multi-tenant
-// servers that switch URL per request should pass `url` explicitly to
-// loadSerializableQuery rather than rely on configure().
+// fine for single-tenant apps. Multi-tenant servers that switch URL per
+// request should pass `url` explicitly to loadSerializableQuery rather than
+// rely on configure().
+
+// Network-layer + UI config in one bag. UI fields come from `Config` (the
+// shape passed to ConfigContext); URL + stripeIntegration are network-layer.
 
 let current = {};
+
+// Shallow-merges with prior values. Calling `configure({tracking: {...}})`
+// replaces the whole `tracking` subtree; pass nested fields fully populated
+// when partial-updating.
 export function configure(opts) {
   current = {
     ...current,

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,11 @@
+type ResizeObserverCtor = new (callback: ResizeObserverCallback) => {
+    observe: (target: Element) => void;
+    unobserve?: (target: Element) => void;
+    disconnect?: () => void;
+};
+export type UseResizeObserverOptions = {
+    polyfill?: ResizeObserverCtor | null;
+};
+export type UseResizeObserverCallback = (entry: ResizeObserverEntry, observer: ResizeObserver) => void;
+export default function useResizeObserver<T extends Element>(target: React.RefObject<T | null> | T | null, callback: UseResizeObserverCallback, options?: UseResizeObserverOptions): void;
+export {};

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+
+// Loose constructor type so the SSR no-op polyfills used as fallbacks (which
+// don't implement `disconnect`) still type-check.
+
+export default function useResizeObserver(target, callback) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const element = target && 'current' in target ? target.current : target;
+    if (!element) return;
+    const Ctor = options.polyfill ?? (typeof ResizeObserver !== 'undefined' ? ResizeObserver : null);
+    if (!Ctor) return;
+    const observer = new Ctor(entries => {
+      for (const entry of entries) callbackRef.current(entry, observer);
+    });
+    observer.observe(element);
+    return () => {
+      if (observer.disconnect) observer.disconnect();else if (observer.unobserve) observer.unobserve(element);
+    };
+  }, [target, options.polyfill]);
+}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { configure, getConfig } from './config';
-export type { FontdueConfig } from './config';
+export { default as loadFontdueProviderQuery } from './loadFontdueProviderQuery.js';
+export type { FontdueProviderPreloadedQuery } from './loadFontdueProviderQuery.js';

package/dist/index.js

@@ -1 +1 @@
-export { configure, getConfig } from './config';
+export { default as loadFontdueProviderQuery } from './loadFontdueProviderQuery.js';

package/dist/loadFontdueProviderQuery.d.ts

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

package/dist/loadFontdueProviderQuery.js

@@ -0,0 +1,10 @@
+import loadSerializableQuery from './relay/loadSerializableQuery.js';
+import FontdueProviderQueryNode from './__generated__/FontdueProviderQuery.graphql.js';
+// Fetches the data aux UI (theme custom properties, test-mode flag) needs to
+// render synchronously on the server and on hydration. Pass the result to
+// `<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() {
+  return loadSerializableQuery(FontdueProviderQueryNode, {});
+}

package/dist/reducer.d.ts

@@ -57,10 +57,12 @@ export type FontdueAction = {
     type: 'PRECART_TOGGLE_LICENSE';
     licenseId: string;
     licenseOptionSpec: LicenseOptionSpec;
+    excludedLicenseIds?: readonly string[];
     checked: boolean;
 } | {
     type: 'PRECART_SELECT_LICENSE';
     licenseOptionSpec: LicenseOptionSpec;
+    excludedLicenseIds?: readonly string[];
 } | {
     type: 'PRECART_SELECT_LICENSE_OPTION';
     licenseId: string;

package/dist/reducer.js

@@ -34,9 +34,11 @@ const selectLicense = (state, action) => {
   if (!(action.type === 'PRECART_SELECT_LICENSE' || action.type === 'PRECART_TOGGLE_LICENSE')) return state;
   const existingLicenseOption = state.licenseOptions.findIndex(option => option.licenseId === action.licenseOptionSpec.licenseId);
   if (existingLicenseOption >= 0) return state;
+  const excludedIds = action.excludedLicenseIds ?? [];
+  const filtered = excludedIds.length > 0 ? state.licenseOptions.filter(option => !excludedIds.includes(option.licenseId)) : state.licenseOptions;
   return {
     ...state,
-    licenseOptions: state.licenseOptions.concat(action.licenseOptionSpec)
+    licenseOptions: filtered.concat(action.licenseOptionSpec)
   };
 };
 const toggleLicense = (state, action) => {

package/dist/vite.d.ts

@@ -0,0 +1,2 @@
+import type { PluginOption } from 'vite';
+export default function fontdueJs(): PluginOption[];

package/dist/vite.js

@@ -0,0 +1,139 @@
+// Vite plugin that fixes the SSR-side CJS interop fontdue-js's deps need.
+//
+// fontdue-js itself is published as transpiled (not bundled) ESM. Its Relay
+// + draft-js + fbjs deps still ship as CJS using `module.exports = require(…)`
+// re-export shapes that Node's strict ESM-CJS interop (and Vite's dev SSR
+// module-runner) can't named-import from. Without help, `import { graphql }
+// from 'react-relay'` blows up at SSR time with `Named export 'graphql' not
+// found` or `module is not defined`.
+//
+// `vite-plugin-cjs-interop` is the canonical fix for this — referenced by the
+// Relay maintainers in https://github.com/facebook/relay/issues/4548. It
+// rewrites named imports of the listed packages to read from `.default` after
+// CJS load, which is what Node + Vite actually expose.
+//
+// Consumers wire it up like:
+//
+//   // vite.config.ts
+//   import fontdueJs from 'fontdue-js/vite';
+//   export default defineConfig({ plugins: [fontdueJs()] });
+//
+// Returned shape is structurally a Vite Plugin (or array of plugins).
+//
+// @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
+// resolution. React-redux is real ESM and must NOT be in this list — its
+// ESM build has true named exports.
+const CJS_DEPS = ['react-relay', 'relay-runtime', 'draft-js', 'fbjs'];
+
+// Packages to pre-bundle for the browser via Vite's optimizer. Pre-bundling
+// pulls a package's transitive deps into one esbuild output, which sidesteps
+// the cjs-module-lexer trap when an ESM package (react-redux) imports a CJS
+// transitive (use-sync-external-store). Without this, the browser dev path
+// fails with "does not provide an export named useSyncExternalStoreWithSelector".
+//
+// `react-google-recaptcha` and `@stripe/react-stripe-js` are pulled into the
+// StoreModal subtree (checkout flow). Both transitively import `prop-types`,
+// whose `module.exports = require('./factoryWithTypeCheckers')(...)` shape
+// hides exports behind a runtime call — cjs-module-lexer can't see them, so
+// 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',
+// 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
+  }), {
+    name: 'fontdue-js',
+    config() {
+      return {
+        // Pre-bundle the CJS-shaped deps via esbuild for the client
+        // bundle. Without this, Astro dev's browser pass tries to
+        // ESM-import `Environment` from `relay-runtime` and fails —
+        // its `module.exports = require('./lib/index.js')` shape can't
+        // be statically analyzed for named exports.
+        optimizeDeps: {
+          include: [...fontdueSubpaths, ...CLIENT_OPTIMIZE],
+          needsInterop: [...NEEDS_INTEROP]
+        },
+        // fbjs (transitive via draft-js) references Node's `global` at
+        // module init. Browsers don't define it, so the pre-bundled chunk
+        // throws `ReferenceError: global is not defined`. Aliasing
+        // `global` to `globalThis` at compile time covers both browser
+        // and SSR paths.
+        define: {
+          global: 'globalThis'
+        }
+      };
+    },
+    // Apply `noExternal` to every server-side Vite environment so
+    // fontdue-js source flows through Vite's transform pipeline and
+    // cjsInterop can rewrite its imports of CJS-shaped Relay/draft-js/
+    // fbjs. The legacy `ssr.noExternal` only covered the default `ssr`
+    // environment, so Astro 6's separate `prerender` build externalized
+    // fontdue-js and `import { graphql } from 'react-relay'` ran against
+    // unrewritten CJS at prerender time.
+    //
+    // `config.consumer` would be the principled check, but at
+    // `configEnvironment` time Vite hasn't populated it yet (undefined
+    // for ssr/prerender/client alike). Match by name instead:
+    //   - 'ssr':        default Vite SSR env (plain Vite SSR, RR7)
+    //   - 'prerender':  Astro 6's static-prerender env
+    // The `consumer` fallback is kept as future-proofing if a framework
+    // ever names its server env something else but does populate consumer.
+    configEnvironment(name, config) {
+      if (name === 'ssr' || name === 'prerender' || config.consumer === 'server') {
+        return {
+          resolve: {
+            noExternal: ['fontdue-js']
+          }
+        };
+      }
+    }
+  }];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.22.4",
+  "version": "2.23.0",
   "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",