bump node

.github/workflows/test.yaml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [16.x, 18.x]
+        node: [18.x, 20.x]
         os: [ubuntu-latest, windows-latest]
 
     steps:

README.md

@@ -153,7 +153,6 @@ Licensed under the [MIT license](http://bezoerb.mit-license.org/).
 [browserstack-url]: https://automate.browserstack.com/public-build/WHRoUjI2QnRnb0dlUDVtaUpDbFFNdHJWVEVUT2VLdUZ0QVF6bWROT2Ntdz0tLWRzUmk1dkhwQnhZQThvTWNDVzJyL2c9PQ==--933d8c999a8c7868c7133144fdcd6ff2df8248d8
 [browserstack-image]: https://automate.browserstack.com/badge.svg?badge_key=WHRoUjI2QnRnb0dlUDVtaUpDbFFNdHJWVEVUT2VLdUZ0QVF6bWROT2Ntdz0tLWRzUmk1dkhwQnhZQThvTWNDVzJyL2c9PQ==--933d8c999a8c7868c7133144fdcd6ff2df8248d8
 
-
 ## License
 
 [MIT](https://bezoerb.mit-license.org/) © [Ben Zörb](http://sommerlaune.com)

babel.config.js → babel.config.cjs

@@ -9,7 +9,7 @@ module.exports = {
       {
         targets: {
           browsers: ['> 5%'],
-          node: '10',
+          node: '18',
         },
         exclude: ['transform-async-to-generator', 'transform-regenerator'],
         modules: false,

package.json

@@ -7,8 +7,9 @@
   "authors": [
     "Ben Zörb <[email protected]> (https://github.com/bezoerb)"
   ],
+  "type": "module",
   "engines": {
-    "node": ">= 12"
+    "node": ">= 18"
   },
   "scripts": {
     "clean": "rimraf lib dist es coverage",
@@ -28,17 +29,15 @@
     "dist",
     "src"
   ],
-  "main": "dist/text-metrics.js",
-  "umd:main": "dist/text-metrics.js",
-  "unpkg": "dist/text-metrics.js",
-  "module": "dist/text-metrics.mjs",
-  "esmodule": "dist/text-metrics.mjs",
-  "browser": "dist/text-metrics.js",
+  "source": "src/index.js",
   "exports": {
-    "import": "./dist/text-metrics.mjs",
-    "require": "./dist/text-metrics.js",
-    "default": "./dist/text-metrics.mjs"
+    "import": "./dist/text-metrics.js",
+    "require": "./dist/text-metrics.cjs",
+    "default": "./dist/text-metrics.js"
   },
+  "main": "./dist/text-metrics.cjs",
+  "module": "./dist/text-metrics.js",
+  "unpkg": "./dist/text-metrics.js",
   "keywords": [
     "browser",
     "javascript",
@@ -51,45 +50,38 @@
   ],
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.24.5",
     "@babel/node": "^7.22.19",
     "@babel/plugin-external-helpers": "^7.22.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-env": "^7.24.5",
     "@babel/register": "^7.22.15",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.7.0",
     "browserstack-runner": "^0.9.4",
     "canvas": "^2.11.2",
-    "core-js": "^3.33.0",
+    "core-js": "^3.37.1",
     "coveralls": "^3.1.1",
     "cssstyle": "^3.0.0",
-    "eslint": "^8.51.0",
-    "eslint-config-xo": "^0.43.1",
-    "eslint-plugin-ava": "^14.0.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-no-use-extend-native": "^0.5.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint": "^9.3.0",
+    "eslint-config-xo": "^0.45.0",
     "finalhandler": "^1.2.0",
-    "get-port": "^7.0.0",
+    "get-port": "^7.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-mock": "^29.7.0",
     "jest-util": "^29.7.0",
     "jsdom": "^22.1.0",
     "microbundle": "^0.15.1",
-    "prettier": "^3.0.3",
-    "regenerator-runtime": "^0.14.0",
-    "rimraf": "^5.0.5",
-    "selenium-webdriver": "^4.14.0",
+    "prettier": "^3.2.5",
+    "regenerator-runtime": "^0.14.1",
+    "rimraf": "^5.0.7",
+    "selenium-webdriver": "^4.21.0",
     "serve-static": "^1.15.0",
-    "sinon": "^16.1.0",
-    "xo": "^0.56.0"
+    "sinon": "^18.0.0",
+    "xo": "^0.58.0"
   },
   "prettier": {
     "trailingComma": "es5",
@@ -113,7 +105,8 @@
       "import/no-unassigned-import": 0,
       "unicorn/no-reduce": 0,
       "unicorn/prefer-module": 0,
-      "unicorn/prefer-string-replace-all": 0
+      "unicorn/prefer-string-replace-all": 0,
+      "unicorn/prevent-abbreviations": 0
     }
   },
   "npmName": "text-metrics",

src/index.compat.js

@@ -4,4 +4,4 @@ import 'core-js/modules/es6.array.from';
 import 'core-js/es6/object';
 import 'core-js/es6/map';
 
-export * from '.';
+export * from './index.js';

src/index.js

@@ -31,9 +31,7 @@ class TextMetrics {
     const styles = {...this.overwrites, ..._.normalizeOptions(overwrites)};
     const ws = _.prop(styles, 'white-space') || this.style.getPropertyValue('white-space');
 
-    if (!options) {
-      options = {};
-    }
+    options ||= {};
 
     if (!overwrites) {
       options = {};
@@ -53,8 +51,8 @@ class TextMetrics {
    * @param {object} overwrites
    * @returns {function}
    */
-  width(...args) {
-    const {text, options, overwrites, styles} = this.parseArgs(...args);
+  width(...arguments_) {
+    const {text, options, overwrites, styles} = this.parseArgs(...arguments_);
 
     if (!text) {
       return 0;
@@ -64,19 +62,19 @@ class TextMetrics {
     const letterSpacing = _.prop(styles, 'letter-spacing') || this.style.getPropertyValue('letter-spacing');
     const wordSpacing = _.prop(styles, 'word-spacing') || this.style.getPropertyValue('word-spacing');
     const addSpacing = _.addWordAndLetterSpacing(wordSpacing, letterSpacing);
-    const ctx = _.getContext2d(font);
+    const context = _.getContext2d(font);
     const styledText = _.getStyledText(text, this.style);
 
     if (options.multiline) {
       // eslint-disable-next-line unicorn/no-array-reduce
       return this.lines(styledText, options, overwrites).reduce((result, text) => {
-        const w = ctx.measureText(text).width + addSpacing(text);
+        const w = context.measureText(text).width + addSpacing(text);
 
         return Math.max(result, w);
       }, 0);
     }
 
-    return ctx.measureText(styledText).width + addSpacing(styledText);
+    return context.measureText(styledText).width + addSpacing(styledText);
   }
 
   /**
@@ -87,8 +85,8 @@ class TextMetrics {
    * @param {object} overwrites
    * @returns {number}
    */
-  height(...args) {
-    const {text, options, styles} = this.parseArgs(...args);
+  height(...arguments_) {
+    const {text, options, styles} = this.parseArgs(...arguments_);
 
     const lineHeight = Number.parseFloat(_.prop(styles, 'line-height') || this.style.getPropertyValue('line-height'));
 
@@ -104,8 +102,8 @@ class TextMetrics {
    * @param {object} overwrites
    * @returns {*}
    */
-  lines(...args) {
-    const {text, options, overwrites, styles} = this.parseArgs(...args);
+  lines(...arguments_) {
+    const {text, options, overwrites, styles} = this.parseArgs(...arguments_);
 
     const font = _.getFont(this.style, styles);
 
@@ -121,13 +119,13 @@ class TextMetrics {
     const wordBreak = _.prop(styles, 'word-break') || this.style.getPropertyValue('word-break');
     const letterSpacing = _.prop(styles, 'letter-spacing') || this.style.getPropertyValue('letter-spacing');
     const wordSpacing = _.prop(styles, 'word-spacing') || this.style.getPropertyValue('word-spacing');
-    const ctx = _.getContext2d(font);
+    const context = _.getContext2d(font);
     const styledText = _.getStyledText(text, this.style);
 
     // Different scenario when break-word is allowed
     if (wordBreak === 'break-all') {
       return _.computeLinesBreakAll({
-        ctx,
+        ctx: context,
         text: styledText,
         max,
         wordSpacing,
@@ -136,7 +134,7 @@ class TextMetrics {
     }
 
     return _.computeLinesDefault({
-      ctx,
+      ctx: context,
       text: styledText,
       max,
       wordSpacing,
@@ -152,8 +150,8 @@ class TextMetrics {
    * @param {object} overwrites
    * @returns {string} Pixelvalue e.g. 14px
    */
-  maxFontSize(...args) {
-    const {text, options, overwrites, styles} = this.parseArgs(...args);
+  maxFontSize(...arguments_) {
+    const {text, options, overwrites, styles} = this.parseArgs(...arguments_);
 
     // Simple compute function which adds the size and computes the with
     const compute = (size) => {
@@ -176,28 +174,28 @@ class TextMetrics {
 
     // Start with half the max size
     let size = Math.floor(max / 2);
-    let cur = compute(size);
+    let current = compute(size);
 
     // Compute next result based on first result
-    size = Math.floor((size / cur) * max);
-    cur = compute(size);
+    size = Math.floor((size / current) * max);
+    current = compute(size);
 
     // Happy cause we got it already
-    if (Math.ceil(cur) === max) {
+    if (Math.ceil(current) === max) {
       return size ? size + 'px' : undefined;
     }
 
     // Go on by increase/decrease pixels
-    const greater = cur > max && size > 0;
-    while (cur > max && size > 0) {
+    const greater = current > max && size > 0;
+    while (current > max && size > 0) {
       size -= 1;
-      cur = compute(size);
+      current = compute(size);
     }
 
     if (!greater) {
-      while (cur < max) {
-        cur = compute(size + 1);
-        if (cur > max) {
+      while (current < max) {
+        current = compute(size + 1);
+        if (current > max) {
           return size ? size + 'px' : undefined;
         }
 

src/utils.js

@@ -100,9 +100,7 @@ const DEFAULTS = {
  * @return {*}
  */
 function pxValue(value_, options) {
-  if (!options) {
-    options = {};
-  }
+  options ||= {};
 
   const baseFontSize = Number.parseInt(prop(options, 'base-font-size', 16), 10);
 
@@ -256,9 +254,7 @@ export function isObject(object) {
 export function getStyle(element, options) {
   const options_ = {...options};
   const {style} = options_;
-  if (!options) {
-    options = {};
-  }
+  options ||= {};
 
   if (isCSSStyleDeclaration(style)) {
     return style;
@@ -373,8 +369,8 @@ export function getText(element) {
  * @param defaultValue
  * @returns {*}
  */
-export function prop(src, attr, defaultValue) {
-  return (src && src[attr] !== undefined && src[attr]) || defaultValue;
+export function prop(source, attribute, defaultValue) {
+  return (source && source[attribute] !== undefined && source[attribute]) || defaultValue;
 }
 
 /**
@@ -403,18 +399,18 @@ export function normalizeOptions(options) {
  */
 export function getContext2d(font) {
   try {
-    const ctx = document.createElement('canvas').getContext('2d');
+    const context = document.createElement('canvas').getContext('2d');
     const dpr = window.devicePixelRatio || 1;
     const bsr =
-      ctx.webkitBackingStorePixelRatio ||
-      ctx.mozBackingStorePixelRatio ||
-      ctx.msBackingStorePixelRatio ||
-      ctx.oBackingStorePixelRatio ||
-      ctx.backingStorePixelRatio ||
+      context.webkitBackingStorePixelRatio ||
+      context.mozBackingStorePixelRatio ||
+      context.msBackingStorePixelRatio ||
+      context.oBackingStorePixelRatio ||
+      context.backingStorePixelRatio ||
       1;
-    ctx.font = font;
-    ctx.setTransform(dpr / bsr, 0, 0, dpr / bsr, 0, 0);
-    return ctx;
+    context.font = font;
+    context.setTransform(dpr / bsr, 0, 0, dpr / bsr, 0, 0);
+    return context;
   } catch (error) {
     throw new Error('Canvas support required' + error.message);
   }

test/SpecRunner.html

@@ -59,7 +59,7 @@
     </script>
 
     <!-- include source files here... -->
-    <script src="../dist/text-metrics.js"></script>
+    <script type="module" src="../dist/text-metrics.js"></script>
   </head>
 
   <body>

test/helpers/environment.js

@@ -1,11 +1,15 @@
-const fs = require('node:fs');
-const path = require('node:path');
-const {TestEnvironment} = require('jest-environment-jsdom');
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { TestEnvironment } from 'jest-environment-jsdom';
+import {fileURLToPath} from 'node:url';
+import path from 'node:path';
 
-const css = fs.readFileSync(path.join(__dirname, '../fixtures/bootstrap.css'), 'utf8');
-const html = fs.readFileSync(path.join(__dirname, '../fixtures/index.html'), 'utf8');
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-module.exports = class CustomEnvironment extends TestEnvironment {
+const css = readFileSync(join(__dirname, '../fixtures/bootstrap.css'), 'utf8');
+const html = readFileSync(join(__dirname, '../fixtures/index.html'), 'utf8');
+
+export default class CustomEnvironment extends TestEnvironment {
   constructor(config, options) {
     const {projectConfig = {}} = config;
     const {testEnvironmentOptions = {}} = projectConfig;

test/index.test.js

@@ -1,5 +1,5 @@
 /* eslint-env es6, browser, jest */
-import {init, utils} from '..';
+import {init, utils} from '../src/index.js';
 
 const {getContext2d} = utils;
 

test/utils.test.js

@@ -1,6 +1,6 @@
 /* eslint-env es6, browser, jest */
 import {CSSStyleDeclaration} from 'cssstyle';
-import {utils} from '..';
+import * as utils from '../src/utils.js';
 
 describe('Utils', () => {
   test('isElement', () => {