Apply linting rules.

.editorconfig

@@ -6,4 +6,4 @@ indent_size = 4
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-end_of_line = lf
+end_of_line = lf

.eslintignore

@@ -0,0 +1,5 @@
+!.*
+assets/js/prism.js
+/dist/
+docs/
+node_modules/

.eslintrc.json

@@ -22,13 +22,16 @@
 		"brace-style": [1, "stroustrup"],
 		"no-mixed-spaces-and-tabs": [1, "smart-tabs"],
 		"quotes": [1, "double", "avoid-escape"],
-        "spaced-comment": [1, "always", {
-            "block": {
-                "exceptions": ["*"]
-            }
+		"spaced-comment": [1, "always", {
+			"block": {
+				"exceptions": ["*"]
+			}
 		}],
 		"arrow-spacing": 1,
 		"comma-spacing": 1,
-		"keyword-spacing": 1
+		"keyword-spacing": 1,
+		"eol-last": 1,
+		"no-trailing-spaces": 1,
+		"space-before-function-paren": 1
 	}
 }

CONTRIBUTING.md

@@ -28,9 +28,10 @@ All of the above also have `build` versions (e.g. `npm run build:js` or `npm run
 
 Please install an ESLint plugin for your editor. There is an `.eslintrc.json` file in the repo which encodes most of the coding style of the project.
 
+To lint and format the project, run `npm run lint`.
+
 Here are a few other guidelines that cannot be enforced via ESLint:
 
-- When you define a function, use a space between the opening paren and its name. That way we can search for "functionName (" and find its definition immediately, instead of having to wade through calls to the function.
 - Prefer single-word names over multi-word names. 3+ word names are especially frowned upon.
 - camelCase over underscore_case, with few exceptions.
 - Don't be afraid of unicode characters when appropriate, except on user-facing names. E.g. use ε over epsilon internally, but not ΔΕ over deltaE in the public-facing method name.

apps/blackwhite/index.js

@@ -10,7 +10,7 @@ for (let algo in contrastAlgorithms) {
 const root = document.documentElement;
 let previousAlgo;
 
-function computeTextColor() {
+function computeTextColor () {
 	let algo = contrast_algorithm.value;
 
 	previous_algo.textContent = previousAlgo;
@@ -29,7 +29,7 @@ function computeTextColor() {
 	previousAlgo = algo;
 }
 
-function drawColors() {
+function drawColors () {
 	colors.innerHTML = "";
 	let granularity = Math.cbrt(number_of_colors.value);
 	// root.style.setProperty("--granularity", granularity);
@@ -56,7 +56,7 @@ function drawColors() {
 	computeTextColor();
 }
 
-function render(evt) {
+function render (evt) {
 	if (!evt || evt.target === number_of_colors) {
 		number_of_colors.title = number_of_colors.value;
 		drawColors();
@@ -77,4 +77,4 @@ function render(evt) {
 
 document.body.addEventListener("input", render);
 
-render();
+render();

apps/convert/convert.js

@@ -1,11 +1,11 @@
 const favicon = document.querySelector('link[rel="shortcut icon"]');
 const supportsP3 = window.CSS && CSS.supports("color", "color(display-p3 0 1 0)");
 
-function getURLParams() {
+function getURLParams () {
 	return Object.fromEntries(new URL(location).searchParams);
 }
 
-function update() {
+function update () {
 	try {
 		var color = new Color(colorInput.value);
 		colorInput.setCustomValidity("");
@@ -52,7 +52,7 @@ function update() {
 
 			if (id === "srgb" || (id === "p3") && supportsP3) {
 				colorOutput.style.background = converted;
-				favicon.href = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" fill="${converted}" /></svg>`
+				favicon.href = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" fill="${converted}" /></svg>`;
 			}
 
 			let precision = precisionInput.value;
@@ -88,7 +88,7 @@ let urlParams = getURLParams();
 colorInput.addEventListener("input", update);
 precisionInput.addEventListener("input", update);
 
