juxscript 1.1.57 → 1.1.59

package/lib/utils/codeparser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOxC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CAQrF;AAuFD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAiE9C;;;;;;;AAED,wBAKE"}
+{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AA2DA,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOxC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CAQrF;AAwOD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAkG9C;;;;;;;AAED,wBAKE"}

package/lib/utils/codeparser.js

@@ -12,6 +12,43 @@ const KEYWORDS = new Set([
     '!=', '!==', '+', '-', '*', '/', '%', '++', '--', '&&', '||', '!', '<', '>',
     '<=', '>=', '=>', '...', '.', ',', '(', ')', '{', '}', '[', ']', ':', '?'
 ]);
+/**
+ * Categorized token sets for semantic highlighting
+ */
+// Control flow keywords (loops, conditionals, etc.)
+const CONTROL_FLOW = new Set([
+    'if', 'else', 'switch', 'case', 'default',
+    'for', 'while', 'do', 'break', 'continue',
+    'return', 'throw', 'try', 'catch', 'finally'
+]);
+// Declaration keywords
+const DECLARATIONS = new Set([
+    'const', 'let', 'var', 'function', 'class',
+    'import', 'export', 'from', 'as',
+    'interface', 'type', 'enum', 'namespace',
+    'static', 'get', 'set', 'extends'
+]);
+// Operator keywords
+const OPERATORS = new Set([
+    'new', 'delete', 'typeof', 'instanceof',
+    'void', 'await', 'yield', 'in', 'of'
+]);
+// Special keywords
+const SPECIAL = new Set([
+    'this', 'super', 'async', 'debugger', 'with'
+]);
+// JUX-specific keywords
+const JUX_KEYWORDS = new Set([
+    'jux', 'state', 'registry', 'render', 'bind', 'sync'
+]);
+// Combine all keywords for quick lookup
+const ALL_KEYWORDS = new Set([
+    ...CONTROL_FLOW,
+    ...DECLARATIONS,
+    ...OPERATORS,
+    ...SPECIAL,
+    ...JUX_KEYWORDS
+]);
 /**
  * Escape HTML entities
  */
@@ -35,7 +72,85 @@ export function parseCode(code, language = 'javascript') {
     }));
 }
 /**
- * Tokenize a single line character-by-character
+ * Get the appropriate CSS class for a keyword
+ */
+function getKeywordClass(word) {
+    if (CONTROL_FLOW.has(word))
+        return 'token-control';
+    if (DECLARATIONS.has(word))
+        return 'token-declaration';
+    if (OPERATORS.has(word))
+        return 'token-operator-keyword';
+    if (SPECIAL.has(word))
+        return 'token-special';
+    if (JUX_KEYWORDS.has(word))
+        return 'token-jux';
+    return 'token-keyword'; // fallback
+}
+/**
+ * Check if character is a structural punctuation (braces, brackets, parens)
+ */
+function isStructural(char) {
+    return '(){}[]'.includes(char);
+}
+/**
+ * Check if character is a delimiter (semicolon, comma, colon)
+ */
+function isDelimiter(char) {
+    return ';,:'.includes(char);
+}
+/**
+ * Check if character is an operator
+ */
+function isOperator(char) {
+    return '+-*/%=<>!&|^~?'.includes(char);
+}
+/**
+ * Check if character starts a multi-char operator
+ */
+function consumeOperator(line, i) {
+    const char = line[i];
+    const next = line[i + 1];
+    const next2 = line[i + 2];
+    // Three-char operators
+    if (char === '=' && next === '=' && next2 === '=')
+        return '===';
+    if (char === '!' && next === '=' && next2 === '=')
+        return '!==';
+    if (char === '>' && next === '>' && next2 === '>')
+        return '>>>';
+    // Two-char operators
+    if (char === '=' && next === '=')
+        return '==';
+    if (char === '!' && next === '=')
+        return '!=';
+    if (char === '<' && next === '=')
+        return '<=';
+    if (char === '>' && next === '=')
+        return '>=';
+    if (char === '&' && next === '&')
+        return '&&';
+    if (char === '|' && next === '|')
+        return '||';
+    if (char === '+' && next === '+')
+        return '++';
+    if (char === '-' && next === '-')
+        return '--';
+    if (char === '=' && next === '>')
+        return '=>';
+    if (char === '>' && next === '>')
+        return '>>';
+    if (char === '<' && next === '<')
+        return '<<';
+    if (char === '*' && next === '*')
+        return '**';
+    if (char === '.' && next === '.' && next2 === '.')
+        return '...';
+    // Single-char operator
+    return char;
+}
+/**
+ * Tokenize a single line character-by-character with semantic categories
  */
 function tokenizeLine(line) {
     if (!line.trim())
@@ -43,6 +158,10 @@ function tokenizeLine(line) {
     let result = '';
     let i = 0;
     const len = line.length;
+    // Check for comment at start
+    if (line.trim().startsWith('//')) {
+        return `<span class="token-comment">${escapeHtml(line)}</span>`;
+    }
     while (i < len) {
         const char = line[i];
         // Whitespace - preserve
@@ -51,12 +170,59 @@ function tokenizeLine(line) {
             i++;
             continue;
         }
+        // Comment (// or /* */)
+        if (char === '/' && i + 1 < len) {
+            if (line[i + 1] === '/') {
+                // Line comment - consume rest of line
+                const comment = line.slice(i);
+                result += `<span class="token-comment">${escapeHtml(comment)}</span>`;
+                break;
+            }
+            else if (line[i + 1] === '*') {
+                // Block comment start
+                const commentEnd = line.indexOf('*/', i + 2);
+                if (commentEnd !== -1) {
+                    const comment = line.slice(i, commentEnd + 2);
+                    result += `<span class="token-comment">${escapeHtml(comment)}</span>`;
+                    i = commentEnd + 2;
+                    continue;
+                }
+            }
+        }
+        // String literals (single, double, backtick)
+        if (char === '"' || char === "'" || char === '`') {
+            let j = i + 1;
+            let escaped = false;
+            // Find matching quote
+            while (j < len) {
+                if (escaped) {
+                    escaped = false;
+                    j++;
+                    continue;
+                }
+                if (line[j] === '\\') {
+                    escaped = true;
+                    j++;
+                    continue;
+                }
+                if (line[j] === char) {
+                    j++;
+                    break;
+                }
+                j++;
+            }
+            const str = line.slice(i, j);
+            result += `<span class="token-string">${escapeHtml(str)}</span>`;
+            i = j;
+            continue;
+        }
         // Word (identifier or keyword)
         if (/[a-zA-Z_$]/.test(char)) {
             const word = consumeWord(line, i);
             const escaped = escapeHtml(word);
-            if (KEYWORDS.has(word)) {
-                result += `<span class="token-keyword">${escaped}</span>`;
+            if (ALL_KEYWORDS.has(word)) {
+                const tokenClass = getKeywordClass(word);
+                result += `<span class="${tokenClass}">${escaped}</span>`;
             }
             else {
                 result += escaped;
@@ -71,6 +237,25 @@ function tokenizeLine(line) {
             i += num.length;
             continue;
         }
+        // Operators (multi-char)
+        if (isOperator(char)) {
+            const op = consumeOperator(line, i);
+            result += `<span class="token-operator">${escapeHtml(op)}</span>`;
+            i += op.length;
+            continue;
+        }
+        // Structural punctuation (braces, brackets, parens)
+        if (isStructural(char)) {
+            result += `<span class="token-structural">${escapeHtml(char)}</span>`;
+            i++;
+            continue;
+        }
+        // Delimiters (semicolon, comma, colon)
+        if (isDelimiter(char)) {
+            result += `<span class="token-delimiter">${escapeHtml(char)}</span>`;
+            i++;
+            continue;
+        }
         // Everything else - just escape and append
         result += escapeHtml(char);
         i++;
@@ -119,7 +304,7 @@ export function renderLineWithTokens(parsedLine) {
  */
 export function getSyntaxHighlightCSS() {
     return `
-/* Simple Code Highlighting */
+/* Semantic Code Highlighting */
 .jux-code {
     font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
     font-size: 14px;
@@ -173,13 +358,46 @@ export function getSyntaxHighlightCSS() {
     display: none;
 }
 
-/* Token colors */
-.token-keyword { 
-    color: #c678dd; 
+/* Token colors - Semantic categories */
+.token-control { 
+    color: #c678dd;  /* Purple - control flow (if, for, return) */
     font-weight: 600; 
 }
+.token-declaration { 
+    color: #61afef;  /* Blue - declarations (const, let, function) */
+    font-weight: 600; 
+}
+.token-operator-keyword { 
+    color: #e06c75;  /* Red - operator keywords (typeof, instanceof) */
+    font-weight: 600; 
+}
+.token-special { 
+    color: #e5c07b;  /* Yellow - special keywords (this, super, async) */
+    font-weight: 600; 
+}
+.token-jux { 
+    color: #56b6c2;  /* Cyan - JUX-specific (jux, state, render) */
+    font-weight: 700; 
+}
 .token-number {
-    color: #d19a66;
+    color: #d19a66;  /* Orange - numbers */
+}
+.token-string {
+    color: #98c379;  /* Green - strings */
+}
+.token-comment {
+    color: #5c6370;  /* Gray - comments */
+    font-style: italic;
+}
+.token-structural {
+    color: #abb2bf;  /* Light gray - braces, brackets, parens */
+    font-weight: 600;
+}
+.token-delimiter {
+    color: #777;     /* Dark gray - semicolons, commas, colons */
+}
+.token-operator {
+    color: #56b6c2;  /* Cyan - operators (+, -, *, etc.) */
 }
   `;
 }

package/lib/utils/codeparser.ts

@@ -13,6 +13,50 @@ const KEYWORDS = new Set([
     '<=', '>=', '=>', '...', '.', ',', '(', ')', '{', '}', '[', ']', ':', '?'
 ]);
 
+/**
+ * Categorized token sets for semantic highlighting
+ */
+
+// Control flow keywords (loops, conditionals, etc.)
+const CONTROL_FLOW = new Set([
+    'if', 'else', 'switch', 'case', 'default',
+    'for', 'while', 'do', 'break', 'continue',
+    'return', 'throw', 'try', 'catch', 'finally'
+]);
+
+// Declaration keywords
+const DECLARATIONS = new Set([
+    'const', 'let', 'var', 'function', 'class',
+    'import', 'export', 'from', 'as',
+    'interface', 'type', 'enum', 'namespace',
+    'static', 'get', 'set', 'extends'
+]);
+
+// Operator keywords
+const OPERATORS = new Set([
+    'new', 'delete', 'typeof', 'instanceof',
+    'void', 'await', 'yield', 'in', 'of'
+]);
+
+// Special keywords
+const SPECIAL = new Set([
+    'this', 'super', 'async', 'debugger', 'with'
+]);
+
+// JUX-specific keywords
+const JUX_KEYWORDS = new Set([
+    'jux', 'state', 'registry', 'render', 'bind', 'sync'
+]);
+
+// Combine all keywords for quick lookup
+const ALL_KEYWORDS = new Set([
+    ...CONTROL_FLOW,
+    ...DECLARATIONS,
+    ...OPERATORS,
+    ...SPECIAL,
+    ...JUX_KEYWORDS
+]);
+
 export interface ParsedLine {
     lineNumber: number;
     html: string;
@@ -45,7 +89,72 @@ export function parseCode(code: string, language: string = 'javascript'): Parsed
 }
 
 /**
- * Tokenize a single line character-by-character
+ * Get the appropriate CSS class for a keyword
+ */
+function getKeywordClass(word: string): string {
+    if (CONTROL_FLOW.has(word)) return 'token-control';
+    if (DECLARATIONS.has(word)) return 'token-declaration';
+    if (OPERATORS.has(word)) return 'token-operator-keyword';
+    if (SPECIAL.has(word)) return 'token-special';
+    if (JUX_KEYWORDS.has(word)) return 'token-jux';
+    return 'token-keyword'; // fallback
+}
+
+/**
+ * Check if character is a structural punctuation (braces, brackets, parens)
+ */
+function isStructural(char: string): boolean {
+    return '(){}[]'.includes(char);
+}
+
+/**
+ * Check if character is a delimiter (semicolon, comma, colon)
+ */
+function isDelimiter(char: string): boolean {
+    return ';,:'.includes(char);
+}
+
+/**
+ * Check if character is an operator
+ */
+function isOperator(char: string): boolean {
+    return '+-*/%=<>!&|^~?'.includes(char);
+}
+
+/**
+ * Check if character starts a multi-char operator
+ */
+function consumeOperator(line: string, i: number): string {
+    const char = line[i];
+    const next = line[i + 1];
+    const next2 = line[i + 2];
+
+    // Three-char operators
+    if (char === '=' && next === '=' && next2 === '=') return '===';
+    if (char === '!' && next === '=' && next2 === '=') return '!==';
+    if (char === '>' && next === '>' && next2 === '>') return '>>>';
+
+    // Two-char operators
+    if (char === '=' && next === '=') return '==';
+    if (char === '!' && next === '=') return '!=';
+    if (char === '<' && next === '=') return '<=';
+    if (char === '>' && next === '=') return '>=';
+    if (char === '&' && next === '&') return '&&';
+    if (char === '|' && next === '|') return '||';
+    if (char === '+' && next === '+') return '++';
+    if (char === '-' && next === '-') return '--';
+    if (char === '=' && next === '>') return '=>';
+    if (char === '>' && next === '>') return '>>';
+    if (char === '<' && next === '<') return '<<';
+    if (char === '*' && next === '*') return '**';
+    if (char === '.' && next === '.' && next2 === '.') return '...';
+
+    // Single-char operator
+    return char;
+}
+
+/**
+ * Tokenize a single line character-by-character with semantic categories
  */
 function tokenizeLine(line: string): string {
     if (!line.trim()) return ' ';
@@ -54,6 +163,11 @@ function tokenizeLine(line: string): string {
     let i = 0;
     const len = line.length;
 
+    // Check for comment at start
+    if (line.trim().startsWith('//')) {
+        return `<span class="token-comment">${escapeHtml(line)}</span>`;
+    }
+
     while (i < len) {
         const char = line[i];
 
@@ -64,13 +178,66 @@ function tokenizeLine(line: string): string {
             continue;
         }
 
+        // Comment (// or /* */)
+        if (char === '/' && i + 1 < len) {
+            if (line[i + 1] === '/') {
+                // Line comment - consume rest of line
+                const comment = line.slice(i);
+                result += `<span class="token-comment">${escapeHtml(comment)}</span>`;
+                break;
+            } else if (line[i + 1] === '*') {
+                // Block comment start
+                const commentEnd = line.indexOf('*/', i + 2);
+                if (commentEnd !== -1) {
+                    const comment = line.slice(i, commentEnd + 2);
+                    result += `<span class="token-comment">${escapeHtml(comment)}</span>`;
+                    i = commentEnd + 2;
+                    continue;
+                }
+            }
+        }
+
+        // String literals (single, double, backtick)
+        if (char === '"' || char === "'" || char === '`') {
+            let j = i + 1;
+            let escaped = false;
+
+            // Find matching quote
+            while (j < len) {
+                if (escaped) {
+                    escaped = false;
+                    j++;
+                    continue;
+                }
+
+                if (line[j] === '\\') {
+                    escaped = true;
+                    j++;
+                    continue;
+                }
+
+                if (line[j] === char) {
+                    j++;
+                    break;
+                }
+
+                j++;
+            }
+
+            const str = line.slice(i, j);
+            result += `<span class="token-string">${escapeHtml(str)}</span>`;
+            i = j;
+            continue;
+        }
+
         // Word (identifier or keyword)
         if (/[a-zA-Z_$]/.test(char)) {
             const word = consumeWord(line, i);
             const escaped = escapeHtml(word);
 
-            if (KEYWORDS.has(word)) {
-                result += `<span class="token-keyword">${escaped}</span>`;
+            if (ALL_KEYWORDS.has(word)) {
+                const tokenClass = getKeywordClass(word);
+                result += `<span class="${tokenClass}">${escaped}</span>`;
             } else {
                 result += escaped;
             }
@@ -87,6 +254,28 @@ function tokenizeLine(line: string): string {
             continue;
         }
 
+        // Operators (multi-char)
+        if (isOperator(char)) {
+            const op = consumeOperator(line, i);
+            result += `<span class="token-operator">${escapeHtml(op)}</span>`;
+            i += op.length;
+            continue;
+        }
+
+        // Structural punctuation (braces, brackets, parens)
+        if (isStructural(char)) {
+            result += `<span class="token-structural">${escapeHtml(char)}</span>`;
+            i++;
+            continue;
+        }
+
+        // Delimiters (semicolon, comma, colon)
+        if (isDelimiter(char)) {
+            result += `<span class="token-delimiter">${escapeHtml(char)}</span>`;
+            i++;
+            continue;
+        }
+
         // Everything else - just escape and append
         result += escapeHtml(char);
         i++;
@@ -141,7 +330,7 @@ export function renderLineWithTokens(parsedLine: ParsedLine): string {
  */
 export function getSyntaxHighlightCSS(): string {
     return `
-/* Simple Code Highlighting */
+/* Semantic Code Highlighting */
 .jux-code {
     font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
     font-size: 14px;
@@ -195,13 +384,46 @@ export function getSyntaxHighlightCSS(): string {
     display: none;
 }
 
-/* Token colors */
-.token-keyword { 
-    color: #c678dd; 
+/* Token colors - Semantic categories */
+.token-control { 
+    color: #c678dd;  /* Purple - control flow (if, for, return) */
+    font-weight: 600; 
+}
+.token-declaration { 
+    color: #61afef;  /* Blue - declarations (const, let, function) */
+    font-weight: 600; 
+}
+.token-operator-keyword { 
+    color: #e06c75;  /* Red - operator keywords (typeof, instanceof) */
+    font-weight: 600; 
+}
+.token-special { 
+    color: #e5c07b;  /* Yellow - special keywords (this, super, async) */
     font-weight: 600; 
 }
+.token-jux { 
+    color: #56b6c2;  /* Cyan - JUX-specific (jux, state, render) */
+    font-weight: 700; 
+}
 .token-number {
-    color: #d19a66;
+    color: #d19a66;  /* Orange - numbers */
+}
+.token-string {
+    color: #98c379;  /* Green - strings */
+}
+.token-comment {
+    color: #5c6370;  /* Gray - comments */
+    font-style: italic;
+}
+.token-structural {
+    color: #abb2bf;  /* Light gray - braces, brackets, parens */
+    font-weight: 600;
+}
+.token-delimiter {
+    color: #777;     /* Dark gray - semicolons, commas, colons */
+}
+.token-operator {
+    color: #56b6c2;  /* Cyan - operators (+, -, *, etc.) */
 }
   `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.57",
+  "version": "1.1.59",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",