{title}

244 |

{children}

245 |

246 | )} 247 | 248 | 249 |

266 | 267 | {fonts =>

{children}

} 268 | 269 |

validates font props 1`] = `"Expected font prop to be a string or object, received number instead"`; 4 | 5 | exports[` validates font props 2`] = `"Expected font 'family' prop to be a non-empty string, received array instead"`; 6 | 7 | exports[` validates font props 3`] = `"Expected font 'family' prop to be a non-empty string, received null instead"`; 8 | -------------------------------------------------------------------------------- /src/__snapshots__/font-subscriber.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` only accepts function child 1`] = ` 4 | "Warning: Failed prop type: Invalid prop \`children\` of type \`string\` supplied to \`FontSubscriber\`, expected \`function\`. 5 | in FontSubscriber" 6 | `; 7 | -------------------------------------------------------------------------------- /src/font-observer.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as T from 'prop-types'; 3 | import * as FontFaceObserver from 'fontfaceobserver'; 4 | import { shallow, mount } from 'enzyme'; 5 | import { FontObserver } from './index'; 6 | 7 | describe('', () => { 8 | let ffoLoadSpy: jest.SpyInstance; 9 | 10 | beforeEach(() => { 11 | jest.useFakeTimers(); 12 | ffoLoadSpy = jest.spyOn(FontFaceObserver.prototype, 'load'); 13 | ffoLoadSpy.mockImplementation(() => Promise.resolve()); 14 | }); 15 | 16 | afterEach(() => { 17 | ffoLoadSpy.mockReset(); 18 | jest.useRealTimers(); 19 | }); 20 | 21 | it('validates font props', () => { 22 | expect(() => 23 | shallow(), 24 | ).toThrowErrorMatchingSnapshot(); 25 | expect(() => 26 | shallow(), 27 | ).toThrowErrorMatchingSnapshot(); 28 | expect(() => 29 | shallow(), 30 | ).toThrowErrorMatchingSnapshot(); 31 | }); 32 | 33 | it('reflects font loading on state', async () => { 34 | const wrapper = shallow(); 35 | // not sure how to flush promises in more elegant way with Jest 36 | await Promise.resolve(); 37 | await Promise.resolve(); 38 | expect(wrapper.state().openSans).toEqual({ family: 'Open Sans' }); 39 | }); 40 | 41 | it('passes text and timeout options to FFO', () => { 42 | mount(); 43 | jest.runOnlyPendingTimers(); 44 | expect(ffoLoadSpy).toHaveBeenCalledWith('foo', 5000); 45 | }); 46 | 47 | it('cancels FFO promises before it unmounts', () => { 48 | ffoLoadSpy.mockImplementation(() => new Promise(r => setTimeout(r, 5000))); 49 | mount().unmount(); 50 | jest.runOnlyPendingTimers(); 51 | }); 52 | 53 | it('merges with parent context', async () => { 54 | const Test = jest.fn().mockReturnValue(); 55 | Test.contextTypes = { __fonts: T.object }; 56 | mount( 57 | 58 | 59 | 60 | 61 | 62 | 63 | , 64 | ); 65 | await Promise.resolve(); 66 | await Promise.resolve(); 67 | expect(Test).toHaveBeenCalledWith(expect.any(Object), { 68 | __fonts: { 69 | openSans: expect.any(Object), 70 | roboto: expect.any(Object), 71 | ptSans: expect.any(Object), 72 | }, 73 | }); 74 | }); 75 | }); 76 | -------------------------------------------------------------------------------- /src/font-observer.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as T from 'prop-types'; 3 | import * as FontFaceObserver from 'fontfaceobserver'; 4 | import * as Cancelable from 'p-cancelable'; 5 | import * as invariant from 'invariant'; 6 | 7 | export interface Font { 8 | family: string; 9 | weight?: 10 | | 'normal' 11 | | 'bold' 12 | | 'bolder' 13 | | 'lighter' 14 | | '100' 15 | | '200' 16 | | '300' 17 | | '400' 18 | | '500' 19 | | '600' 20 | | '700' 21 | | '800' 22 | | '900'; 23 | style?: 'normal' | 'italic' | 'oblique'; 24 | stretch?: 25 | | 'normal' 26 | | 'ultra-condensed' 27 | | 'extra-condensed' 28 | | 'condensed' 29 | | 'semi-condensed' 30 | | 'semi-expanded' 31 | | 'expanded' 32 | | 'extra-expanded' 33 | | 'ultra-expanded'; 34 | } 35 | 36 | /** Checks if value is an actual object */ 37 | const isObject = (value: any): value is object => { 38 | return value !== null && !Array.isArray(value) && typeof value === 'object'; 39 | }; 40 | 41 | /** Checks if value is a string */ 42 | const isString = (value: any): value is string => { 43 | return typeof value === 'string'; 44 | }; 45 | 46 | /** Returns actual type of value */ 47 | const getType = value => { 48 | if (value === null) { 49 | return 'null'; 50 | } else if (Array.isArray(value)) { 51 | return 'array'; 52 | } 53 | return typeof value; 54 | }; 55 | 56 | export interface ObserverState { 57 | [key: string]: Font; 58 | } 59 | 60 | export type ObserverProps = { 61 | children: Array>; 62 | text?: string; 63 | timeout?: number; 64 | } & { 65 | [key: string]: Font | string; 66 | }; 67 | 68 | export interface ObserverContext { 69 | __fonts: ObserverState; 70 | } 71 | 72 | class FontObserver extends React.Component { 73 | static propTypes = { 74 | children: T.node, 75 | text: T.string, 76 | timeout: T.number, 77 | }; 78 | 79 | static defaultProps = { 80 | children: null, 81 | text: null, 82 | timeout: 3000, 83 | }; 84 | 85 | static childContextTypes = { 86 | __fonts: T.object, 87 | }; 88 | 89 | static contextTypes = { 90 | __fonts: T.object, 91 | }; 92 | 93 | promises: Array> = []; 94 | 95 | state = {}; 96 | 97 | getChildContext() { 98 | // Merge fonts contexts 99 | const passedDownFonts = this.context.__fonts; 100 | const currentFonts = this.state; 101 | return { __fonts: { ...passedDownFonts, ...currentFonts } }; 102 | } 103 | 104 | componentDidMount() { 105 | const { children, text, timeout, ...props } = this.props; 106 | // Keep promises to cancel them once component unmounts 107 | this.promises = Object.keys(props).map(prop => { 108 | // Validate stuff 109 | const origValue = props[prop]; 110 | invariant( 111 | isObject(origValue) || isString(origValue), 112 | `Expected font prop to be a string or object, received ${getType( 113 | origValue, 114 | )} instead`, 115 | ); 116 | const value = isObject(origValue) ? origValue : { family: origValue }; 117 | invariant( 118 | isString(value.family) && value.family.length > 0, 119 | `Expected font 'family' prop to be a non-empty string, received ${getType( 120 | value.family, 121 | )} instead`, 122 | ); 123 | const { family, ...rest } = value; 124 | // Allow cancelling FFO promises 125 | const ffo = new Cancelable((resolve, reject) => 126 | new FontFaceObserver(family, rest) 127 | .load(text, timeout) 128 | .then(resolve, reject), 129 | ); 130 | // Update state once resolved 131 | ffo 132 | .then(() => this.setState(prev => ({ ...prev, [prop]: value }))) 133 | .catch(reason => !ffo.canceled && Promise.reject(reason)); 134 | 135 | return ffo; 136 | }); 137 | } 138 | 139 | componentWillUnmount() { 140 | // Mark promises as canceled to avoid setState calls when unmounted 141 | this.promises.forEach(promise => promise.cancel()); 142 | } 143 | 144 | render() { 145 | return this.props.children; 146 | } 147 | } 148 | 149 | export default FontObserver; 150 | -------------------------------------------------------------------------------- /src/font-subscriber.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import { FontSubscriber } from './index'; 4 | 5 | describe('', () => { 6 | it('only accepts function child', () => { 7 | // Make console.error to throw to catch it with .toThrow 8 | global.console.error = jest.fn(reason => { 9 | throw new Error(reason); 10 | }); 11 | expect(() => ( 12 | Hello 13 | )).toThrowErrorMatchingSnapshot(); 14 | // Reset console hack 15 | global.console.error.mockReset(); 16 | }); 17 | 18 | it('calls function child with fonts context', () => { 19 | const funcChild = jest.fn(); 20 | shallow({funcChild}, { 21 | context: { __fonts: { openSans: { family: 'Open Sans' } } }, 22 | }); 23 | expect(funcChild).toHaveBeenCalledWith({ 24 | openSans: { family: 'Open Sans' }, 25 | }); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /src/font-subscriber.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as T from 'prop-types'; 3 | import { ObserverContext, ObserverState } from './font-observer'; 4 | 5 | export interface SubscriberProps { 6 | children: (fonts: ObserverState) => React.ReactElement; 7 | } 8 | 9 | class FontSubscriber extends React.Component { 10 | static contextTypes = { 11 | __fonts: T.object, 12 | }; 13 | 14 | static propTypes = { 15 | children: T.func.isRequired, 16 | }; 17 | 18 | context: ObserverContext; 19 | 20 | render() { 21 | return this.props.children(this.context.__fonts); 22 | } 23 | } 24 | 25 | export default FontSubscriber; 26 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import FontObserver from './font-observer'; 2 | import FontSubscriber from './font-subscriber'; 3 | import withFonts from './with-fonts'; 4 | 5 | export { FontObserver, FontSubscriber, withFonts }; 6 | -------------------------------------------------------------------------------- /src/with-fonts.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as T from 'prop-types'; 3 | import { mount } from 'enzyme'; 4 | import { withFonts } from './index'; 5 | 6 | describe('withFonts()', () => { 7 | it('injects fonts prop', async () => { 8 | const Test = jest.fn().mockReturnValue(

); 9 | const TestWithFonts = withFonts(Test); 10 | mount(, { 11 | context: { __fonts: { openSans: { family: 'Open Sans' } } }, 12 | childContextTypes: { __fonts: T.object }, 13 | }); 14 | expect(Test).toHaveBeenCalledWith( 15 | { fonts: { openSans: { family: 'Open Sans' } } }, 16 | expect.any(Object), 17 | ); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /src/with-fonts.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as hoistStatics from 'hoist-non-react-statics'; 3 | import FontSubscriber from './font-subscriber'; 4 | 5 | const h = React.createElement; 6 | 7 | function withFonts(Target) { 8 | const Composed = props => 9 | h(FontSubscriber, { 10 | children: fonts => h(Target, { ...props, fonts }), 11 | }); 12 | return hoistStatics(Composed, Target); 13 | } 14 | 15 | export default withFonts; 16 | -------------------------------------------------------------------------------- /test/__fixtures__/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/__fixtures__/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { FontObserver, FontSubscriber } from '../../'; 4 | 5 | // See https://github.com/Microsoft/TypeScript/issues/11152 6 | const props: any = { roboto900: { family: 'Roboto', weight: '900' }}; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | {fonts => ( 12 |

13 | Hello 14 |

15 | )} 16 | 17 | , 18 | document.getElementById('root'), 19 | ); 20 | -------------------------------------------------------------------------------- /test/e2e.spec.ts: -------------------------------------------------------------------------------- 1 | import { join } from 'path'; 2 | import * as puppeteer from 'puppeteer'; 3 | import * as express from 'express'; 4 | import * as getPort from 'get-port'; 5 | import { Server } from 'http'; 6 | 7 | describe('Integration', () => { 8 | let server: Server; 9 | let browser: puppeteer.Browser; 10 | let page: puppeteer.Page; 11 | 12 | beforeAll(async () => { 13 | const port = await getPort(); 14 | const app = express(); 15 | app.use(express.static(join(__dirname, '__fixtures__'))); 16 | server = app.listen(port); 17 | browser = await puppeteer.launch(); 18 | page = await browser.newPage(); 19 | page.goto(`http://localhost:${port}`); 20 | }); 21 | 22 | afterAll(async () => { 23 | await browser.close(); 24 | await server.close(); 25 | }); 26 | 27 | it('sets class name once font is ready', async () => { 28 | await page.waitForSelector('.system-font'); 29 | await page.waitForSelector('.roboto900-font'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /test/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './index.tsx', 6 | context: path.resolve(__dirname, '__fixtures__'), 7 | output: { 8 | path: path.resolve(__dirname, '__fixtures__'), 9 | filename: 'bundle.js', 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.tsx?$/, 15 | exclude: /node_modules/, 16 | loader: 'ts-loader', 17 | }, 18 | ], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "jsx": "react", 5 | "lib": ["dom", "es2017"], 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["src"], 9 | "exclude": ["**/*.spec.tsx"] 10 | } 11 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:recommended"], 3 | "rules": { 4 | "member-access": false, 5 | "quotemark": [true, "single", "jsx-double"], 6 | "interface-name": [true, "never-prefix"], 7 | "ordered-imports": false, 8 | "object-literal-sort-keys": false, 9 | "arrow-parens": false, 10 | "no-reference": false 11 | } 12 | } 13 | --------------------------------------------------------------------------------

82 | {children} 83 |

{children}

{children}

{title}

{children}

13 | Hello 14 |