fusionjs / fusion-plugin-font-loader-react

Migrated to https://github.com/fusionjs/fusionjs

FUSION.JS

Modern framework for fast, powerful React apps

What is it?

fu·sion — noun

The process or result of joining two or more things together to form a single entity.

Fusion.js, Uber’s open source universal web framework, represents the fusion of the client and the server. It's geared for server-side rendering out of the box, and its plugin-driven architecture allows for complex frontend and backend logic to be encapsulated in a single plugin:

import App from 'fusion-react';
import Router from 'fusion-plugin-react-router';

export default () => {
  const app = new App(<div>...</div>);

  /*
  One line of code sets up everything you need for routing:
  - Server rendering
  - React Providers on both server and browser
  - Bundle splitting integration
  - Hot module reloading support
  */
  app.register(Router);

  return app;
}

We initially built Fusion.js to make our own websites easier to maintain, but were so impressed with the benefits that we decided to offer it to the community as an open source project!

Try it out

If you're interested in giving Fusion.js a shot, Overview and Core Concepts are great places to start.

Contributing

This is a monorepo of all open source Fusion.js packages maintained using Yarn v2. Take a look at CONTRIBUTING.md for info on how to develop in this repo.

License

MIT

fusion-plugin-font-loader-react's Issues

Add build badge

Rename fontProps to $fontProps

This renaming will fix react warnings for passing unknown attributes
to DOM elements.

Add `font-display` attribute to font-faces

Type of issue

Description

Current behavior

Expected behavior

Steps to reproduce

Your environment

• fusion-plugin-font-loader-react version:

• Node.js version (node --version):

• npm version (npm --version):

• Operating System:

Make withFontLoading HOC compatible with Styletron's withStyle

Type of issue

Feature Request

Description

Fusion.js uses Styletron for managing component styles. Composing styles in Styletron is accomplished using withStyle, withStyleDeep, and withTransform functions. Ideally this plugin would be compatible with those functions to allow composition of styles where fonts are being loaded.

Current behavior

If withStyle is called on a styled component wrapped in a withFontLoading HOC a TypeError is produced.

Expected behavior

withStyle should be able to create styled components wrapped by a withFontLoading HOC with font loading from the base component.

OR

Styled component composition with font loading should be addressed in the documentation describing workarounds, patterns, or general guidance.

Steps to reproduce

N/A

Your environment

• fusion-plugin-font-loader-react version: 1.0.3

• Node.js version (node --version): Any

• npm version (npm --version): Any

• Operating System: Any

Fix comment to reflect use of rel="preload"

Migrate to leverage new dependency injection API

ctx-body should be ctx.template

plugin.js

ctx.template.head.push(html`<style>`);

etc.

Migrate to new fusion-tokens api

Update dependencies

README: clarify use of preloadDepth

Add a clear explanation of the effect of each preloadDepth, including tradeoffs.

Incorrect installation instructions in README

https://code.uberinternal.com/T1983995

Font asset path is hardcoded to /_static

This plugin is currently hardcoded to /_static so it doesn't respect the CDN or asset url base configuration.

Consider logic refactor with an eye to performance

e.g. only calling Object.keys on fonts once rather than twice, and using a standard for loop rather than forEach

Fix flow types

Update documentation

Current documentation for this plugin is missing information and does not follow examples from other plugins. For example, I don't see any information about the expected shape of FontLoaderReactConfigToken, nor is there a registration section.

Perhaps this is just missing this registration section?

withFontLoading can call setState on unmounted components

Type of issue

Bug

Description

It appears that the withFontLoading HOC calls this.setState once a font loads, here. In the case that the component unmounts before the font loads, however, React throws some warnings for calling setState on an unmounted component. According to a React blog post, we should probably make the promise returned by the font-loader module cancellable and cancel it in componentWillUnmount.

Add support for font-style,font-weight,etc inside "@font-face"

Type of issue

Request

Description

Add support for font-style,font-weight,etc inside "@font-face"

Current behavior

We need to specify Font Family as:
Test-Font-Regular
Test-Font-Bold
etc

Expected behavior

Specify one Font Family(Test-Font) and configure using font-style, font-weight, etc

Fix react import statement

Allow override of font test text

For some locale scripts the current test text may be less useful.

allow different `preloadDepth`s for different font families

Type of issue

Feature request

Description

If two font families exist, they must be configured to the same preloadDepth, meaning that there's no way to granularly control how much the dependency graph of each font family should be preloaded

Current behavior

If two font families exist, they must be configured to the same preloadDepth, meaning that there's no way to granularly control how much the dependency graph of each font family should be preloaded

Expected behavior

There should be a way of specifying different preloadDepths to each node of the dependency graph

Steps to reproduce

N/A

Your environment

• fusion-plugin-font-loader-react version: 1.0.2

• Node.js version (node --version): any

• npm version (npm --version): any

• Operating System: any

Add code initially

Migrate to new fusion-tokens api

Flow type error when upgrading to version 1.0.4

When upgrading to fusion-plugin-font-loader-react from 1.0.3 to 1.0.4 I get the following flow error.
I am using flow-bin ^0.79.0

yarn flow
yarn run v1.9.4
$ flow check
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/fusion-plugin-font-loader-react/src/font-loader.js:37:10

Missing type annotation for R.

     34│   // $FlowFixMe
     35│   testDivs.forEach(div => (div.style.fontFamily = `${font}, ${div.testFont}`));
     36│   const waitUntil = Date.now() + timeout;
     37│   return new Promise(resolve => {
     38│     (function monitorWidth(delay) {
     39│       setTimeout(function() {
     40│         if (Date.now() >= waitUntil || hasFontLoaded(testDivs)) {
     41│           resolve();
     42│           cleanup(testDivs);
     43│         } else {
     44│           monitorWidth(Math.max(delay * 1.5, 500));
     45│         }
     46│       }, delay);
     47│     })(10);
     48│   });
     49│ }
     50│
     51│ function hasFontLoaded(testDivs) {

Type of issue

This is a bug.

Description

I would like the flow type check to pass.

Current behavior

The flow type check does not pass for flow 0.79.0.

Expected behavior

The flow type check should pass for flow 0.79.0.

Steps to reproduce

1. Run a flow type check using flow-bin 0.79.0

Your environment

• fusion-plugin-font-loader-react version: 1.0.4

• Node.js version (node --version): 8.11.4

• npm version (npm --version): 5.6.0

• Operating System: mac

font-face syntax error after font-display attr added

Type of issue

Description

Current behavior

Expected behavior

Steps to reproduce

Your environment

• fusion-plugin-font-loader-react version:

• Node.js version (node --version):

• npm version (npm --version):

• Operating System: