diff --git a/jest.config.json b/jest.config.json index a89966f..8e7c76f 100644 --- a/jest.config.json +++ b/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 + } + ] + } } diff --git a/package.json b/package.json index 998dcc2..1c8d51b 100644 --- a/package.json +++ b/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", diff --git a/src/convertHtmlToReact.ts b/src/convertHtmlToReact.ts index 07aaa27..3f0e845 100644 --- a/src/convertHtmlToReact.ts +++ b/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 diff --git a/src/convertNodeToReactElement.ts b/src/convertNodeToReactElement.ts index 8f99745..2afd43c 100644 --- a/src/convertNodeToReactElement.ts +++ b/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 diff --git a/src/elementTypes/ProcessStyleNode.ts b/src/elementTypes/ProcessStyleNode.ts index ef1ad0c..8561701 100644 --- a/src/elementTypes/ProcessStyleNode.ts +++ b/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' diff --git a/src/elementTypes/ProcessTagNode.ts b/src/elementTypes/ProcessTagNode.ts index c7ccbca..688417a 100644 --- a/src/elementTypes/ProcessTagNode.ts +++ b/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. diff --git a/src/index.spec.tsx b/src/index.spec.tsx index a625764..ebdacdf 100644 --- a/src/index.spec.tsx +++ b/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 = {}) { diff --git a/src/index.ts b/src/index.ts index 81b4d4b..1dda605 100644 --- a/src/index.ts +++ b/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' diff --git a/src/processNodes.ts b/src/processNodes.ts index 8be20fa..e72bb25 100644 --- a/src/processNodes.ts +++ b/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 diff --git a/src/utils/generatePropsFromAttributes.ts b/src/utils/generatePropsFromAttributes.ts index 7aa3d7c..96e4027 100644 --- a/src/utils/generatePropsFromAttributes.ts +++ b/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 diff --git a/src/utils/mapHtmlAttributesToReactElementAttributes.ts b/src/utils/mapHtmlAttributesToReactElementAttributes.ts index 055dc61..41c959f 100644 --- a/src/utils/mapHtmlAttributesToReactElementAttributes.ts +++ b/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 diff --git a/tsconfig.build.json b/tsconfig.build.json deleted file mode 100644 index 5288a1d..0000000 --- a/tsconfig.build.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "exclude": [ - "src/**/*.spec.ts", - "src/**/*.test.ts", - "src/**/*.spec.tsx", - "src/**/*.test.tsx" - ] -} diff --git a/tsconfig.build.json.license b/tsconfig.build.json.license deleted file mode 100644 index c223474..0000000 --- a/tsconfig.build.json.license +++ /dev/null @@ -1,3 +0,0 @@ -SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) - -SPDX-License-Identifier: CC0-1.0 diff --git a/tsconfig.json b/tsconfig.json index df17b3d..6714e62 100644 --- a/tsconfig.json +++ b/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"] }