feat(package): Use microbundle to create ESM bundles

Signed-off-by: Tilman Vatteroth <[email protected]>

jest.config.json

@@ -1,14 +1,25 @@
 {
-  "transform": {
-    ".(ts|tsx)": "ts-jest"
-  },
-  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
-  "testPathIgnorePatterns": [
+  "testRegex" : "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
+  "testPathIgnorePatterns" : [
     "/dist/"
   ],
-  "moduleFileExtensions": [
+  "moduleFileExtensions" : [
     "ts",
     "tsx",
     "js"
-  ]
+  ],
+  "extensionsToTreatAsEsm" : [
+    ".ts"
+  ],
+  "moduleNameMapper" : {
+    "^(\\.{1,2}/.*)\\.js$" : "$1"
+  },
+  "transform" : {
+    "^.+\\.tsx?$" : [
+      "ts-jest",
+      {
+        "useESM" : true
+      }
+    ]
+  }
 }

package.json

@@ -1,13 +1,21 @@
 {
   "name": "@hedgedoc/html-to-react",
-  "version": "1.5.0",
+  "version": "2.0.0-esm",
   "description": "Parse HTML into React components",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.cjs"
+  },
+  "type": "module",
   "scripts": {
     "test": "jest",
-    "build": "tsc -p tsconfig.build.json",
-    "prepublish": "rm -rf dist && yarn lint && yarn build && yarn test",
+    "build": "rm -rf dist && microbundle",
+    "prepublish": "yarn lint && yarn build && yarn test",
     "lint": "eslint src --ext .ts",
     "lint:fix": "eslint --fix --ext .ts src"
   },
@@ -43,6 +51,7 @@
     "eslint-plugin-jest": "27.2.1",
     "eslint-plugin-prettier": "4.2.1",
     "jest": "29.5.0",
+    "microbundle": "0.15.1",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/convertHtmlToReact.ts

@@ -5,10 +5,10 @@
  */
 
 import { parseDocument } from 'htmlparser2'
-import { processNodes } from './processNodes'
+import { processNodes } from './processNodes.js'
 import { ReactElement } from 'react'
 import { Document } from 'domhandler'
-import { NodeToReactElementTransformer } from './NodeToReactElementTransformer'
+import { NodeToReactElementTransformer } from './NodeToReactElementTransformer.js'
 
 export interface ParserOptions {
   decodeEntities?: boolean

src/convertNodeToReactElement.ts

@@ -7,10 +7,10 @@
 import { ReactElement } from 'react'
 import { Node } from 'domhandler'
 import { ElementType } from 'domelementtype'
-import { processTextNode } from './elementTypes/ProcessTextNode'
-import { processTagNode } from './elementTypes/ProcessTagNode'
-import { processStyleNode } from './elementTypes/ProcessStyleNode'
-import { NodeToReactElementTransformer } from './NodeToReactElementTransformer'
+import { processTextNode } from './elementTypes/ProcessTextNode.js'
+import { processTagNode } from './elementTypes/ProcessTagNode.js'
+import { processStyleNode } from './elementTypes/ProcessStyleNode.js'
+import { NodeToReactElementTransformer } from './NodeToReactElementTransformer.js'
 
 /**
  * Converts a htmlparser2 node to a React element

src/elementTypes/ProcessStyleNode.ts

@@ -5,7 +5,7 @@
  */
 
 import React, { ReactElement } from 'react'
-import { generatePropsFromAttributes } from '../utils/generatePropsFromAttributes'
+import { generatePropsFromAttributes } from '../utils/generatePropsFromAttributes.js'
 import { isText } from 'domhandler'
 import { isTag, Node } from 'domhandler'
 

src/elementTypes/ProcessTagNode.ts

@@ -5,12 +5,12 @@
  */
 
 import React, { ReactElement } from 'react'
-import { processNodes } from '../processNodes'
-import { generatePropsFromAttributes } from '../utils/generatePropsFromAttributes'
-import { isValidTagOrAttributeName } from '../utils/isValidTagOrAttributeName'
+import { processNodes } from '../processNodes.js'
+import { generatePropsFromAttributes } from '../utils/generatePropsFromAttributes.js'
+import { isValidTagOrAttributeName } from '../utils/isValidTagOrAttributeName.js'
 import { isTag, Node } from 'domhandler'
-import { VOID_ELEMENTS } from '../dom/elements/VoidElements'
-import { NodeToReactElementTransformer } from '../NodeToReactElementTransformer'
+import { VOID_ELEMENTS } from '../dom/elements/VoidElements.js'
+import { NodeToReactElementTransformer } from '../NodeToReactElementTransformer.js'
 
 /**
  * Converts any element (excluding style - see StyleElementType - and script) to a react element.

src/index.spec.tsx

@@ -5,11 +5,11 @@
  */
 
 import { renderToStaticMarkup } from 'react-dom/server'
-import { convertHtmlToReact, ParserOptions } from './convertHtmlToReact'
-import { convertNodeToReactElement } from './convertNodeToReactElement'
+import { convertHtmlToReact, ParserOptions } from './convertHtmlToReact.js'
+import { convertNodeToReactElement } from './convertNodeToReactElement.js'
 import { Document, isTag, isText } from 'domhandler'
-import { NodeToReactElementTransformer } from './NodeToReactElementTransformer'
-import { ReactElement } from 'react'
+import { NodeToReactElementTransformer } from './NodeToReactElementTransformer.js'
+import React, { ReactElement } from 'react'
 import { describe, expect, it } from '@jest/globals'
 
 const expectSameHtml = function (html: string, options: ParserOptions = {}) {

src/index.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-export { convertHtmlToReact, ParserOptions } from './convertHtmlToReact'
-export { convertNodeToReactElement } from './convertNodeToReactElement'
-export type { NodeToReactElementTransformer } from './NodeToReactElementTransformer'
-export { processNodes } from './processNodes'
+export { convertHtmlToReact, ParserOptions } from './convertHtmlToReact.js'
+export { convertNodeToReactElement } from './convertNodeToReactElement.js'
+export type { NodeToReactElementTransformer } from './NodeToReactElementTransformer.js'
+export { processNodes } from './processNodes.js'

src/processNodes.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { convertNodeToReactElement } from './convertNodeToReactElement'
+import { convertNodeToReactElement } from './convertNodeToReactElement.js'
 import { Node } from 'domhandler'
 import { ReactElement } from 'react'
-import { NodeToReactElementTransformer } from './NodeToReactElementTransformer'
+import { NodeToReactElementTransformer } from './NodeToReactElementTransformer.js'
 
 /**
  * Processes the nodes generated by htmlparser2 and convert them all into React elements

src/utils/generatePropsFromAttributes.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { mapHtmlAttributesToReactElementAttributes } from './mapHtmlAttributesToReactElementAttributes'
-import { convertInlineStyleToMap } from './convertInlineStyleToMap'
+import { mapHtmlAttributesToReactElementAttributes } from './mapHtmlAttributesToReactElementAttributes.js'
+import { convertInlineStyleToMap } from './convertInlineStyleToMap.js'
 
 /**
  * Generates props for a React element from an object of HTML attributes

src/utils/mapHtmlAttributesToReactElementAttributes.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import booleanAttributes from '../dom/attributes/booleanAttributes'
-import reactAttributes from '../dom/attributes/reactAttributes'
-import { isValidTagOrAttributeName } from './isValidTagOrAttributeName'
+import booleanAttributes from '../dom/attributes/booleanAttributes.js'
+import reactAttributes from '../dom/attributes/reactAttributes.js'
+import { isValidTagOrAttributeName } from './isValidTagOrAttributeName.js'
 
 /**
  * Returns the parsed attribute value taking into account things like boolean attributes

tsconfig.json

@@ -1,23 +1,24 @@
 {
   "compilerOptions": {
-    "target": "es2019",
+    "target": "esnext",
     "removeComments": true,
     "preserveConstEnums": true,
     "lib": [
-      "es2019",
+      "es2020",
       "dom"
     ],
     "declaration": true,
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "CommonJS",
-    "moduleResolution": "node",
+    "module": "esnext",
+    "moduleResolution": "NodeNext",
     "esModuleInterop": true,
-    "outDir": "dist",
-    "rootDir": "./src/",
+    "outDir": "dist/",
+    "rootDir": "./src",
     "allowJs": true,
-    "jsx": "react-jsx"
+    "sourceMap": true,
+    "jsx": "react"
   },
   "include": ["src"]
 }