@blcklab/yuirinx 0.1.1 → 0.1.2

package/README.md

@@ -5,8 +5,6 @@
   <img src="https://img.shields.io/github/license/blcklab/yuirinx?style=flat-square" alt="license" />
 </p>
 
-
-
 # Yuirinx
 
 A lightweight, synchronous syntax highlighter for modern JavaScript and TypeScript applications.
@@ -56,13 +54,7 @@ Add your preferred layout styles:
   overflow-x: auto;
   padding: 1.25rem;
   border-radius: 1rem;
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 0.875rem;
   line-height: 1.7;
   tab-size: 2;
@@ -71,16 +63,16 @@ Add your preferred layout styles:
 
 ## Features
 
-* Zero runtime dependencies
-* Synchronous API with no setup step
-* Safe HTML escaping
-* Individually importable languages and themes
-* ESM and CommonJS support
-* Inline-style and CSS-class rendering
-* Token API for custom renderers
-* Custom language and theme registration
-* Works in browsers, Node.js, workers, serverless, and edge runtimes
-* Safe plaintext fallback for unsupported languages
+- Zero runtime dependencies
+- Synchronous API with no setup step
+- Safe HTML escaping
+- Individually importable languages and themes
+- ESM and CommonJS support
+- Inline-style and CSS-class rendering
+- Token API for custom renderers
+- Custom language and theme registration
+- Works in browsers, Node.js, workers, serverless, and edge runtimes
+- Safe plaintext fallback for unsupported languages
 
 ## Tree-Shakable by Design
 
@@ -107,19 +99,16 @@ import { yuirinxPearl } from "@blcklab/yuirinx/theme/yuirinx-pearl";
 import { yuirinxAurora } from "@blcklab/yuirinx/theme/yuirinx-aurora";
 ```
 
-* **Yuirinx Noir** — a refined dark theme for documentation and long code samples
-* **Yuirinx Pearl** — a warm light theme with comfortable contrast
-* **Yuirinx Aurora** — an expressive dark theme for showcases and landing pages
+- **Yuirinx Noir** — a refined dark theme for documentation and long code samples
+- **Yuirinx Pearl** — a warm light theme with comfortable contrast
+- **Yuirinx Aurora** — an expressive dark theme for showcases and landing pages
 
 Register more than one theme when your app supports theme switching:
 
 ```ts
 const highlighter = createHighlighter({
   languages: [typescript],
-  themes: [
-    yuirinxNoir,
-    yuirinxPearl,
-  ],
+  themes: [yuirinxNoir, yuirinxPearl],
 });
 ```
 
@@ -151,10 +140,7 @@ The colors are deterministic, theme-aware, and stable across server and browser
 Inline styles work without extra setup. If you want full control through your own stylesheet, use class mode:
 
 ```ts
