fontdue-js 2.28.0 → 3.0.0-alpha10

package/dist/vite.js

@@ -0,0 +1,141 @@
+// 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;
+    // Build-config and server-only entrypoints never reach a browser bundle.
+    if (key === './vite') continue;
+    if (key === './next' || key.startsWith('./next/')) 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,7 @@
 {
   "name": "fontdue-js",
-  "version": "2.28.0",
+  "version": "3.0.0-alpha10",
+  "type": "module",
   "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",
@@ -21,12 +22,10 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@react-hook/resize-observer": "^2",
     "@react-hook/window-size": "^3.0.7",
     "@sentry/react": "^10.17.0",
     "@stripe/react-stripe-js": "^3.8.1",
     "@stripe/stripe-js": "^7.7.0",
-    "classnames": "^2.2.5",
     "draft-js": "^0.11.7",
     "fast-deep-equal": "^2.0.1",
     "fontfaceobserver": "^2.0.13",
@@ -38,7 +37,8 @@
     "redux": "^5.0.0",
     "relay-runtime": "^20.0.0",
     "store": "^2.0.12",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vite-plugin-cjs-interop": "^3.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
@@ -61,8 +61,9 @@
     "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"
   },
   "relay": {
@@ -80,15 +81,17 @@
     "@types/react": "19.0.0"
   },
   "exports": {
+    ".": "./dist/index.js",
+    "./next": "./dist/next/index.js",
+    "./next/config": "./dist/next/config.js",
+    "./next/revalidate": "./dist/next/revalidate.js",
+    "./next/image-loader": "./dist/next/image-loader.js",
     "./fontdue.css": "./dist/fontdue.css",
     "./BuyButton": {
       "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"
@@ -111,6 +114,7 @@
       "react-server": "./dist/components/TypeTester/TypeTesterStandalone.server.js",
       "default": "./dist/components/TypeTester/TypeTesterStandalone.js"
     },
+    "./vite": "./dist/vite.js",
     "./TypeTesters": {
       "react-server": "./dist/components/TypeTesters/index.server.js",
       "default": "./dist/components/TypeTesters/index.js"

package/scripts/addJsExtensionsBabelPlugin.cjs

@@ -0,0 +1,62 @@
+// Babel plugin: rewrite extensionless relative imports to add `.js`. Mirrors
+// the source codemod (scripts/addJsExtensionsToSource.mjs) for two cases the
+// codemod can't touch:
+//   1. src/__generated__/*.graphql.ts — emitted by relay-compiler, regenerated
+//      on every `npm run relay`, so any source-level edit would be reverted.
+//   2. Imports synthesized by babel-plugin-relay from `graphql\`...\`` tags —
+//      these don't exist in source at all; they're inserted during the babel
+//      pass, after the codemod has already run.
+//
+// Order matters: this plugin must run after 'relay' so it sees those inserted
+// imports. Babel runs plugins in array order, so list this plugin last.
+
+const path = require('path');
+const fs = require('fs');
+
+const SOURCE_EXTS = ['.ts', '.tsx', '.js', '.jsx'];
+
+function resolveSpecifier(filename, specifier) {
+  if (!specifier.startsWith('./') && !specifier.startsWith('../')) return null;
+  const baseDir = path.dirname(filename);
+  const abs = path.resolve(baseDir, specifier);
+  for (const ext of SOURCE_EXTS) {
+    if (fs.existsSync(abs + ext)) return specifier + '.js';
+  }
+  if (fs.existsSync(abs) && fs.statSync(abs).isDirectory()) {
+    for (const ext of SOURCE_EXTS) {
+      if (fs.existsSync(path.join(abs, 'index' + ext))) {
+        return specifier.replace(/\/$/, '') + '/index.js';
+      }
+    }
+  }
+  return null;
+}
+
+module.exports = function addJsExtensionsPlugin({ types: t }) {
+  function rewriteSource(node, filename) {
+    if (!node || !node.source || !filename) return;
+    const next = resolveSpecifier(filename, node.source.value);
+    if (next != null) node.source = t.stringLiteral(next);
+  }
+  return {
+    name: 'add-js-extensions',
+    visitor: {
+      ImportDeclaration(p, state) {
+        rewriteSource(p.node, state.filename);
+      },
+      ExportNamedDeclaration(p, state) {
+        rewriteSource(p.node, state.filename);
+      },
+      ExportAllDeclaration(p, state) {
+        rewriteSource(p.node, state.filename);
+      },
+      CallExpression(p, state) {
+        if (p.node.callee.type !== 'Import') return;
+        const arg = p.node.arguments[0];
+        if (!arg || arg.type !== 'StringLiteral') return;
+        const next = resolveSpecifier(state.filename, arg.value);
+        if (next != null) arg.value = next;
+      },
+    },
+  };
+};

package/types/globals.d.ts

@@ -0,0 +1,3 @@
+// Build-time injected by an inline babel plugin in .babelrc.cjs.
+// Source of truth is `package.json#version`.
+declare const __FONTDUE_JS_VERSION__: string;

package/types/next-cache.d.ts

@@ -0,0 +1,6 @@
+// Minimal declaration so src/next/revalidate.ts type-checks without `next`
+// installed (it's the host app's dependency; this package only ever runs the
+// import inside a Next.js server).
+declare module 'next/cache' {
+  export function revalidateTag(tag: string): void;
+}

package/types/next-navigation.d.ts

@@ -0,0 +1,6 @@
+// Minimal declaration so src/next/tenant.ts type-checks without `next`
+// installed (it's the host app's dependency; this package only ever runs the
+// import inside a Next.js server).
+declare module 'next/navigation' {
+  export function notFound(): never;
+}

package/vitest.config.ts

@@ -2,6 +2,10 @@ import { defineConfig } from 'vitest/config';
 import path from 'path';
 
 export default defineConfig({
+  // Stand-in for the babel define plugin that inlines the package version.
+  define: {
+    __FONTDUE_JS_VERSION__: JSON.stringify('0.0.0-test'),
+  },
   test: {
     alias: {
       '__generated__': path.resolve(__dirname, 'src/__generated__'),

package/dist/__generated__/ServerConfigProviderQuery.graphql.d.ts

@@ -1,24 +0,0 @@
-/**
- * @generated SignedSource<<e36d7651684826ea0cac76a464f23dcd>>
- * @lightSyntaxTransform
- * @nogrep
- */
-import { ConcreteRequest } from 'relay-runtime';
-export type ServerConfigProviderQuery$variables = Record<PropertyKey, never>;
-export type ServerConfigProviderQuery$data = {
-    readonly viewer: {
-        readonly fontdueConfig: {
-            readonly tracking: {
-                readonly consentMessage: string | null;
-                readonly consentRequired: boolean;
-                readonly enabled: boolean;
-            } | null;
-        } | null;
-    };
-};
-export type ServerConfigProviderQuery = {
-    response: ServerConfigProviderQuery$data;
-    variables: ServerConfigProviderQuery$variables;
-};
-declare const node: ConcreteRequest;
-export default node;

package/dist/__generated__/ServerConfigProviderQuery.graphql.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/**
- * @generated SignedSource<<e36d7651684826ea0cac76a464f23dcd>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-const node = function () {
-  var v0 = {
-    "alias": null,
-    "args": null,
-    "concreteType": "FontdueConfig",
-    "kind": "LinkedField",
-    "name": "fontdueConfig",
-    "plural": false,
-    "selections": [{
-      "alias": null,
-      "args": null,
-      "concreteType": "FontdueTrackingConfig",
-      "kind": "LinkedField",
-      "name": "tracking",
-      "plural": false,
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "enabled",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "consentRequired",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "consentMessage",
-        "storageKey": null
-      }],
-      "storageKey": null
-    }],
-    "storageKey": null
-  };
-  return {
-    "fragment": {
-      "argumentDefinitions": [],
-      "kind": "Fragment",
-      "metadata": null,
-      "name": "ServerConfigProviderQuery",
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "concreteType": "Viewer",
-        "kind": "LinkedField",
-        "name": "viewer",
-        "plural": false,
-        "selections": [v0 /*: any*/],
-        "storageKey": null
-      }],
-      "type": "RootQueryType",
-      "abstractKey": null
-    },
-    "kind": "Request",
-    "operation": {
-      "argumentDefinitions": [],
-      "kind": "Operation",
-      "name": "ServerConfigProviderQuery",
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "concreteType": "Viewer",
-        "kind": "LinkedField",
-        "name": "viewer",
-        "plural": false,
-        "selections": [v0 /*: any*/, {
-          "alias": null,
-          "args": null,
-          "kind": "ScalarField",
-          "name": "id",
-          "storageKey": null
-        }],
-        "storageKey": null
-      }]
-    },
-    "params": {
-      "cacheID": "46fad3541d5416ad34b29b1a4e707f19",
-      "id": null,
-      "metadata": {},
-      "name": "ServerConfigProviderQuery",
-      "operationKind": "query",
-      "text": "query ServerConfigProviderQuery {\n  viewer {\n    fontdueConfig {\n      tracking {\n        enabled\n        consentRequired\n        consentMessage\n      }\n    }\n    id\n  }\n}\n"
-    }
-  };
-}();
-node.hash = "b20ad9bdada6a425ee660a8662a78840";
-var _default = node;
-exports.default = _default;

