@fuzdev/fuz_code 0.37.0

package/src/lib/grammar_markup.ts

@@ -0,0 +1,225 @@
+import type {
+	SyntaxStyler,
+	AddSyntaxGrammar,
+	SyntaxGrammarRaw,
+	SyntaxGrammarToken,
+	SyntaxGrammar,
+} from './syntax_styler.js';
+
+/**
+ * Based on Prism (https://github.com/PrismJS/prism)
+ * by Lea Verou (https://lea.verou.me/)
+ *
+ * MIT license
+ *
+ * @see LICENSE
+ */
+export const add_grammar_markup: AddSyntaxGrammar = (syntax_styler) => {
+	const grammar_markup = {
+		comment: {
+			pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
+			greedy: true,
+		},
+		processing_instruction: {
+			pattern: /<\?[\s\S]+?\?>/,
+			greedy: true,
+		},
+		// https://www.w3.org/TR/xml/#NT-doctypedecl
+		doctype: {
+			pattern: /<!DOCTYPE[^>]*>/i,
+			greedy: true,
+		},
+		cdata: {
+			pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+			greedy: true,
+		},
+		tag: {
+			pattern:
+				/<\/?(?!\d)[^\s>/=$<%]+(?:\s(?:\s*[^\s>/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+			greedy: true,
+			inside: {
+				tag: {
+					pattern: /^<\/?[^\s>/]+/,
+					inside: {
+						punctuation: {
+							pattern: /^<\/?/,
+							alias: 'tag_punctuation',
+						},
+						namespace: /^[^\s>/:]+:/,
+					},
+				},
+				special_attr: [],
+				attr_value: {
+					pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+					inside: {
+						punctuation: [
+							{
+								pattern: /^=/,
+								alias: 'attr_equals',
+							},
+							{
+								pattern: /^(\s*)["']|["']$/,
+								lookbehind: true,
+								alias: 'attr_quote',
+							},
+						],
+						entity: undefined as any, // see below
+					},
+				},
+				punctuation: {
+					pattern: /\/?>/,
+					alias: 'tag_punctuation',
+				},
+				attr_name: {
+					pattern: /[^\s>/]+/,
+					inside: {
+						namespace: /^[^\s>/:]+:/,
+					},
+				},
+			},
+		},
+		entity: [
+			{
+				pattern: /&[\da-z]{1,8};/i,
+				alias: 'named_entity',
+			},
+			/&#x?[\da-f]{1,8};/i,
+		],
+	} satisfies SyntaxGrammarRaw;
+
+	grammar_markup.tag.inside.attr_value.inside.entity = grammar_markup.entity;
+
+	syntax_styler.add_lang('markup', grammar_markup, ['html', 'mathml', 'svg']);
+	syntax_styler.add_extended_lang('markup', 'xml', {}, ['ssml', 'atom', 'rss']);
+};
+
+/**
+ * Adds an inlined language to markup.
+ *
+ * An example of an inlined language is CSS with `<style>` tags.
+ *
+ * @param tag_name - The name of the tag that contains the inlined language. This name will be treated as
+ * case insensitive.
+ * @param lang - The language key.
+ */
+export const grammar_markup_add_inlined = (
+	syntax_styler: SyntaxStyler,
+	tag_name: string,
+	lang: string,
+	inside_lang = 'markup',
+): void => {
+	const lang_key = 'lang_' + lang;
+
+	syntax_styler.grammar_insert_before(inside_lang, 'cdata', {
+		[tag_name]: {
+			pattern: RegExp(
+				/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(
+					/__/g,
+					() => {
+						return tag_name;
+					},
+				),
+				'i',
+			),
+			lookbehind: true,
+			greedy: true,
+			inside: {
+				included_cdata: {
+					pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+					inside: {
+						cdata: /^<!\[CDATA\[|\]\]>$/i,
+						[lang_key]: {
+							pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+							lookbehind: true,
+							inside: syntax_styler.get_lang(lang),
+						},
+					},
+				},
+				[lang_key]: {
+					pattern: /[\s\S]+/,
+					inside: syntax_styler.get_lang(lang),
+				},
+			},
+		},
+	});
+};
+
+/**
+ * Adds an pattern to style languages embedded in HTML attributes.
+ *
+ * An example of an inlined language is CSS with `style` attributes.
+ *
+ * @param attr_name - The name of the tag that contains the inlined language. This name will be treated as
+ * case insensitive.
+ * @param lang - The language key.
+ */
+export const grammar_markup_add_attribute = (
+	syntax_styler: SyntaxStyler,
+	attr_name: string,
+	lang: string,
+): void => {
+	// After normalization, grammar.tag is an array of SyntaxGrammarToken
+	const markup_grammar = syntax_styler.get_lang('markup');
+	const tag_patterns = markup_grammar.tag;
+	const tag_inside = tag_patterns![0]!.inside!;
+
+	tag_inside.special_attr!.push({
+		pattern: RegExp(
+			/(^|["'\s])/.source +
+				'(?:' +
+				attr_name +
+				')' +
+				/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
+			'i',
+		),
+		lookbehind: true,
+		greedy: false,
+		alias: [],
+		inside: {
+			attr_name: [
+				{
+					pattern: /^[^\s=]+/,
+					lookbehind: false,
+					greedy: false,
+					alias: [],
+					inside: null,
+				},
+			],
+			attr_value: [
+				{
+					pattern: /=[\s\S]+/,
+					lookbehind: false,
+					greedy: false,
+					alias: [],
+					inside: {
+						value: [
+							{
+								pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+								lookbehind: true,
+								greedy: false,
+								alias: [lang, 'lang_' + lang], // TODO remove this alias?
+								inside: syntax_styler.get_lang(lang),
+							},
+						],
+						punctuation: [
+							{
+								pattern: /^=/,
+								lookbehind: false,
+								greedy: false,
+								alias: ['attr_equals'],
+								inside: null,
+							},
+							{
+								pattern: /"|'/,
+								lookbehind: false,
+								greedy: false,
+								alias: ['attr_quote'],
+								inside: null,
+							},
+						],
+					} as SyntaxGrammar,
+				},
+			],
+		} as SyntaxGrammar,
+	} satisfies SyntaxGrammarToken);
+};

package/src/lib/grammar_svelte.ts

@@ -0,0 +1,165 @@
+import type {AddSyntaxGrammar, SyntaxStyler} from './syntax_styler.js';
+import {grammar_markup_add_inlined} from './grammar_markup.js';
+
+const blocks = '(if|else if|else|await|then|catch|each|html|debug|snippet)';
+
+/**
+ * Based on `prism-svelte` (https://github.com/pngwn/prism-svelte)
+ * by pngwn (https://github.com/pngwn)
+ *
+ * MIT license
+ *
+ * @see LICENSE
+ */
+export const add_grammar_svelte: AddSyntaxGrammar = (syntax_styler) => {
+	const grammar_ts = syntax_styler.get_lang('ts');
+
+	// Define the at_directive pattern once for reuse (matches any @word)
+	const at_directive_pattern = {
+		pattern: /^{(@\w+)(\s+[\s\S]*)?}$/,
+		inside: {
+			lang_ts: {
+				pattern: /(@\w+\s+)([\s\S]+)/, // Fixed: removed incorrect (?=}$)
+				lookbehind: true,
+				inside: grammar_ts,
+			},
+			at_keyword: /@\w+/,
+			punctuation: /[{}]/,
+		},
+	};
+
+	// Full expression patterns for top-level contexts
+	const svelte_expression_inside_full = {
+		// Generic @ directive - matches any @word
+		at_directive: at_directive_pattern,
+		// {#each items as item} with special syntax
+		each: {
+			pattern: /^{([#/]each)\s+([\s\S]*)}$/,
+			inside: {
+				special_keyword: /[#/]each/,
+				lang_ts: [
+					{
+						pattern: /(#each\s+)[\s\S]+(?=\s+as)/, // Expression before 'as'
+						lookbehind: true,
+						inside: grammar_ts,
+					},
+					{
+						pattern: /(as\s+)[\s\S]+/, // Everything after 'as' (including key)
+						lookbehind: true,
+						inside: grammar_ts,
+					},
+				],
+				keyword: /as/,
+				punctuation: /[{}]/,
+			},
+		},
+		// {#block ...} and {/block}
+		block: {
+			pattern: new RegExp('^\\{([#:/@]\\s*' + blocks + ')\\s*([\\s\\S]*)\\}$'),
+			inside: {
+				special_keyword: new RegExp('[#:/@]' + blocks),
+				keyword: [/as/, /then/],
+				lang_ts: {
+					pattern: /[\s\S]+(?=}$)/,
+					inside: grammar_ts,
+				},
+				punctuation: /[{}]/,
+			},
+		},
+		// Default: plain TS expression
+		punctuation: /[{}]/,
+		lang_ts: {
+			pattern: /[\s\S]+/,
+			inside: grammar_ts,
+		},
+	};
+
+	// Simplified patterns for tag contexts (no block directives)
+	const svelte_expression_inside_simple = {
+		// Generic @ directive
+		at_directive: at_directive_pattern,
+		// Default: plain TS expression
+		punctuation: /[{}]/,
+		lang_ts: {
+			pattern: /[\s\S]+/,
+			inside: grammar_ts,
+		},
+	};
+
+	const grammar_svelte = syntax_styler.add_extended_lang('markup', 'svelte', {
+		svelte_expression: {
+			pattern: /\{(?:[^{}]|\{[^}]*\})*\}/,
+			greedy: true,
+			inside: svelte_expression_inside_full,
+		},
+		tag: {
+			pattern:
+				/<\/?(?!\d)[^\s>/=$<%]+(?:\s(?:\s*(?:\{(?:[^{}]|\{[^}]*\})*\}|[^\s>/=]+)(?:\s*=\s*(?:(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?:"[^"]*"|'[^']*'|{[\s\S]+?}(?=[\s/>])))|(?=[\s/>])))+)?\s*\/?>/i,
+			greedy: true,
+			inside: {
+				tag: {
+					pattern: /^<\/?[^\s>/]+/i,
+					inside: {
+						punctuation: {
+							pattern: /^<\/?/,
+							alias: 'tag_punctuation',
+						},
+						namespace: /^[^\s>/:]+:/,
+					},
+				},
+				svelte_expression: {
+					pattern: /\{(?:[^{}]|\{[^}]*\})*\}/,
+					inside: svelte_expression_inside_simple,
+				},
+				attr_value: {
+					pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,
+					inside: {
+						punctuation: [
+							{
+								pattern: /^=/,
+								alias: 'attr_equals',
+							},
+							{
+								pattern: /^(\s*)["']|["']$/,
+								lookbehind: true,
+								alias: 'attr_quote',
+							},
+						],
+						svelte_expression: {
+							pattern: /\{(?:[^{}]|\{[^}]*\})*\}/,
+							inside: svelte_expression_inside_simple,
+						},
+					},
+				},
+				punctuation: {
+					pattern: /\/?>/,
+					alias: 'tag_punctuation',
+				},
+				attr_name: {
+					pattern: /[^\s>/]+/,
+					inside: {
+						namespace: /^[^\s>/:]+:/,
+					},
+				},
+			},
+		},
+	});
+
+	// oof lol
+	// After normalization, grammar.tag is an array of SyntaxGrammarToken
+	const tag_patterns = grammar_svelte.tag as any;
+	const tag_inside = tag_patterns[0].inside;
+	tag_inside.attr_value[0].inside.entity = grammar_svelte.entity;
+
+	grammar_svelte_add_inlined(syntax_styler, 'style', 'css');
+	// Assume TypeScript for all Svelte script tags (no plain JS)
+	grammar_svelte_add_inlined(syntax_styler, 'script', 'ts');
+};
+
+export const grammar_svelte_add_inlined = (
+	syntax_styler: SyntaxStyler,
+	tag_name: string,
+	lang: string,
+): void => {
+	grammar_markup_add_inlined(syntax_styler, tag_name, lang, 'svelte');
+};

package/src/lib/grammar_ts.ts

@@ -0,0 +1,114 @@
+import type {AddSyntaxGrammar} from './syntax_styler.js';
+import {class_keywords} from './grammar_clike.js';
+
+/**
+ * Based on Prism (https://github.com/PrismJS/prism)
+ * by Lea Verou (https://lea.verou.me/)
+ *
+ * MIT license
+ *
+ * @see LICENSE
+ */
+export const add_grammar_ts: AddSyntaxGrammar = (syntax_styler) => {
+	const grammar_ts = syntax_styler.add_extended_lang(
+		'js',
+		'ts',
+		{
+			class_name: {
+				pattern: new RegExp(
+					`(\\b(?:${class_keywords}|type)\\s+)(?!keyof\\b)(?!\\s)[_$a-zA-Z\\xA0-\\uFFFF](?:(?!\\s)[$\\w\\xA0-\\uFFFF])*(?:\\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?`,
+				),
+				lookbehind: true,
+				greedy: true,
+				inside: null, // see below
+			},
+			builtin:
+				/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/,
+			// TypeScript arrow functions with type annotations
+			function_variable: {
+				pattern:
+					/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)(?:\s*:\s*(?:(?!=>).)+)?\s*=>|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*=>)))/,
+				alias: 'function',
+			},
+		},
+		['typescript'],
+	);
+
+	// The keywords TypeScript adds to JS
+	(grammar_ts.keyword as any).push(
+		/\b(?:abstract|declare|is|keyof|readonly|require|satisfies)\b/,
+		// keywords that have to be followed by an identifier
+		/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,
+		// This is for `import type *, {}`
+		/\btype\b(?=\s*(?:[{*]|$))/,
+	);
+
+	// doesn't work with TS because TS is too complex
+	delete grammar_ts.parameter;
+	delete grammar_ts.literal_property;
+
+	// a version of TS specifically for styling types
+	var type_inside = syntax_styler.extend_grammar('ts', {
+		// Recognize type names in type contexts
+		type_name: {
+			pattern: /\b[A-Z]\w*/,
+			alias: 'class_name',
+		},
+	});
+	// Prevent double-wrapping of class names
+	(type_inside as any).class_name = undefined;
+
+	// After normalization, grammar_ts.class_name is an array
+	grammar_ts.class_name![0]!.inside = type_inside;
+
+	syntax_styler.grammar_insert_before('ts', 'function', {
+		type_assertion: {
+			pattern: /(\b(?:as|satisfies)\s+)(?!\s)[_$A-Za-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,
+			lookbehind: true,
+			alias: 'class_name',
+		},
+		import_type_keyword: {
+			pattern: /(\b(?:import|export)\s+)type\b|(\b(?:import|export)\s*\{[^}]*,\s*)type\b/,
+			lookbehind: true,
+			alias: 'special_keyword',
+		},
+		type_annotation: {
+			pattern: /:(?:\s*)((?:[^<>=;,)}\s]|<[^>]*>|\[[^\]]*\]|\s)+)(?=\s*=)/,
+			greedy: true,
+			inside: {
+				':': /^:/,
+				type: {
+					pattern: /.+/,
+					inside: type_inside,
+				},
+			},
+		},
+		decorator: {
+			pattern: /@[$\w\xA0-\uFFFF]+/,
+			inside: {
+				at: {
+					pattern: /^@/,
+					alias: 'operator',
+				},
+				function: {
+					pattern: /^[\s\S]+/,
+					alias: 'decorator_name',
+				},
+			},
+		},
+		generic_function: {
+			// e.g. foo<T extends "bar" | "baz">( ...
+			pattern:
+				/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,
+			greedy: true,
+			inside: {
+				function: /^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,
+				generic: {
+					pattern: /<[\s\S]+/, // everything after the first <
+					alias: 'class_name',
+					inside: type_inside,
+				},
+			},
+		},
+	});
+};

package/src/lib/highlight_manager.ts

@@ -0,0 +1,182 @@
+import type {SyntaxTokenStream} from './syntax_token.js';
+import {highlight_priorities} from './highlight_priorities.js';
+
+export type HighlightMode = 'auto' | 'ranges' | 'html';
+
+/**
+ * Check for CSS Highlights API support.
+ */
+export const supports_css_highlight_api = (): boolean =>
+	!!(globalThis.CSS?.highlights && globalThis.Highlight); // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+
+/**
+ * Manages highlights for a single element.
+ * Tracks ranges per element and only removes its own ranges when clearing.
+ */
+export class HighlightManager {
+	element_ranges: Map<string, Array<Range>>;
+
+	constructor() {
+		if (!supports_css_highlight_api()) {
+			throw Error('CSS Highlights API not supported');
+		}
+		this.element_ranges = new Map();
+	}
+
+	/**
+	 * Highlight from syntax styler token stream.
+	 */
+	highlight_from_syntax_tokens(element: Element, tokens: SyntaxTokenStream): void {
+		// Find the text node (it might not be firstChild due to Svelte comment nodes)
+		let text_node: Node | null = null;
+		for (const node of element.childNodes) {
+			if (node.nodeType === Node.TEXT_NODE) {
+				text_node = node;
+				break;
+			}
+		}
+
+		if (!text_node) {
+			throw new Error('no text node to highlight');
+		}
+
+		this.clear_element_ranges();
+
+		const ranges_by_type: Map<string, Array<Range>> = new Map();
+		const final_pos = this.#create_all_ranges(tokens, text_node, ranges_by_type, 0);
+
+		// Validate that token positions matched text node length
+		const text_length = text_node.textContent?.length ?? 0;
+		if (final_pos !== text_length) {
+			throw new Error(
+				`Token stream length mismatch: tokens covered ${final_pos} chars but text node has ${text_length} chars`,
+			);
+		}
+
+		// Apply highlights
+		for (const [type, ranges] of ranges_by_type) {
+			const prefixed_type = `token_${type}`;
+			// Track ranges for this element
+			this.element_ranges.set(prefixed_type, ranges);
+
+			// Get or create the shared highlight
+			let highlight = CSS.highlights.get(prefixed_type);
+			if (!highlight) {
+				highlight = new Highlight();
+				// Set priority based on CSS cascade order (higher = later in CSS = wins)
+				highlight.priority =
+					highlight_priorities[prefixed_type as keyof typeof highlight_priorities] ?? 0;
+				CSS.highlights.set(prefixed_type, highlight);
+			}
+
+			// Add all ranges to the highlight
+			for (const range of ranges) {
+				highlight.add(range);
+			}
+		}
+	}
+
+	/**
+	 * Clear only this element's ranges from highlights.
+	 */
+	clear_element_ranges(): void {
+		for (const [name, ranges] of this.element_ranges) {
+			const highlight = CSS.highlights.get(name);
+			if (!highlight) {
+				throw new Error('Expected to find CSS highlight: ' + name);
+			}
+
+			for (const range of ranges) {
+				highlight.delete(range);
+			}
+
+			if (highlight.size === 0) {
+				CSS.highlights.delete(name);
+			}
+		}
+
+		this.element_ranges.clear();
+	}
+
+	destroy(): void {
+		this.clear_element_ranges();
+	}
+
+	/**
+	 * Create ranges for all tokens in the tree.
+	 */
+	#create_all_ranges(
+		tokens: SyntaxTokenStream,
+		text_node: Node,
+		ranges_by_type: Map<string, Array<Range>>,
+		offset: number,
+	): number {
+		const text_length = text_node.textContent?.length ?? 0;
+		let pos = offset;
+
+		for (const token of tokens) {
+			if (typeof token === 'string') {
+				pos += token.length;
+				continue;
+			}
+
+			const length = token.length;
+			const end_pos = pos + length;
+
+			// Validate positions are within text node bounds before creating ranges
+			if (end_pos > text_length) {
+				throw new Error(
+					`Token ${token.type} extends beyond text node: position ${end_pos} > length ${text_length}`,
+				);
+			}
+
+			try {
+				const range = new Range();
+				range.setStart(text_node, pos);
+				range.setEnd(text_node, end_pos);
+
+				// Add range for the token type
+				const type = token.type;
+				if (!ranges_by_type.has(type)) {
+					ranges_by_type.set(type, []);
+				}
+				ranges_by_type.get(type)!.push(range);
+
+				// Also add range for any aliases (alias is always an array)
+				for (const alias of token.alias) {
+					if (!ranges_by_type.has(alias)) {
+						ranges_by_type.set(alias, []);
+					}
+					// Create a new range for each alias (ranges can't be reused)
+					const alias_range = new Range();
+					alias_range.setStart(text_node, pos);
+					alias_range.setEnd(text_node, end_pos);
+					ranges_by_type.get(alias)!.push(alias_range);
+				}
+			} catch (e) {
+				throw new Error(`Failed to create range for ${token.type}: ${e}`);
+			}
+
+			// Process nested tokens
+			if (Array.isArray(token.content)) {
+				const actual_end_pos = this.#create_all_ranges(
+					token.content,
+					text_node,
+					ranges_by_type,
+					pos,
+				);
+				// Validate that nested tokens match the parent token's claimed length
+				if (actual_end_pos !== end_pos) {
+					throw new Error(
+						`Token ${token.type} length mismatch: claimed ${length} chars (${pos}-${end_pos}) but nested content covered ${actual_end_pos - pos} chars (${pos}-${actual_end_pos})`,
+					);
+				}
+				pos = actual_end_pos;
+			} else {
+				pos = end_pos;
+			}
+		}
+
+		return pos;
+	}
+}