-import {
-  createHighlighter,
-  themeToCss,
-} from "@blcklab/yuirinx";
+import { createHighlighter, themeToCss } from "@blcklab/yuirinx";
 
 const html = highlighter.highlight(code, {
   lang: "typescript",
@@ -167,20 +153,17 @@ const css = themeToCss(yuirinxNoir);
 
 Class mode is useful for:
 
-* Content Security Policies that restrict inline styles
-* Automatic light and dark mode
-* Shared application stylesheets
-* Custom token styling
+- Content Security Policies that restrict inline styles
+- Automatic light and dark mode
+- Shared application stylesheets
+- Custom token styling
 
 ## Token API
 
 Use the lower-level token API when rendering code through Vue, React, a terminal, or another custom interface:
 
 ```ts
-const tokens = highlighter.tokenize(
-  `const enabled = true;`,
-  "typescript",
-);
+const tokens = highlighter.tokenize(`const enabled = true;`, "typescript");
 
 for (const token of tokens) {
   console.log(token.type, token.value);
@@ -193,16 +176,16 @@ Each token includes its type, source value, and original character offsets.
 
 Yuirinx includes independently importable grammars for popular web, systems, application, and configuration languages, including:
 
-* JavaScript, TypeScript, JSX, and TSX
-* HTML, XML, CSS, and SCSS
-* JSON, YAML, TOML, and INI
-* Markdown
-* Bash and shell scripts
-* Python, PHP, Ruby, and SQL
-* C, C++, C#, Java, Kotlin, Swift, Dart, Go, and Rust
-* Vue and Svelte
-* Dockerfile, Nginx, and GraphQL
-* Plaintext
+- JavaScript, TypeScript, JSX, and TSX
+- HTML, XML, CSS, and SCSS
+- JSON, YAML, TOML, and INI
+- Markdown
+- Bash and shell scripts
+- Python, PHP, Ruby, and SQL
+- C, C++, C#, Java, Kotlin, Swift, Dart, Go, and Rust
+- Vue and Svelte
+- Dockerfile, Nginx, and GraphQL
+- Plaintext
 
 Each grammar also registers common aliases such as `js`, `ts`, `py`, `md`, `yml`, `sh`, and `c++`.
 
@@ -212,12 +195,12 @@ Yuirinx treats source code as untrusted text.
 
 It:
 
-* Escapes HTML-sensitive characters
-* Never evaluates or executes source code
-* Does not use `eval` or `new Function`
-* Does not require DOM access
-* Preserves malformed and unfinished source safely
-* Falls back to escaped plaintext when a grammar is unavailable
+- Escapes HTML-sensitive characters
+- Never evaluates or executes source code
+- Does not use `eval` or `new Function`
+- Does not require DOM access
+- Preserves malformed and unfinished source safely
+- Falls back to escaped plaintext when a grammar is unavailable
 
 The returned HTML is intended for normal HTML content contexts. Do not place it directly inside JavaScript, CSS, or URL contexts.
 
@@ -225,16 +208,16 @@ The returned HTML is intended for normal HTML content contexts. Do not place it
 
 Complete guides and API documentation are available in the project repository:
 
-* [Getting started](https://github.com/blcklab/yuirinx/blob/main/docs/getting-started.md)
-* [API reference](https://github.com/blcklab/yuirinx/blob/main/docs/api.md)
-* [Rendering and styling](https://github.com/blcklab/yuirinx/blob/main/docs/rendering.md)
-* [Languages and aliases](https://github.com/blcklab/yuirinx/blob/main/docs/languages.md)
-* [Themes](https://github.com/blcklab/yuirinx/blob/main/docs/themes.md)
-* [Custom languages](https://github.com/blcklab/yuirinx/blob/main/docs/custom-languages.md)
-* [Custom themes](https://github.com/blcklab/yuirinx/blob/main/docs/custom-themes.md)
-* [Browser and framework usage](https://github.com/blcklab/yuirinx/blob/main/docs/browser-and-frameworks.md)
-* [Security](https://github.com/blcklab/yuirinx/blob/main/docs/security.md)
-* [Limitations](https://github.com/blcklab/yuirinx/blob/main/docs/limitations.md)
+- [Getting started](https://github.com/blcklab/yuirinx/blob/main/docs/getting-started.md)
+- [API reference](https://github.com/blcklab/yuirinx/blob/main/docs/api.md)
+- [Rendering and styling](https://github.com/blcklab/yuirinx/blob/main/docs/rendering.md)
+- [Languages and aliases](https://github.com/blcklab/yuirinx/blob/main/docs/languages.md)
+- [Themes](https://github.com/blcklab/yuirinx/blob/main/docs/themes.md)
+- [Custom languages](https://github.com/blcklab/yuirinx/blob/main/docs/custom-languages.md)
+- [Custom themes](https://github.com/blcklab/yuirinx/blob/main/docs/custom-themes.md)
+- [Browser and framework usage](https://github.com/blcklab/yuirinx/blob/main/docs/browser-and-frameworks.md)
+- [Security](https://github.com/blcklab/yuirinx/blob/main/docs/security.md)
+- [Limitations](https://github.com/blcklab/yuirinx/blob/main/docs/limitations.md)
 
 ## Project Status
 

package/dist/cjs/core/index.cjs

@@ -171,6 +171,13 @@ function classForToken(type, prefix) {
   const safeType = sanitizeClassPart(type.replace(/\./g, "-")) || "plain";
   return `${safeClassPrefix(prefix)}${safeType}`;
 }
+function classesForToken(type, prefix) {
+  const parts = type.split(".").filter(Boolean);
+  if (parts.length === 0) return [classForToken("plain", prefix)];
+  return parts.map(
+    (_, index) => classForToken(parts.slice(0, index + 1).join("."), prefix)
+  );
+}
 function classForFallbackLine(index, prefix) {
   return `${safeClassPrefix(prefix)}fallback-line-${index}`;
 }
@@ -305,7 +312,8 @@ function renderTokens(tokens, options, theme) {
     const escaped = escapeHtml(token.value);
     if (token.type === "plain") return escaped;
     if (mode === "classes") {
-      return `<span class="${escapeHtml(classForToken(token.type, prefix))}">${escaped}</span>`;
+      const classes = classesForToken(token.type, prefix);
+      return `<span class="${escapeHtml(classes.join(" "))}">${escaped}</span>`;
     }
     const declarations = styleToDeclarations(
       resolveTokenStyle(theme, token.type)
@@ -335,7 +343,10 @@ function themeToCss(theme, options = {}) {
     ].filter(Boolean);
     lines.push(`${selector}{${declarations.join(";")}}`);
   }
-  for (const [type, style] of Object.entries(theme.tokens)) {
+  const tokenStyles = Object.entries(theme.tokens).sort(
+    ([left], [right]) => left.split(".").length - right.split(".").length
+  );
+  for (const [type, style] of tokenStyles) {
     const declarations = styleToDeclarations(style);
     if (declarations)
       lines.push(
@@ -424,11 +435,13 @@ function tokenizeCompiled(code, grammar, maxStateDepth) {
         );
       }
       const context = {
+        source: code,
         language: grammar.id,
         state: stateName,
         stack: publicStack(grammar.id, stack),
         offset
       };
+      if (rule.when && !rule.when(match, context)) continue;
       const tokenType = resolveValue(
         rule.type,
         match,
@@ -470,7 +483,14 @@ function createHighlighter(options = {}) {
   const grammars = /* @__PURE__ */ new Map();
   const canonicalIds = /* @__PURE__ */ new Set();
   const themes = /* @__PURE__ */ new Map();
-  const maxStateDepth = Math.max(2, options.maxStateDepth ?? 64);
+  const requestedMaxStateDepth = options.maxStateDepth ?? 64;
+  if (!Number.isFinite(requestedMaxStateDepth) || !Number.isInteger(requestedMaxStateDepth) || requestedMaxStateDepth < 2) {
+    throw new YuirinxError(
+      "YUIRINX_INVALID_OPTION",
+      "maxStateDepth must be a finite integer greater than or equal to 2."
+    );
+  }
+  const maxStateDepth = requestedMaxStateDepth;
   const compiledPlaintext = compileGrammar(plaintextGrammar);
   const plaintextIds = /* @__PURE__ */ new Set([
     normalizeId(plaintextGrammar.id),
@@ -534,7 +554,7 @@ function createHighlighter(options = {}) {
   };
   const tokenize = (code, language) => tokenizeCompiled(code, resolveGrammar(language).grammar, maxStateDepth);
   const render = (tokens, renderOptions = {}) => renderTokens(tokens, renderOptions, resolveTheme(renderOptions.theme));
-  const highlight = (code, highlightOptions) => {
+  const highlight = (code, highlightOptions = {}) => {
     const language = highlightOptions.lang ?? options.defaultLanguage ?? "plaintext";
     const resolved = resolveGrammar(language);
     const theme = resolveTheme(highlightOptions.theme);
@@ -555,11 +575,20 @@ function createHighlighter(options = {}) {
     render,
     registerLanguage,
     registerTheme,
-    hasLanguage: (language) => grammars.has(normalizeId(language)),
+    hasLanguage: (language) => {
+      const id = normalizeId(language);
+      return plaintextIds.has(id) || grammars.has(id);
+    },
     hasTheme: (theme) => themes.has(normalizeId(theme)),
-    getLanguage: (language) => grammars.get(normalizeId(language))?.source,
+    getLanguage: (language) => {
+      const id = normalizeId(language);
+      return grammars.get(id)?.source ?? (plaintextIds.has(id) ? plaintextGrammar : void 0);
+    },
     getTheme: (theme) => themes.get(normalizeId(theme)),
-    listLanguages: () => Object.freeze([...canonicalIds]),
+    listLanguages: () => Object.freeze([
+      "plaintext",
+      ...[...canonicalIds].filter((id) => id !== "plaintext")
+    ]),
     listThemes: () => Object.freeze([...themes.keys()])
   };
 }

package/dist/cjs/index.cjs

@@ -176,6 +176,13 @@ function classForToken(type, prefix) {
   const safeType = sanitizeClassPart(type.replace(/\./g, "-")) || "plain";
   return `${safeClassPrefix(prefix)}${safeType}`;
 }
+function classesForToken(type, prefix) {
+  const parts = type.split(".").filter(Boolean);
+  if (parts.length === 0) return [classForToken("plain", prefix)];
+  return parts.map(
+    (_, index) => classForToken(parts.slice(0, index + 1).join("."), prefix)
+  );
+}
 function classForFallbackLine(index, prefix) {
   return `${safeClassPrefix(prefix)}fallback-line-${index}`;
 }
@@ -310,7 +317,8 @@ function renderTokens(tokens, options, theme) {
     const escaped = escapeHtml(token.value);
     if (token.type === "plain") return escaped;
     if (mode === "classes") {
-      return `<span class="${escapeHtml(classForToken(token.type, prefix))}">${escaped}</span>`;
+      const classes = classesForToken(token.type, prefix);
+      return `<span class="${escapeHtml(classes.join(" "))}">${escaped}</span>`;
     }
     const declarations = styleToDeclarations(
       resolveTokenStyle(theme, token.type)
@@ -340,7 +348,10 @@ function themeToCss(theme, options = {}) {
     ].filter(Boolean);
     lines.push(`${selector}{${declarations.join(";")}}`);
   }
-  for (const [type, style] of Object.entries(theme.tokens)) {
+  const tokenStyles = Object.entries(theme.tokens).sort(
+    ([left], [right]) => left.split(".").length - right.split(".").length
+  );
+  for (const [type, style] of tokenStyles) {
     const declarations = styleToDeclarations(style);
     if (declarations)
       lines.push(
@@ -429,11 +440,13 @@ function tokenizeCompiled(code, grammar, maxStateDepth) {
         );
       }
       const context = {
+        source: code,
         language: grammar.id,
         state: stateName,
         stack: publicStack(grammar.id, stack),
         offset
       };
+      if (rule.when && !rule.when(match, context)) continue;
       const tokenType = resolveValue(
         rule.type,
         match,
@@ -475,7 +488,14 @@ function createHighlighter(options = {}) {
   const grammars = /* @__PURE__ */ new Map();
   const canonicalIds = /* @__PURE__ */ new Set();
   const themes = /* @__PURE__ */ new Map();
-  const maxStateDepth = Math.max(2, options.maxStateDepth ?? 64);
+  const requestedMaxStateDepth = options.maxStateDepth ?? 64;
+  if (!Number.isFinite(requestedMaxStateDepth) || !Number.isInteger(requestedMaxStateDepth) || requestedMaxStateDepth < 2) {
+    throw new YuirinxError(
+      "YUIRINX_INVALID_OPTION",
+      "maxStateDepth must be a finite integer greater than or equal to 2."
+    );
+  }
+  const maxStateDepth = requestedMaxStateDepth;
   const compiledPlaintext = compileGrammar(plaintextGrammar);
   const plaintextIds = /* @__PURE__ */ new Set([
     normalizeId(plaintextGrammar.id),
@@ -539,7 +559,7 @@ function createHighlighter(options = {}) {
   };
   const tokenize2 = (code, language) => tokenizeCompiled(code, resolveGrammar(language).grammar, maxStateDepth);
   const render2 = (tokens, renderOptions = {}) => renderTokens(tokens, renderOptions, resolveTheme(renderOptions.theme));
-  const highlight2 = (code, highlightOptions) => {
+  const highlight2 = (code, highlightOptions = {}) => {
     const language = highlightOptions.lang ?? options.defaultLanguage ?? "plaintext";
     const resolved = resolveGrammar(language);
     const theme = resolveTheme(highlightOptions.theme);
@@ -560,18 +580,27 @@ function createHighlighter(options = {}) {
     render: render2,
     registerLanguage: registerLanguage2,
     registerTheme: registerTheme2,
-    hasLanguage: (language) => grammars.has(normalizeId(language)),
+    hasLanguage: (language) => {
+      const id = normalizeId(language);
+      return plaintextIds.has(id) || grammars.has(id);
+    },
     hasTheme: (theme) => themes.has(normalizeId(theme)),
-    getLanguage: (language) => grammars.get(normalizeId(language))?.source,
+    getLanguage: (language) => {
+      const id = normalizeId(language);
+      return grammars.get(id)?.source ?? (plaintextIds.has(id) ? plaintextGrammar : void 0);
+    },
     getTheme: (theme) => themes.get(normalizeId(theme)),
-    listLanguages: () => Object.freeze([...canonicalIds]),
+    listLanguages: () => Object.freeze([
+      "plaintext",
+      ...[...canonicalIds].filter((id) => id !== "plaintext")
+    ]),
     listThemes: () => Object.freeze([...themes.keys()])
   };
 }
 
 // src/singleton.ts
 var defaultHighlighter = createHighlighter();
-function highlight(code, options) {
+function highlight(code, options = {}) {
   return defaultHighlighter.highlight(code, options);
 }
 function tokenize(code, language) {

package/dist/cjs/languages/c.cjs

@@ -38,7 +38,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var numberRule = {
   type: "number",

package/dist/cjs/languages/cpp.cjs

@@ -38,7 +38,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var numberRule = {
   type: "number",

package/dist/cjs/languages/csharp.cjs

@@ -38,7 +38,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var numberRule = {
   type: "number",

package/dist/cjs/languages/css.cjs

@@ -32,7 +32,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var doubleStringRule = {
   type: "string",
@@ -61,7 +61,7 @@ function createCssGrammar(options) {
     { type: "number", pattern: /(?:\b\d*\.\d+|\b\d+)(?:e[+-]?\d+)?/i },
     {
       type: "unit",
-      pattern: /(?:%|px|r?em|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|s|ms|deg|rad|turn)\b/i
+      pattern: /(?:%(?![\w-])|(?:px|r?em|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|s|ms|deg|rad|turn)\b)/i
     },
     {
       type: "selector",

package/dist/cjs/languages/dart.cjs

@@ -38,7 +38,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var numberRule = {
   type: "number",

package/dist/cjs/languages/go.cjs

@@ -38,7 +38,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var numberRule = {
   type: "number",

package/dist/cjs/languages/java.cjs

@@ -38,7 +38,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var numberRule = {
   type: "number",

package/dist/cjs/languages/javascript.cjs

@@ -38,7 +38,7 @@ var punctuationRule = {
 };
 var operatorRule = {
   type: "operator",
-  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])+/
+  pattern: /(?:===|!==|>>>|<<=|>>=|=>|==|!=|<=|>=|&&|\|\||\?\?|\?\.|\+\+|--|\+=|-=|\*=|\/=|%=|\*\*|<<|>>|[+\-*/%=&|!<>^~?])/
 };
 var numberRule = {
   type: "number",
@@ -163,6 +163,18 @@ var BUILTINS = [
   "process",
   "window"
 ];
+function canStartRegex(source, offset) {
+  const before = source.slice(0, offset).trimEnd();
+  if (!before) return true;
+  const previous = before[before.length - 1] ?? "";
+  if (/[([{,:;=!?&|+\-*%^~<>]/.test(previous)) return true;
+  const word = /[A-Za-z_$][\w$]*$/.exec(before)?.[0];
+  return Boolean(
+    word && /^(?:await|case|delete|do|else|in|instanceof|new|of|return|throw|typeof|void|yield)$/.test(
+      word
+    )
+  );
+}
 function createEcmaGrammar(options) {
   const keywordValues = options.typescript ? [...JS_KEYWORDS, ...TS_KEYWORDS] : JS_KEYWORDS;
   const rootRules = [
@@ -173,16 +185,23 @@ function createEcmaGrammar(options) {
     { type: "string", pattern: /`/, push: "template" }
   ];
   if (options.jsx) {
+    if (options.typescript) {
+      rootRules.push({
+        type: "operator",
+        pattern: /<(?=[A-Za-z_$][\w$]*(?:\s+extends\s+[^>]+)?,?>\s*\()/
+      });
+    }
     rootRules.push({
       type: "tag.punctuation",
-      pattern: /<\/?/,
-      push: "jsxTag"
+      pattern: /<(?=[A-Za-z_$>])/,
+      push: "jsxTagName"
     });
   }
   rootRules.push(
     {
       type: "regex",
-      pattern: /\/(?![/*\s])(?:\\.|\[(?:\\.|[^\]\\])*\]|[^/\\\r\n])+\/[dgimsuvy]*/
+      pattern: /\/(?![/*\s])(?:\\.|\[(?:\\.|[^\]\\])*\]|[^/\\\r\n])+\/[dgimsuvy]*/,
+      when: (_match, context) => canStartRegex(context.source, context.offset)
     },
     numberRule,
     { type: "boolean", pattern: /\b(?:true|false)\b/ },
@@ -228,14 +247,54 @@ function createEcmaGrammar(options) {
           { include: "root" }
         ]
       },
-      jsxTag: {
+      jsxTagName: {
+        rules: [
+          { type: "tag.punctuation", pattern: />/, next: "jsxChildren" },
+          { type: "tag.punctuation", pattern: /\/>/, pop: true },
+          whitespaceRule,
+          {
+            type: "tag",
+            pattern: /[A-Za-z_$][\w$.-]*/,
+            next: "jsxAttributes"
+          },
+          punctuationRule
+        ]
+      },
+      jsxAttributes: {
         rules: [
-          { type: "tag.punctuation", pattern: /\/?>/, pop: true },
+          { type: "tag.punctuation", pattern: /\/>/, pop: true },
+          { type: "tag.punctuation", pattern: />/, next: "jsxChildren" },
           whitespaceRule,
           { type: "attribute.value", pattern: /"(?:\\.|[^"\\])*"?/ },
           { type: "attribute.value", pattern: /'(?:\\.|[^'\\])*'?/ },
           { type: "punctuation", pattern: /{/, push: "jsxExpression" },
           { type: "operator", pattern: /=/ },
+          { type: "attribute", pattern: /[A-Za-z_$][\w$.-]*/ },
+          punctuationRule
+        ]
+      },
+      jsxChildren: {
+        fallbackType: "plain",
+        rules: [
+          {
+            type: "tag.punctuation",
+            pattern: /<\/(?=[A-Za-z_$>])/,
+            push: "jsxClosingTag"
+          },
+          {
+            type: "tag.punctuation",
+            pattern: /<(?=[A-Za-z_$>])/,
+            push: "jsxTagName"
+          },
+          { type: "punctuation", pattern: /{/, push: "jsxExpression" },
+          { type: "plain", pattern: /[^<{]+/ },
+          { type: "plain", pattern: /[<{]/ }
+        ]
+      },
+      jsxClosingTag: {
+        rules: [
+          { type: "tag.punctuation", pattern: />/, pop: 2 },
+          whitespaceRule,
           { type: "tag", pattern: /[A-Za-z_$][\w$.-]*/ },
           punctuationRule
         ]