on_the_money 0.3.0

package/src/core/The.js

@@ -0,0 +1,305 @@
+export default class The {
+	static dictionary = {};
+	static locale =
+		typeof navigator !== "undefined" ? navigator.language : "en-US";
+	static prefix = "otm:";
+
+	static the(...args) {
+		if (args.length === 0) {
+			throw new TypeError("the(): missing args");
+		}
+		if (args[0] instanceof Element) {
+			return The.#on(args[0], args.slice(1));
+		}
+		return The.#on(document.body, args);
+	}
+
+	static #on(el, args) {
+		const [a, b] = args;
+		const isGlobal = el === document.body;
+
+		if (args.length === 1 && typeof a === "string") {
+			return The.#get(el, a);
+		}
+		if (args.length === 2 && typeof a === "string") {
+			if (typeof b === "undefined") {
+				throw new TypeError(
+					`the(${JSON.stringify(a)}, undefined): val is required for set`,
+				);
+			}
+			The.#set(el, a, b);
+			if (isGlobal) localStorage.setItem(`${The.prefix}${a}`, b);
+			return el;
+		}
+		if (args.length === 1 && a?.constructor === Object) {
+			for (const [k, v] of Object.entries(a)) {
+				The.#set(el, k, v);
+				if (isGlobal) localStorage.setItem(`${The.prefix}${k}`, v);
+			}
+			return el;
+		}
+
+		throw new TypeError(
+			`the(): unrecognized call shape (${args.map((x) => typeof x).join(", ")})`,
+		);
+	}
+
+	static flat(obj, sep = "_") {
+		if (obj === null || typeof obj !== "object") {
+			throw new TypeError("the.flat: input must be an object");
+		}
+		const out = {};
+		const walk = (val, prefix) => {
+			if (val === null || typeof val !== "object") {
+				out[prefix] = val;
+				return;
+			}
+			for (const [k, v] of Object.entries(val)) {
+				walk(v, prefix ? `${prefix}${sep}${k}` : k);
+			}
+		};
+		walk(obj, "");
+		return out;
+	}
+
+	static form(formEl) {
+		const obj = {};
+		const controls = formEl.querySelectorAll("input, select, textarea");
+
+		for (const el of controls) {
+			const name = el.name;
+			if (!name || el.disabled) continue;
+
+			const type = (el.type || "text").toLowerCase();
+			if (type === "submit" || type === "button" || type === "reset") continue;
+
+			if (type === "checkbox" || type === "radio") {
+				const checked = el.checked ?? el.hasAttribute("checked");
+				if (!checked) continue;
+			}
+
+			const value = el.value ?? el.getAttribute("value") ?? "";
+			The.#assign(obj, name, value);
+		}
+		return obj;
+	}
+
+	static #assign(obj, key, value) {
+		const parts = key.split(/[\[\]]/).filter(Boolean);
+		let current = obj;
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+			const isLast = i === parts.length - 1;
+			if (isLast) {
+				if (current[part] !== undefined) {
+					if (!Array.isArray(current[part])) current[part] = [current[part]];
+					current[part].push(value);
+				} else {
+					current[part] = value;
+				}
+			} else {
+				current[part] = current[part] || {};
+				current = current[part];
+			}
+		}
+	}
+
+	static _t(key, options = {}) {
+		const isNode =
+			typeof Node !== "undefined" ? key instanceof Node : key?.nodeType;
+		if (isNode) {
+			const elements = key.querySelectorAll
+				? [key, ...key.querySelectorAll("[data-i18n]")]
+				: [key];
+			for (const el of elements) {
+				if (el.hasAttribute?.("data-i18n")) {
+					const k = el.getAttribute("data-i18n");
+					const params = {};
+					for (const attr of el.attributes) {
+						if (
+							attr.name.startsWith("data-i18n-") &&
+							attr.name !== "data-i18n-type"
+						) {
+							const paramName = attr.name.replace("data-i18n-", "");
+							params[paramName] = attr.value;
+						}
+					}
+					const type = el.getAttribute("data-i18n-type");
+					el.textContent = The._t(k, { ...params, type });
+				}
+			}
+			return key;
+		}
+
+		if (!key) {
+			The._t(document.body);
+			return "";
+		}
+
+		let entry = The.dictionary[key];
+		if (!entry) return key;
+
+		if (typeof entry === "object") {
+			const qty = options.qty !== undefined ? Number(options.qty) : 0;
+			const rule = new Intl.PluralRules(The.locale).select(qty);
+			entry = entry[rule] || entry.other || key;
+		}
+
+		if (typeof entry !== "string") return key;
+
+		let result = entry;
+		for (const [k, v] of Object.entries(options)) {
+			let val = v;
+			if (k === "val" && options.type) {
+				const num = Number(v);
+				const fmt =
+					options.type === "currency"
+						? new Intl.NumberFormat(The.locale, {
+								style: "currency",
+								currency: "USD",
+							})
+						: options.type === "date"
+							? new Intl.DateTimeFormat(The.locale)
+							: new Intl.NumberFormat(The.locale);
+				val =
+					options.type === "date" ? fmt.format(new Date(v)) : fmt.format(num);
+			}
+			result = result.replace(`{${k}}`, val);
+		}
+
+		return result;
+	}
+
+	static route(callback) {
+		if (typeof window === "undefined") return;
+
+		const navigate = () =>
+			callback(
+				window.location.pathname,
+				window.location.search,
+				window.location.hash,
+			);
+
+		window.addEventListener("popstate", navigate);
+		window.addEventListener("hashchange", navigate);
+
+		document.addEventListener("click", (e) => {
+			const link = e.target.closest("a");
+			if (
+				!link ||
+				!link.getAttribute("href") ||
+				link.hasAttribute("data-external") ||
+				link.target === "_blank"
+			) {
+				return;
+			}
+
+			const url = new URL(link.getAttribute("href"), window.location.href);
+			if (url.origin !== window.location.origin) return;
+
+			if (
+				url.pathname === window.location.pathname &&
+				url.search === window.location.search &&
+				url.hash
+			) {
+				return;
+			}
+
+			e.preventDefault();
+			window.history.pushState({}, "", url.href);
+			navigate();
+		});
+
+		navigate();
+	}
+
+	static #get(el, key) {
+		const ariaMap = {
+			expanded: "aria-expanded",
+			selected: "aria-selected",
+			hidden: "aria-hidden",
+			checked: "aria-checked",
+			disabled: "aria-disabled",
+		};
+		const attr = ariaMap[key] || `data-${key}`;
+		return el.getAttribute(attr);
+	}
+
+	static #set(el, key, val) {
+		const ariaMap = {
+			expanded: "aria-expanded",
+			selected: "aria-selected",
+			hidden: "aria-hidden",
+			checked: "aria-checked",
+			disabled: "aria-disabled",
+		};
+		const attr = ariaMap[key] || `data-${key}`;
+		const out = typeof val === "boolean" ? (val ? "true" : "false") : val;
+		el.setAttribute(attr, out);
+
+		if (el.querySelectorAll) {
+			const items = el.querySelectorAll(`[data-text="${key}"]`);
+			for (const item of items) item.textContent = out;
+		}
+		if (el.getAttribute?.("data-text") === key) el.textContent = out;
+	}
+
+	static async boot({ signal, locales, dictionary, namespace } = {}) {
+		if (namespace) The.prefix = `${namespace}:`;
+		const search =
+			typeof window !== "undefined" && window.location
+				? window.location.search
+				: "";
+		const params = new URLSearchParams(search);
+		const browserLoc =
+			(typeof navigator !== "undefined" ? navigator.language : null) ||
+			document.documentElement.lang ||
+			"en";
+
+		The.locale =
+			params.get("lang") ||
+			localStorage.getItem(`${The.prefix}lang`) ||
+			browserLoc;
+
+		if (dictionary) {
+			The.dictionary = dictionary;
+		} else {
+			const meta = document.querySelector('meta[name="i18n"]');
+			const path = locales || meta?.getAttribute("content");
+			if (path) {
+				const fallback = meta?.getAttribute("data-fallback") || "en";
+				const available = (meta?.getAttribute("data-available") || "")
+					.split(",")
+					.map((s) => s.trim().toLowerCase());
+
+				const full = The.locale.toLowerCase();
+				const base = full.split("-")[0];
+
+				let target = fallback;
+				if (available.includes(full)) target = full;
+				else if (available.includes(base)) target = base;
+
+				try {
+					const res = await fetch(`${path}/${target}.json`, { signal });
+					if (res.ok) The.dictionary = await res.json();
+				} catch (e) {
+					if (signal?.aborted) throw e;
+					console.warn("otm: i18n fetch failed", e);
+				}
+			}
+		}
+
+		for (let i = 0; i < localStorage.length; i++) {
+			const fullKey = localStorage.key(i);
+			if (fullKey.startsWith(The.prefix)) {
+				const key = fullKey.slice(The.prefix.length);
+				if (key !== "lang") {
+					const val = localStorage.getItem(fullKey);
+					The.#set(document.body, key, val);
+				}
+			}
+		}
+
+		The._t();
+	}
+}

