Skip to content

README.md

Latest commit

 

History

History
44 lines (31 loc) · 1.86 KB

README.md

File metadata and controls

44 lines (31 loc) · 1.86 KB

@asos/web-toggle-point-ssr

This package provides react application code for serializing JSON server-side and making it available as a prop client-side.

It contains the following exports:

  • withJsonIsomorphism

This represents a react higher-order component designed to serialize server state to a <script type="application/json" />, so it is available to a client bundle.

This code is agnostic of toggling/experiments, so is made available as an independent export, for other use cases.

  • serializationFactory

This factory takes an id for the script, and a logWarning method (only relevant on the client, used to highlight any malformed JSON in-case this is processed outside of the SSR process).

It creates an object with these methods:

For the server:

  • getScriptMarkup
    • returns a <script type="application/json"> tag, as a string, for direct inclusion in the DOM. Uses jsesc to ensure appropriate escaping for JSON.
  • getScriptReactElement
    • returns a react element, wrapping the getScriptMarkup

For the browser:

  • getJSONFromScript
    • de-serializes the value, returning an object

Usage

See: JSDoc output

Warning

Use with React 17

The package should work with React 17 and above, but due to a bug that they are not back-filling, the use of "type": "module" in the package means webpack will be unable to resolve the extensionless import. To fix, either upgrade to React 18+ or add the following resolve configuration to the webpack config:

resolve: {
  alias: {
    "react/jsx-runtime": "react/jsx-runtime.js",
    "react-dom/server": "react-dom/server.js",
  }
}