npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@financial-times/dotcom-server-react-jsx

v11.2.1

Published

This package provides server-side rendering for React components. It is primarily designed to be used during the transition between [n-handlebars] and JSX rendering.

Downloads

2,053

Readme

@financial-times/dotcom-server-react-jsx

This package provides server-side rendering for React components. It is primarily designed to be used during the transition between n-handlebars and JSX rendering.

Getting started

This package is compatible with Node 12+ and is distributed on npm.

npm install --save-dev @financial-times/dotcom-server-react-jsx

It is best used within an Express application but can also be used as a standalone library.

Usage with Express

After installing the package you must register it as a view engine for your Express application. This will enable you to render template files with the matching file extension and send the result as a response to requests.

Please note that you will need to extend Node's require() function to enable the use of .jsx files at runtime. See using JSX at runtime.

const express = require('express')
+ const { PageKitReactJSX } = require('@financial-times/dotcom-server-react-jsx')

+ const renderer = new PageKitReactJSX(options)
+ app.engine('.jsx', renderer.engine)

When using this module as a view engine Express will find the component file, decorate any data passed to it with properties from app.locals and response.locals, and automatically send the rendered result. See the Express render documentation for more information.

app.get('/', (request, response) => {
  const data = {
    pageTitle: 'Home',
    content: 'Hello World!'
  }

  response.render('Home.jsx', data)
})

Please note that where to lookup template files can be configured using Express's settings and component files must have a default export.

Standalone usage

This module can be used without integrating it fully into your application. This may be suitable for applications which are not built with Express or for ad-hoc template rendering needs. This is intended to provide some convenient extra functionality over React's built-in render methods.

+ const { PageKitReactJSX } = require('@financial-times/dotcom-server-react-jsx')
+ const renderer = new PageKitReactJSX(options)

When using this module as a standalone library you will need to find template files, provide all data, and handle the rendered output manually.

const Home = require('../views/Home.jsx')

app.get('/', async (request, response, next) => {
  const data = {
    pageTitle: 'Home',
    content: 'Hello World!'
  }

  try {
    const html = await renderer.render(Home, data, true)
    response.send(html)
  } catch (error) {
    next(error)
  }
})

API

render(component, templateContext[, includeDoctype])

Renders the given component to a string.

If the component has a .getInitialProps() method then this method will be called with the value of the templateContext argument and the resolved value of this method passed to the component as props. If the component does not have this method then the value of templateContext will be passed directly to the component instead.

If includeDoctype is true then the output will be prefixed with the HTML document pragma.

renderView(templatePath: string, templateContext: any, callback: (error, html) => void)

This method is intended to be used as a view engine for Express.

Options

useStaticRendering

Directs all methods to use ReactDOMServer.renderToStaticMarkup() instead of ReactDOMServer.renderToString(). This should be enabled if you are rendering static pages and are not using React on the client. Defaults to false.

Using JSX at runtime

By default Node cannot parse files which contain JSX syntax because it is extension of JavaScript rather than a feature of the language. However, it is widely supported by JavaScript parsers and transpilers.

There are two options for using files which include JSX code:

  1. Transpile the code and write the plain JS output to a new file
  2. Transpile the code on-the-fly and keep the plain JS output in memory

Option 1 is the best choice if you intend to distribute your code. For example if you publish your code to npm then this should always be in plain JS so that consumers of your code do not need to transpile it themselves.

Option 2 is a good choice for code used only in your application. If the code is transpiled efficiently then this should not add any extra overhead but it may cause start-up times to increase. If you are using a template library such as Pug, Handlebars, or EJS you may be using a similar technique already!

Whichever option you choose you will need to use a transpiler. Some popular options are Babel, Bublé, and Sucrase:

  • Babel is the most popular transpiler and is the most capable. It has support for the most recent and upcoming JS standards and syntax extensions and can output ES3 code. It has options to add relevant polyfills for features not supported by your target environment and tries to produce spec-compliant code. However, Babel can require significant configuration and has many dependencies. This is usually the best option for transpiling code targeting the browser.
  • Bublé can transpile ES2015-16 syntax and output ES5 code. It does not attempt to polyfill features and favours speed and simplicity over spec-compliance. It supports JSX out of the box and is simple to configure. Bublé is a good choice for projects requiring minimal transformations.
  • Sucrase is capable of transpiling the latest JS features and syntax extensions to ES2015 code, including JSX. It is fast and lightweight so it is suitable for using in server-side projects.