@easemate/web-kit 0.1.0

package/build/components/code/index.cjs

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Code = void 0;
+const lit_html_1 = require("lit-html");
+const highlight_api_1 = require("./utils/highlight-api.cjs");
+const syntax_highlighter_theme_1 = require("./utils/syntax-highlighter-theme.cjs");
+const syntax_tokenizer_1 = require("./utils/syntax-tokenizer.cjs");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+const Query_1 = require("~/decorators/Query");
+@(0, Component_1.Component)({
+    tag: 'ease-code',
+    shadowMode: 'open',
+    autoSlot: false,
+    styles: `
+    :host {
+      display: block;
+      position: relative;
+      color: var(--ease-code-color, var(--color-blue-100));
+    }
+
+    pre {
+      margin: 0;
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+      font-size: var(--ease-code-font-size, var(--ease-font-size-sm, 12px));
+      line-height: var(--ease-code-line-height, 1.4);
+    }
+
+    code {
+      white-space: pre-wrap;
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `<pre><code><slot></slot></code></pre>`;
+    }
+})
+class Code extends HTMLElement {
+    #instanceId = `hl-${crypto.randomUUID()}`;
+    #registeredHighlights = new Set();
+    #observer = null;
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor language = null;
+    @(0, Query_1.Query)('code')
+    accessor codeElement = null;
+    connectedCallback() {
+        this.#observer = new MutationObserver(() => this.#processContent());
+        this.#observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        this.#processContent();
+    }
+    disconnectedCallback() {
+        this.#observer?.disconnect();
+        this.#cleanupHighlights();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'language') {
+            this.#processContent();
+        }
+    }
+    get currentLanguage() {
+        return this.language?.toLowerCase() ?? 'plaintext';
+    }
+    afterRender() {
+        this.#processContent();
+    }
+    #renderStyles = () => {
+        const style = document.createElement('style');
+        style.setAttribute('data-highlight-styles', this.#instanceId);
+        const highlightStyles = (0, syntax_highlighter_theme_1.generateHighlightStyles)(this.#instanceId);
+        style.textContent = highlightStyles;
+        if (this.shadowRoot) {
+            this.shadowRoot.appendChild(style);
+        }
+    };
+    #cleanupStyles() {
+        const styles = this.shadowRoot?.querySelectorAll(`style[data-highlight-styles="${this.#instanceId}"]`);
+        if (styles) {
+            for (const style of styles) {
+                style.remove();
+            }
+        }
+    }
+    #getHighlightName(type) {
+        return `syntax-${type}-${this.#instanceId}`;
+    }
+    #processContent() {
+        let rawCode = this.textContent || '';
+        rawCode = (0, syntax_tokenizer_1.normalizeIndent)(rawCode);
+        if (!this.codeElement) {
+            return;
+        }
+        this.codeElement.textContent = rawCode;
+        this.#cleanupHighlights();
+        if (!rawCode.trim() || !highlight_api_1.SUPPORTS_HIGHLIGHT_API) {
+            return;
+        }
+        const textNode = this.codeElement.firstChild;
+        if (!textNode) {
+            return;
+        }
+        this.#highlightCode(rawCode, this.currentLanguage, textNode);
+    }
+    #highlightCode(code, language, textNode) {
+        const api = (0, highlight_api_1.getHighlightAPI)();
+        if (!api) {
+            return;
+        }
+        const tokens = (0, syntax_tokenizer_1.tokenize)(code, language);
+        const highlightMap = new Map();
+        for (const token of tokens) {
+            if (token.start >= token.end) {
+                continue;
+            }
+            try {
+                this.#renderStyles();
+                const range = document.createRange();
+                range.setStart(textNode, token.start);
+                range.setEnd(textNode, token.end);
+                if (!highlightMap.has(token.type)) {
+                    highlightMap.set(token.type, []);
+                }
+                highlightMap.get(token.type)?.push(range);
+            }
+            catch {
+                // Ignore range creation errors
+            }
+        }
+        for (const [type, ranges] of highlightMap.entries()) {
+            if (ranges.length) {
+                const highlightName = this.#getHighlightName(type);
+                const highlight = new api.Highlight(...ranges);
+                api.highlights.set(highlightName, highlight);
+                this.#registeredHighlights.add(highlightName);
+            }
+        }
+    }
+    #cleanupHighlights() {
+        const api = (0, highlight_api_1.getHighlightAPI)();
+        if (!api) {
+            return;
+        }
+        for (const name of this.#registeredHighlights) {
+            api.highlights.delete(name);
+        }
+        this.#cleanupStyles();
+        this.#registeredHighlights.clear();
+    }
+}
+exports.Code = Code;