package/src/core/index.js

@@ -0,0 +1,36 @@
+import On from "./On.js";
+import Select from "./Select.js";
+import The from "./The.js";
+
+export const on = On.on;
+on.emit = On.emit;
+
+export const the = The.the;
+export const _t = The._t;
+export const route = The.route;
+the.t = _t;
+the.route = route;
+the.form = The.form;
+the.flat = The.flat;
+the.boot = The.boot;
+
+Object.defineProperty(the, "dictionary", {
+	get: () => The.dictionary,
+	set: (v) => {
+		The.dictionary = v;
+	},
+});
+
+Object.defineProperty(the, "locale", {
+	get: () => The.locale,
+	set: (v) => {
+		The.locale = v;
+	},
+});
+
+export const $ = Select.$;
+$.clone = Select.clone;
+
+export const $$ = Select.$$;
+
+export default { on, the, $, $$, _t };

package/src/eslint/config.js

@@ -0,0 +1,16 @@
+import plugin from "./plugin.js";
+
+const recommended = [
+	{
+		plugins: { otm: plugin },
+		rules: {
+			"otm/prefer-on": "error",
+			"otm/prefer-the-set": "error",
+			"otm/flat-state": "error",
+			"otm/prefer-submit": "warn",
+			"otm/no-style-mutation": "error",
+		},
+	},
+];
+
+export default recommended;

