Use ESM

Author: wooorm

index.js

@@ -1,8 +1,8 @@
-'use strict'
-
 /**
  * @typedef {import('./lib/react-markdown.js').ReactMarkdownOptions} Options
  * @typedef {import('./lib/ast-to-react.js').Components} Components
  */
 
-module.exports = require('./lib/react-markdown.js')
+import {ReactMarkdown} from './lib/react-markdown.js'
+
+export default ReactMarkdown

lib/ast-to-react.js

@@ -1,16 +1,9 @@
-'use strict'
-
-const React = require('react')
-const ReactIs = require('react-is')
-const svg = require('property-information/svg')
-const find = require('property-information/find')
-const hastToReact = require('property-information/hast-to-react.json')
-const spaces = require('space-separated-tokens')
-const commas = require('comma-separated-tokens')
-const style = require('style-to-object')
-
-exports.hastToReact = toReact
-exports.hastChildrenToReact = childrenToReact
+import React from 'react'
+import ReactIs from 'react-is'
+import {svg, find, hastToReact} from 'property-information'
+import spaces from 'space-separated-tokens'
+import commas from 'comma-separated-tokens'
+import style from 'style-to-object'
 
 /**
  * @typedef {JSX.IntrinsicElements} IntrinsicElements
@@ -38,10 +31,7 @@ exports.hastChildrenToReact = childrenToReact
  * @property {boolean} mustUseProperty
  * @property {boolean} defined
  *
- * @typedef Schema
- * @property {Object.<string, Info>} property
- * @property {Object.<string, string>} normal
- * @property {string?} space
+ * @typedef {import('property-information').Schema} Schema
  *
  * @typedef Raw
  * @property {'raw'} type
@@ -151,7 +141,7 @@ const tableElements = new Set(['table', 'thead', 'tbody', 'tfoot', 'tr'])
  * @param {Context} context
  * @param {Element|Root} node
  */