package/dist/__generated__/TestModeBannerQuery.graphql.d.ts

@@ -1,20 +0,0 @@
-/**
- * @generated SignedSource<<e395904ea5bda751df1ca67f9c74ac55>>
- * @lightSyntaxTransform
- * @nogrep
- */
-import { ConcreteRequest } from 'relay-runtime';
-export type TestModeBannerQuery$variables = Record<PropertyKey, never>;
-export type TestModeBannerQuery$data = {
-    readonly viewer: {
-        readonly testMode: {
-            readonly isActive: boolean;
-        };
-    };
-};
-export type TestModeBannerQuery = {
-    response: TestModeBannerQuery$data;
-    variables: TestModeBannerQuery$variables;
-};
-declare const node: ConcreteRequest;
-export default node;

package/dist/__generated__/ThemeConfigQuery.graphql.d.ts

@@ -1,20 +0,0 @@
-/**
- * @generated SignedSource<<b292c0ac6583f7d2d7cd8979e5696b21>>
- * @lightSyntaxTransform
- * @nogrep
- */
-import { ConcreteRequest } from 'relay-runtime';
-export type ThemeConfigQuery$variables = Record<PropertyKey, never>;
-export type ThemeConfigQuery$data = {
-    readonly viewer: {
-        readonly themeConfig: {
-            readonly customProperties: ReadonlyArray<string> | null;
-        } | null;
-    };
-};
-export type ThemeConfigQuery = {
-    response: ThemeConfigQuery$data;
-    variables: ThemeConfigQuery$variables;
-};
-declare const node: ConcreteRequest;
-export default node;

