@sequencemedia/react-router-render 2.1.0 → 2.2.0

package/babel.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/env', {
+        targets: {
+          node: 'current'
+        },
+        useBuiltIns: 'usage',
+        corejs: 3
+      }
+    ],
+    '@babel/react'
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequencemedia/react-router-render",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Sync/async isomorphic render of React apps with React Router",
   "keywords": [
     "React",
@@ -11,7 +11,8 @@
     "renderToString",
     "renderToStaticMarkup"
   ],
-  "main": "./index.js",
+  "type": "module",
+  "main": "./src/index.mjs",
   "author": {
     "name": "Jonathan Perry for Sequence Media Limited",
     "email": "jonathanperry@sequencemedia.net",
@@ -19,41 +20,30 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=16.13.0"
+    "node": ">=18.5.0"
   },
   "repository": {
     "type": "git",
     "url": "git://github.com/sequencemedia/react-router-render.git"
   },
   "scripts": {
-    "build": "npm run babel",
-    "build:watch": "npm run babel:watch",
-    "babel": "babel src -d lib",
-    "babel:watch": "npm run babel -- -w",
-    "clean": "rimraf lib",
-    "prepublishOnly": "npm run build",
-    "prebuild": "npm run clean",
-    "lint": "eslint .",
+    "test": "NODE_ENV=test mocha test --recursive --verbose",
+    "lint": "eslint . --ext .mjs --ext .cjs",
     "lint:fix": "npm run lint -- --fix",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.5",
     "@hapi/boom": "^10.0.1",
     "debug": "^4.3.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.5",
     "@babel/core": "^7.21.8",
     "@babel/eslint-parser": "^7.21.8",
-    "@babel/plugin-proposal-export-default-from": "^7.18.10",
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/plugin-proposal-throw-expressions": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.21.4",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "^7.21.0",
     "@sequencemedia/hooks": "^1.0.423",
+    "chai": "^4.3.7",
     "core-js": "^3.30.2",
     "eslint": "^8.41.0",
     "eslint-config-standard": "^17.0.0",
@@ -62,10 +52,16 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "husky": "^8.0.3",
+    "mocha": "^10.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router": "6.11.2",
     "react-router-dom": "6.11.2",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.1",
+    "sinon": "^15.1.0",
+    "sinon-chai": "^3.7.0"
+  },
+  "exports": {
+    ".": "./src/index.mjs"
   }
 }

package/src/{index.js → index.mjs}

@@ -1,46 +1,22 @@
-import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import Boom from '@hapi/boom'
-import { StaticRouter as Router } from 'react-router-dom/server'
 import debug from 'debug'
 
+import Boom from '@hapi/boom'
+
+import {
+  getReactDOMServerRenderToString,
+  getReactDOMServerRenderToStaticMarkup
+} from './react-dom-server.cjs'
+
 const log = debug('@sequencemedia/react-redux-render')
 
 log('`react-redux-render` is awake')
 
-const badImplementation = (e, data) => Boom.boomify(e, { statusCode: 500, message: 'Rendering exception', data })
 const notFound = (data) => Boom.notFound('Routing exception', data)
 
