fontdue-js 3.0.5 → 3.1.0

package/dist/__tests__/highlight.test.js

@@ -0,0 +1,141 @@
+import { describe, it, expect } from 'vitest';
+import { sensitiveStringsForFeature, computeSensitivityFlags, segmentByFlags } from "../components/FeatureTester/highlight.js";
+describe('sensitiveStringsForFeature', () => {
+  const glyphs = [{
+    characters: 'a',
+    features: ['ss03']
+  }, {
+    characters: 'g',
+    features: ['ss03', 'ss05']
+  }, {
+    characters: 'a',
+    features: ['ss03']
+  },
+  // duplicate
+  {
+    characters: 'x',
+    features: null
+  },
+  // no features
+  {
+    characters: 'ffi',
+    features: ['dlig']
+  }];
+  it('returns the de-duplicated input strings a feature substitutes', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'ss03').sort()).toEqual(['a', 'g']);
+  });
+  it('matches a feature that is one of several on a glyph', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'ss05')).toEqual(['g']);
+  });
+  it('returns ligature (multi-char) inputs', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'dlig')).toEqual(['ffi']);
+  });
+  it('returns [] for a feature no glyph carries (the contextual signal)', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'frac')).toEqual([]);
+  });
+  it('is empty for null/undefined glyphNames', () => {
+    expect(sensitiveStringsForFeature(null, 'ss03')).toEqual([]);
+    expect(sensitiveStringsForFeature(undefined, 'ss03')).toEqual([]);
+  });
+});
+describe('computeSensitivityFlags', () => {
+  it('flags every occurrence of an auto string (by code point)', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      autoStrings: ['a']
+    })).toEqual([true, false, false, true, false, false]);
+  });
+  it('flags whole multi-char auto strings', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      autoStrings: ['ab']
+    })).toEqual([true, true, false, true, true, false]);
+  });
+  it('flags shaped-diff ranges', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      addMarks: [{
+        start: 2,
+        end: 4
+      }]
+    })).toEqual([false, false, true, true, true, false]);
+  });
+  it('composes ranges on top of auto strings', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      autoStrings: ['a'],
+      addMarks: [{
+        start: 2,
+        end: 2
+      }]
+    })).toEqual([true, false, true, true, false, false]);
+  });
+  it('clamps ranges to the content and ignores negative indices', () => {
+    expect(computeSensitivityFlags('abc', {
+      addMarks: [{
+        start: -2,
+        end: 100
+      }]
+    })).toEqual([true, true, true]);
+  });
+  it('is code-point aware (astral characters count as one)', () => {
+    // '🎉' is one code point; 'a' should be flagged at index 1, not 2
+    expect(computeSensitivityFlags('🎉a', {
+      autoStrings: ['a']
+    })).toEqual([false, true]);
+  });
+  it('is all-false with no options', () => {
+    expect(computeSensitivityFlags('abc', {})).toEqual([false, false, false]);
+  });
+});
+describe('segmentByFlags', () => {
+  it('collapses consecutive runs into segments', () => {
+    const flags = [false, false, true, true, false, false];
+    expect(segmentByFlags('abcabc', flags)).toEqual([{
+      text: 'ab',
+      sensitive: false
+    }, {
+      text: 'ca',
+      sensitive: true
+    }, {
+      text: 'bc',
+      sensitive: false
+    }]);
+  });
+  it('keeps a contiguous sensitive run (e.g. a ligature cluster) whole', () => {
+    const flags = [false, true, true, true, false, false];
+    expect(segmentByFlags('office', flags)).toEqual([{
+      text: 'o',
+      sensitive: false
+    }, {
+      text: 'ffi',
+      sensitive: true
+    }, {
+      text: 'ce',
+      sensitive: false
+    }]);
+  });
+  it('returns a single segment when nothing is sensitive', () => {
+    expect(segmentByFlags('abc', [false, false, false])).toEqual([{
+      text: 'abc',
+      sensitive: false
+    }]);
+  });
+  it('treats missing flags as not sensitive', () => {
+    expect(segmentByFlags('abc', [true])).toEqual([{
+      text: 'a',
+      sensitive: true
+    }, {
+      text: 'bc',
+      sensitive: false
+    }]);
+  });
+  it('is empty for empty content', () => {
+    expect(segmentByFlags('', [])).toEqual([]);
+  });
+  it('is code-point aware', () => {
+    expect(segmentByFlags('🎉a', [false, true])).toEqual([{
+      text: '🎉',
+      sensitive: false
+    }, {
+      text: 'a',
+      sensitive: true
+    }]);
+  });
+});