package/src/eslint/plugin.js

@@ -0,0 +1,218 @@
+const meta = {
+	name: "eslint-plugin-otm",
+	version: "0.3.0",
+};
+
+const preferOn = {
+	meta: {
+		type: "problem",
+		docs: {
+			description:
+				"Disallow direct addEventListener; use on() from on_the_money for event delegation.",
+		},
+		messages: {
+			useOn:
+				"Direct addEventListener is forbidden. Use on() for event delegation.",
+		},
+		schema: [],
+	},
+	create(context) {
+		return {
+			CallExpression(node) {
+				if (node.callee?.property?.name === "addEventListener") {
+					context.report({ node, messageId: "useOn" });
+				}
+			},
+		};
+	},
+};
+
+const preferTheSet = {
+	meta: {
+		type: "problem",
+		docs: {
+			description:
+				"Disallow direct assignment to textContent/innerText/nodeValue; use the() instead.",
+		},
+		messages: {
+			useThe:
+				"Direct text manipulation is forbidden. Use the() or [data-text] binding instead.",
+		},
+		schema: [],
+	},
+	create(context) {
+		const banned = new Set(["textContent", "innerText", "nodeValue"]);
+		return {
+			AssignmentExpression(node) {
+				if (
+					node.left?.type === "MemberExpression" &&
+					banned.has(node.left.property?.name)
+				) {
+					context.report({ node, messageId: "useThe" });
+				}
+			},
+		};
+	},
+};
+
+const flatState = {
+	meta: {
+		type: "problem",
+		docs: {
+			description:
+				"Disallow nested objects or arrays passed to the(); state must be flat primitives.",
+		},
+		messages: {
+			notFlat:
+				"State must be flat. Nested objects or arrays are forbidden in the(). Use the.flat() to compose.",
+		},
+		schema: [],
+	},
+	create(context) {
+		const isObjectOrArray = (n) =>
+			n?.type === "ObjectExpression" || n?.type === "ArrayExpression";
+
+		const checkPrimitive = (node) => {
+			if (!node) return;
+			if (isObjectOrArray(node)) {
+				context.report({ node, messageId: "notFlat" });
+			}
+		};
+
+		return {
+			CallExpression(node) {
+				const name = node.callee?.name || node.callee?.property?.name;
+				if (name !== "the") return;
+
+				const args = node.arguments;
+				if (args.length === 1 && args[0].type === "ObjectExpression") {
+					for (const prop of args[0].properties) {
+						if (prop.type === "Property") checkPrimitive(prop.value);
+					}
+				} else if (args.length === 2) {
+					if (args[0].type === "Literal") {
+						checkPrimitive(args[1]);
+					} else if (args[1].type === "ObjectExpression") {
+						for (const prop of args[1].properties) {
+							if (prop.type === "Property") checkPrimitive(prop.value);
+						}
+					}
+				} else if (args.length === 3) {
+					checkPrimitive(args[2]);
+				}
+			},
+		};
+	},
+};
+
+const preferSubmit = {
+	meta: {
+		type: "suggestion",
+		docs: {
+			description:
+				"Prefer form submit events over button click listeners for data gathering.",
+		},
+		messages: {
+			useSubmit:
+				"Prefer using <form> submit events over direct button click listeners.",
+		},
+		schema: [],
+	},
+	create(context) {
+		const isButtonSelector = (n) =>
+			n?.type === "Literal" &&
+			typeof n.value === "string" &&
+			(n.value === "button" || n.value.includes("button"));
+
+		return {
+			CallExpression(node) {
+				const isOn =
+					node.callee?.name === "on" || node.callee?.property?.name === "on";
+				if (!isOn) return;
+				const [, evt, sel] = node.arguments;
+				if (evt?.value === "click" && isButtonSelector(sel)) {
+					context.report({ node, messageId: "useSubmit" });
+				}
+			},
+		};
+	},
+};
+
+const noStyleMutation = {
+	meta: {
+		type: "problem",
+		docs: {
+			description:
+				"Disallow direct style mutation; drive transitions from attribute selectors instead.",
+		},
+		messages: {
+			noStyle:
+				"Direct style manipulation is forbidden. Use the() with attribute selectors instead.",
+		},
+		schema: [],
+	},
+	create(context) {
+		const isStyleMember = (node) => {
+			let current = node;
+			while (current?.type === "MemberExpression") {
+				if (
+					current.object?.type === "MemberExpression" &&
+					current.object.property?.name === "style"
+				) {
+					return true;
+				}
+				if (current.property?.name === "style") {
+					return current === node;
+				}
+				current = current.object;
+			}
+			return false;
+		};
+
+		return {
+			AssignmentExpression(node) {
+				if (node.left?.type !== "MemberExpression") return;
+				if (
+					node.left.object?.type === "MemberExpression" &&
+					node.left.object.property?.name === "style"
+				) {
+					context.report({ node, messageId: "noStyle" });
+				}
+			},
+			CallExpression(node) {
+				const callee = node.callee;
+				if (callee?.property?.name === "setProperty" && isStyleMember(callee)) {
+					context.report({ node, messageId: "noStyle" });
+				}
+			},
+		};
+	},
+};
+
+const rules = {
+	"prefer-on": preferOn,
+	"prefer-the-set": preferTheSet,
+	"flat-state": flatState,
+	"prefer-submit": preferSubmit,
+	"no-style-mutation": noStyleMutation,
+};
+
+const plugin = {
+	meta,
+	rules,
+};
+
+plugin.configs = {
+	recommended: {
+		plugins: { otm: plugin },
+		rules: {
+			"otm/prefer-on": "error",
+			"otm/prefer-the-set": "error",
+			"otm/flat-state": "error",
+			"otm/prefer-submit": "warn",
+			"otm/no-style-mutation": "error",
+		},
+	},
+};
+
+export default plugin;