package/build/components/code/index.d.cts

@@ -0,0 +1,11 @@
+export declare class Code extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor language: string | null;
+    accessor codeElement: HTMLElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get currentLanguage(): string;
+    afterRender(): void;
+}

package/build/components/code/index.d.ts

@@ -0,0 +1,11 @@
+export declare class Code extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor language: string | null;
+    accessor codeElement: HTMLElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get currentLanguage(): string;
+    afterRender(): void;
+}

package/build/components/code/index.js

@@ -0,0 +1,148 @@
+import { html } from 'lit-html';
+import { getHighlightAPI, SUPPORTS_HIGHLIGHT_API } from "./utils/highlight-api.js";
+import { generateHighlightStyles } from "./utils/syntax-highlighter-theme.js";
+import { normalizeIndent, tokenize } from "./utils/syntax-tokenizer.js";
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+@Component({
+    tag: 'ease-code',
+    shadowMode: 'open',
+    autoSlot: false,
+    styles: `
+    :host {
+      display: block;
+      position: relative;
+      color: var(--ease-code-color, var(--color-blue-100));
+    }
+
+    pre {
+      margin: 0;
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+      font-size: var(--ease-code-font-size, var(--ease-font-size-sm, 12px));
+      line-height: var(--ease-code-line-height, 1.4);
+    }
+
+    code {
+      white-space: pre-wrap;
+    }
+  `,
+    template() {
+        return html `<pre><code><slot></slot></code></pre>`;
+    }
+})
+export class Code extends HTMLElement {
+    #instanceId = `hl-${crypto.randomUUID()}`;
+    #registeredHighlights = new Set();
+    #observer = null;
+    @Prop({ reflect: true })
+    accessor language = null;
+    @Query('code')
+    accessor codeElement = null;
+    connectedCallback() {
+        this.#observer = new MutationObserver(() => this.#processContent());
+        this.#observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        this.#processContent();
+    }
+    disconnectedCallback() {
+        this.#observer?.disconnect();
+        this.#cleanupHighlights();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'language') {
+            this.#processContent();
+        }
+    }
+    get currentLanguage() {
+        return this.language?.toLowerCase() ?? 'plaintext';
+    }
+    afterRender() {
+        this.#processContent();
+    }
+    #renderStyles = () => {
+        const style = document.createElement('style');
+        style.setAttribute('data-highlight-styles', this.#instanceId);
+        const highlightStyles = generateHighlightStyles(this.#instanceId);
+        style.textContent = highlightStyles;
+        if (this.shadowRoot) {
+            this.shadowRoot.appendChild(style);
+        }
+    };
+    #cleanupStyles() {
+        const styles = this.shadowRoot?.querySelectorAll(`style[data-highlight-styles="${this.#instanceId}"]`);
+        if (styles) {
+            for (const style of styles) {
+                style.remove();
+            }
+        }
+    }
+    #getHighlightName(type) {
+        return `syntax-${type}-${this.#instanceId}`;
+    }
+    #processContent() {
+        let rawCode = this.textContent || '';
+        rawCode = normalizeIndent(rawCode);
+        if (!this.codeElement) {
+            return;
+        }
+        this.codeElement.textContent = rawCode;
+        this.#cleanupHighlights();
+        if (!rawCode.trim() || !SUPPORTS_HIGHLIGHT_API) {
+            return;
+        }
+        const textNode = this.codeElement.firstChild;
+        if (!textNode) {
+            return;
+        }
+        this.#highlightCode(rawCode, this.currentLanguage, textNode);
+    }
+    #highlightCode(code, language, textNode) {
+        const api = getHighlightAPI();
+        if (!api) {
+            return;
+        }
+        const tokens = tokenize(code, language);
+        const highlightMap = new Map();
+        for (const token of tokens) {
+            if (token.start >= token.end) {
+                continue;
+            }
+            try {
+                this.#renderStyles();
+                const range = document.createRange();
+                range.setStart(textNode, token.start);
+                range.setEnd(textNode, token.end);
+                if (!highlightMap.has(token.type)) {
+                    highlightMap.set(token.type, []);
+                }
+                highlightMap.get(token.type)?.push(range);
+            }
+            catch {
+                // Ignore range creation errors
+            }
+        }
+        for (const [type, ranges] of highlightMap.entries()) {
+            if (ranges.length) {
+                const highlightName = this.#getHighlightName(type);
+                const highlight = new api.Highlight(...ranges);
+                api.highlights.set(highlightName, highlight);
+                this.#registeredHighlights.add(highlightName);
+            }
+        }
+    }
+    #cleanupHighlights() {
+        const api = getHighlightAPI();
+        if (!api) {
+            return;
+        }
+        for (const name of this.#registeredHighlights) {
+            api.highlights.delete(name);
+        }
+        this.#cleanupStyles();
+        this.#registeredHighlights.clear();
+    }
+}