-function updateFromURL() {
+function updateFromURL () {
 	colorInput.value = urlParams.color || colorInput.value;
 	precisionInput.value = urlParams.precision || precisionInput.value;
 	update();
@@ -111,8 +111,8 @@ document.body.addEventListener("click", async evt => {
 			await wait(1000);
 			copyButton.textContent = "📋";
 		}
-		catch(e) {
+		catch (e) {
 			alert("Failed to copy to clipboard");
 		}
 	}
-})
+});

apps/named/index.js

@@ -11,7 +11,7 @@ for (let method in Color.prototype) {
 	}
 }
 
-function render() {
+function render () {
 	let color;
 
 	try {
@@ -59,4 +59,4 @@ function render() {
 }
 
 deltaE_method.oninput = input_color.oninput = render;
-render();
+render();

apps/palette/index.js

@@ -6,9 +6,9 @@ let increments = [
 	-90, +90,
 	-45, +45, -135, +135,
 	-22.5, +22.5, -67.5, +67.5, -112.5, +112.5, -157.5, +157.5, -202.5, +202.5, -247.5, +247.5, -292.5, +292.5, -337.5, +337.5,
-]
+];
 
-function render() {
+function render () {
 	let color = new Color(accent_color.value).to("oklch");
 	let n = number_of_colors.value - 1;
 
@@ -32,4 +32,4 @@ function render() {
 accent_color.addEventListener("input", render);
 number_of_colors.addEventListener("input", render);
 
-render();
+render();

apps/picker-mavo/index.js

@@ -39,11 +39,11 @@ window.color_inGamut = function (color, o) {
 	return inGamut(color, o);
 };
 
-function has_color_resolved(color) {
+function has_color_resolved (color) {
 	return color && has_spaceId_resolved(color.spaceId);
 }
 
-function has_spaceId_resolved(spaceId) {
+function has_spaceId_resolved (spaceId) {
 	return spaceId && (spaceId + "").trim() && spaceId != "[id]";
 }
 
@@ -74,9 +74,9 @@ window.getColorSpace = function (spaceId) {
 	spaceId = Mavo.clone(spaceId);
 
 	return ColorSpace.get(spaceId);
-}
+};
 
-window.getSliderSteps = function(spaceId, coords, coord_meta, alpha) {
+window.getSliderSteps = function (spaceId, coords, coord_meta, alpha) {
 	if (!has_spaceId_resolved(spaceId)) {
 		return;
 	}
@@ -119,7 +119,7 @@ window.getSliderSteps = function(spaceId, coords, coord_meta, alpha) {
 	ret.push(colorSteps);
 
 	return ret;
-}
+};
 
 let handle;
 document.body.addEventListener("mv-change", evt => {
@@ -136,7 +136,7 @@ document.body.addEventListener("mv-change", evt => {
 	}
 });
 
-window.CSS_color_to_LCH = function CSS_color_to_LCH(str) {
+window.CSS_color_to_LCH = function CSS_color_to_LCH (str) {
 	str = str || prompt("Enter any CSS color");
 
 	if (!str) {
@@ -160,7 +160,7 @@ window.CSS_color_to_LCH = function CSS_color_to_LCH(str) {
 		alert(e.message);
 		return;
 	}
-}
+};
 
 // Select text in readonly input fields when you focus them
 document.addEventListener("click", evt => {

apps/picker/index.js

@@ -6,7 +6,7 @@ if (!globalThis.requestIdleCallback) {
 }
 
 let app = createApp({
-	data() {
+	data () {
 		let ret = {
 			alpha: 100,
 			precision: 3,
@@ -65,7 +65,7 @@ let app = createApp({
 			return this.color.display({precision: this.precision}) + "";
 		},
 		color_srgb () {
-			return this.color.to('srgb');
+			return this.color.to("srgb");
 		},
 		serialized_color () {
 			return this.color.toString({precision: this.precision});
@@ -133,9 +133,9 @@ let app = createApp({
 			});
 		}
 	}
-}).mount('#app')
+}).mount("#app");
 
-window.CSS_color_to_LCH = function CSS_color_to_LCH(str) {
+window.CSS_color_to_LCH = function CSS_color_to_LCH (str) {
 	str = str || prompt("Enter any CSS color");
 
 	if (!str) {
@@ -152,7 +152,7 @@ window.CSS_color_to_LCH = function CSS_color_to_LCH(str) {
 		alert(e.message);
 		return;
 	}
-}
+};
 
 // Select text in readonly input fields when you focus them
 document.addEventListener("click", evt => {

assets/js/docs.js

@@ -40,7 +40,7 @@ if (current) {
 	}
 }
 
-function idify(str) {
+function idify (str) {
 	// from Mavo.Functions.idify()
 	return str
 			.normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Convert accented letters to ASCII
@@ -49,7 +49,7 @@ function idify(str) {
 			.toLowerCase();
 }
 
-function makePageToc(pageToc) {
+function makePageToc (pageToc) {
 	pageToc.textContent = "";
 
 	// Make toc for current page
@@ -120,7 +120,7 @@ if (location.pathname.indexOf("/spaces") > -1) {
 		data: {space: spaces}
 	});
 
-	Mavo.hooks.add("getdata-end", function(env) {
+	Mavo.hooks.add("getdata-end", function (env) {
 		if (this.id !== "colorSpaces") {
 			return;
 		}
@@ -149,4 +149,4 @@ if (location.pathname.indexOf("/spaces") > -1) {
 	// 	Mavo.all.colorSpaces.render(Mavo.all.colorSpaces.getData());
 
 	// }
-}
+}

assets/js/index.js

@@ -80,4 +80,4 @@ for (let code of $$(":not(pre) > code")) {
 			around: code
 		});
 	}
-}
+}

color.js

@@ -1,7 +1,7 @@
 // Import all modules of Color.js and assign Color to a global,
 // for easier testing and experimentation without building
 import Color from "./src/index.js";
-import * as util from "./src/util.js"
+import * as util from "./src/util.js";
 
 window.Color = window.Color || Color;
 

elements/color-swatch/color-swatch.js

@@ -1,9 +1,9 @@
 import Color from "../../src/index.js";
 
 export default class ColorSwatch extends HTMLElement {
-	#swatch
+	#swatch;
 
-	constructor() {
+	constructor () {
 		super();
 		this.attachShadow({mode: "open"});
 		this.shadowRoot.innerHTML = `<style>@import url("./color-swatch.css");</style>
@@ -12,26 +12,26 @@ export default class ColorSwatch extends HTMLElement {
 		this.#swatch = this.shadowRoot.querySelector("#swatch");
 	}
 
-	connectedCallback() {
+	connectedCallback () {
 		this.#render();
 		ColorSwatch.#mo.observe(this, {childList: true, subtree: true, characterData: true});
 	}
 
-	#value
-	get value() {
+	#value;
+	get value () {
 		return this.#value;
 	}
-	set value(value) {
+	set value (value) {
 		this.#value = value;
 		this.#render();
 	}
 
-	#color
-	get color() {
+	#color;
+	get color () {
 		return this.#color;
 	}
 
-	#render() {
+	#render () {
 		let colorText = this.value || this.textContent;
 
 		try {
@@ -45,11 +45,11 @@ export default class ColorSwatch extends HTMLElement {
 		}
 	}
 
-	static get observedAttributes() {
+	static get observedAttributes () {
 		return ["value"];
 	}
 
-	attributeChangedCallback(name, newValue) {
+	attributeChangedCallback (name, newValue) {
 		if (name === "value") {
 			this.value = newValue;
 		}
@@ -67,8 +67,8 @@ export default class ColorSwatch extends HTMLElement {
 				target.#render();
 			}
 		}
-	})
+	});
 }
 
 
-customElements.define('color-swatch', ColorSwatch);
+customElements.define("color-swatch", ColorSwatch);

get/index.js

@@ -12,7 +12,7 @@ $("a[download]")?.addEventListener("click", evt => {
 	evt.target.href = createURL(code.textContent);
 });
 
-function createURL(code, type = "text/javascript") {
+function createURL (code, type = "text/javascript") {
 	var blob = new Blob([code], {type});
 
 	return URL.createObjectURL(blob);