Add rule to enforce function spacing

.eslintrc.json

@@ -31,6 +31,7 @@
 		"comma-spacing": 1,
 		"keyword-spacing": 1,
 		"eol-last": 1,
-		"no-trailing-spaces": 1
+		"no-trailing-spaces": 1,
+		"space-before-function-paren": 1
 	}
 }

CONTRIBUTING.md

@@ -32,7 +32,6 @@ 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();

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("");
@@ -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();

apps/named/index.js

@@ -11,7 +11,7 @@ for (let method in Color.prototype) {
 	}
 }
 
-function render() {
+function render () {
 	let color;
 
 	try {

apps/palette/index.js

@@ -8,7 +8,7 @@ let increments = [
 	-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;
 

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]";
 }
 
@@ -76,7 +76,7 @@ window.getColorSpace = function (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;
 	}
@@ -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) {

apps/picker/index.js

@@ -6,7 +6,7 @@ if (!globalThis.requestIdleCallback) {
 }
 
 let app = createApp({
-	data() {
+	data () {
 		let ret = {
 			alpha: 100,
 			precision: 3,
@@ -135,7 +135,7 @@ let app = createApp({
 	}
 }).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) {

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;
 		}

elements/color-swatch/color-swatch.js

@@ -3,7 +3,7 @@ import Color from "../../src/index.js";
 export default class ColorSwatch extends HTMLElement {
 	#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() {
+	get value () {
 		return this.#value;
 	}
-	set value(value) {
+	set value (value) {
 		this.#value = value;
 		this.#render();
 	}
 
 	#color;
-	get 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;
 		}

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);

notebook/color-notebook.js

@@ -119,7 +119,7 @@ export default class Notebook {
 		return win;
 	}
 
-	static rewrite(code) {
+	static rewrite (code) {
 		let ast = acorn.parse(code, acornOptions);
 		let env = new Set();
 		let details = {};
@@ -366,7 +366,7 @@ export default class Notebook {
 	}
 }
 
-export function walk(pre, callback, filter) {
+export function walk (pre, callback, filter) {
 	let walker = document.createTreeWalker(pre, filter);
 	let node;
 
@@ -379,7 +379,7 @@ export function walk(pre, callback, filter) {
 	}
 }
 
-function getNodePosition(node, code, ast) {
+function getNodePosition (node, code, ast) {
 	let {start, end} = node;
 	let before = code.slice(0, start);
 	let line = before.split(/\r?\n/);
@@ -556,7 +556,7 @@ export function serialize (ret, color, win = window) {
 	return element;
 }
 
-function lightOrDark(color) {
+function lightOrDark (color) {
 	return color.luminance > .5 || color.alpha < .5? "light" : "dark";
 }
 
@@ -576,7 +576,7 @@ Notebook.intersectionObserver = new IntersectionObserver(entries => {
 	}
 });
 
-export function initAll(container = document) {
+export function initAll (container = document) {
 	let pres = $$(".language-js, .language-javascript", container).flatMap(el => {
 		let ret = $$("pre > code", el);
 		let ancestor =  el.closest("pre > code");

notebook/repl.js

@@ -5,15 +5,15 @@ let $ = Bliss;
 
 let container = $("[property=content]");
 
-document.addEventListener("mv-markdown-render", function(evt) {
+document.addEventListener("mv-markdown-render", function (evt) {
 	container.dirty = false;
 
 	requestAnimationFrame(() => {
 		initAll(evt.target);
 	});
 });
 
-function updateMarkdown() {
+function updateMarkdown () {
 	// Update code snippets with actual contents
 	let node = Mavo.all.colorNotebook.root.children.content;
 	let value = node.value;
@@ -34,7 +34,7 @@ function updateMarkdown() {
 	}
 }
 
-Mavo.hooks.add("save-start", function() {
+Mavo.hooks.add("save-start", function () {
 	if (this.id === "colorNotebook") {
 		updateMarkdown();
 	}

src/adapt.js

@@ -7,7 +7,7 @@ export const WHITES = {
 	D65: [0.3127 / 0.3290, 1.00000, (1.0 - 0.3127 - 0.3290) / 0.3290],
 };
 
-export function getWhite(name) {
+export function getWhite (name) {
 	if (Array.isArray(name)) {
 		return name;
 	}

src/chromaticity.js

@@ -14,7 +14,7 @@ export function xy (color) {
 	return [X / sum, Y / sum];
 }
 
-export function register(Color) {
+export function register (Color) {
 	// no setters, as lightness information is lost
 	// when converting color to chromaticity
 	Object.defineProperty(Color.prototype, "uv", {

src/clone.js

@@ -1,4 +1,4 @@
-export default function clone(color) {
+export default function clone (color) {
 	return {
 		space: color.space,
 		coords: color.coords.slice(),

src/color.js

@@ -77,11 +77,11 @@ export default class Color {
 
 	#space;
 
-	get space() {
+	get space () {
 		return this.#space;
 	}
 
-	get spaceId() {
+	get spaceId () {
 		return this.#space.id;
 	}
 
@@ -133,7 +133,7 @@ export default class Color {
 			}
 			else if (returns === "function<color>") {
 				let f = ret;
-				ret = function(...args) {
+				ret = function (...args) {
 					let ret = f(...args);
 					return Color.get(ret);
 				};
@@ -158,7 +158,7 @@ export default class Color {
 		}
 	}
 
-	static defineFunctions(o) {
+	static defineFunctions (o) {
 		for (let name in o) {
 			Color.defineFunction(name, o[name], o[name]);
 		}

src/distance.js

@@ -3,7 +3,7 @@ import ColorSpace from "./space.js";
 /**
  * Euclidean distance of colors in an arbitrary color space
  */
-export default function distance(color1, color2, space = "lab") {
+export default function distance (color1, color2, space = "lab") {
 	space = ColorSpace.get(space);
 
 	let coords1 = space.from(color1);

src/hooks.js

@@ -12,7 +12,7 @@ export class Hooks {
 			return;
 		}
 
-		(Array.isArray(name)? name : [name]).forEach(function(name) {
+		(Array.isArray(name)? name : [name]).forEach(function (name) {
 			this[name] = this[name] || [];
 
 			if (callback) {
@@ -23,7 +23,7 @@ export class Hooks {
 
 	run (name, env) {
 		this[name] = this[name] || [];
-		this[name].forEach(function(callback) {
+		this[name].forEach(function (callback) {
 			callback.call(env && env.context? env.context : env, env);
 		});
 	}

src/interpolation.js

@@ -209,7 +209,7 @@ export function isRange (val) {
 
 defaults.interpolationSpace = "lab";
 
-export function register(Color) {
+export function register (Color) {
 	Color.defineFunction("mix", mix, {returns: "color"});
 	Color.defineFunction("range", range, {returns: "function<color>"});
 	Color.defineFunction("steps", steps, {returns: "array<color>"});