package/build/components/code/utils/highlight-api.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHighlightAPI = exports.SUPPORTS_HIGHLIGHT_API = void 0;
+exports.SUPPORTS_HIGHLIGHT_API = typeof window !== 'undefined' &&
+    typeof window.CSS !== 'undefined' &&
+    !!window.CSS?.highlights &&
+    typeof window.Highlight === 'function';
+const getHighlightAPI = () => {
+    if (!exports.SUPPORTS_HIGHLIGHT_API) {
+        return null;
+    }
+    const w = window;
+    return {
+        Highlight: w.Highlight,
+        highlights: w.CSS.highlights
+    };
+};
+exports.getHighlightAPI = getHighlightAPI;

package/build/components/code/utils/highlight-api.d.cts

@@ -0,0 +1,7 @@
+interface HighlightAPI {
+    Highlight: new (...ranges: Range[]) => unknown;
+    highlights: Map<string, unknown>;
+}
+export declare const SUPPORTS_HIGHLIGHT_API: boolean;
+export declare const getHighlightAPI: () => HighlightAPI | null;
+export {};

package/build/components/code/utils/highlight-api.d.ts

@@ -0,0 +1,7 @@
+interface HighlightAPI {
+    Highlight: new (...ranges: Range[]) => unknown;
+    highlights: Map<string, unknown>;
+}
+export declare const SUPPORTS_HIGHLIGHT_API: boolean;
+export declare const getHighlightAPI: () => HighlightAPI | null;
+export {};

package/build/components/code/utils/highlight-api.js

@@ -0,0 +1,14 @@
+export const SUPPORTS_HIGHLIGHT_API = typeof window !== 'undefined' &&
+    typeof window.CSS !== 'undefined' &&
+    !!window.CSS?.highlights &&
+    typeof window.Highlight === 'function';
+export const getHighlightAPI = () => {
+    if (!SUPPORTS_HIGHLIGHT_API) {
+        return null;
+    }
+    const w = window;
+    return {
+        Highlight: w.Highlight,
+        highlights: w.CSS.highlights
+    };
+};