package/dist/__tests__/middleware.test.js

@@ -0,0 +1,132 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { runWithPreview, runWithNodeAccess, runWithFontdue, isPreviewing, ambientHeaders } from '../server/middleware.js';
+import { createFontdueFetch } from '../server/index.js';
+import { PREVIEW_TOKEN_COOKIE } from '../preview/constants.js';
+import { NODE_ACCESS_COOKIE, NODE_ACCESS_HEADER } from '../nodeAccess.js';
+beforeEach(() => {
+  vi.unstubAllGlobals();
+});
+function req() {
+  let cookies = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const parts = [];
+  if (cookies.preview) parts.push(`${PREVIEW_TOKEN_COOKIE}=${cookies.preview}`);
+  if (cookies.nodeAccess) parts.push(`${NODE_ACCESS_COOKIE}=${cookies.nodeAccess}`);
+  return new Request('https://store.test/', {
+    headers: parts.length ? {
+      cookie: parts.join('; ')
+    } : {}
+  });
+}
+const cdnHeaders = {
+  'Netlify-CDN-Cache-Control': 'public, durable, s-maxage=31536000',
+  'CDN-Cache-Control': 'public, s-maxage=300'
+};
+describe('runWithNodeAccess', () => {
+  it('passes public (no cookie) requests through untouched and cacheable', async () => {
+    const response = await runWithNodeAccess(req(), async () => {
+      expect(ambientHeaders()).toEqual({});
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBeNull();
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBe('public, durable, s-maxage=31536000');
+  });
+  it('forwards the unlock token ambiently and forces the response out of shared caches', async () => {
+    const response = await runWithNodeAccess(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      expect(ambientHeaders()).toEqual({
+        [NODE_ACCESS_HEADER]: 'na1'
+      });
+      // Carrying only a node-access token is not an admin preview.
+      expect(isPreviewing()).toBe(false);
+      return new Response('secret', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBe('private, no-store');
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBeNull();
+    expect(response.headers.get('CDN-Cache-Control')).toBeNull();
+  });
+});
+describe('runWithPreview is single-responsibility', () => {
+  it('does NOT forward the node-access token (only preview)', async () => {
+    const response = await runWithPreview(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      // A node-access cookie alone is invisible to runWithPreview.
+      expect(ambientHeaders()).toEqual({});
+      expect(isPreviewing()).toBe(false);
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    // No preview → public → left cacheable.
+    expect(response.headers.get('Cache-Control')).toBeNull();
+  });
+});
+describe('runWithFontdue (composed)', () => {
+  it('forwards both the preview and node-access tokens together', async () => {
+    await runWithFontdue(req({
+      preview: 'tok',
+      nodeAccess: 'na1'
+    }), async () => {
+      expect(ambientHeaders()).toEqual({
+        authorization: 'Bearer tok',
+        [NODE_ACCESS_HEADER]: 'na1'
+      });
+      expect(isPreviewing()).toBe(true);
+      return new Response('ok');
+    });
+    // Context unwinds after the request.
+    expect(ambientHeaders()).toEqual({});
+    expect(isPreviewing()).toBe(false);
+  });
+  it('forwards node-access alone (no preview) and marks the response no-store', async () => {
+    const response = await runWithFontdue(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      expect(ambientHeaders()).toEqual({
+        [NODE_ACCESS_HEADER]: 'na1'
+      });
+      expect(isPreviewing()).toBe(false);
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBe('private, no-store');
+  });
+  it('passes fully public requests through untouched and cacheable', async () => {
+    const response = await runWithFontdue(req(), async () => {
+      expect(ambientHeaders()).toEqual({});
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBeNull();
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBe('public, durable, s-maxage=31536000');
+  });
+});
+describe('createFontdueFetch + ambient node-access', () => {
+  it('a module-level fetcher forwards the ambient unlock token, no per-call plumbing', async () => {
+    const fetchMock = vi.fn(async () => ({
+      status: 200,
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const fetchGraphql = createFontdueFetch({
+      url: 'https://acme.fontdue.com'
+    });
+    await runWithNodeAccess(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      await fetchGraphql('Q', 'query Q { __typename }');
+      return new Response('ok');
+    });
+    const init = fetchMock.mock.calls[0][1];
+    expect(init.headers[NODE_ACCESS_HEADER]).toBe('na1');
+  });
+});

package/dist/components/FeatureTester/FeatureTesterCard.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FeatureTesterCard_fontStyle$key } from '../../__generated__/FeatureTesterCard_fontStyle.graphql.js';
+export type ToggleMode = 'button' | 'hover';
+export interface FeatureTesterCardOptions {
+    feature: string;
+    content: string;
+    label?: string | null;
+    fontSize?: number | null;
+    lineHeight?: number | null;
+    letterSpacing?: number | null;
+    alignment?: 'left' | 'center' | 'right' | null;
+    defaultOn?: boolean;
+    highlightColor?: string | null;
+    showLabel?: boolean;
+    showTag?: boolean;
+    toggle?: ToggleMode;
+    autofit?: boolean;
+    changedRanges?: ReadonlyArray<{
+        readonly start: number;
+        readonly length: number;
+    }> | null;
+    variableSettings?: ReadonlyArray<{
+        readonly axis: string;
+        readonly value: number;
+    }> | null;
+}
+export type FeatureTesterCardProps = FeatureTesterCardOptions & {
+    fontStyle: FeatureTesterCard_fontStyle$key;
+};
+export default function FeatureTesterCard({ fontStyle: fontStyleKey, feature, content, label, fontSize, lineHeight, letterSpacing, alignment, defaultOn, highlightColor, showLabel, showTag, toggle, autofit, changedRanges, variableSettings, }: FeatureTesterCardProps): React.JSX.Element;

package/dist/components/FeatureTester/FeatureTesterCard.js

@@ -0,0 +1,167 @@
+'use client';
+
+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); }
+import _FeatureTesterCard_fontStyle from "../../__generated__/FeatureTesterCard_fontStyle.graphql.js";
+import React, { useMemo, useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import FontStyle from '../FontStyle/index.js';
+import useFeaturesData from '../TypeTester/useFeaturesData.js';
+import useFeatureTesterAutofit from '../../hooks/useFeatureTesterAutofit.js';
+import { sensitiveStringsForFeature, computeSensitivityFlags, segmentByFlags } from './highlight.js';
+const fragment = (_FeatureTesterCard_fontStyle.hash && _FeatureTesterCard_fontStyle.hash !== "687d8afca93d615ed0794f963702d082" && console.error("The definition of 'FeatureTesterCard_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTesterCard_fontStyle);
+export default function FeatureTesterCard(_ref) {
+  let {
+    fontStyle: fontStyleKey,
+    feature,
+    content,
+    label,
+    fontSize = 72,
+    lineHeight = 1.2,
+    letterSpacing = 0,
+    alignment,
+    defaultOn = true,
+    highlightColor,
+    showLabel = true,
+    showTag = true,
+    toggle = 'button',
+    autofit = false,
+    changedRanges,
+    variableSettings
+  } = _ref;
+  // `data` carries the merged fragment spreads, so the child fragment hooks
+  // (FontStyle, useFeaturesData) read their refs off it rather than the raw key.
+  const data = useFragment(fragment, fontStyleKey);
+  const {
+    featureNames
+  } = useFeaturesData({
+    fontStyle: data
+  });
+  const [on, setOn] = useState(defaultOn);
+  const hover = toggle === 'hover';
+  const handleToggle = () => setOn(o => !o);
+
+  // The server's shaped diff (`changedRanges`) is exact for THIS string —
+  // context-free and contextual substitutions alike — so it wins whenever the
+  // collection materialized it. The static GSUB map is the fallback for cards
+  // with no shaped diff (no OpenType file server-side, or a hand-authored
+  // standalone embed); it only covers single + ligature substitutions, and for
+  // a mixed feature like frac it can hold just the slash while the real
+  // substitution is contextual over the digits — trusting it over the diff
+  // would highlight (and per-span apply) the wrong subset.
+  const staticStrings = useMemo(() => sensitiveStringsForFeature(data.glyphNames, feature), [data.glyphNames, feature]);
+  const contextFree = staticStrings.length > 0;
+  const changedMarks = useMemo(() => (changedRanges ?? []).map(r => ({
+    start: r.start,
+    end: r.start + r.length - 1
+  })), [changedRanges]);
+  const contextual = changedMarks.length > 0;
+  const segments = useMemo(() => segmentByFlags(content,
+  // A card with a shaped diff applies the feature container-wide (a
+  // per-span apply would sever the context contextual substitutions
+  // depend on), so the set that actually changes is exactly the diff —
+  // the highlight equals that set. The static-map fallback applies
+  // per-span.
+  contextual ? computeSensitivityFlags(content, {
+    addMarks: changedMarks
+  }) : computeSensitivityFlags(content, {
+    autoStrings: staticStrings
+  })), [contextual, content, staticStrings, changedMarks]);
+  const displayLabel = label || featureNames[feature] || feature;
+  const featureSetting = `"${feature}" ${on ? 1 : 0}`;
+
+  // The chosen variable instance's coordinates, as a font-variation-settings
+  // value. Applied to the sample and to the autofit measurement so both see
+  // the same glyph widths.
+  const fontVariationSettings = useMemo(() => variableSettings && variableSettings.length > 0 ? variableSettings.map(s => `"${s.axis}" ${s.value}`).join(', ') : undefined, [variableSettings]);
+
+  // A contextual feature with no shaped diff and no static entries (a
+  // hand-authored standalone embed) has nothing to tint, but the feature must
+  // still apply container-wide or the toggle would do nothing.
+  const anySensitive = segments.some(seg => seg.sensitive);
+  const containerWide = contextual || !contextFree && !anySensitive;
+
+  // Autofit measures the sample against the card's width in both toggle states
+  // and returns a size that fits the wider one; disabled, it returns `fontSize`.
+  const {
+    ref: rootRef,
+    fontSize: renderSize
+  } = useFeatureTesterAutofit({
+    enabled: autofit,
+    text: content,
+    fontFamily: `${data.cssFamily} ${data.name}`,
+    feature,
+    fontSize: fontSize ?? 72,
+    letterSpacing: letterSpacing ?? 0,
+    fontVariationSettings
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: rootRef,
+    className: "fontdue-feature-tester",
+    "data-feature": feature,
+    "data-on": on,
+    "data-toggle": toggle
+    // Drives the muted-context styling: only a card with affected glyphs
+    // dims its surroundings, so an unmarked hand-authored sample stays at
+    // full text colour.
+    ,
+    "data-highlighted": anySensitive
+  }, hover ? {
+    onMouseEnter: () => setOn(!defaultOn),
+    onMouseLeave: () => setOn(defaultOn)
+  } : {}), showLabel && /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-feature-tester__bar"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "fontdue-feature-tester__toggle",
+    role: "switch",
+    "aria-checked": on,
+    "aria-label": displayLabel,
+    onClick: handleToggle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-feature-tester__switch",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-feature-tester__label",
+    onClick: hover ? undefined : handleToggle
+  }, displayLabel), showTag && /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-feature-tester__tag"
+  }, feature)), /*#__PURE__*/React.createElement(FontStyle, {
+    Component: "div",
+    fontStyle: data,
+    className: "fontdue-feature-tester__sample",
+    style: {
+      fontSize: `${renderSize}px`,
+      lineHeight: lineHeight ?? undefined,
+      letterSpacing: letterSpacing ? `${letterSpacing}em` : undefined,
+      textAlign: alignment ?? undefined,
+      fontVariationSettings,
+      // Contextual features must shape with full context, so the feature is
+      // applied to the whole line. The shaped diff guarantees only the
+      // highlighted characters actually change, so the highlight still
+      // means exactly "what changes".
+      ...(containerWide ? {
+        fontFeatureSettings: featureSetting
+      } : {})
+    }
+  }, segments.map((seg, i) => seg.sensitive ? /*#__PURE__*/React.createElement("span", {
+    key: i,
+    className: "fontdue-feature-tester__hit"
+    // Context-free features are applied per-highlighted-span, so
+    // toggling changes exactly what's tinted (and honours manual
+    // subsetting). `font-feature-settings` leaves unlisted (default)
+    // features alone, so default ligatures/kerning are preserved. The
+    // highlight colour comes from CSS (`--fontdue-feature-tester-
+    // highlight`); `highlightColor` forces it inline when set.
+    ,
+    style: {
+      ...(highlightColor ? {
+        color: highlightColor
+      } : {}),
+      ...(containerWide ? {} : {
+        fontFeatureSettings: featureSetting
+      })
+    }
+  }, seg.text) : /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, seg.text))));
+}

package/dist/components/FeatureTester/FeatureTesterElement.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface FeatureTesterElement_props {
+    familyName: string;
+    styleName: string;
+    feature: string;
+    content?: string;
+    label?: string;
+    fontSize?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    defaultOn?: string;
+    highlightColor?: string;
+    showLabel?: string;
+    showTag?: string;
+    toggle?: string;
+    autofit?: string;
+}
+export declare const FeatureTesterElement: React.FC<FeatureTesterElement_props>;
+export default FeatureTesterElement;

package/dist/components/FeatureTester/FeatureTesterElement.js

@@ -0,0 +1,42 @@
+// Deliberately unexposed: this standalone element is not registered in the
+// Root custom-element registry and `fontdue-js/FeatureTester` is not in the
+// package exports. Only the collection-bound `<fontdue-feature-testers>`
+// ships for now; this file is kept for when the standalone is ready.
+import React from 'react';
+import FeatureTester from './index.js';
+const parseBool = (input, fallback) => input === undefined || input === '' ? fallback : input === 'true';
+export const FeatureTesterElement = _ref => {
+  let {
+    familyName,
+    styleName,
+    feature,
+    content,
+    label,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    defaultOn,
+    highlightColor,
+    showLabel,
+    showTag,
+    toggle,
+    autofit
+  } = _ref;
+  return /*#__PURE__*/React.createElement(FeatureTester, {
+    familyName: familyName,
+    styleName: styleName,
+    feature: feature,
+    content: content || 'Hamburgefonts',
+    label: label || undefined,
+    fontSize: fontSize ? parseFloat(fontSize) : undefined,
+    lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
+    letterSpacing: letterSpacing ? parseFloat(letterSpacing) : undefined,
+    defaultOn: parseBool(defaultOn, true),
+    highlightColor: highlightColor || undefined,
+    showLabel: parseBool(showLabel, true),
+    showTag: parseBool(showTag, true),
+    toggle: toggle === 'hover' ? 'hover' : 'button',
+    autofit: parseBool(autofit, false)
+  });
+};
+export default FeatureTesterElement;

package/dist/components/FeatureTester/FeatureTesters.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Config } from '../ConfigContext.js';
+import { FeatureTestersIdQuery } from '../../__generated__/FeatureTestersIdQuery.graphql.js';
+import { FeatureTestersSlugQuery } from '../../__generated__/FeatureTestersSlugQuery.graphql.js';
+import { ToggleMode } from './FeatureTesterCard.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
+interface ListOptions {
+    highlightColor?: string;
+    toggle?: ToggleMode;
+    autofit?: boolean;
+}
+export type FeatureTestersPreloadedQuery = SerializablePreloadedQuery<FeatureTestersIdQuery> | SerializablePreloadedQuery<FeatureTestersSlugQuery>;
+export type LoadFeatureTestersQueryVariables = {
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug: string;
+};
+export declare function loadFeatureTestersQuery(variables: LoadFeatureTestersQueryVariables, options?: LoadQueryOptions): Promise<FeatureTestersPreloadedQuery>;
+export declare function FeatureTestersPreloadedIDQueryRenderer({ preloadedQuery, ...options }: {
+    preloadedQuery: SerializablePreloadedQuery<FeatureTestersIdQuery>;
+} & ListOptions): React.JSX.Element | null;
+export declare function FeatureTestersPreloadedSlugQueryRenderer({ preloadedQuery, ...options }: {
+    preloadedQuery: SerializablePreloadedQuery<FeatureTestersSlugQuery>;
+} & ListOptions): React.JSX.Element | null;
+export type FeatureTestersProps = {
+    config?: Config;
+} & ListOptions & ({
+    preloadedQuery: FeatureTestersPreloadedQuery;
+    collectionId?: never;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionSlug: string;
+    collectionId?: never;
+});
+export default function FeatureTesters({ config, ...props }: FeatureTestersProps): React.JSX.Element;
+export {};