feat: ship esm (#139)

.eslintrc.json

@@ -4,9 +4,9 @@
 		"project": "tsconfig.json"
 	},
 	"rules": {
+		"import/extensions": ["error", "ignorePackages"],
 		"no-restricted-globals": ["error", "document", "window", "location"],
 		"etc/throw-error": "off",
-		"etc/deprecation": "off",
 		"unicorn/import-index": "off",
 		"callback-return": "off"
 	}

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
 	"typescript.tsdk": "node_modules/typescript/lib",
+	"typescript.preferences.importModuleSpecifierEnding": "js",
 	"search.exclude": {
 		"lib": true,
 		"*.har": true,

package.json

@@ -4,6 +4,7 @@
 	"description": "Take SVG screenshots of DOM elements",
 	"main": "lib/index.js",
 	"sideEffects": false,
+	"type": "module",
 	"files": [
 		"lib"
 	],
@@ -30,7 +31,7 @@
 		"eslint": "eslint 'src/**/*.ts'",
 		"prettier": "prettier --check '**/*.{yml,ts,json}'",
 		"get-fixture": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node src/test/get-fixture.ts",
-		"test": "mocha --require source-map-support/register lib/test/test.js",
+		"test": "mocha src/test/test.ts",
 		"semantic-release": "semantic-release"
 	},
 	"mocha": {
@@ -39,7 +40,8 @@
 		"enableSourceMaps": true,
 		"watchFiles": [
 			"lib/**/*.js"
-		]
+		],
+		"loader": "ts-node/esm"
 	},
 	"commitlint": {
 		"extends": [
@@ -68,7 +70,7 @@
 		"@sourcegraph/prettierrc": "^3.0.3",
 		"@types/chai": "^4.2.18",
 		"@types/content-type": "^1.1.3",
-		"@types/lodash": "^4.14.169",
+		"@types/lodash-es": "^4.17.4",
 		"@types/mime-types": "^2.1.0",
 		"@types/mocha": "^8.2.2",
 		"@types/node": "^14.14.45",
@@ -86,8 +88,7 @@
 		"delay": "^4.4.0",
 		"eslint": "^7.24.0",
 		"husky": "^4.3.0",
-		"iconv-lite": "^0.6.2",
-		"lodash": "^4.17.20",
+		"lodash-es": "^4.17.21",
 		"mime-types": "^2.1.30",
 		"mocha": "^8.3.2",
 		"parcel-bundler": "^1.12.5",
@@ -99,7 +100,7 @@
 		"semantic-release": "^17.2.4",
 		"source-map-support": "^0.5.19",
 		"tagged-template-noop": "^2.1.1",
-		"ts-node": "^9.0.0",
+		"ts-node": "^9.1.1",
 		"typescript": "^4.2.4",
 		"xml-formatter": "^2.4.0"
 	},

src/accessibility.ts

@@ -1,5 +1,5 @@
-import { hasLabels, isHTMLElement } from './dom'
-import { TraversalContext } from './traversal'
+import { hasLabels, isHTMLElement } from './dom.js'
+import { TraversalContext } from './traversal.js'
 
 const isStandaloneFooter = (element: Element): boolean =>
 	!element.closest(

src/element.ts

@@ -1,6 +1,6 @@
 import cssValueParser from 'postcss-value-parser'
 
-import { getAccessibilityAttributes } from './accessibility'
+import { getAccessibilityAttributes } from './accessibility.js'
 import {
 	copyCssStyles,
 	isVisible,
@@ -11,28 +11,28 @@ import {
 	Side,
 	getBorderRadiiForSide,
 	calculateOverlappingCurvesFactor,
-} from './css'
+} from './css.js'
 import {
 	svgNamespace,
 	isHTMLAnchorElement,
 	isHTMLImageElement,
 	isHTMLInputElement,
 	isHTMLElement,
 	isSVGSVGElement,
-} from './dom'
-import { convertLinearGradient } from './gradients'
+} from './dom.js'
+import { convertLinearGradient } from './gradients.js'
 import {
 	createStackingLayers,
 	establishesStackingContext,
 	determineStackingLayer,
 	StackingLayers,
 	sortStackingLayerChildren,
 	cleanupStackingLayerChildren,
-} from './stacking'
-import { handleSvgNode } from './svg'
-import { copyTextStyles } from './text'
-import { TraversalContext, walkNode } from './traversal'
-import { doRectanglesIntersect, isTaggedUnionMember } from './util'
+} from './stacking.js'
+import { handleSvgNode } from './svg.js'
+import { copyTextStyles } from './text.js'
+import { TraversalContext, walkNode } from './traversal.js'
+import { doRectanglesIntersect, isTaggedUnionMember } from './util.js'
 
 export function handleElement(element: Element, context: Readonly<TraversalContext>): void {
 	const cleanupFunctions: (() => void)[] = []

src/gradients.ts

@@ -1,8 +1,8 @@
 /* eslint-disable id-length */
 import * as gradientParser from 'gradient-parser'
 
-import { svgNamespace } from './dom'
-import { TraversalContext } from './traversal'
+import { svgNamespace } from './dom.js'
+import { TraversalContext } from './traversal.js'
 
 const positionsForOrientation = (
 	orientation: gradientParser.Gradient['orientation']

src/index.ts

@@ -1,11 +1,11 @@
 import * as postcss from 'postcss'
 import cssValueParser from 'postcss-value-parser'
 
-import { isCSSFontFaceRule, unescapeStringValue } from './css'
-import { svgNamespace, xlinkNamespace } from './dom'
-import { createStackingLayers } from './stacking'
-import { DomToSvgOptions, walkNode } from './traversal'
-import { createIdGenerator } from './util'
+import { isCSSFontFaceRule, unescapeStringValue } from './css.js'
+import { svgNamespace, xlinkNamespace } from './dom.js'
+import { createStackingLayers } from './stacking.js'
+import { DomToSvgOptions, walkNode } from './traversal.js'
+import { createIdGenerator } from './util.js'
 
 export { DomToSvgOptions }
 
@@ -86,4 +86,4 @@ export function elementToSVG(element: Element, options?: DomToSvgOptions): XMLDo
 	return svgDocument
 }
 
-export { inlineResources } from './inline'
+export { inlineResources } from './inline.js'

src/inline.ts

@@ -1,10 +1,10 @@
 import * as postcss from 'postcss'
 import cssValueParser from 'postcss-value-parser'
 
-import { unescapeStringValue } from './css'
-import { isSVGImageElement, isSVGStyleElement, svgNamespace } from './dom'
-import { handleSvgNode } from './svg'
-import { withTimeout, assert } from './util'
+import { unescapeStringValue } from './css.js'
+import { isSVGImageElement, isSVGStyleElement, svgNamespace } from './dom.js'
+import { handleSvgNode } from './svg.js'
+import { withTimeout, assert } from './util.js'
 
 declare global {
 	interface SVGStyleElement extends LinkStyle {}

src/stacking.ts

@@ -1,5 +1,5 @@
-import { isInFlow, isInline, isPositioned } from './css'
-import { svgNamespace } from './dom'
+import { isInFlow, isInline, isPositioned } from './css.js'
+import { svgNamespace } from './dom.js'
 
 declare global {
 	interface CSSStyleDeclaration {

src/svg.ts

@@ -1,6 +1,6 @@
 import cssValueParser from 'postcss-value-parser'
 
-import { parseCSSLength } from './css'
+import { parseCSSLength } from './css.js'
 import {
 	isElement,
 	isSVGAnchorElement,
@@ -10,10 +10,10 @@ import {
 	isSVGTextContentElement,
 	isTextNode,
 	svgNamespace,
-} from './dom'
-import { copyTextStyles } from './text'
-import { TraversalContext } from './traversal'
-import { assert, diagonale } from './util'
+} from './dom.js'
+import { copyTextStyles } from './text.js'
+import { TraversalContext } from './traversal.js'
+import { assert, diagonale } from './util.js'
 
 /**
  * Recursively clone an `<svg>` element, inlining it into the output SVG document with the necessary transforms.