package/dist/__generated__/ThemeConfigQuery.graphql.js

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/**
- * @generated SignedSource<<b292c0ac6583f7d2d7cd8979e5696b21>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-const node = function () {
-  var v0 = {
-    "alias": null,
-    "args": null,
-    "concreteType": "ThemeConfig",
-    "kind": "LinkedField",
-    "name": "themeConfig",
-    "plural": false,
-    "selections": [{
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "customProperties",
-      "storageKey": null
-    }],
-    "storageKey": null
-  };
-  return {
-    "fragment": {
-      "argumentDefinitions": [],
-      "kind": "Fragment",
-      "metadata": null,
-      "name": "ThemeConfigQuery",
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "concreteType": "Viewer",
-        "kind": "LinkedField",
-        "name": "viewer",
-        "plural": false,
-        "selections": [v0 /*: any*/],
-        "storageKey": null
-      }],
-      "type": "RootQueryType",
-      "abstractKey": null
-    },
-    "kind": "Request",
-    "operation": {
-      "argumentDefinitions": [],
-      "kind": "Operation",
-      "name": "ThemeConfigQuery",
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "concreteType": "Viewer",
-        "kind": "LinkedField",
-        "name": "viewer",
-        "plural": false,
-        "selections": [v0 /*: any*/, {
-          "alias": null,
-          "args": null,
-          "kind": "ScalarField",
-          "name": "id",
-          "storageKey": null
-        }],
-        "storageKey": null
-      }]
-    },
-    "params": {
-      "cacheID": "d1f54ccc72720516df3faf57461c20e1",
-      "id": null,
-      "metadata": {},
-      "name": "ThemeConfigQuery",
-      "operationKind": "query",
-      "text": "query ThemeConfigQuery {\n  viewer {\n    themeConfig {\n      customProperties\n    }\n    id\n  }\n}\n"
-    }
-  };
-}();
-node.hash = "c259bee038c4d2ea14c758fba3381f57";
-var _default = node;
-exports.default = _default;

package/dist/components/CartButton/index.server.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CartButton_props } from './index';
-export default function CartButton(props: CartButton_props): Promise<React.JSX.Element>;

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

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CartButton;
-var _react = _interopRequireDefault(require("react"));
-var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
-var _index = require("./index");
-var _CartButtonQuery = _interopRequireDefault(require("../../__generated__/CartButtonQuery.graphql"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-async function CartButton(props) {
-  const preloadedQuery = await (0, _loadSerializableQuery.default)(_CartButtonQuery.default, {});
-  return /*#__PURE__*/_react.default.createElement(_index.CartButtonPreloadedQueryRenderer, _extends({
-    preloadedQuery: preloadedQuery
-  }, props));
-}

package/dist/components/FontdueProvider/FontdueProviderClientComponent.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Store } from 'redux';
-import { Config } from '../ConfigContext';
-import { FontdueAction, FontdueState } from '../../reducer';
-import { Components } from '../ComponentsContext';
-export interface FontdueProvider_props {
-    children?: React.ReactNode;
-    url?: string;
-    stripeIntegration?: 'card-element' | 'dynamic';
-    config?: Config;
-    components?: Components;
-    store?: Store<FontdueState, FontdueAction>;
-}
-export default function FontdueProviderClientComponent({ children, url, stripeIntegration, config, components, store, }: FontdueProvider_props): React.JSX.Element;