@nativele/ts-dom 0.3.0 → 0.4.6

package/dist/index.d.mts

@@ -3,7 +3,48 @@ interface ListSchema {
   refs: Record<string, Element>;
   text: string;
   ifs: string;
+  /**
+   * Set for a list whose items are components (`data-key` and `data-prop`): the item tag, the property that receives the item, the field that identifies it,
+   * and where codegen found the component: defined and exported in a scanned directory, defined there without export, or not found (a component from elsewhere).
+   */
+  item?: {
+    tag: string;
+    prop: string;
+    key: string;
+    source?: "local" | "unexported" | "external";
+  };
 }
+type ItemOf<L> = L extends {
+  item: {
+    tag: infer T;
+    prop: infer P;
+  };
+} ? T extends keyof HTMLElementTagNameMap ? P extends keyof HTMLElementTagNameMap[T] ? NonNullable<HTMLElementTagNameMap[T][P]> : {
+  dataPropNotOnItemComponent: P;
+} : L extends {
+  item: {
+    source: "local";
+  };
+} ? {
+  itemComponentMissingFromTagMap: T;
+  fix: "run ts-dom gen so ts-dom-tags.ts lists it";
+} : L extends {
+  item: {
+    source: "unexported";
+  };
+} ? {
+  itemComponentClassNotExported: T;
+  fix: "export the class passed to define() so its type can be read";
+} : {
+  [field: string]: unknown;
+} : never;
+type KeyField<L> = L extends {
+  item: {
+    key: infer K extends string;
+  };
+} ? { [Q in K]: string | number; } : unknown;
+/** What `items` takes for a list: the type of the item component's `data-prop` property, with the `data-key` field. */
+type ListItem<L> = ItemOf<L> & KeyField<L>;
 type TextOf<N extends string> = { [K in N]: TextValue; };
 /** The per-item context passed to update(). */
 interface ItemContext<L extends ListSchema> {
@@ -31,9 +72,19 @@ export declare class List<L extends ListSchema = ListSchema> {
   private readonly proto;
   /** Called when a new item is created (the component uses it to register data-on-* inside the item) */
   private readonly onCreate?;
+  private readonly binding?;
   constructor(anchor: Comment, proto: Element,
   /** Called when a new item is created (the component uses it to register data-on-* inside the item) */
-  onCreate?: ((el: Element) => void) | undefined);
+  onCreate?: ((el: Element) => void) | undefined, binding?: {
+    readonly key: string;
+    readonly prop: string;
+  } | undefined);
+  /**
+   * The items shown, in order. Assigning shows them: an element is kept for each key that stays, created for a new key and removed for a key that is gone, and the `data-prop` property receives each item that is not the same object as last time.
+   * @throws When the template has no `data-key` and `data-prop`, when the value is not an array of objects, when an item has no string or number `data-key` field, or when two items have the same key
+   */
+  get items(): readonly ListItem<L>[];
+  set items(items: readonly ListItem<L>[]);
   /** From any node inside an item, find the key and data of the item it belongs to (used by event handlers). */
   itemOf(node: Node | null): {
     key: PropertyKey;
@@ -125,7 +176,15 @@ export declare function event<T = void>(opts?: {
 type DetailOf<D> = D extends EventDecl<infer T> ? T : never;
 type EmitArgs<D> = [DetailOf<D>] extends [void] ? [detail?: undefined] : [detail: DetailOf<D>];
 /** The data passed to render(): state, props and derived values merged. */
-type View<D, R> = Readonly<D> & Readonly<R>;
+/**
+ * Read-only all the way down: arrays, objects, Maps and Sets inside it cannot be changed through it.
+ * State, props and derived values are typed this way, so changing an object in place instead of passing a new one is a tsc error.
+ */
+type DeepReadonly<T> = T extends ((...args: never[]) => unknown) ? T : T extends Node | Date | RegExp | Promise<unknown> ? T : T extends ReadonlyMap<infer K, infer V> ? ReadonlyMap<K, DeepReadonly<V>> : T extends ReadonlySet<infer V> ? ReadonlySet<DeepReadonly<V>> : T extends readonly unknown[] ? { readonly [K in keyof T]: DeepReadonly<T[K]>; } : T extends object ? IsPlainObject<T> extends true ? { readonly [K in keyof T]: DeepReadonly<T[K]>; } : T : T;
+type IsPlainObject<T> = { [K in keyof T]: T[K]; } extends T ? true : false;
+/** Props as the element exposes them: the parent assigns them, but cannot change the objects inside through them. */
+type PropAccessors<P> = { -readonly [K in keyof P]: DeepReadonly<P[K]>; };
+type View<D, R> = DeepReadonly<D> & DeepReadonly<R>;
 interface DataOptions<St extends object, P extends object, R, E extends Record<string, EventDecl<unknown>>> extends ComponentOptions {
   /** Data owned by the component and changed only through set(). Fields named like a {{ hole }} or data-if in the HTML bind automatically. */
   state?: St;
@@ -139,7 +198,7 @@ interface DataOptions<St extends object, P extends object, R, E extends Record<s
    * Derived values: computed from state and props, usable directly by {{ holes }}, data-if and render().
    * Recomputed after every data change (there is no dependency tracking).
    */
-  derive?: { [K in keyof R]: (s: Readonly<St & P>) => R[K]; };
+  derive?: { [K in keyof R]: (s: DeepReadonly<St & P>) => R[K]; };
   /** The events this component emits. */
   emits?: E;
 }
@@ -195,14 +254,14 @@ interface ComponentInstance<S extends Schema> extends HTMLElement {
 /** Members added when the `state` / `props` / `derive` / `emits` options are used. */
 interface StatefulInstance<S extends Schema, St extends object, P extends object, R, E extends Record<string, EventDecl<unknown>>> extends ComponentInstance<S> {
   /** The component's own data (read-only). Use set() to change it. */
-  readonly state: Readonly<St>;
+  readonly state: DeepReadonly<St>;
   /** Data provided by the parent (read-only). Do not assign it inside the component; use emit() to notify the parent. */
-  readonly props: Readonly<P>;
+  readonly props: DeepReadonly<P>;
   /**
    * The only way to change state: shallow-merges the patch, and does nothing when no field actually changed.
    * When something changed it synchronously updates the same-named {{ holes }} and data-if, then calls render(). It cannot change props.
    */
-  set(patch: Partial<St> | ((s: Readonly<St>) => Partial<St>)): void;
+  set(patch: Partial<DeepReadonly<St>> | ((s: DeepReadonly<St>) => Partial<DeepReadonly<St>>)): void;
   /** Coalesce several set() calls and prop changes: the view is updated and render() is called once, after fn returns. */
   batch(fn: () => void): void;
   /**
@@ -233,7 +292,7 @@ export declare function Component<S extends Schema>(tpl: Template<S>, opts?: Com
  * `reservedPropNames` (a prop shares a name with HTMLElement or a ts-dom member), `nativeEventNames` (emits shares a name with a native event).
  * (The check lives in the return type, not in the parameter: in the parameter it prevents TypeScript from inferring the type of derive.)
  */
-export declare function Component<S extends Schema, St extends object = Record<never, never>, P extends object = Record<never, never>, R = Record<never, never>, E extends Record<string, EventDecl<unknown>> = Record<never, never>>(tpl: Template<S>, opts: DataOptions<St, P, R, E>): IsClean<Problems<S, St, P, R, E>> extends true ? new () => StatefulInstance<S, St, P, R, E> & P : Problems<S, St, P, R, E>;
+export declare function Component<S extends Schema, St extends object = Record<never, never>, P extends object = Record<never, never>, R = Record<never, never>, E extends Record<string, EventDecl<unknown>> = Record<never, never>>(tpl: Template<S>, opts: DataOptions<St, P, R, E>): IsClean<Problems<S, St, P, R, E>> extends true ? new () => StatefulInstance<S, St, P, R, E> & PropAccessors<P> : Problems<S, St, P, R, E>;
 type CheckHandlers<I> = I extends {
   readonly "~events"?: infer E;
 } ? [Exclude<NonNullable<E>, keyof I>] extends [never] ? unknown : {
@@ -244,4 +303,4 @@ type CheckHandlers<I> = I extends {
  * component as a public method, otherwise tsc reports an error that lists the missing names (`missingHandlers`).
  */
 export declare function define<C extends abstract new (...args: never[]) => HTMLElement>(name: string, ctor: C & CheckHandlers<InstanceType<C>>): void;
-export type { ComponentInstance, ComponentOptions, DataOptions, El, EmitEvent, EventDecl, EventHit, ItemContext, ListSchema, ReadableStore, ReplaceOptions, Schema, StatefulInstance, Store, Template, TemplateInstance, TextOf, TextValue, Update, View };
+export type { ComponentInstance, ComponentOptions, DataOptions, DeepReadonly, El, EmitEvent, EventDecl, EventHit, ItemContext, ListItem, ListSchema, PropAccessors, ReadableStore, ReplaceOptions, Schema, StatefulInstance, Store, Template, TemplateInstance, TextOf, TextValue, Update, View };

package/dist/index.mjs

@@ -208,13 +208,44 @@ var List = class {
 	anchor;
 	proto;
 	onCreate;
+	binding;
 	#items = /* @__PURE__ */ new Map();
 	#byEl = /* @__PURE__ */ new WeakMap();
-	constructor(anchor, proto, onCreate) {
+	constructor(anchor, proto, onCreate, binding) {
 		this.anchor = anchor;
 		this.proto = proto;
 		this.onCreate = onCreate;
+		this.binding = binding;
 	}
+	/**
+	* The items shown, in order. Assigning shows them: an element is kept for each key that stays, created for a new key and removed for a key that is gone, and the `data-prop` property receives each item that is not the same object as last time.
+	* @throws When the template has no `data-key` and `data-prop`, when the value is not an array of objects, when an item has no string or number `data-key` field, or when two items have the same key
+	*/
+	get items() {
+		return [...this.#items.values()].sort((a, b) => a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map((entry) => entry.item);
+	}
+	set items(items) {
+		if (!this.binding) throw new Error("[list-not-bound] this list has no data-key and data-prop, so its items cannot be assigned. Fix: add them to the <template data-each>, e.g. data-key=\"id\" data-prop=\"item\", or call replace().");
+		if (!Array.isArray(items)) throw new Error(`[invalid-items] items must be an array of objects, but got ${items === null ? "null" : typeof items}. Fix: assign an array, for example items = view.todos ?? [].`);
+		if (items.length) this.#checkProp();
+		this.#reconcile(items, this.#keyOf, this.#assign, true, true);
+	}
+	#checkProp() {
+		const prop = this.binding?.prop;
+		const tag = this.proto.localName;
+		if (!customElements.get(tag)) return;
+		if (!(prop in (this.#items.values().next().value?.el ?? document.importNode(this.proto, false)))) throw new Error(`[unknown-prop] <${tag}> has no "${prop}" property (data-prop). Fix: declare ${prop} in the component's props, or change data-prop.`);
+	}
+	#keyOf = (item) => {
+		const field = this.binding?.key;
+		if (typeof item !== "object" || item === null) throw new Error(`[invalid-item] an item is ${item === null ? "null" : typeof item}, but items must be objects with a "${field}" field (data-key). Fix: pass objects, or fill a list of plain values with replace().`);
+		const key = item[field];
+		if (typeof key !== "string" && typeof key !== "number") throw new Error(`[missing-key] an item has no usable "${field}" field (data-key): it is ${key === void 0 ? "missing" : typeof key}. Fix: give every item a string or number ${field}, or change data-key.`);
+		return key;
+	};
+	#assign = (item, { el }) => {
+		el[this.binding?.prop] = item;
+	};
 	/** From any node inside an item, find the key and data of the item it belongs to (used by event handlers). */
 	itemOf(node) {
 		for (let n = node; n; n = n.parentNode) {
@@ -232,7 +263,7 @@ var List = class {
 		return this.#items.get(key);
 	}
 	#create(key) {
-		const el = this.proto.cloneNode(true);
+		const el = this.binding ? document.importNode(this.proto, true) : this.proto.cloneNode(true);
 		const holder = document.createDocumentFragment();
 		holder.append(el);
 		const conds = mountConds(holder);
@@ -272,13 +303,13 @@ var List = class {
 	}
 	#run(entry, key, item, update, skip = false) {
 		if (skip && !entry.fresh && Object.is(entry.item, item)) return;
-		entry.item = item;
-		entry.fresh = false;
 		this.#byEl.set(entry.el, {
 			key,
 			item
 		});
 		update(item, entry);
+		entry.item = item;
+		entry.fresh = false;
 	}
 	remove(key) {
 		const entry = this.#items.get(key);
@@ -293,10 +324,14 @@ var List = class {
 	}
 	/** Keyed reconciliation: remove extra items, create missing ones, reorder, and call update() for every item. */
 	replace(items, key, update, opts = {}) {
+		this.#reconcile(items, key, update, opts.skipUnchanged === true, false);
+	}
+	/** `updateFirst`: a new item is updated before it is inserted, so an item component is connected with its prop already set. */
+	#reconcile(items, key, update, skipUnchanged, updateFirst) {
 		const next = /* @__PURE__ */ new Set();
 		for (const it of items) {
 			const k = key(it);
-			if (next.has(k)) throw new Error(`[duplicate-key] replace() received two items with the key ${String(k)}, so one element cannot show both. Fix: make key() return a unique value for each item.`);
+			if (next.has(k)) throw new Error(`[duplicate-key] two items have the key ${String(k)}, so one element cannot show both. Fix: make the key unique for each item (the key() you pass to replace(), or the data-key field).`);
 			next.add(k);
 		}
 		for (const k of this.#items.keys()) if (!next.has(k)) this.remove(k);
@@ -309,13 +344,14 @@ var List = class {
 			if (!entry) {
 				entry = this.#create(k);
 				this.#items.set(k, entry);
+				if (updateFirst) this.#run(entry, k, it, update);
 			}
 			if (entry.el.nextSibling !== after || entry.el.parentNode !== parent) {
 				if (entry.el.parentNode === parent && parent?.moveBefore) parent.moveBefore(entry.el, after);
 				else parent?.insertBefore(entry.el, after);
 			}
 			after = entry.el;
-			this.#run(entry, k, it, update, opts.skipUnchanged);
+			this.#run(entry, k, it, update, skipUnchanged);
 		}
 	}
 };
@@ -332,7 +368,12 @@ function mountTemplate(frag, onItem) {
 		if (!proto) throw new Error(`[each-root-count] data-each="${name}" needs exactly one root element. Fix: wrap the item content in a single element such as <li>.`);
 		const anchor = document.createComment(`each:${name}`);
 		t.replaceWith(anchor);
-		lists[name] = new List(anchor, proto, onItem);
+		const key = t.getAttribute("data-key")?.trim();
+		const prop = t.getAttribute("data-prop")?.trim();
+		lists[name] = new List(anchor, proto, onItem, key && prop ? {
+			key,
+			prop
+		} : void 0);
 	}
 	const refs = {};
 	for (const el of frag.querySelectorAll("[data-ref]")) refs[el.getAttribute("data-ref")] = el;

package/dist/{lint-DS-IOjkf.mjs → lint-CP_i4VPA.mjs}

@@ -1,4 +1,4 @@
-import { a as analyze, d as listHtml, f as scanDefines } from "./a11y-CeZcA10z.mjs";
+import { a as analyze, f as listHtml, h as scanDefines } from "./a11y-wWL9rie7.mjs";
 import { readFileSync } from "node:fs";
 import { basename, dirname, relative } from "node:path";
 // src/lib/lint.ts
@@ -43,7 +43,8 @@ function componentClasses(code, htmlSpec) {
 		const bodyEnd = matchClose(code, bodyStart, "{", "}");
 		if (bodyEnd > 0) out.push({
 			call: code.slice(call, callEnd + 1),
-			body: code.slice(bodyStart, bodyEnd + 1)
+			body: code.slice(bodyStart, bodyEnd + 1),
+			end: bodyEnd
 		});
 	}
 	return out;
@@ -98,7 +99,7 @@ function unusedMarkup(html, code) {
 	for (const n of dynText || stateful ? [] : a.scope.text) if (!used(`text\\.${esc(n)}\\b|text\\[\\s*["']${esc(n)}["']`)) add("unused-text", `{{ ${n} }} is never filled and will render empty. Fix: assign this.text.${n} = value, or declare "${n}" in state/props/derive so it binds automatically.`, `text:${n}`);
 	for (const [list, s] of a.lists) {
 		if (!dynLists && !used(`lists\\.${esc(list)}\\b|lists\\[\\s*["']${esc(list)}["']`)) {
-			add("unused-list", `data-each="${list}" is never rendered, so the list stays empty. Fix: call this.lists.${list}.replace(items, (item) => item.id, (item, ctx) => { ... }), for example inside render().`, `each:${list}`);
+			add("unused-list", `data-each="${list}" is never rendered, so the list stays empty. Fix: ${a.boundLists.has(list) ? `assign this.lists.${list}.items = items` : `call this.lists.${list}.replace(items, (item) => item.id, (item, ctx) => { ... })`}, for example inside render().`, `each:${list}`);
 			continue;
 		}
 		const items = [

package/dist/oxlint-plugin.d.mts

@@ -4,6 +4,13 @@ interface ImportNode {
     value: string;
   };
 }
+interface Fixer {
+  insertTextBeforeRange(range: [number, number], text: string): unknown;
+}
+interface Suggestion {
+  desc: string;
+  fix(fixer: Fixer): unknown;
+}
 interface Context {
   options?: [{
     ignore?: string[];
@@ -15,6 +22,7 @@ interface Context {
   report(d: {
     message: string;
     node: unknown;
+    suggest?: Suggestion[];
   }): void;
 }
 declare const _default: {
@@ -22,7 +30,7 @@ declare const _default: {
     name: string;
   };
   rules: {
-    /** The HTML declares markup that this file never uses. Always on when enabled; reported as errors. */
+    /** The HTML declares markup that this file never uses. Reported as errors. */
     "unused-markup": {
       meta: {
         type: "suggestion";
@@ -41,6 +49,7 @@ declare const _default: {
           };
           additionalProperties: boolean;
         }[];
+        hasSuggestions: boolean;
       };
       create(context: Context): {
         ImportDeclaration(node: ImportNode): void;
@@ -65,6 +74,7 @@ declare const _default: {
           };
           additionalProperties: boolean;
         }[];
+        hasSuggestions: boolean;
       };
       create(context: Context): {
         ImportDeclaration(node: ImportNode): void;
@@ -89,6 +99,7 @@ declare const _default: {
           };
           additionalProperties: boolean;
         }[];
+        hasSuggestions: boolean;
       };
       create(context: Context): {
         ImportDeclaration(node: ImportNode): void;

package/dist/oxlint-plugin.mjs

@@ -1,5 +1,5 @@
-import { n as checkA11y } from "./a11y-CeZcA10z.mjs";
-import { a as dataFlow, i as contractsFor, l as templateCode, r as componentClasses, u as unusedMarkup } from "./lint-DS-IOjkf.mjs";
+import { n as checkA11y, t as A11Y_RULES } from "./a11y-wWL9rie7.mjs";
+import { a as dataFlow, i as contractsFor, l as templateCode, n as UNUSED_MARKUP_RULES, r as componentClasses, t as DATA_FLOW_RULES, u as unusedMarkup } from "./lint-CP_i4VPA.mjs";
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 // src/lib/oxlint-plugin.ts
@@ -14,46 +14,86 @@ const ignoreSchema = [{
 /** Child component contracts, scanned once per process from the working directory. */
 let contracts = null;
 const getContracts = () => contracts ??= contractsFor([process.cwd()]);
+const cache = /* @__PURE__ */ new Map();
+function groupDiagnostics(group, html, code, spec, filename) {
+	const key = `${group}\0${filename}\0${spec}`;
+	const hit = cache.get(key);
+	if (hit && hit.code === code && hit.html === html) return hit.diags;
+	const diags = group === "unused-markup" ? unusedMarkup(html, templateCode(code, spec)) : group === "a11y" ? checkA11y(html) : dataFlow(html, componentClasses(code, spec), [], getContracts());
+	cache.set(key, {
+		code,
+		html,
+		diags
+	});
+	return diags;
+}
+function readTemplate(filename, spec) {
+	try {
+		return readFileSync(resolve(dirname(filename), spec.slice(0, -3)), "utf8");
+	} catch {
+		return null;
+	}
+}
+/** A missing handler can be added to the class that uses the template: offered as a suggestion, since the method body is the developer's to write. */
+function suggestionsFor(d, code, spec) {
+	if (d.rule !== "missing-handler") return void 0;
+	const name = /="([^"]+)"/.exec(d.message)?.[1];
+	const target = componentClasses(code, spec)[0];
+	if (!name || !target) return void 0;
+	return [{
+		desc: `Add a method ${name}() to the component class`,
+		fix: (fixer) => fixer.insertTextBeforeRange([target.end, target.end], `\n  ${name}(_e: Event): void {}\n`)
+	}];
+}
 /**
-* Build an oxlint rule that runs `check` on every `import x from "./name.html.js"` and reports the findings
+* Build an oxlint rule that checks every `import x from "./name.html.js"` and reports the findings
 * on the import line (an oxlint plugin can only report inside the file being linted).
 * The message starts with the HTML location, the rule id and what to do: `./x.html.js:3:5 [unused-ref] ...`.
+* `only` limits the rule to one rule id of the group; without it the rule reports the whole group, minus `ignore`.
 */
-function templateRule(description, check) {
+function templateRule(group, description, only) {
 	return {
 		meta: {
 			type: "suggestion",
 			docs: { description },
-			schema: ignoreSchema
+			schema: only ? [] : ignoreSchema,
+			hasSuggestions: true
 		},
 		create(context) {
 			return { ImportDeclaration(node) {
 				const spec = node.source.value;
 				if (!spec.endsWith(".html.js")) return;
-				let html;
-				try {
-					html = readFileSync(resolve(dirname(context.filename), spec.slice(0, -3)), "utf8");
-				} catch {
-					return;
+				const html = readTemplate(context.filename, spec);
+				if (html === null) return;
+				const code = context.sourceCode.text;
+				const ignore = context.options?.[0]?.ignore ?? [];
+				for (const d of groupDiagnostics(group, html, code, spec, context.filename)) {
+					if (only ? d.rule !== only : ignore.includes(d.rule)) continue;
+					const suggest = suggestionsFor(d, code, spec);
+					context.report({
+						message: `${spec}:${d.line}:${d.col} [${d.rule}] ${d.message}`,
+						node,
+						...suggest ? { suggest } : {}
+					});
 				}
-				for (const d of check(html, context, spec)) context.report({
-					message: `${spec}:${d.line}:${d.col} [${d.rule}] ${d.message}`,
-					node
-				});
 			} };
 		}
 	};
 }
-const ignored = (c) => c.options?.[0]?.ignore ?? [];
+const perRule = (group, rules) => Object.fromEntries(Object.entries(rules).map(([id, description]) => [id, templateRule(group, description, id)]));
+const { "no-importer": _noImporter, ...unusedMarkupRules } = UNUSED_MARKUP_RULES;
 var oxlint_plugin_default = {
 	meta: { name: "ts-dom" },
 	rules: {
-		/** The HTML declares markup that this file never uses. Always on when enabled; reported as errors. */
-		"unused-markup": templateRule("Markup declared in the HTML (data-ref, data-if, data-each, {{ }}, data-on-*) must be used by the component class", (html, c, spec) => unusedMarkup(html, templateCode(c.sourceCode.text, spec)).filter((d) => !ignored(c).includes(d.rule))),
+		/** The HTML declares markup that this file never uses. Reported as errors. */
+		"unused-markup": templateRule("unused-markup", "Markup declared in the HTML (data-ref, data-if, data-each, {{ }}, data-on-*) must be used by the component class"),
 		/** ARIA and basic accessibility problems in the template. Off by default. */
-		a11y: templateRule("Check the template for ARIA and basic accessibility problems", (html, c) => checkA11y(html, ignored(c))),
+		a11y: templateRule("a11y", "Check the template for ARIA and basic accessibility problems"),
 		/** Data flow suggestions and child component contract checks. Off by default. */
-		"data-flow": templateRule("Keep props flowing down and events flowing up one level at a time, and check child component attributes and events", (html, c, spec) => dataFlow(html, componentClasses(c.sourceCode.text, spec), ignored(c), getContracts()))
+		"data-flow": templateRule("data-flow", "Keep props flowing down and events flowing up one level at a time, and check child component attributes and events"),
+		...perRule("unused-markup", unusedMarkupRules),
+		...perRule("data-flow", DATA_FLOW_RULES),
+		...perRule("a11y", Object.fromEntries(Object.entries(A11Y_RULES).map(([k, v]) => [k, v.split(". Fix:")[0]])))
 	}
 };
 export { oxlint_plugin_default as default };

package/dist/vite-plugin.d.mts

@@ -1,5 +1,5 @@
 export interface TsDomPluginOptions {
-  /** Directories to scan for .html files and generate .html.ts into. Default: ["src"] */
+  /** Directories to scan for .html files and generate .html.ts into, relative to Vite's root. Default: ["src"] */
   dirs?: string[];
   /** Module name the generated files import the runtime from. Default: "@nativele/ts-dom" */
   runtime?: string;
@@ -14,6 +14,24 @@ export interface TsDomPluginOptions {
     ignore?: string[];
   };
 }
+interface Logger {
+  error(m: string): void;
+  warn(m: string): void;
+}
+interface HotServer {
+  config: {
+    logger: Logger;
+  };
+  moduleGraph: {
+    getModulesByFile(f: string): Set<unknown> | undefined;
+    invalidateModule(m: unknown): void;
+  };
+  ws: {
+    send(payload: {
+      type: "full-reload";
+    }): void;
+  };
+}
 /**
  * Optional Vite plugin: generates `.html.ts` when the build starts and regenerates it while the dev server runs.
  * ts-dom does not depend on it: `ts-dom gen` (or `--watch`) together with tsc is enough.
@@ -21,6 +39,9 @@ export interface TsDomPluginOptions {
 export declare function tsDom(opts?: TsDomPluginOptions): {
   name: string;
   enforce: "pre";
+  configResolved(config: {
+    root: string;
+  }): void;
   buildStart(this: {
     error(m: string): never;
     warn(m: string): void;
@@ -31,10 +52,12 @@ export declare function tsDom(opts?: TsDomPluginOptions): {
       on(ev: string, fn: (f: string) => void): void;
     };
     config: {
-      logger: {
-        error(m: string): void;
-        warn(m: string): void;
-      };
+      logger: Logger;
     };
   }): void;
-};
+  handleHotUpdate(ctx: {
+    file: string;
+    server: HotServer;
+  }): never[] | undefined;
+};
+export {};

package/dist/vite-plugin.mjs

@@ -1,7 +1,10 @@
-import { c as generateFile, d as listHtml, i as CodegenError, l as isFullPage, n as checkA11y, o as formatDiagnostics, s as generateAll, u as isSelected } from "./a11y-CeZcA10z.mjs";
-import { existsSync, readFileSync } from "node:fs";
+import { c as generateAll, d as isSelected, f as listHtml, h as scanDefines, i as CodegenError, l as generateFile, n as checkA11y, s as formatDiagnostics, u as isFullPage } from "./a11y-wWL9rie7.mjs";
+import { existsSync, readFileSync, unlinkSync } from "node:fs";
 import { resolve, sep } from "node:path";
 // src/lib/vite-plugin.ts
+const GENERATED_HEADER = "// Generated by ts-dom.";
+const slashes = (file) => file.split(sep).join("/");
+const read = (file) => existsSync(file) ? readFileSync(file, "utf8") : null;
 /**
 * Optional Vite plugin: generates `.html.ts` when the build starts and regenerates it while the dev server runs.
 * ts-dom does not depend on it: `ts-dom gen` (or `--watch`) together with tsc is enough.
@@ -13,8 +16,20 @@ function tsDom(opts = {}) {
 		include: opts.include,
 		exclude: opts.exclude
 	};
-	const dirs = opts.dirs ?? ["src"];
 	const a11y = opts.a11y === true ? {} : opts.a11y || null;
+	let dirs = (opts.dirs ?? ["src"]).map((d) => resolve(d));
+	const shown = /* @__PURE__ */ new Map();
+	const defsByDir = /* @__PURE__ */ new Map();
+	const defsOf = (dir) => {
+		let defs = defsByDir.get(dir);
+		if (!defs) defsByDir.set(dir, defs = existsSync(dir) ? scanDefines(dir) : []);
+		return defs;
+	};
+	const isDefineFile = (file) => {
+		const dir = dirOf(file);
+		return dir !== void 0 && defsOf(dir).some((d) => resolve(d.file) === file);
+	};
+	const dirOf = (file) => dirs.find((d) => file.startsWith(d + sep));
 	const warnA11y = (warn) => {
 		if (!a11y) return;
 		for (const d of dirs) {
@@ -25,9 +40,57 @@ function tsDom(opts = {}) {
 			}
 		}
 	};
+	/** Regenerate one template. Returns whether its generated module changed. */
+	const regenerate = (file, logger) => {
+		const dir = dirOf(file);
+		const html = read(file);
+		if (!dir || html === null || file.includes(`${sep}node_modules${sep}`) || isFullPage(html) || !isSelected(dir, file, generate)) return false;
+		const out = `${file}.ts`;
+		const before = read(out);
+		try {
+			generateFile(file, generate, defsOf(dir));
+		} catch (e) {
+			if (e instanceof CodegenError) logger.error(e.message);
+			else throw e;
+			return false;
+		}
+		if (a11y) for (const diag of checkA11y(html, a11y.ignore)) logger.warn(formatDiagnostics(file, [diag]));
+		return read(out) !== before;
+	};
+	/** Regenerate a directory after a define() call may have changed: the tag map and the child imports of every template. */
+	const regenerateDir = (dir, logger) => {
+		const before = new Map(listHtml(dir).map((f) => [`${f}.ts`, read(`${f}.ts`)]));
+		try {
+			generateAll(dir, generate);
+		} catch (e) {
+			if (e instanceof CodegenError) logger.error(e.message);
+			else throw e;
+		}
+		defsByDir.set(dir, scanDefines(dir));
+		for (const [out, content] of before) {
+			const now = read(out);
+			if (now !== null && now !== content) shown.set(out, now);
+		}
+	};
+	const removeGenerated = (file) => {
+		const out = `${file}.ts`;
+		if (dirOf(file) && read(out)?.startsWith(GENERATED_HEADER)) unlinkSync(out);
+	};
+	const reload = (server, out) => {
+		const now = read(out);
+		if (now === null || shown.get(out) === now) return;
+		shown.set(out, now);
+		const loaded = server.moduleGraph.getModulesByFile(slashes(out));
+		if (!loaded?.size) return;
+		for (const m of loaded) server.moduleGraph.invalidateModule(m);
+		server.ws.send({ type: "full-reload" });
+	};
 	return {
 		name: "ts-dom",
 		enforce: "pre",
+		configResolved(config) {
+			dirs = (opts.dirs ?? ["src"]).map((d) => resolve(config.root, d));
+		},
 		buildStart() {
 			try {
 				for (const d of dirs) if (existsSync(d)) generateAll(d, generate);
@@ -38,24 +101,40 @@ function tsDom(opts = {}) {
 			warnA11y((m) => this.warn(m));
 		},
 		configureServer(server) {
-			const regen = (file) => {
-				if (!file.endsWith(".html") || file.includes("node_modules") || !existsSync(file)) return;
-				const html = readFileSync(file, "utf8");
-				if (isFullPage(html)) return;
-				const dir = dirs.find((d) => file.startsWith(resolve(d) + sep));
-				if (!dir || !isSelected(resolve(dir), file, generate)) return;
-				try {
-					generateFile(file, generate, dir);
-					if (a11y) for (const diag of checkA11y(html, a11y.ignore)) server.config.logger.warn(formatDiagnostics(file, [diag]));
-				} catch (e) {
-					if (e instanceof CodegenError) server.config.logger.error(e.message);
-					else throw e;
-				}
-			};
+			const logger = server.config.logger;
 			server.watcher.add(dirs);
-			server.watcher.on("change", regen);
-			server.watcher.on("add", regen);
+			server.watcher.on("add", (f) => {
+				const file = resolve(f);
+				const dir = dirOf(file);
+				if (file.endsWith(".html")) regenerate(file, logger);
+				else if (dir && isSourceTs(file) && read(file)?.includes("define(")) regenerateDir(dir, logger);
+			});
+			server.watcher.on("unlink", (f) => {
+				const file = resolve(f);
+				const dir = dirOf(file);
+				if (file.endsWith(".html")) removeGenerated(file);
+				else if (dir && isDefineFile(file)) regenerateDir(dir, logger);
+			});
+		},
+		handleHotUpdate(ctx) {
+			const file = resolve(ctx.file);
+			const logger = ctx.server.config.logger;
+			if (file.endsWith(".html.ts")) {
+				const now = read(file);
+				if (now !== null && shown.get(file) === now) return [];
+				if (now !== null) shown.set(file, now);
+				return;
+			}
+			if (file.endsWith(".html")) {
+				if (!dirOf(file)) return;
+				if (regenerate(file, logger)) reload(ctx.server, `${file}.ts`);
+				return [];
+			}
+			const dir = dirOf(file);
+			if (!dir || !isSourceTs(file)) return;
+			if (read(file)?.includes("define(") || isDefineFile(file)) regenerateDir(dir, logger);
 		}
 	};
 }
+const isSourceTs = (file) => file.endsWith(".ts") && !file.endsWith(".d.ts") && !file.endsWith(".html.ts") && !file.endsWith(`${sep}ts-dom-tags.ts`);
 export { tsDom };