package/build/components/code/utils/syntax-grammars.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GRAMMARS = exports.JSON_BASE = exports.CSS_BASE = exports.HTML_BASE = exports.TS_ADDITIONS = exports.JS_BASE = void 0;
+exports.JS_BASE = [
+    ['comment', /(\/\/.*$)|(\/\*[\s\S]*?\*\/)/m],
+    ['string', /('[^'\\]*(?:\\.[^'\\]*)*')|("[^"\\]*(?:\\.[^"\\]*)*")|(`[^`\\]*(?:\\.[^`\\]*)*`)/],
+    ['number', /\b\d+(\.\d+)?\b|0x[a-fA-F0-9]+\b/],
+    [
+        'keyword',
+        /\b(if|else|while|for|do|return|const|let|var|function|class|new|try|catch|finally|throw|import|export|default|async|await|extends|super|break|continue|switch|case|in|of|instanceof|typeof|delete|this|true|false|null|from|as)\b/
+    ],
+    ['function', /\b\w+(?=\()/],
+    ['operator', /[+\-*/%=<>!&|?.:]{1,3}/]
+];
+exports.TS_ADDITIONS = [
+    [
+        'keyword',
+        /\b(type|interface|enum|public|private|protected|readonly|namespace|module|declare|abstract|implements|static|any|unknown|never|string|number|boolean|void|symbol|bigint)\b/
+    ],
+    ['type', /\b([A-Z]\w*)\b/]
+];
+exports.HTML_BASE = [
+    ['comment', /<!--[\s\S]*?-->/m],
+    ['attribute', /(\s[a-zA-Z0-9_-]+)(?=\s*=)/],
+    ['string', /('[^']*')|("[^"]*")/],
+    ['tag', /(<\/?)([a-zA-Z0-9-]+)/],
+    ['keyword', /<!DOCTYPE[^>]*>/i]
+];
+exports.CSS_BASE = [
+    ['comment', /\/\*[\s\S]*?\*\//m],
+    ['string', /('[^']*')|("[^"]*")/],
+    ['number', /(#[0-9a-fA-F]{3,8})|\b-?\d+(\.\d+)?(px|em|rem|%|deg|s|ms|vh|vw|vmin|vmax)?\b/],
+    ['keyword', /(!important|@media|@import|@keyframes|@font-face|inherit|initial|unset|auto|none)\b/],
+    ['variable', /(--[a-zA-Z0-9_-]+)/],
+    ['property', /([a-zA-Z-]+)\s*(?=:)/],
+    ['selector', /(\.|#)([a-zA-Z0-9_-]+)|\[[^\]]+\]/],
+    ['tag', /\b([a-zA-Z]+)(?=\s*\{)/]
+];
+exports.JSON_BASE = [
+    ['property', /"([^"\\]*(?:\\.[^"\\]*)*)"(?=\s*:)/],
+    ['string', /"([^"\\]*(?:\\.[^"\\]*)*)"/],
+    ['number', /\b-?\d+(\.\d+)?([eE][+-]?\d+)?\b/],
+    ['keyword', /\b(true|false|null)\b/]
+];
+const baseGrammars = {
+    javascript: exports.JS_BASE,
+    js: exports.JS_BASE,
+    typescript: [...exports.JS_BASE, ...exports.TS_ADDITIONS],
+    ts: [...exports.JS_BASE, ...exports.TS_ADDITIONS],
+    html: exports.HTML_BASE,
+    css: exports.CSS_BASE,
+    json: exports.JSON_BASE
+};
+const TSX_GRAMMAR = [
+    ...exports.HTML_BASE,
+    ...(baseGrammars.typescript?.filter(([type]) => type !== 'operator') || [])
+];
+exports.GRAMMARS = {
+    ...baseGrammars,
+    tsx: TSX_GRAMMAR,
+    jsx: TSX_GRAMMAR
+};

package/build/components/code/utils/syntax-grammars.d.cts

@@ -0,0 +1,7 @@
+import type { Grammar } from "./syntax-highlighter-types.cjs";
+export declare const JS_BASE: Grammar;
+export declare const TS_ADDITIONS: Grammar;
+export declare const HTML_BASE: Grammar;
+export declare const CSS_BASE: Grammar;
+export declare const JSON_BASE: Grammar;
+export declare const GRAMMARS: Record<string, Grammar>;

package/build/components/code/utils/syntax-grammars.d.ts

@@ -0,0 +1,7 @@
+import type { Grammar } from "./syntax-highlighter-types.js";
+export declare const JS_BASE: Grammar;
+export declare const TS_ADDITIONS: Grammar;
+export declare const HTML_BASE: Grammar;
+export declare const CSS_BASE: Grammar;
+export declare const JSON_BASE: Grammar;
+export declare const GRAMMARS: Record<string, Grammar>;

package/build/components/code/utils/syntax-grammars.js

@@ -0,0 +1,59 @@
+export const JS_BASE = [
+    ['comment', /(\/\/.*$)|(\/\*[\s\S]*?\*\/)/m],
+    ['string', /('[^'\\]*(?:\\.[^'\\]*)*')|("[^"\\]*(?:\\.[^"\\]*)*")|(`[^`\\]*(?:\\.[^`\\]*)*`)/],
+    ['number', /\b\d+(\.\d+)?\b|0x[a-fA-F0-9]+\b/],
+    [
+        'keyword',
+        /\b(if|else|while|for|do|return|const|let|var|function|class|new|try|catch|finally|throw|import|export|default|async|await|extends|super|break|continue|switch|case|in|of|instanceof|typeof|delete|this|true|false|null|from|as)\b/
+    ],
+    ['function', /\b\w+(?=\()/],
+    ['operator', /[+\-*/%=<>!&|?.:]{1,3}/]
+];
+export const TS_ADDITIONS = [
+    [
+        'keyword',
+        /\b(type|interface|enum|public|private|protected|readonly|namespace|module|declare|abstract|implements|static|any|unknown|never|string|number|boolean|void|symbol|bigint)\b/
+    ],
+    ['type', /\b([A-Z]\w*)\b/]
+];
+export const HTML_BASE = [
+    ['comment', /<!--[\s\S]*?-->/m],
+    ['attribute', /(\s[a-zA-Z0-9_-]+)(?=\s*=)/],
+    ['string', /('[^']*')|("[^"]*")/],
+    ['tag', /(<\/?)([a-zA-Z0-9-]+)/],
+    ['keyword', /<!DOCTYPE[^>]*>/i]
+];
+export const CSS_BASE = [
+    ['comment', /\/\*[\s\S]*?\*\//m],
+    ['string', /('[^']*')|("[^"]*")/],
+    ['number', /(#[0-9a-fA-F]{3,8})|\b-?\d+(\.\d+)?(px|em|rem|%|deg|s|ms|vh|vw|vmin|vmax)?\b/],
+    ['keyword', /(!important|@media|@import|@keyframes|@font-face|inherit|initial|unset|auto|none)\b/],
+    ['variable', /(--[a-zA-Z0-9_-]+)/],
+    ['property', /([a-zA-Z-]+)\s*(?=:)/],
+    ['selector', /(\.|#)([a-zA-Z0-9_-]+)|\[[^\]]+\]/],
+    ['tag', /\b([a-zA-Z]+)(?=\s*\{)/]
+];
+export const JSON_BASE = [
+    ['property', /"([^"\\]*(?:\\.[^"\\]*)*)"(?=\s*:)/],
+    ['string', /"([^"\\]*(?:\\.[^"\\]*)*)"/],
+    ['number', /\b-?\d+(\.\d+)?([eE][+-]?\d+)?\b/],
+    ['keyword', /\b(true|false|null)\b/]
+];
+const baseGrammars = {
+    javascript: JS_BASE,
+    js: JS_BASE,
+    typescript: [...JS_BASE, ...TS_ADDITIONS],
+    ts: [...JS_BASE, ...TS_ADDITIONS],
+    html: HTML_BASE,
+    css: CSS_BASE,
+    json: JSON_BASE
+};
+const TSX_GRAMMAR = [
+    ...HTML_BASE,
+    ...(baseGrammars.typescript?.filter(([type]) => type !== 'operator') || [])
+];
+export const GRAMMARS = {
+    ...baseGrammars,
+    tsx: TSX_GRAMMAR,
+    jsx: TSX_GRAMMAR
+};

package/build/components/code/utils/syntax-highlighter-theme.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateHighlightStyles = exports.DEFAULT_THEME = void 0;
+exports.DEFAULT_THEME = {
+    keyword: 'var(--ease-syntax-keyword, #e47ab4)',
+    string: 'var(--ease-syntax-string, #6ad09d)',
+    comment: 'var(--ease-syntax-comment, var(--color-gray-700))',
+    number: 'var(--ease-syntax-number, #f2c24b)',
+    operator: 'var(--ease-syntax-operator, var(--color-gray-500))',
+    tag: 'var(--ease-syntax-tag, #c36571)',
+    attribute: 'var(--ease-syntax-attribute, #ff6600)',
+    property: 'var(--ease-syntax-property, #61bf90)',
+    type: 'var(--ease-syntax-type, #FFAB77)',
+    variable: 'var(--ease-syntax-variable, #ea7987)',
+    selector: 'var(--ease-syntax-selector, #4F9CED)',
+    function: 'var(--ease-syntax-function, #71a4f4)'
+};
+const generateHighlightStyles = (instanceId, theme = exports.DEFAULT_THEME) => {
+    let styles = '';
+    for (const [type, color] of Object.entries(theme)) {
+        const highlightName = `syntax-${type}-${instanceId}`;
+        const italic = type === 'comment' ? 'font-style: italic;' : '';
+        styles += `::highlight(${highlightName}) { color: ${color}; ${italic} }`;
+    }
+    return styles;
+};
+exports.generateHighlightStyles = generateHighlightStyles;

package/build/components/code/utils/syntax-highlighter-theme.d.cts

@@ -0,0 +1,3 @@
+import type { TokenType } from "./syntax-highlighter-types.cjs";
+export declare const DEFAULT_THEME: Record<TokenType, string>;
+export declare const generateHighlightStyles: (instanceId: string, theme?: Record<TokenType, string>) => string;

package/build/components/code/utils/syntax-highlighter-theme.d.ts

@@ -0,0 +1,3 @@
+import type { TokenType } from "./syntax-highlighter-types.js";
+export declare const DEFAULT_THEME: Record<TokenType, string>;
+export declare const generateHighlightStyles: (instanceId: string, theme?: Record<TokenType, string>) => string;

package/build/components/code/utils/syntax-highlighter-theme.js

@@ -0,0 +1,23 @@
+export const DEFAULT_THEME = {
+    keyword: 'var(--ease-syntax-keyword, #e47ab4)',
+    string: 'var(--ease-syntax-string, #6ad09d)',
+    comment: 'var(--ease-syntax-comment, var(--color-gray-700))',
+    number: 'var(--ease-syntax-number, #f2c24b)',
+    operator: 'var(--ease-syntax-operator, var(--color-gray-500))',
+    tag: 'var(--ease-syntax-tag, #c36571)',
+    attribute: 'var(--ease-syntax-attribute, #ff6600)',
+    property: 'var(--ease-syntax-property, #61bf90)',
+    type: 'var(--ease-syntax-type, #FFAB77)',
+    variable: 'var(--ease-syntax-variable, #ea7987)',
+    selector: 'var(--ease-syntax-selector, #4F9CED)',
+    function: 'var(--ease-syntax-function, #71a4f4)'
+};
+export const generateHighlightStyles = (instanceId, theme = DEFAULT_THEME) => {
+    let styles = '';
+    for (const [type, color] of Object.entries(theme)) {
+        const highlightName = `syntax-${type}-${instanceId}`;
+        const italic = type === 'comment' ? 'font-style: italic;' : '';
+        styles += `::highlight(${highlightName}) { color: ${color}; ${italic} }`;
+    }
+    return styles;
+};

package/build/components/code/utils/syntax-highlighter-types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/components/code/utils/syntax-highlighter-types.d.cts

@@ -0,0 +1,12 @@
+export type TokenType = 'comment' | 'string' | 'number' | 'keyword' | 'operator' | 'function' | 'type' | 'tag' | 'attribute' | 'property' | 'selector' | 'variable';
+export interface Token {
+    type: TokenType;
+    start: number;
+    end: number;
+}
+export type GrammarRule = [TokenType, RegExp];
+export type Grammar = GrammarRule[];
+export interface SyntaxHighlighterOptions {
+    language?: string;
+    theme?: Record<TokenType, string>;
+}

package/build/components/code/utils/syntax-highlighter-types.d.ts

@@ -0,0 +1,12 @@
+export type TokenType = 'comment' | 'string' | 'number' | 'keyword' | 'operator' | 'function' | 'type' | 'tag' | 'attribute' | 'property' | 'selector' | 'variable';
+export interface Token {
+    type: TokenType;
+    start: number;
+    end: number;
+}
+export type GrammarRule = [TokenType, RegExp];
+export type Grammar = GrammarRule[];
+export interface SyntaxHighlighterOptions {
+    language?: string;
+    theme?: Record<TokenType, string>;
+}

package/build/components/code/utils/syntax-highlighter-types.js

@@ -0,0 +1 @@
+export {};