fix: add .js to imports so they work within browsers (#240)

Author: jogibear9988

package.json

@@ -58,7 +58,10 @@
   },
   "jest": {
     "testEnvironment": "node",
-    "coverageProvider": "v8"
+    "coverageProvider": "v8",
+    "moduleNameMapper": {
+        "(.+)\\.js": "$1"
+    }
   },
   "babel": {
     "presets": [

src/conversion.ts

@@ -1,5 +1,5 @@
-import { HSL, HSV, Numberify, RGB } from './interfaces';
-import { bound01, pad2 } from './util';
+import { HSL, HSV, Numberify, RGB } from './interfaces.js';
+import { bound01, pad2 } from './util.js';
 
 // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
 // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

src/format-input.ts

@@ -1,8 +1,14 @@
 /* eslint-disable @typescript-eslint/no-redundant-type-constituents */
-import { convertHexToDecimal, hslToRgb, hsvToRgb, parseIntFromHex, rgbToRgb } from './conversion';
-import { names } from './css-color-names';
-import { HSL, HSLA, HSV, HSVA, RGB, RGBA } from './interfaces';
-import { boundAlpha, convertToPercentage } from './util';
+import {
+  convertHexToDecimal,
+  hslToRgb,
+  hsvToRgb,
+  parseIntFromHex,
+  rgbToRgb,
+} from './conversion.js';
+import { names } from './css-color-names.js';
+import { HSL, HSLA, HSV, HSVA, RGB, RGBA } from './interfaces.js';
+import { boundAlpha, convertToPercentage } from './util.js';
 
 /**
  * Given a string or object, convert that input to RGB

src/from-ratio.ts

@@ -1,6 +1,6 @@
-import { TinyColor } from './index';
-import { RGBA } from './interfaces';
-import { convertToPercentage } from './util';
+import { TinyColor } from './index.js';
+import { RGBA } from './interfaces.js';
+import { convertToPercentage } from './util.js';
 
 export interface RatioInput {
   r: number | string;

src/index.ts

@@ -1,8 +1,8 @@
-import { numberInputToObject, rgbaToHex, rgbToHex, rgbToHsl, rgbToHsv } from './conversion';
-import { names } from './css-color-names';
+import { numberInputToObject, rgbaToHex, rgbToHex, rgbToHsl, rgbToHsv } from './conversion.js';
+import { names } from './css-color-names.js';
 import { inputToRGB } from './format-input';
-import { HSL, HSLA, HSV, HSVA, Numberify, RGB, RGBA } from './interfaces';
-import { bound01, boundAlpha, clamp01 } from './util';
+import { HSL, HSLA, HSV, HSVA, Numberify, RGB, RGBA } from './interfaces.js';
+import { bound01, boundAlpha, clamp01 } from './util.js';
 
 export interface TinyColorOptions {
   format: string;

src/public_api.ts

@@ -1,13 +1,13 @@
-import { tinycolor } from './index';
-export * from './index';
-export * from './css-color-names';
-export * from './readability';
-export * from './to-ms-filter';
-export * from './from-ratio';
-export * from './format-input';
-export * from './random';
-export * from './interfaces';
-export * from './conversion';
+import { tinycolor } from './index.js';
+export * from './index.js';
+export * from './css-color-names.js';
+export * from './readability.js';
+export * from './to-ms-filter.js';
+export * from './from-ratio.js';
+export * from './format-input.js';
+export * from './random.js';
+export * from './interfaces.js';
+export * from './conversion.js';
 
 // kept for backwards compatability with v1
 export default tinycolor;

src/random.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-redundant-type-constituents */
 // randomColor by David Merfield under the CC0 license
 // https://github.com/davidmerfield/randomColor/
-import { TinyColor } from './index';
-import { HSVA } from './interfaces';
+import { TinyColor } from './index.js';
+import { HSVA } from './interfaces.js';
 
 export interface RandomOptions {
   seed?: number;

src/readability.ts

@@ -1,4 +1,4 @@
-import { ColorInput, TinyColor } from './index';
+import { ColorInput, TinyColor } from './index.js';
 
 // Readability Functions
 // ---------------------

src/to-ms-filter.ts

@@ -1,5 +1,5 @@
-import { rgbaToArgbHex } from './conversion';
-import { ColorInput, TinyColor } from './index';
+import { rgbaToArgbHex } from './conversion.js';
+import { ColorInput, TinyColor } from './index.js';
 /**
  * Returns the color represented as a Microsoft filter for use in old versions of IE.
  */

src/umd_api.ts

@@ -1,10 +1,10 @@
-import { names } from './css-color-names';
-import { inputToRGB, isValidCSSUnit, stringInputToObject } from './format-input';
-import { fromRatio, legacyRandom } from './from-ratio';
-import { TinyColor, tinycolor } from './index';
-import { random } from './random';
-import { mostReadable, readability } from './readability';
-import { toMsFilter } from './to-ms-filter';
+import { names } from './css-color-names.js';
+import { inputToRGB, isValidCSSUnit, stringInputToObject } from './format-input.js';
+import { fromRatio, legacyRandom } from './from-ratio.js';
+import { TinyColor, tinycolor } from './index.js';
+import { random } from './random.js';
+import { mostReadable, readability } from './readability.js';
+import { toMsFilter } from './to-ms-filter.js';
 
 export interface TinyColorUMD {
   (): TinyColor;