-function childrenToReact(context, node) {
+export function childrenToReact(context, node) {
   /** @type {Array.<ReactNode>} */
   const children = []
   let childIndex = -1
@@ -400,7 +390,6 @@ function getElementsBeforeCount(parent, node) {
  * @param {Context} ctx
  */
 function addProperty(props, prop, value, ctx) {
-  /** @type {Info} */
   const info = find(ctx.schema, prop)
   let result = value
 

lib/react-markdown.js

@@ -1,15 +1,13 @@
-'use strict'
-
-const React = require('react')
-const vfile = require('vfile')
-const unified = require('unified')
-const parse = require('remark-parse')
-const remarkRehype = require('remark-rehype')
-const PropTypes = require('prop-types')
-const html = require('property-information/html')
-const filter = require('./rehype-filter.js')
-const uriTransformer = require('./uri-transformer.js')
-const childrenToReact = require('./ast-to-react.js').hastChildrenToReact
+import React from 'react'
+import vfile from 'vfile'
+import unified from 'unified'
+import parse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import PropTypes from 'prop-types'
+import {html} from 'property-information'
+import rehypeFilter from './rehype-filter.js'
+import {uriTransformer} from './uri-transformer.js'
+import {childrenToReact} from './ast-to-react.js'
 
 /**
  * @typedef {import('react').ReactNode} ReactNode
@@ -33,8 +31,6 @@ const childrenToReact = require('./ast-to-react.js').hastChildrenToReact
  * @typedef {CoreOptions & PluginOptions & LayoutOptions & FilterOptions & TransformOptions} ReactMarkdownOptions
  */
 
-module.exports = ReactMarkdown
-
 const own = {}.hasOwnProperty
 const changelog =
   'https://github.com/remarkjs/react-markdown/blob/main/changelog.md'
@@ -76,7 +72,7 @@ const deprecated = {
  * @param {ReactMarkdownOptions} options
  * @returns {ReactElement}
  */
-function ReactMarkdown(options) {
+export function ReactMarkdown(options) {
   for (const key in deprecated) {
     if (own.call(deprecated, key) && own.call(options, key)) {
       /** @type {Deprecation} */
@@ -96,7 +92,7 @@ function ReactMarkdown(options) {
     .use(options.remarkPlugins || options.plugins || [])
     .use(remarkRehype, {allowDangerousHtml: true})
     .use(options.rehypePlugins || [])
-    .use(filter, options)
+    .use(rehypeFilter, options)
 
   /** @type {vfile} */
   let file

lib/rehype-filter.js

@@ -1,6 +1,4 @@
-const visit = require('unist-util-visit')
-
-module.exports = rehypeFilter
+import visit from 'unist-util-visit'
 
 /**
  * @typedef {import('unist').Node} Node
@@ -23,7 +21,7 @@ module.exports = rehypeFilter
 /**
  * @type {import('unified').Plugin<[RehypeFilterOptions]>}
  */
-function rehypeFilter(options) {
+export default function rehypeFilter(options) {
   if (options.allowedElements && options.disallowedElements) {
     throw new TypeError(
       'Only one of `allowedElements` and `disallowedElements` should be defined'

lib/uri-transformer.js

@@ -1,12 +1,10 @@
 const protocols = ['http', 'https', 'mailto', 'tel']
 
-module.exports = uriTransformer
-
 /**
  * @param {string} uri
  * @returns {string}
  */
-function uriTransformer(uri) {
+export function uriTransformer(uri) {
   const url = (uri || '').trim()
   const first = url.charAt(0)
 

package.json

@@ -67,8 +67,10 @@
     "Dennis S <denis.s@svsg.co>",
     "Evan Hensleigh <futuraprime@gmail.com>"
   ],
-  "types": "index.d.ts",
+  "sideEffects": false,
+  "type": "module",
   "main": "index.js",
+  "types": "index.d.ts",
   "unpkg": "react-markdown.min.js",
   "files": [
     "lib/",
@@ -81,7 +83,7 @@
     "@types/unist": "^2.0.3",
     "comma-separated-tokens": "^1.0.0",
     "prop-types": "^15.7.2",
-    "property-information": "^5.3.0",
+    "property-information": "^6.0.0",
     "react-is": "^17.0.0",
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
@@ -101,7 +103,6 @@
     "@types/react-is": "^17.0.0",
     "c8": "^7.8.0",
     "esbuild": "^0.12.0",
-    "esbuild-register": "^2.6.0",
     "eslint-config-xo-react": "^0.25.0",
     "eslint-plugin-es": "^4.0.0",
     "eslint-plugin-react": "^7.0.0",
@@ -130,7 +131,7 @@
     "build": "run-s build:*",
     "format": "remark . -qfo --ignore-pattern test/ && prettier . -w --loglevel warn && xo --fix",
     "test": "run-s build format test:coverage",
-    "test:unit": "uvu -r esbuild-register test",
+    "test:unit": "node --no-warnings --experimental-loader=./test/loader.js ./node_modules/.bin/uvu test \"\\.jsx$\"",
     "test:coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov npm run test:unit"
   },
   "browserslist": "> 0.25%, not dead",
@@ -201,6 +202,7 @@
           "test/**/*.jsx"
         ],
         "rules": {
+          "node/file-extension-in-import": 0,
           "react/no-children-prop": 0,
           "react/prop-types": 0
         }

test/loader.js

@@ -0,0 +1,53 @@
+import path from 'path'
+import {fileURLToPath} from 'url'
+import {transformSync} from 'esbuild'
+
+const {getFormat, transformSource} = createLoader()
+
+export {getFormat, transformSource}
+
+/**
+ * A tiny JSX loader.
+ */
+export function createLoader() {
+  return {getFormat, transformSource}
+
+  /**
+   * @param {string} url
+   * @param {unknown} context
+   * @param {Function} defaultGetFormat
+   */
+  function getFormat(url, context, defaultGetFormat) {
+    return path.extname(url) === '.jsx'
+      ? {format: 'module'}
+      : defaultGetFormat(url, context, defaultGetFormat)
+  }
+
+  /**
+   * @param {Buffer} value
+   * @param {{url: string, [x: string]: unknown}} context
+   * @param {Function} defaultTransformSource
+   */
+  async function transformSource(value, context, defaultTransformSource) {
+    if (path.extname(context.url) !== '.jsx') {
+      return defaultTransformSource(value, context, defaultTransformSource)
+    }
+
+    const {code, warnings} = transformSync(String(value), {
+      sourcefile: fileURLToPath(context.url),
+      sourcemap: 'both',
+      loader: 'jsx',
+      target: 'esnext',
+      format: context.format === 'module' ? 'esm' : 'cjs'
+    })
+
+    if (warnings && warnings.length > 0) {
+      for (const warning of warnings) {
+        console.log(warning.location)
+        console.log(warning.text)
+      }
+    }
+
+    return {source: code}
+  }
+}

test/test.jsx

@@ -1,14 +1,14 @@
-const {test} = require('uvu')
-const assert = require('uvu/assert')
-const fs = require('fs')
-const path = require('path')
-const React = require('react')
-const gfm = require('remark-gfm')
-const visit = require('unist-util-visit')
-const ReactDom = require('react-dom/server')
-const raw = require('rehype-raw')
-const Markdown = require('../index.js')
-const toc = require('remark-toc')
+import {test} from 'uvu'
+import * as assert from 'uvu/assert'
+import fs from 'fs'
+import path from 'path'
+import React from 'react'
+import gfm from 'remark-gfm'
+import visit from 'unist-util-visit'
+import raw from 'rehype-raw'
+import toc from 'remark-toc'
+import ReactDom from 'react-dom/server.js'
+import Markdown from '../index.js'
 
 const own = {}.hasOwnProperty
 
@@ -978,10 +978,10 @@ test('should throw on invalid component', () => {
 
 test('can render the whole spectrum of markdown within a single run', () => {
   const input = String(
-    fs.readFileSync(path.join(__dirname, 'fixtures', 'runthrough.md'))
+    fs.readFileSync(path.join('test', 'fixtures', 'runthrough.md'))
   )
   const expected = String(
-    fs.readFileSync(path.join(__dirname, 'fixtures', 'runthrough.html'))
+    fs.readFileSync(path.join('test', 'fixtures', 'runthrough.html'))
   )
 
   const actual = asHtml(

tsconfig.json

@@ -1,17 +1,17 @@
 {
-  "include": ["lib/**.js", "test/**.jsx", "index.js"],
+  "include": ["lib/**/*.js", "test/**/*.jsx", "test/**/*.js", "index.js"],
   "exclude": ["**/*.min.js"],
   "compilerOptions": {
-    "target": "ES2015",
-    "lib": ["ES2015", "DOM"],
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ES2020",
     "moduleResolution": "node",
     "jsx": "react",
     "allowJs": true,
     "checkJs": true,
     "declaration": true,
     "emitDeclarationOnly": true,
     "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
     "skipLibCheck": true,
     "noImplicitAny": false,
     "noImplicitThis": true,