package/src/linter/Linter.js

@@ -0,0 +1,139 @@
+import * as parse5 from "parse5";
+
+export default class Linter {
+	static check(file, source, availableLocales = null) {
+		if (!file.endsWith(".html")) return [];
+		const violations = [];
+		const document = parse5.parse(source, { sourceCodeLocationInfo: true });
+		Linter.#checkHtmlRules(document, violations, file, availableLocales);
+		return violations;
+	}
+
+	static #checkHtmlRules(document, violations, file, availableLocales) {
+		let hasI18nMeta = false;
+		let manifestMatches = true;
+		let usesI18n = false;
+		let isFullDocument = false;
+
+		Linter.#traverse(document, (node) => {
+			if (
+				(node.nodeName === "html" || node.nodeName === "#documentType") &&
+				node.sourceCodeLocation
+			) {
+				isFullDocument = true;
+			}
+
+			const attrs = node.attrs
+				? Object.fromEntries(node.attrs.map((a) => [a.name, a.value]))
+				: {};
+
+			if (node.nodeName === "meta" && attrs.name === "i18n") {
+				hasI18nMeta = true;
+				if (availableLocales) {
+					const manifest = (attrs["data-available"] || "")
+						.split(",")
+						.map((s) => s.trim())
+						.filter(Boolean);
+					if (
+						manifest.length !== availableLocales.length ||
+						!availableLocales.every((l) => manifest.includes(l))
+					) {
+						manifestMatches = false;
+					}
+				}
+			}
+			if (attrs["data-i18n"]) usesI18n = true;
+
+			if (attrs["data-action"]) {
+				const interactiveTags = [
+					"button",
+					"a",
+					"input",
+					"select",
+					"textarea",
+					"form",
+				];
+				const isSemantic = interactiveTags.includes(node.nodeName);
+				const hasA11y = attrs.role && attrs.tabindex !== undefined;
+
+				if (!isSemantic && !hasA11y) {
+					const loc = node.sourceCodeLocation?.attrs?.["data-action"] ||
+						node.sourceCodeLocation || { startLine: 1, startCol: 1 };
+					Linter.#addViolation(
+						violations,
+						file,
+						{ line: loc.startLine, column: loc.startCol },
+						"HTML-017",
+						"Non-semantic interactive element. Use a <button> or add role and tabindex.",
+					);
+				}
+			}
+
+			if (node.nodeName === "#text") {
+				const parent = node.parentNode;
+				const parentName = parent?.nodeName;
+				const hasI18n = parent?.attrs?.some((a) => a.name === "data-i18n");
+				const leafTextParents = new Set([
+					"script",
+					"style",
+					"option",
+					"textarea",
+					"title",
+				]);
+
+				if (
+					!leafTextParents.has(parentName) &&
+					node.value.trim() !== "" &&
+					!hasI18n
+				) {
+					const loc = node.sourceCodeLocation || { startLine: 1, startCol: 1 };
+					Linter.#addViolation(
+						violations,
+						file,
+						{ line: loc.startLine, column: loc.startCol },
+						"HTML-004",
+						"Naked strings in HTML are forbidden. Use data-i18n or wrap in a semantic tag.",
+					);
+				}
+			}
+		});
+
+		if (isFullDocument && usesI18n) {
+			if (!hasI18nMeta) {
+				Linter.#addViolation(
+					violations,
+					file,
+					{ line: 1, column: 1 },
+					"HTML-023",
+					"Localization detected, but missing <meta name='i18n' ...>.",
+				);
+			} else if (!manifestMatches) {
+				Linter.#addViolation(
+					violations,
+					file,
+					{ line: 1, column: 1 },
+					"HTML-024",
+					"The data-available attribute on <meta name='i18n'> does not match the locales folder.",
+				);
+			}
+		}
+	}
+
+	static #traverse(node, visitor) {
+		visitor(node);
+		const children = node.childNodes || node.content?.childNodes;
+		if (children) {
+			for (const child of children) Linter.#traverse(child, visitor);
+		}
+	}
+
+	static #addViolation(violations, file, loc, ruleId, message) {
+		violations.push({
+			file,
+			ruleId,
+			line: loc.line || loc.startLine,
+			column: loc.column || loc.startCol,
+			message,
+		});
+	}
+}