@fuzdev/fuz_code 0.37.0

package/dist/theme_highlight.css

@@ -0,0 +1,160 @@
+.token_processing_instruction,
+::highlight(token_processing_instruction),
+.token_doctype,
+::highlight(token_doctype),
+.token_cdata,
+::highlight(token_cdata),
+.token_punctuation,
+::highlight(token_punctuation) {
+	color: var(--text_color_5);
+}
+
+.token_tag,
+::highlight(token_tag),
+.token_constant,
+::highlight(token_constant),
+.token_symbol,
+::highlight(token_symbol),
+.token_deleted,
+::highlight(token_deleted),
+.token_keyword,
+::highlight(token_keyword),
+.token_null,
+::highlight(token_null),
+.token_boolean,
+::highlight(token_boolean),
+.token_interpolation_punctuation,
+::highlight(token_interpolation_punctuation),
+.token_heading,
+::highlight(token_heading),
+.token_heading_punctuation,
+::highlight(token_heading_punctuation),
+.token_tag_punctuation,
+::highlight(token_tag_punctuation) {
+	color: var(--color_a_5);
+}
+
+.token_comment,
+::highlight(token_comment),
+.token_char,
+::highlight(token_char),
+.token_inserted,
+::highlight(token_inserted),
+.token_blockquote,
+::highlight(token_blockquote),
+.token_blockquote_punctuation,
+::highlight(token_blockquote_punctuation) {
+	color: var(--color_b_5);
+}
+
+.token_builtin,
+::highlight(token_builtin),
+.token_class_name,
+::highlight(token_class_name),
+.token_number,
+::highlight(token_number) {
+	color: var(--color_j_5);
+}
+
+.token_attr_value,
+::highlight(token_attr_value),
+.token_attr_quote,
+::highlight(token_attr_quote),
+.token_string,
+::highlight(token_string),
+.token_template_punctuation,
+::highlight(token_template_punctuation),
+.token_inline_code,
+::highlight(token_inline_code),
+.token_code_punctuation,
+::highlight(token_code_punctuation) {
+	color: var(--color_h_5);
+}
+
+/* attr_equals must be after attr_value */
+.token_attr_equals,
+::highlight(token_attr_equals) {
+	color: var(--text_color_5);
+}
+
+.token_selector,
+::highlight(token_selector),
+.token_function,
+::highlight(token_function),
+.token_regex,
+::highlight(token_regex),
+.token_important,
+::highlight(token_important),
+.token_variable,
+::highlight(token_variable) {
+	color: var(--color_e_5);
+}
+
+.token_atrule,
+::highlight(token_atrule) {
+	color: var(--color_f_5);
+}
+
+.token_attr_name,
+::highlight(token_attr_name),
+.token_property,
+::highlight(token_property),
+.token_decorator,
+::highlight(token_decorator),
+.token_decorator_name,
+::highlight(token_decorator_name),
+.token_link_text_wrapper,
+::highlight(token_link_text_wrapper),
+.token_link_text,
+::highlight(token_link_text),
+.token_link_punctuation,
+::highlight(token_link_punctuation) {
+	color: var(--color_i_5);
+}
+
+.token_special_keyword,
+::highlight(token_special_keyword),
+.token_namespace,
+::highlight(token_namespace),
+.token_rule,
+::highlight(token_rule) {
+	color: var(--color_g_5);
+}
+
+.token_at_keyword,
+::highlight(token_at_keyword),
+.token_url,
+::highlight(token_url) {
+	color: var(--color_d_5);
+}
+
+.token_url,
+::highlight(token_url) {
+	text-decoration: underline;
+}
+
+.token_strikethrough,
+::highlight(token_strikethrough) {
+	text-decoration: line-through;
+}
+
+/*
+
+Note: CSS Highlights API doesn't support font-weight or font-style,
+so bold/italic will only work with HTML mode, not range mode.
+
+@see https://github.com/w3c/csswg-drafts/issues/8355
+
+*/
+
+.token_important,
+::highlight(token_important),
+.token_bold,
+::highlight(token_bold) {
+	font-weight: bold;
+}
+
+.token_italic,
+::highlight(token_italic) {
+	font-style: italic;
+}

