How to use fela-dom - 10 common examples

function addFontRenderer(
  renderer: DOMRenderer,
  mountNode: DOMNode
): DOMRenderer {
  renderer.fontRenderer = createRenderer()

  // mount font styles into the mountNode
  if (mountNode) {
    render(renderer.fontRenderer, mountNode)
  }

  renderer.renderFont = (
    family: string,
    files: Array,
    properties: Object
  ): string => renderer.fontRenderer.renderFont(family, files, properties)

  return renderer
}

render={(incomingTheme: ThemePrepared) => {
          const outgoingTheme: ThemePrepared = mergeThemes(incomingTheme, theme)

          // Heads up!
          // We should call render() to ensure that a subscription for DOM updates was created
          // https://github.com/stardust-ui/react/issues/581
          if (isBrowser()) render(outgoingTheme.renderer)
          this.renderStaticStylesOnce(outgoingTheme)

          return (
            
              {children}
            
          )
        }}
      />

,
                req,
            );

        await getDataFromTree(App as any);
        if (context.pageNotFound === true) {
            res.status(404);
        } else {
            res.status(200);
        }

        const html = ReactDOMServer.renderToString(App as any);

        // this comes after Html render otherwise we don't see fela rules generated
        const appStyles = renderToSheetList(renderer);

        // We need to tell Helmet to compute the right meta tags, title, and such.
        const helmet = Helmet.renderStatic(); // Avoid memory leak while tracking mounted instances

        if (context.url) {
            res.writeHead(301, { Location: context.url });
            res.end();
        } else {
            if (__DEV__ || !assetMap) {
                assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'web', 'assets.json')).toString());
            }
            const apolloState = Object.assign({}, client.extract());
            const reduxState = Object.assign({}, store.getState());
            const env = {
                ...publicEnv,
            };

.then(() => {
      const reactAppString = isAmp
        ? renderToStaticMarkup(reactApp)
        : renderToString(reactApp);
      const felaMarkup = renderToSheetList(renderer);
      const asyncState = asyncContext.getState();
      // Generate the html res.
      const state = store.getState();
      const html = renderTemplate({
        ...Helmet.rewind(),
        isAmp,
        isBot,
        root: reactAppString,
        buildOn: BUILD_ON,
        fela: felaMarkup,
        scripts: isAmp ? js : [...js, assets.app.js].filter(x => x),
        styles: isAmp ? css : [...css, assets.app.css].filter(x => x),
        asyncState,
        initialState: {
          apollo: cache.data
          // location: state.location,

const getFela = (Component, props) => {
  if (!props.renderer) {
    console.log('Warning: Fela static rendering requires a `renderer` to be passed through the `getInitialProps()` method.')
    return ''
  }
  const fela = require('fela')
  const felaDOM = require('fela-dom')
  const renderer = props.renderer || fela.createRenderer()
  renderToString(
    React.createElement(Component, props)
  )
  const tag = felaDOM.renderToMarkup(renderer)
  return tag
}

constructor(fela?: IRenderer) {
    super();

    this.fela = fela || createRenderer();

    render(this.fela);
  }

componentDidMount(): void {
      if (hasDOM(this.props.renderer)) {
        render(this.props.renderer)
      }
    }

constructor() {
    if (FelaRendererService.renderer === null) {
      FelaRendererService.renderer = createRenderer()
      render(FelaRendererService.renderer)
    }
  }

constructor() {
    if (FelaRendererService.renderer === null) {
      FelaRendererService.renderer = createRenderer();
      render(FelaRendererService.renderer);
    }
  }

constructor(fela?: IRenderer) {
    super();

    this.fela = fela || createRenderer();

    render(this.fela);
  }