@sequencemedia/react-render 2.1.0 → 2.2.1

package/{babel.config.js → babel.config.cjs}

@@ -1,6 +1,4 @@
 module.exports = {
-  compact: true,
-  comments: false,
   presets: [
     [
       '@babel/env', {
@@ -12,10 +10,5 @@ module.exports = {
       }
     ],
     '@babel/react'
-  ],
-  plugins: [
-    '@babel/transform-runtime',
-    '@babel/proposal-export-default-from',
-    '@babel/proposal-export-namespace-from'
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequencemedia/react-render",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "React Render",
   "keywords": [
     "React",
@@ -9,7 +9,8 @@
     "renderToString",
     "renderToStaticMarkup"
   ],
-  "main": "./index.js",
+  "type": "module",
+  "main": "./src/index.mjs",
   "author": {
     "name": "Jonathan Perry for Sequence Media Limited",
     "email": "jonathanperry@sequencemedia.net",
@@ -17,41 +18,30 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=16.13.0"
+    "node": ">=18.5.0"
   },
   "repository": {
     "type": "git",
     "url": "git://github.com/sequencemedia/react-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",
@@ -60,8 +50,14 @@
     "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",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.1",
+    "sinon": "^15.1.0",
+    "sinon-chai": "^3.7.0"
+  },
+  "exports": {
+    ".": "./src/index.mjs"
   }
 }

package/src/index.mjs

@@ -0,0 +1,31 @@
+import debug from 'debug'
+
+import {
+  getReactDOMServerRenderToString,
+  getReactDOMServerRenderToStaticMarkup
+} from './react-dom-server.cjs'
+
+const log = debug('@sequencemedia/react-render')
+
+log('`react-render` is awake')
+
+/**
+ * @param {React.ReactElement} Component
+ * @param {Object.<string, any>} props
+ * @returns {string}
+ */
+export const renderToString = (Component, props = {}) => getReactDOMServerRenderToString(Component, props)
+
+/**
+ * @param {React.ReactElement} Component
+ * @param {Object.<string, any>} props
+ * @returns {string}
+ */
+export const renderToStaticMarkup = (Component, props = {}) => getReactDOMServerRenderToStaticMarkup(Component, props)
+
+/**
+ * @param {React.ReactElement} Component
+ * @param {Object.<string, any>} props
+ * @returns {Promise<string>}
+ */
+export const render = async (Component, props = {}) => getReactDOMServerRenderToString(Component, props)

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/{index.js → react-dom-server.jsx}

@@ -1,15 +1,25 @@
+import debug from 'debug'
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import Boom from '@hapi/boom'
-import debug from 'debug'
 
 const log = debug('@sequencemedia/react-render')
 
 log('`react-render` is awake')
 
+/**
+ * @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 })
 
-function getReactDOMServerRenderToString (Component, props) {
+/**
+ * @param {React.ReactElement} Component
+ * @param {Object.<string, any>} props
+ * @returns {string}
+ */
+export function getReactDOMServerRenderToString (Component, props) {
   try {
     return ReactDOMServer.renderToString(
       <Component
@@ -23,7 +33,12 @@ function getReactDOMServerRenderToString (Component, props) {
   }
 }
 
-function getReactDOMServerRenderToStaticMarkup (Component, props) {
+/**
+ * @param {React.ReactElement} Component
+ * @param {Object.<string, any>} props
+ * @returns {string}
+ */
+export function getReactDOMServerRenderToStaticMarkup (Component, props) {
   try {
     return ReactDOMServer.renderToStaticMarkup(
       <Component
@@ -36,18 +51,3 @@ function getReactDOMServerRenderToStaticMarkup (Component, props) {
     throw badImplementation(e, { props })
   }
 }
-
-/**
- * @return {string}
- */
-export const renderToString = (Component, props = {}) => getReactDOMServerRenderToString(Component, props)
-
-/**
- * @return {string}
- */
-export const renderToStaticMarkup = (Component, props = {}) => getReactDOMServerRenderToStaticMarkup(Component, props)
-
-/**
- * @return {Promise}
- */
-export const render = async (Component, props = {}) => getReactDOMServerRenderToString(Component, props)

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,13 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function Component ({ content }) {
+  if (content) return <h1>Component {content}</h1>
+  return <h1>Component</h1>
+}
+
+Component.propTypes = {
+  content: PropTypes.string
+}
+
+export default Component

package/test/index.spec.mjs

@@ -0,0 +1,85 @@
+import chai, { expect } from 'chai'
+import sinonChai from 'sinon-chai'
+
+import {
+  renderToString,
+  renderToStaticMarkup,
+  render
+} from '@sequencemedia/react-render'
+
+import Component from './component.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')
+    })
+  })
+
+  describe('With props', () => {
+    const props = {
+      content: 'MOCK CONTENT'
+    }
+
+    describe('`renderToString()`', () => {
+      it('returns a string', () => {
+        return expect(renderToString(Component, props))
+          .to.equal('<h1>Component <!-- -->MOCK CONTENT</h1>')
+      })
+    })
+
+    describe('`renderToStaticMarkup()`', () => {
+      it('returns a string', () => {
+        return expect(renderToStaticMarkup(Component, props))
+          .to.equal('<h1>Component MOCK CONTENT</h1>')
+      })
+    })
+
+    describe('`render()`', () => {
+      it('returns a Promise resolving to a string', async () => {
+        return expect(await render(Component, props))
+          .to.equal('<h1>Component <!-- -->MOCK CONTENT</h1>')
+      })
+    })
+  })
+
+  describe('Without props', () => {
+    describe('`renderToString()`', () => {
+      it('returns a string', () => {
+        return expect(renderToString(Component))
+          .to.equal('<h1>Component</h1>')
+      })
+    })
+
+    describe('`renderToStaticMarkup()`', () => {
+      it('returns a string', () => {
+        return expect(renderToStaticMarkup(Component))
+          .to.equal('<h1>Component</h1>')
+      })
+    })
+
+    describe('`render()`', () => {
+      it('returns a Promise resolving to a string', async () => {
+        return expect(await render(Component))
+          .to.equal('<h1>Component</h1>')
+      })
+    })
+  })
+})

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/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.renderToString=exports.renderToStaticMarkup=exports.render=void 0;var _react=_interopRequireDefault(require("react"));var _server=_interopRequireDefault(require("react-dom/server"));var _boom=_interopRequireDefault(require("@hapi/boom"));var _debug=_interopRequireDefault(require("debug"));const log=(0,_debug.default)('@sequencemedia/react-render');log('`react-render` is awake');const badImplementation=(e,data)=>_boom.default.boomify(e,{statusCode:500,message:'Rendering exception',data});function getReactDOMServerRenderToString(Component,props){try{return _server.default.renderToString(_react.default.createElement(Component,props));}catch(e){log(e);throw badImplementation(e,{props});}}function getReactDOMServerRenderToStaticMarkup(Component,props){try{return _server.default.renderToStaticMarkup(_react.default.createElement(Component,props));}catch(e){log(e);throw badImplementation(e,{props});}}const renderToString=(Component,props={})=>getReactDOMServerRenderToString(Component,props);exports.renderToString=renderToString;const renderToStaticMarkup=(Component,props={})=>getReactDOMServerRenderToStaticMarkup(Component,props);exports.renderToStaticMarkup=renderToStaticMarkup;const render=async(Component,props={})=>getReactDOMServerRenderToString(Component,props);exports.render=render;