@easemate/web-kit 0.1.5 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easemate/web-kit",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "UI kit of web components for easemate - a typescript animation library",
   "type": "module",
   "files": [
@@ -9,11 +9,17 @@
   "sideEffects": [
     "./build/register.js",
     "./build/register.cjs",
+    "./build/register.server.js",
+    "./build/register.server.cjs",
+    "./build/react.js",
+    "./build/react.cjs",
+    "./build/jsx.js",
+    "./build/jsx.cjs",
     "./build/styles/**/*.css"
   ],
   "scripts": {
     "clean": "rm -rf build",
-    "build": "npm run clean && zshy && tsc-alias -p tsconfig.json",
+    "build": "npm run clean && tsup",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "biome check src test",
@@ -21,7 +27,7 @@
     "format": "biome format src test",
     "format:fix": "biome format src test --write",
     "typecheck": "tsc --noEmit",
-    "prepare": "zshy && tsc-alias -p tsconfig.json"
+    "prepare": "tsup"
   },
   "keywords": [
     "ui",
@@ -48,52 +54,74 @@
   "dependencies": {
     "lit-html": "^3.2.1"
   },
-  "zshy": {
-    "exports": {
-      ".": "./src/index.ts",
-      "./elements": "./src/elements/index.ts",
-      "./decorators": "./src/decorators/index.ts",
-      "./utils": "./src/utils/index.ts",
-      "./theme": "./src/theme/index.ts",
-      "./register": "./src/register.ts"
-    }
-  },
   "exports": {
     ".": {
-      "types": "./build/index.d.cts",
+      "types": "./build/index.d.ts",
       "import": "./build/index.js",
       "require": "./build/index.cjs"
     },
     "./elements": {
-      "types": "./build/elements/index.d.cts",
-      "import": "./build/elements/index.js",
-      "require": "./build/elements/index.cjs"
+      "types": "./build/elements.d.ts",
+      "import": "./build/elements.js",
+      "require": "./build/elements.cjs"
     },
     "./decorators": {
-      "types": "./build/decorators/index.d.cts",
-      "import": "./build/decorators/index.js",
-      "require": "./build/decorators/index.cjs"
+      "types": "./build/decorators.d.ts",
+      "import": "./build/decorators.js",
+      "require": "./build/decorators.cjs"
     },
     "./utils": {
-      "types": "./build/utils/index.d.cts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.cjs"
+      "types": "./build/utils.d.ts",
+      "import": "./build/utils.js",
+      "require": "./build/utils.cjs"
     },
     "./theme": {
-      "types": "./build/theme/index.d.cts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.cjs"
+      "types": "./build/theme.d.ts",
+      "import": "./build/theme.js",
+      "require": "./build/theme.cjs"
+    },
+    "./react": {
+      "types": "./build/react.d.ts",
+      "import": "./build/react.js",
+      "require": "./build/react.cjs"
+    },
+    "./react/jsx": {
+      "types": "./build/jsx.d.ts",
+      "import": "./build/jsx.js",
+      "require": "./build/jsx.cjs"
     },
     "./register": {
-      "types": "./build/register.d.cts",
+      "types": "./build/register.d.ts",
+      "react-server": {
+        "types": "./build/register.server.d.ts",
+        "import": "./build/register.server.js",
+        "require": "./build/register.server.cjs"
+      },
+      "node": {
+        "types": "./build/register.server.d.ts",
+        "import": "./build/register.server.js",
+        "require": "./build/register.server.cjs"
+      },
       "import": "./build/register.js",
       "require": "./build/register.cjs"
     }
   },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "main": "./build/index.cjs",
-  "types": "./build/index.d.cts",
+  "types": "./build/index.d.ts",
   "module": "./build/index.js",
   "devDependencies": {
-    "tsc-alias": "^1.8.16"
+    "@swc/core": "^1.10.1",
+    "@types/react": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.0",
+    "unplugin-swc": "^1.5.1"
   }
 }

package/build/components/code/index.cjs

@@ -1,152 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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

@@ -1,18 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,62 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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
-};