package/dist/theme_variables.css

@@ -0,0 +1,20 @@
+/*
+
+CSS variables for syntax highlighting when not using Moss.
+Import this alongside theme.css if you're not using Moss.
+
+*/
+
+:root {
+	--text_color_5: light-dark(#8e7e71, #8e7e71);
+	--color_a_5: light-dark(#397fc6, #88b2dd);
+	--color_b_5: light-dark(#298e29, #66c266);
+	--color_c_5: light-dark(#d22d2d, #dd4040);
+	--color_d_5: light-dark(#6a40bf, #a68cd9);
+	--color_e_5: light-dark(#ad9625, #e2cb5a);
+	--color_f_5: light-dark(#6a3e1b, #b08b6d);
+	--color_g_5: light-dark(#e03e81, #ea7ba9);
+	--color_h_5: light-dark(#f24e0d, #f67c4c);
+	--color_i_5: light-dark(#19b3b3, #79ecec);
+	--color_j_5: light-dark(#2e9e82, #61d1b5);
+}

package/dist/tokenize_syntax.d.ts

@@ -0,0 +1,28 @@
+import type { SyntaxGrammar } from './syntax_styler.js';
+import { type SyntaxTokenStream } from './syntax_token.js';
+/**
+ * Accepts a string of text as input and the language definitions to use,
+ * and returns an array with the tokenized code.
+ *
+ * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
+ *
+ * This method could be useful in other contexts as well, as a very crude parser.
+ *
+ * @param text - a string with the code to be styled
+ * @param grammar - an object containing the tokens to use
+ *
+ * Usually a language definition like `syntax_styler.get_lang('markup')`.
+ *
+ * @returns an array of strings and tokens, a token stream
+ *
+ * @example
+ * var code = `var foo = 0;`;
+ * var tokens = tokenize_syntax(code, SyntaxStyler.langs.js);
+ * for (var token of tokens) {
+ *     if (token instanceof SyntaxToken && token.type === 'number') {
+ *         console.log(`Found numeric literal: ${token.content}`);
+ *     }
+ * }
+ */
+export declare const tokenize_syntax: (text: string, grammar: SyntaxGrammar) => SyntaxTokenStream;
+//# sourceMappingURL=tokenize_syntax.d.ts.map

package/dist/tokenize_syntax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenize_syntax.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/tokenize_syntax.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAc,KAAK,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,SAAS,aAAa,KAAG,iBAQtE,CAAC"}

package/dist/tokenize_syntax.js

@@ -0,0 +1,194 @@
+import { SyntaxToken } from './syntax_token.js';
+/**
+ * Accepts a string of text as input and the language definitions to use,
+ * and returns an array with the tokenized code.
+ *
+ * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
+ *
+ * This method could be useful in other contexts as well, as a very crude parser.
+ *
+ * @param text - a string with the code to be styled
+ * @param grammar - an object containing the tokens to use
+ *
+ * Usually a language definition like `syntax_styler.get_lang('markup')`.
+ *
+ * @returns an array of strings and tokens, a token stream
+ *
+ * @example
+ * var code = `var foo = 0;`;
+ * var tokens = tokenize_syntax(code, SyntaxStyler.langs.js);
+ * for (var token of tokens) {
+ *     if (token instanceof SyntaxToken && token.type === 'number') {
+ *         console.log(`Found numeric literal: ${token.content}`);
+ *     }
+ * }
+ */
+export const tokenize_syntax = (text, grammar) => {
+    // Grammar is already normalized (rest merged, patterns in arrays, etc.)
+    var token_list = new LinkedList();
+    add_after(token_list, token_list.head, text);
+    match_grammar(text, token_list, grammar, token_list.head, 0);
+    return to_array(token_list);
+};
+const match_grammar = (text, token_list, grammar, start_node, start_pos, rematch) => {
+    for (var token in grammar) {
+        // Grammar is normalized: patterns is always an array of normalized objects
+        var patterns = grammar[token];
+        if (!patterns) {
+            continue;
+        }
+        for (var j = 0; j < patterns.length; ++j) {
+            if (rematch?.cause === token + ',' + j) {
+                return;
+            }
+            var pattern_obj = patterns[j];
+            // All properties are guaranteed to be present after normalization
+            var inside = pattern_obj.inside;
+            var lookbehind = pattern_obj.lookbehind;
+            var greedy = pattern_obj.greedy;
+            var alias = pattern_obj.alias;
+            // Pattern already has global flag if greedy (added during normalization)
+            var pattern = pattern_obj.pattern;
+            for (
+            // iterate the token list and keep track of the current token/string position
+            var current_node = start_node.next, pos = start_pos; current_node !== token_list.tail; pos += current_node.value.length, current_node = current_node.next) {
+                if (rematch && pos >= rematch.reach) {
+                    break;
+                }
+                var str = current_node.value;
+                if (token_list.length > text.length) {
+                    // Something went terribly wrong, ABORT, ABORT!
+                    return;
+                }
+                if (str instanceof SyntaxToken) {
+                    continue;
+                }
+                var remove_count = 1;
+                var match;
+                if (greedy) {
+                    match = match_pattern(pattern, pos, text, lookbehind);
+                    if (!match || match.index >= text.length) {
+                        break;
+                    }
+                    var from = match.index;
+                    var to = match.index + match[0].length;
+                    var p = pos;
+                    // find the node that contains the match
+                    p += current_node.value.length;
+                    while (from >= p) {
+                        current_node = current_node.next;
+                        p += current_node.value.length;
+                    }
+                    // adjust pos (and p)
+                    p -= current_node.value.length;
+                    pos = p;
+                    // the current node is a Token, then the match starts inside another Token, which is invalid
+                    if (current_node.value instanceof SyntaxToken) {
+                        continue;
+                    }
+                    // find the last node which is affected by this match
+                    for (var k = current_node; k !== token_list.tail && (p < to || typeof k.value === 'string'); k = k.next) {
+                        remove_count++;
+                        p += k.value.length;
+                    }
+                    remove_count--;
+                    // replace with the new match
+                    str = text.substring(pos, p);
+                    match.index -= pos;
+                }
+                else {
+                    match = match_pattern(pattern, 0, str, lookbehind);
+                    if (!match) {
+                        continue;
+                    }
+                }
+                var from = match.index;
+                var match_str = match[0];
+                var before = str.substring(0, from);
+                var after = str.substring(from + match_str.length);
+                var reach = pos + str.length;
+                if (rematch && reach > rematch.reach) {
+                    rematch.reach = reach;
+                }
+                var remove_from = current_node.prev;
+                if (before) {
+                    remove_from = add_after(token_list, remove_from, before);
+                    pos += before.length;
+                }
+                remove_range(token_list, remove_from, remove_count);
+                var wrapped = new SyntaxToken(token, inside ? tokenize_syntax(match_str, inside) : match_str, alias, match_str);
+                current_node = add_after(token_list, remove_from, wrapped);
+                if (after) {
+                    add_after(token_list, current_node, after);
+                }
+                if (remove_count > 1) {
+                    // at least one Token object was removed, so we have to do some rematching
+                    // this can only happen if the current pattern is greedy
+                    var nested_rematch = {
+                        cause: token + ',' + j,
+                        reach,
+                    };
+                    match_grammar(text, token_list, grammar, current_node.prev, pos, nested_rematch);
+                    // the reach might have been extended because of the rematching
+                    if (rematch && nested_rematch.reach > rematch.reach) {
+                        rematch.reach = nested_rematch.reach;
+                    }
+                }
+            }
+        }
+    }
+};
+class LinkedList {
+    head;
+    tail;
+    length = 0;
+    constructor() {
+        this.head = { value: null, prev: null, next: null };
+        this.tail = { value: null, prev: this.head, next: null };
+        this.head.next = this.tail;
+    }
+}
+/**
+ * Adds a new node with the given value to the list.
+ */
+const add_after = (list, node, value) => {
+    // assumes that node != list.tail && values.length >= 0
+    var next = node.next;
+    var new_node = { value, prev: node, next };
+    node.next = new_node;
+    next.prev = new_node;
+    list.length++;
+    return new_node;
+};
+/**
+ * Removes `count` nodes after the given node. The given node will not be removed.
+ */
+const remove_range = (list, node, count) => {
+    var next = node.next;
+    for (var i = 0; i < count && next !== list.tail; i++) {
+        next = next.next;
+    }
+    node.next = next;
+    next.prev = node;
+    list.length -= i;
+};
+const to_array = (list) => {
+    var array = [];
+    var node = list.head.next;
+    while (node !== list.tail) {
+        array.push(node.value);
+        node = node.next;
+    }
+    return array;
+};
+const match_pattern = (pattern, pos, text, lookbehind) => {
+    pattern.lastIndex = pos;
+    var match = pattern.exec(text);
+    if (match && lookbehind && match[1]) {
+        // change the match to remove the text matched by the lookbehind group
+        var lookbehind_length = match[1].length;
+        match.index += lookbehind_length;
+        match[0] = match[0].substring(lookbehind_length);
+    }
+    return match;
+};

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@fuzdev/fuz_code",
+  "version": "0.37.0",
+  "description": "syntax styling utilities and components for TypeScript, Svelte, and Markdown",
+  "glyph": "🎨",
+  "logo": "logo.svg",
+  "logo_alt": "a friendly pink spider facing you",
+  "public": true,
+  "license": "MIT",
+  "homepage": "https://code.fuz.dev/",
+  "repository": "https://github.com/ryanatkn/fuz_code",
+  "author": {
+    "name": "Ryan Atkinson",
+    "email": "mail@ryanatkn.com",
+    "url": "https://www.ryanatkn.com/"
+  },
+  "bugs": "https://github.com/ryanatkn/fuz_code/issues",
+  "funding": "https://www.ryanatkn.com/funding",
+  "scripts": {
+    "start": "gro dev",
+    "dev": "gro dev",
+    "build": "gro build",
+    "check": "gro check",
+    "test": "gro test",
+    "preview": "vite preview",
+    "deploy": "gro deploy",
+    "benchmark": "gro run benchmark/run_benchmarks.ts",
+    "benchmark-compare": "gro run benchmark/compare/run_compare.ts",
+    "update-generated-fixtures": "gro src/test/fixtures/update"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=22.15"
+  },
+  "peerDependencies": {
+    "@fuzdev/fuz_css": ">=0.40.0",
+    "svelte": "^5"
+  },
+  "peerDependenciesMeta": {
+    "@fuzdev/fuz_css": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@changesets/changelog-git": "^0.2.1",
+    "@ryanatkn/belt": "^0.41.1",
+    "@ryanatkn/eslint-config": "^0.9.0",
+    "@ryanatkn/fuz": "^0.165.0",
+    "@ryanatkn/gro": "^0.179.0",
+    "@fuzdev/fuz_css": "^0.40.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/package": "^2.5.6",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/node": "^24.10.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-svelte": "^3.13.0",
+    "esm-env": "^1.2.2",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "svelte": "^5.44.1",
+    "svelte-check": "^4.3.4",
+    "tinybench": "^5.1.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vitest": "^4.0.14"
+  },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-svelte"
+    ],
+    "useTabs": true,
+    "printWidth": 100,
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "overrides": [
+      {
+        "files": "package.json",
+        "options": {
+          "useTabs": false
+        }
+      }
+    ]
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/lib/**/*.ts",
+    "!src/lib/**/*.test.*",
+    "!dist/**/*.test.*"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./*.js": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./*.ts": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./*.svelte": {
+      "types": "./dist/*.svelte.d.ts",
+      "svelte": "./dist/*.svelte",
+      "default": "./dist/*.svelte"
+    },
+    "./*.css": {
+      "default": "./dist/*.css"
+    }
+  }
+}

package/src/lib/code_sample.ts

@@ -0,0 +1,10 @@
+export interface CodeSample {
+	name: string;
+	lang: string;
+	content: string;
+}
+
+// Languages ordered from simple to complex
+export const sample_langs = ['json', 'css', 'ts', 'html', 'svelte', 'md'] as const;
+
+export type SampleLang = (typeof sample_langs)[number];

package/src/lib/grammar_clike.ts

@@ -0,0 +1,48 @@
+import type {AddSyntaxGrammar, SyntaxGrammarRaw} from './syntax_styler.js';
+
+export const class_keywords = 'class|extends|implements|instanceof|interface|new';
+
+/**
+ * Based on Prism (https://github.com/PrismJS/prism)
+ * by Lea Verou (https://lea.verou.me/)
+ *
+ * MIT license
+ *
+ * @see LICENSE
+ */
+export const add_grammar_clike: AddSyntaxGrammar = (syntax_styler) => {
+	const grammar_clike = {
+		comment: [
+			{
+				pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+				lookbehind: true,
+				greedy: true,
+			},
+			{
+				pattern: /(^|[^\\:])\/\/.*/,
+				lookbehind: true,
+				greedy: true,
+			},
+		],
+		string: {
+			pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+			greedy: true,
+		},
+		class_name: {
+			pattern: new RegExp(`(\\b(?:${class_keywords}|trait)\\s+|\\bcatch\\s+\\()[\\w.\\\\]+`, 'i'),
+			lookbehind: true,
+			inside: {
+				punctuation: /[.\\]/,
+			},
+		},
+		keyword:
+			/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+		boolean: /\b(?:false|true)\b/,
+		function: /\b\w+(?=\()/,
+		number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+		operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+		punctuation: /[{}[\];(),.:]/,
+	} satisfies SyntaxGrammarRaw;
+
+	syntax_styler.add_lang('clike', grammar_clike);
+};

package/src/lib/grammar_css.ts

@@ -0,0 +1,84 @@
+import type {AddSyntaxGrammar, SyntaxGrammarRaw} from './syntax_styler.js';
+import {grammar_markup_add_attribute, grammar_markup_add_inlined} from './grammar_markup.js';
+
+var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+
+/**
+ * Based on Prism (https://github.com/PrismJS/prism)
+ * by Lea Verou (https://lea.verou.me/)
+ *
+ * MIT license
+ *
+ * @see LICENSE
+ */
+export const add_grammar_css: AddSyntaxGrammar = (syntax_styler) => {
+	const grammar_css = {
+		comment: /\/\*[\s\S]*?\*\//,
+		atrule: {
+			pattern: RegExp(
+				'@[\\w-](?:' +
+					/[^;{\s"']|\s+(?!\s)/.source +
+					'|' +
+					string.source +
+					')*?' +
+					/(?:;|(?=\s*\{))/.source,
+			),
+			inside: {
+				rule: /^@[\w-]+/,
+				selector_function_argument: {
+					pattern:
+						/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+					lookbehind: true,
+					alias: 'selector',
+				},
+				keyword: {
+					pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+					lookbehind: true,
+				},
+			} as SyntaxGrammarRaw, // see `rest` below
+		},
+		url: {
+			// https://drafts.csswg.org/css-values-3/#urls
+			pattern: RegExp(
+				'\\burl\\((?:' + string.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)',
+				'i',
+			),
+			greedy: true,
+			inside: {
+				function: /^url/i,
+				punctuation: /^\(|\)$/,
+				string: {
+					pattern: RegExp('^' + string.source + '$'),
+					alias: 'url',
+				},
+			},
+		},
+		selector: {
+			pattern: RegExp(
+				'(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|' + string.source + ')*(?=\\s*\\{)',
+			),
+			lookbehind: true,
+		},
+		string: {
+			pattern: string,
+			greedy: true,
+		},
+		property: {
+			pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+			lookbehind: true,
+		},
+		important: /!important\b/i,
+		function: {
+			pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+			lookbehind: true,
+		},
+		punctuation: /[(){};:,]/,
+	} satisfies SyntaxGrammarRaw;
+
+	grammar_css.atrule.inside.rest = grammar_css;
+
+	syntax_styler.add_lang('css', grammar_css);
+
+	grammar_markup_add_inlined(syntax_styler, 'style', 'css');
+	grammar_markup_add_attribute(syntax_styler, 'style', 'css');
+};