@flightdev/fonts 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +161 -0
- package/dist/adapters/google.d.ts +33 -0
- package/dist/adapters/google.d.ts.map +1 -0
- package/dist/adapters/google.js +96 -0
- package/dist/adapters/google.js.map +1 -0
- package/dist/adapters/local.d.ts +28 -0
- package/dist/adapters/local.d.ts.map +1 -0
- package/dist/adapters/local.js +144 -0
- package/dist/adapters/local.js.map +1 -0
- package/dist/components/react.d.ts +103 -0
- package/dist/components/react.d.ts.map +1 -0
- package/dist/components/react.js +108 -0
- package/dist/components/react.js.map +1 -0
- package/dist/index.d.ts +147 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +76 -0
- package/dist/index.js.map +1 -0
- package/dist/plugins/vite.d.ts +98 -0
- package/dist/plugins/vite.d.ts.map +1 -0
- package/dist/plugins/vite.js +240 -0
- package/dist/plugins/vite.js.map +1 -0
- package/dist/subset.d.ts +113 -0
- package/dist/subset.d.ts.map +1 -0
- package/dist/subset.js +315 -0
- package/dist/subset.js.map +1 -0
- package/package.json +62 -0
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* @flightdev/fonts/components/react - React Font Components
|
|
4
|
+
*
|
|
5
|
+
* React components for font optimization with automatic preloading.
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* Inject font preload links and CSS into the document head.
|
|
10
|
+
* Use this in your root layout for optimal font loading.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* import { FontHead } from '@flightdev/fonts/components/react';
|
|
15
|
+
*
|
|
16
|
+
* function RootLayout({ children }) {
|
|
17
|
+
* return (
|
|
18
|
+
* <html>
|
|
19
|
+
* <head>
|
|
20
|
+
* <FontHead fonts={[inter, roboto]} />
|
|
21
|
+
* </head>
|
|
22
|
+
* <body>{children}</body>
|
|
23
|
+
* </html>
|
|
24
|
+
* );
|
|
25
|
+
* }
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export function FontHead({ fonts }) {
|
|
29
|
+
const preloadLinks = fonts
|
|
30
|
+
.filter(f => f.preloadData)
|
|
31
|
+
.flatMap(f => f.preloadData || []);
|
|
32
|
+
const cssUrls = fonts
|
|
33
|
+
.filter(f => f.cssUrl)
|
|
34
|
+
.map(f => f.cssUrl);
|
|
35
|
+
return (_jsxs(_Fragment, { children: [preloadLinks.map((link, i) => (_jsx("link", { rel: "preload", href: link.href, as: link.as, type: link.type, crossOrigin: link.crossOrigin }, `preload-${i}`))), cssUrls.map((url, i) => (_jsx("link", { rel: "stylesheet", href: url }, `css-${i}`)))] }));
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Inject font CSS as an inline style tag.
|
|
39
|
+
* Use for local fonts or when you want to inline critical CSS.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* import { FontStyle } from '@flightdev/fonts/components/react';
|
|
44
|
+
*
|
|
45
|
+
* function RootLayout({ children }) {
|
|
46
|
+
* const css = fontLoader.getCSS();
|
|
47
|
+
* return (
|
|
48
|
+
* <html>
|
|
49
|
+
* <head>
|
|
50
|
+
* <FontStyle css={css} />
|
|
51
|
+
* </head>
|
|
52
|
+
* <body>{children}</body>
|
|
53
|
+
* </html>
|
|
54
|
+
* );
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
export function FontStyle({ css }) {
|
|
59
|
+
return (_jsx("style", { dangerouslySetInnerHTML: { __html: css }, "data-flight-fonts": "" }));
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Apply font classes to children.
|
|
63
|
+
* Wraps children in a container with font classes applied.
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```tsx
|
|
67
|
+
* import { FontProvider } from '@flightdev/fonts/components/react';
|
|
68
|
+
*
|
|
69
|
+
* function App() {
|
|
70
|
+
* return (
|
|
71
|
+
* <FontProvider fonts={[inter]} as="main">
|
|
72
|
+
* <MyContent />
|
|
73
|
+
* </FontProvider>
|
|
74
|
+
* );
|
|
75
|
+
* }
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
export function FontProvider({ fonts, children, as: Tag = 'div' }) {
|
|
79
|
+
const className = fonts.map(f => f.className).join(' ');
|
|
80
|
+
const style = fonts.length > 0 ? fonts[0].style : undefined;
|
|
81
|
+
return React.createElement(Tag, { className, style }, children);
|
|
82
|
+
}
|
|
83
|
+
// ============================================================================
|
|
84
|
+
// useFontClass Hook
|
|
85
|
+
// ============================================================================
|
|
86
|
+
/**
|
|
87
|
+
* Get combined class names from font results.
|
|
88
|
+
*
|
|
89
|
+
* @example
|
|
90
|
+
* ```tsx
|
|
91
|
+
* import { useFontClass } from '@flightdev/fonts/components/react';
|
|
92
|
+
*
|
|
93
|
+
* function MyComponent() {
|
|
94
|
+
* const fontClass = useFontClass(inter, roboto);
|
|
95
|
+
* return <div className={fontClass}>Text</div>;
|
|
96
|
+
* }
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
export function useFontClass(...fonts) {
|
|
100
|
+
return fonts.map(f => f.className).join(' ');
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Get font style object from font result.
|
|
104
|
+
*/
|
|
105
|
+
export function useFontStyle(font) {
|
|
106
|
+
return font.style;
|
|
107
|
+
}
|
|
108
|
+
//# sourceMappingURL=react.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../src/components/react.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAiB;IAC7C,MAAM,YAAY,GAAG,KAAK;SACrB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;SAC1B,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IAEvC,MAAM,OAAO,GAAG,KAAK;SAChB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;SACrB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAO,CAAC,CAAC;IAEzB,OAAO,CACH,8BAEK,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,eAEI,GAAG,EAAC,SAAS,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,IALxB,WAAW,CAAC,EAAE,CAMrB,CACL,CAAC,EAGD,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACrB,eAEI,GAAG,EAAC,YAAY,EAChB,IAAI,EAAE,GAAG,IAFJ,OAAO,CAAC,EAAE,CAGjB,CACL,CAAC,IACH,CACN,CAAC;AACN,CAAC;AAWD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,GAAG,EAAkB;IAC7C,OAAO,CACH,gBACI,uBAAuB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,uBACtB,EAAE,GACtB,CACL,CAAC;AACN,CAAC;AAeD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,GAAG,GAAG,KAAK,EACC;IAChB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5D,OAAO,KAAK,CAAC,aAAa,CACtB,GAAa,EACb,EAAE,SAAS,EAAE,KAAK,EAAE,EACpB,QAAQ,CACX,CAAC;AACN,CAAC;AAED,+EAA+E;AAC/E,oBAAoB;AACpB,+EAA+E;AAE/E;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,YAAY,CAAC,GAAG,KAAmB;IAC/C,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACjD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,IAAgB;IACzC,OAAO,IAAI,CAAC,KAA4B,CAAC;AAC7C,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @flightdev/fonts - Agnostic Font Optimization
|
|
3
|
+
*
|
|
4
|
+
* Flight provides the interface, you choose the font source.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```typescript
|
|
8
|
+
* import { createFontLoader } from '@flightdev/fonts';
|
|
9
|
+
* import { googleFontsAdapter } from '@flightdev/fonts/google';
|
|
10
|
+
*
|
|
11
|
+
* const fonts = createFontLoader({
|
|
12
|
+
* adapter: googleFontsAdapter()
|
|
13
|
+
* });
|
|
14
|
+
*
|
|
15
|
+
* const inter = fonts.load('Inter', { weight: '400', subsets: ['latin'] });
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
/** Font weight values */
|
|
19
|
+
export type FontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 'variable';
|
|
20
|
+
/** Font style values */
|
|
21
|
+
export type FontStyle = 'normal' | 'italic';
|
|
22
|
+
/** Font display strategy */
|
|
23
|
+
export type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
|
|
24
|
+
/** Font subset for optimization */
|
|
25
|
+
export type FontSubset = 'latin' | 'latin-ext' | 'cyrillic' | 'cyrillic-ext' | 'greek' | 'greek-ext' | 'vietnamese' | 'arabic' | 'hebrew' | 'devanagari' | 'bengali' | 'tamil' | 'thai' | 'korean' | 'japanese' | 'chinese-simplified' | 'chinese-traditional';
|
|
26
|
+
/** Font loading options */
|
|
27
|
+
export interface FontLoadOptions {
|
|
28
|
+
/** Font weights to load */
|
|
29
|
+
weight?: FontWeight | FontWeight[];
|
|
30
|
+
/** Font style */
|
|
31
|
+
style?: FontStyle;
|
|
32
|
+
/** Font subsets to include */
|
|
33
|
+
subsets?: FontSubset[];
|
|
34
|
+
/** Font display strategy (default: 'swap') */
|
|
35
|
+
display?: FontDisplay;
|
|
36
|
+
/** Whether to preload the font (default: true) */
|
|
37
|
+
preload?: boolean;
|
|
38
|
+
/** Fallback font stack */
|
|
39
|
+
fallback?: string[];
|
|
40
|
+
/** CSS variable name for the font */
|
|
41
|
+
variable?: string;
|
|
42
|
+
/** Adjust font metrics for improved CLS */
|
|
43
|
+
adjustFontFallback?: boolean;
|
|
44
|
+
}
|
|
45
|
+
/** Result of loading a font */
|
|
46
|
+
export interface FontResult {
|
|
47
|
+
/** CSS class name to apply */
|
|
48
|
+
className: string;
|
|
49
|
+
/** CSS style object for inline styling */
|
|
50
|
+
style: {
|
|
51
|
+
fontFamily: string;
|
|
52
|
+
fontWeight?: number | string;
|
|
53
|
+
fontStyle?: string;
|
|
54
|
+
};
|
|
55
|
+
/** CSS variable name (if provided in options) */
|
|
56
|
+
variable?: string;
|
|
57
|
+
/** URL to the font CSS file */
|
|
58
|
+
cssUrl?: string;
|
|
59
|
+
/** Preload link data */
|
|
60
|
+
preloadData?: {
|
|
61
|
+
href: string;
|
|
62
|
+
as: 'font';
|
|
63
|
+
type: string;
|
|
64
|
+
crossOrigin: 'anonymous';
|
|
65
|
+
}[];
|
|
66
|
+
}
|
|
67
|
+
/** Font face definition for local fonts */
|
|
68
|
+
export interface FontFaceDefinition {
|
|
69
|
+
/** Path to font file */
|
|
70
|
+
src: string | {
|
|
71
|
+
path: string;
|
|
72
|
+
weight?: FontWeight;
|
|
73
|
+
style?: FontStyle;
|
|
74
|
+
}[];
|
|
75
|
+
/** Font display strategy */
|
|
76
|
+
display?: FontDisplay;
|
|
77
|
+
/** Font weight */
|
|
78
|
+
weight?: FontWeight | FontWeight[];
|
|
79
|
+
/** Font style */
|
|
80
|
+
style?: FontStyle;
|
|
81
|
+
/** Fallback font stack */
|
|
82
|
+
fallback?: string[];
|
|
83
|
+
/** CSS variable name */
|
|
84
|
+
variable?: string;
|
|
85
|
+
/** Preload (default: true) */
|
|
86
|
+
preload?: boolean;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Font Adapter Interface
|
|
90
|
+
*
|
|
91
|
+
* Implement this interface to create a custom font source.
|
|
92
|
+
* Flight provides Google Fonts and Local adapters.
|
|
93
|
+
*/
|
|
94
|
+
export interface FontAdapter {
|
|
95
|
+
/** Adapter name for debugging */
|
|
96
|
+
readonly name: string;
|
|
97
|
+
/** Load a font by name */
|
|
98
|
+
load(fontFamily: string, options?: FontLoadOptions): Promise<FontResult>;
|
|
99
|
+
/** Load a local font from file(s) */
|
|
100
|
+
loadLocal?(fontFamily: string, definition: FontFaceDefinition): Promise<FontResult>;
|
|
101
|
+
/** Get CSS for all loaded fonts */
|
|
102
|
+
getCSS(): string;
|
|
103
|
+
/** Get preload links for all fonts */
|
|
104
|
+
getPreloadLinks(): Array<{
|
|
105
|
+
href: string;
|
|
106
|
+
as: 'font';
|
|
107
|
+
type: string;
|
|
108
|
+
crossOrigin: 'anonymous';
|
|
109
|
+
}>;
|
|
110
|
+
}
|
|
111
|
+
/** Font adapter factory type */
|
|
112
|
+
export type FontAdapterFactory = (config?: Record<string, unknown>) => FontAdapter;
|
|
113
|
+
export interface FontLoaderOptions {
|
|
114
|
+
/** Font adapter to use */
|
|
115
|
+
adapter: FontAdapter;
|
|
116
|
+
/** Default font display strategy */
|
|
117
|
+
defaultDisplay?: FontDisplay;
|
|
118
|
+
/** Default subsets */
|
|
119
|
+
defaultSubsets?: FontSubset[];
|
|
120
|
+
}
|
|
121
|
+
export interface FontLoader {
|
|
122
|
+
/** Load a font by family name */
|
|
123
|
+
load(fontFamily: string, options?: FontLoadOptions): Promise<FontResult>;
|
|
124
|
+
/** Load a local font */
|
|
125
|
+
loadLocal(fontFamily: string, definition: FontFaceDefinition): Promise<FontResult>;
|
|
126
|
+
/** Get all CSS for loaded fonts */
|
|
127
|
+
getCSS(): string;
|
|
128
|
+
/** Get preload links */
|
|
129
|
+
getPreloadLinks(): Array<{
|
|
130
|
+
href: string;
|
|
131
|
+
as: 'font';
|
|
132
|
+
type: string;
|
|
133
|
+
crossOrigin: 'anonymous';
|
|
134
|
+
}>;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Create a font loader instance
|
|
138
|
+
*/
|
|
139
|
+
export declare function createFontLoader(options: FontLoaderOptions): FontLoader;
|
|
140
|
+
/** Generate a unique class name for a font */
|
|
141
|
+
export declare function generateFontClassName(fontFamily: string): string;
|
|
142
|
+
/** Convert font weight name to numeric value */
|
|
143
|
+
export declare function fontWeightToNumber(weight: FontWeight): number;
|
|
144
|
+
/** Format fallback font stack */
|
|
145
|
+
export declare function formatFallbackStack(fonts: string[]): string;
|
|
146
|
+
export type { FontAdapter as Adapter };
|
|
147
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAMH,yBAAyB;AACzB,MAAM,MAAM,UAAU,GAChB,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GACrE,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,GACnG,UAAU,CAAC;AAEjB,wBAAwB;AACxB,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C,4BAA4B;AAC5B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9E,mCAAmC;AACnC,MAAM,MAAM,UAAU,GAChB,OAAO,GAAG,WAAW,GACrB,UAAU,GAAG,cAAc,GAC3B,OAAO,GAAG,WAAW,GACrB,YAAY,GACZ,QAAQ,GAAG,QAAQ,GACnB,YAAY,GAAG,SAAS,GAAG,OAAO,GAClC,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,oBAAoB,GAAG,qBAAqB,CAAC;AAEpF,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC5B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACnC,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,+BAA+B;AAC/B,MAAM,WAAW,UAAU;IACvB,8BAA8B;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,KAAK,EAAE;QACH,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,WAAW,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,WAAW,CAAC;KAC5B,EAAE,CAAC;CACP;AAED,2CAA2C;AAC3C,MAAM,WAAW,kBAAkB;IAC/B,wBAAwB;IACxB,GAAG,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,UAAU,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACzE,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kBAAkB;IAClB,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACnC,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAMD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IACxB,iCAAiC;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,0BAA0B;IAC1B,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IAEzE,qCAAqC;IACrC,SAAS,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,kBAAkB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IAEpF,mCAAmC;IACnC,MAAM,IAAI,MAAM,CAAC;IAEjB,sCAAsC;IACtC,eAAe,IAAI,KAAK,CAAC;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,WAAW,CAAC;KAC5B,CAAC,CAAC;CACN;AAED,gCAAgC;AAChC,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,WAAW,CAAC;AAMnF,MAAM,WAAW,iBAAiB;IAC9B,0BAA0B;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,oCAAoC;IACpC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,sBAAsB;IACtB,cAAc,CAAC,EAAE,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,UAAU;IACvB,iCAAiC;IACjC,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IAEzE,wBAAwB;IACxB,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,kBAAkB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IAEnF,mCAAmC;IACnC,MAAM,IAAI,MAAM,CAAC;IAEjB,wBAAwB;IACxB,eAAe,IAAI,KAAK,CAAC;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,WAAW,CAAC;KAC5B,CAAC,CAAC;CACN;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU,CA6BvE;AAMD,8CAA8C;AAC9C,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGhE;AAED,gDAAgD;AAChD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAe7D;AAED,iCAAiC;AACjC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAE3D;AAMD,YAAY,EAAE,WAAW,IAAI,OAAO,EAAE,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @flightdev/fonts - Agnostic Font Optimization
|
|
3
|
+
*
|
|
4
|
+
* Flight provides the interface, you choose the font source.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```typescript
|
|
8
|
+
* import { createFontLoader } from '@flightdev/fonts';
|
|
9
|
+
* import { googleFontsAdapter } from '@flightdev/fonts/google';
|
|
10
|
+
*
|
|
11
|
+
* const fonts = createFontLoader({
|
|
12
|
+
* adapter: googleFontsAdapter()
|
|
13
|
+
* });
|
|
14
|
+
*
|
|
15
|
+
* const inter = fonts.load('Inter', { weight: '400', subsets: ['latin'] });
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
/**
|
|
19
|
+
* Create a font loader instance
|
|
20
|
+
*/
|
|
21
|
+
export function createFontLoader(options) {
|
|
22
|
+
const { adapter, defaultDisplay = 'swap', defaultSubsets = ['latin'] } = options;
|
|
23
|
+
return {
|
|
24
|
+
async load(fontFamily, opts) {
|
|
25
|
+
const mergedOptions = {
|
|
26
|
+
display: defaultDisplay,
|
|
27
|
+
subsets: defaultSubsets,
|
|
28
|
+
preload: true,
|
|
29
|
+
...opts,
|
|
30
|
+
};
|
|
31
|
+
return adapter.load(fontFamily, mergedOptions);
|
|
32
|
+
},
|
|
33
|
+
async loadLocal(fontFamily, definition) {
|
|
34
|
+
if (!adapter.loadLocal) {
|
|
35
|
+
throw new Error(`Adapter ${adapter.name} does not support local fonts`);
|
|
36
|
+
}
|
|
37
|
+
return adapter.loadLocal(fontFamily, definition);
|
|
38
|
+
},
|
|
39
|
+
getCSS() {
|
|
40
|
+
return adapter.getCSS();
|
|
41
|
+
},
|
|
42
|
+
getPreloadLinks() {
|
|
43
|
+
return adapter.getPreloadLinks();
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
// ============================================================================
|
|
48
|
+
// Utilities
|
|
49
|
+
// ============================================================================
|
|
50
|
+
/** Generate a unique class name for a font */
|
|
51
|
+
export function generateFontClassName(fontFamily) {
|
|
52
|
+
const sanitized = fontFamily.toLowerCase().replace(/[^a-z0-9]/g, '_');
|
|
53
|
+
return `__font_${sanitized}`;
|
|
54
|
+
}
|
|
55
|
+
/** Convert font weight name to numeric value */
|
|
56
|
+
export function fontWeightToNumber(weight) {
|
|
57
|
+
const weightMap = {
|
|
58
|
+
thin: 100,
|
|
59
|
+
extralight: 200,
|
|
60
|
+
light: 300,
|
|
61
|
+
normal: 400,
|
|
62
|
+
medium: 500,
|
|
63
|
+
semibold: 600,
|
|
64
|
+
bold: 700,
|
|
65
|
+
extrabold: 800,
|
|
66
|
+
black: 900,
|
|
67
|
+
};
|
|
68
|
+
if (weight === 'variable')
|
|
69
|
+
return 400;
|
|
70
|
+
return weightMap[weight] || parseInt(weight, 10) || 400;
|
|
71
|
+
}
|
|
72
|
+
/** Format fallback font stack */
|
|
73
|
+
export function formatFallbackStack(fonts) {
|
|
74
|
+
return fonts.map(f => f.includes(' ') ? `"${f}"` : f).join(', ');
|
|
75
|
+
}
|
|
76
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AA4JH;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAA0B;IACvD,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,MAAM,EAAE,cAAc,GAAG,CAAC,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC;IAEjF,OAAO;QACH,KAAK,CAAC,IAAI,CAAC,UAAkB,EAAE,IAAsB;YACjD,MAAM,aAAa,GAAoB;gBACnC,OAAO,EAAE,cAAc;gBACvB,OAAO,EAAE,cAAc;gBACvB,OAAO,EAAE,IAAI;gBACb,GAAG,IAAI;aACV,CAAC;YACF,OAAO,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;QACnD,CAAC;QAED,KAAK,CAAC,SAAS,CAAC,UAAkB,EAAE,UAA8B;YAC9D,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBACrB,MAAM,IAAI,KAAK,CAAC,WAAW,OAAO,CAAC,IAAI,+BAA+B,CAAC,CAAC;YAC5E,CAAC;YACD,OAAO,OAAO,CAAC,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QACrD,CAAC;QAED,MAAM;YACF,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;QAC5B,CAAC;QAED,eAAe;YACX,OAAO,OAAO,CAAC,eAAe,EAAE,CAAC;QACrC,CAAC;KACJ,CAAC;AACN,CAAC;AAED,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E,8CAA8C;AAC9C,MAAM,UAAU,qBAAqB,CAAC,UAAkB;IACpD,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;IACtE,OAAO,UAAU,SAAS,EAAE,CAAC;AACjC,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,kBAAkB,CAAC,MAAkB;IACjD,MAAM,SAAS,GAA2B;QACtC,IAAI,EAAE,GAAG;QACT,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,GAAG;QACb,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,GAAG;QACd,KAAK,EAAE,GAAG;KACb,CAAC;IAEF,IAAI,MAAM,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC;IACtC,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC;AAC5D,CAAC;AAED,iCAAiC;AACjC,MAAM,UAAU,mBAAmB,CAAC,KAAe;IAC/C,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACrE,CAAC"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @flightdev/fonts - Vite Plugin for Font Optimization
|
|
3
|
+
*
|
|
4
|
+
* Build-time font optimization for Flight Framework.
|
|
5
|
+
* Features:
|
|
6
|
+
* - Automatic character extraction from source files
|
|
7
|
+
* - Unicode-range CSS generation for optimal subsetting
|
|
8
|
+
* - Self-hosting with cache busting
|
|
9
|
+
* - Development mode passthrough for fast iteration
|
|
10
|
+
*
|
|
11
|
+
* This is an OPTIONAL plugin. Developers can choose to use it or not.
|
|
12
|
+
*/
|
|
13
|
+
import type { Plugin } from 'vite';
|
|
14
|
+
export interface FontOptimizationPluginOptions {
|
|
15
|
+
/**
|
|
16
|
+
* Enable font optimization.
|
|
17
|
+
* @default true in production, false in development
|
|
18
|
+
*/
|
|
19
|
+
enabled?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Subsetting strategy.
|
|
22
|
+
* - 'used-chars': Analyze source files to find used characters (smallest)
|
|
23
|
+
* - 'named-subsets': Use predefined unicode ranges like 'latin' (balanced)
|
|
24
|
+
* - 'none': No subsetting (fastest build, largest fonts)
|
|
25
|
+
*
|
|
26
|
+
* @default 'named-subsets'
|
|
27
|
+
*/
|
|
28
|
+
strategy?: 'used-chars' | 'named-subsets' | 'none';
|
|
29
|
+
/**
|
|
30
|
+
* Named subsets to include when strategy is 'named-subsets'.
|
|
31
|
+
* @default ['latin']
|
|
32
|
+
*/
|
|
33
|
+
subsets?: string[];
|
|
34
|
+
/**
|
|
35
|
+
* Self-host Google Fonts instead of using CDN.
|
|
36
|
+
* Downloads fonts at build time and serves from your domain.
|
|
37
|
+
*
|
|
38
|
+
* @default true in production
|
|
39
|
+
*/
|
|
40
|
+
selfHost?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Output directory for self-hosted fonts.
|
|
43
|
+
* @default 'public/_fonts'
|
|
44
|
+
*/
|
|
45
|
+
outputDir?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Directories to scan for used characters.
|
|
48
|
+
* @default ['src']
|
|
49
|
+
*/
|
|
50
|
+
scanDirs?: string[];
|
|
51
|
+
/**
|
|
52
|
+
* File extensions to scan.
|
|
53
|
+
* @default ['.tsx', '.jsx', '.vue', '.svelte', '.astro', '.html']
|
|
54
|
+
*/
|
|
55
|
+
scanExtensions?: string[];
|
|
56
|
+
/**
|
|
57
|
+
* Patterns to exclude from scanning.
|
|
58
|
+
*/
|
|
59
|
+
excludePatterns?: string[];
|
|
60
|
+
/**
|
|
61
|
+
* Generate preload links for critical fonts.
|
|
62
|
+
* @default true
|
|
63
|
+
*/
|
|
64
|
+
generatePreloads?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Add fonts to the HTML automatically.
|
|
67
|
+
* Set to false if you manage font loading manually.
|
|
68
|
+
* @default true
|
|
69
|
+
*/
|
|
70
|
+
injectToHtml?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Log optimization stats.
|
|
73
|
+
* @default true
|
|
74
|
+
*/
|
|
75
|
+
verbose?: boolean;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Vite plugin for font optimization.
|
|
79
|
+
*
|
|
80
|
+
* Usage:
|
|
81
|
+
* ```typescript
|
|
82
|
+
* // vite.config.ts
|
|
83
|
+
* import { fontOptimization } from '@flightdev/fonts/vite';
|
|
84
|
+
*
|
|
85
|
+
* export default defineConfig({
|
|
86
|
+
* plugins: [
|
|
87
|
+
* fontOptimization({
|
|
88
|
+
* strategy: 'named-subsets',
|
|
89
|
+
* subsets: ['latin', 'latin-ext'],
|
|
90
|
+
* selfHost: true,
|
|
91
|
+
* }),
|
|
92
|
+
* ],
|
|
93
|
+
* });
|
|
94
|
+
* ```
|
|
95
|
+
*/
|
|
96
|
+
export declare function fontOptimization(options?: FontOptimizationPluginOptions): Plugin;
|
|
97
|
+
export default fontOptimization;
|
|
98
|
+
//# sourceMappingURL=vite.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../../src/plugins/vite.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAenD,MAAM,WAAW,6BAA6B;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,eAAe,GAAG,MAAM,CAAC;IAEnD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAsBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,6BAAkC,GAAG,MAAM,CA4KpF;AAsFD,eAAe,gBAAgB,CAAC"}
|