-function getReactDOMServerRenderToString (routerProps, routes) {
-  try {
-    return ReactDOMServer.renderToString(
-      <Router {...routerProps}>
-        {routes}
-      </Router>
-    )
-  } catch (e) {
-    log(e)
-
-    throw badImplementation(e, routerProps)
-  }
-}
-
-function getReactDOMServerRenderToStaticMarkup (routerProps, routes) {
-  try {
-    return ReactDOMServer.renderToStaticMarkup(
-      <Router {...routerProps}>
-        {routes}
-      </Router>
-    )
-  } catch (e) {
-    log(e)
-
-    throw badImplementation(e, routerProps)
-  }
-}
-
 /**
- * @return {string}
+ * @param {Object.<string, any>} routerProps
+ * @param {Object.<string, any>} routes
+ * @returns {string}
  */
 export function renderToString ({ location, context = {}, ...router } = {}, routes = {}) {
   const routerProps = { ...router, location, context }
@@ -50,7 +26,9 @@ export function renderToString ({ location, context = {}, ...router } = {}, rout
 }
 
 /**
- * @return {string}
+ * @param {Object.<string, any>} routerProps
+ * @param {Object.<string, any>} routes
+ * @returns {string}
  */
 export function renderToStaticMarkup ({ location, context = {}, ...router } = {}, routes = {}) {
   const routerProps = { ...router, location, context }
@@ -60,7 +38,9 @@ export function renderToStaticMarkup ({ location, context = {}, ...router } = {}
 }
 
 /**
- * @return {Promise<string>}
+ * @param {Object.<string, any>} routerProps
+ * @param {Object.<string, any>} routes
+ * @returns {Promise<string>}
  */
 export async function render ({ location, context = {}, ...router } = {}, routes = {}) {
   const routerProps = { ...router, location, context }

package/src/react-dom-server.cjs

@@ -0,0 +1,9 @@
+require('@babel/register')
+
+const {
+  getReactDOMServerRenderToString,
+  getReactDOMServerRenderToStaticMarkup
+} = require('./react-dom-server.jsx')
+
+module.exports.getReactDOMServerRenderToString = getReactDOMServerRenderToString
+module.exports.getReactDOMServerRenderToStaticMarkup = getReactDOMServerRenderToStaticMarkup

package/src/react-dom-server.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import Boom from '@hapi/boom'
+import { StaticRouter as Router } from 'react-router-dom/server'
+
+/**
+ * @param {Error} e
+ * @param {{props: Object.<string, any>}} data
+ * @returns A boom object
+ */
+const badImplementation = (e, data) => Boom.boomify(e, { statusCode: 500, message: 'Rendering exception', data })
+
+/**
+ * @param {Object.<string, any>} routerProps
+ * @param {Object.<string, any>} routes
+ * @returns {string}
+ */
+export function getReactDOMServerRenderToString (routerProps, routes) {
+  try {
+    return ReactDOMServer.renderToString(
+      <Router {...routerProps}>
+        {routes}
+      </Router>
+    )
+  } catch (e) {
+    log(e)
+
+    throw badImplementation(e, routerProps)
+  }
+}
+
+/**
+ * @param {Object.<string, any>} routerProps
+ * @param {Object.<string, any>} routes
+ * @returns {string}
+ */
+export function getReactDOMServerRenderToStaticMarkup (routerProps, routes) {
+  try {
+    return ReactDOMServer.renderToStaticMarkup(
+      <Router {...routerProps}>
+        {routes}
+      </Router>
+    )
+  } catch (e) {
+    log(e)
+
+    throw badImplementation(e, routerProps)
+  }
+}

package/test/component.cjs

@@ -0,0 +1,7 @@
+require('@babel/register')
+
+const {
+  default: component
+} = require('./component.jsx')
+
+module.exports = component

package/test/component.jsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Component () {
+  return <h1>Component</h1>
+}

package/test/index.spec.mjs

@@ -0,0 +1,58 @@
+import chai, { expect } from 'chai'
+import sinonChai from 'sinon-chai'
+
+import {
+  renderToString,
+  renderToStaticMarkup,
+  render
+} from '@sequencemedia/react-router-render'
+
+import Routes from './routes.cjs'
+
+chai.use(sinonChai)
+
+describe('react-render', () => {
+  describe('`renderToString`', () => {
+    it('is a function', () => {
+      return expect(renderToString)
+        .to.be.a('function')
+    })
+  })
+
+  describe('`renderToStaticMarkup`', () => {
+    it('is a function', () => {
+      return expect(renderToStaticMarkup)
+        .to.be.a('function')
+    })
+  })
+
+  describe('`render`', () => {
+    it('is a function', () => {
+      return expect(render)
+        .to.be.a('function')
+    })
+  })
+
+  const routerProps = { location: '/' }
+
+  describe('`renderToString()`', () => {
+    it('returns a string', () => {
+      return expect(renderToString(routerProps, Routes))
+        .to.equal('<h1>Component</h1>')
+    })
+  })
+
+  describe('`renderToStaticMarkup()`', () => {
+    it('returns a string', () => {
+      return expect(renderToStaticMarkup(routerProps, Routes))
+        .to.equal('<h1>Component</h1>')
+    })
+  })
+
+  describe('`render()`', () => {
+    it('returns a Promise resolving to a string', async () => {
+      return expect(await render(routerProps, Routes))
+        .to.equal('<h1>Component</h1>')
+    })
+  })
+})

package/test/routes.cjs

@@ -0,0 +1,7 @@
+require('@babel/register')
+
+const {
+  default: routes
+} = require('./routes.jsx')
+
+module.exports = routes

package/test/routes.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import {
+  Routes,
+  Route
+} from 'react-router-dom'
+
+import Component from './component.jsx'
+
+export default (
+  <Routes>
+    <Route exact path='/' element={<Component />} />
+  </Routes>
+)

package/.gitattributes

@@ -1,20 +0,0 @@
-# Default behavior
-* text=auto
-
-# LF line endings
-*.json text eol=lf
-*.mjs text eol=lf
-*.cjs text eol=lf
-*.mts text eol=lf
-*.js text eol=lf
-*.ts text eol=lf
-*.sh text eol=lf
-.editorconfig text eol=lf
-.eslintignore text eol=lf
-.eslintrc text eol=lf
-.gitattributes text eol=lf
-.gitignore text eol=lf
-.npmignore text eol=lf
-.npmrc text eol=lf
-.nvmrc text eol=lf
-.husky/* text eol=lf

package/babel.config.js

@@ -1,22 +0,0 @@
-module.exports = {
-  compact: true,
-  comments: false,
-  presets: [
-    [
-      '@babel/env', {
-        targets: {
-          node: 'current'
-        },
-        useBuiltIns: 'usage',
-        corejs: 3
-      }
-    ],
-    '@babel/react'
-  ],
-  plugins: [
-    '@babel/transform-runtime',
-    '@babel/proposal-throw-expressions',
-    '@babel/proposal-export-default-from',
-    '@babel/proposal-export-namespace-from'
-  ]
-}

package/index.js

@@ -1,2 +0,0 @@
-//
-module.exports = require('./lib')

package/lib/index.js

@@ -1 +0,0 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.render=render;exports.renderToStaticMarkup=renderToStaticMarkup;exports.renderToString=renderToString;var _react=_interopRequireDefault(require("react"));var _server=_interopRequireDefault(require("react-dom/server"));var _boom=_interopRequireDefault(require("@hapi/boom"));var _server2=require("react-router-dom/server");var _debug=_interopRequireDefault(require("debug"));const log=(0,_debug.default)('@sequencemedia/react-redux-render');log('`react-redux-render` is awake');const badImplementation=(e,data)=>_boom.default.boomify(e,{statusCode:500,message:'Rendering exception',data});const notFound=data=>_boom.default.notFound('Routing exception',data);function getReactDOMServerRenderToString(routerProps,routes){try{return _server.default.renderToString(_react.default.createElement(_server2.StaticRouter,routerProps,routes));}catch(e){log(e);throw badImplementation(e,routerProps);}}function getReactDOMServerRenderToStaticMarkup(routerProps,routes){try{return _server.default.renderToStaticMarkup(_react.default.createElement(_server2.StaticRouter,routerProps,routes));}catch(e){log(e);throw badImplementation(e,routerProps);}}function renderToString({location,context={},...router}={},routes={}){const routerProps={...router,location,context};const string=getReactDOMServerRenderToString(routerProps,routes);if(string)return string;throw notFound(routerProps);}function renderToStaticMarkup({location,context={},...router}={},routes={}){const routerProps={...router,location,context};const string=getReactDOMServerRenderToStaticMarkup(routerProps,routes);if(string)return string;throw notFound(routerProps);}async function render({location,context={},...router}={},routes={}){const routerProps={...router,location,context};const string=getReactDOMServerRenderToString(routerProps,routes);if(string)return string;throw notFound(routerProps);}