@nocturnium/svelte-ide 1.0.0 → 1.0.2

package/dist/components/editor/tokenizer/languages/javascript.js

@@ -4,48 +4,205 @@
 import { createToken } from '../base';
 // JavaScript/TypeScript keywords
 const keywords = new Set([
-    'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
-    'default', 'delete', 'do', 'else', 'enum', 'export', 'extends', 'finally',
-    'for', 'function', 'if', 'import', 'in', 'instanceof', 'let', 'new', 'of',
-    'return', 'static', 'super', 'switch', 'this', 'throw', 'try', 'typeof',
-    'var', 'void', 'while', 'with', 'yield', 'async', 'from', 'as', 'get', 'set'
+    'await',
+    'break',
+    'case',
+    'catch',
+    'class',
+    'const',
+    'continue',
+    'debugger',
+    'default',
+    'delete',
+    'do',
+    'else',
+    'enum',
+    'export',
+    'extends',
+    'finally',
+    'for',
+    'function',
+    'if',
+    'import',
+    'in',
+    'instanceof',
+    'let',
+    'new',
+    'of',
+    'return',
+    'static',
+    'super',
+    'switch',
+    'this',
+    'throw',
+    'try',
+    'typeof',
+    'var',
+    'void',
+    'while',
+    'with',
+    'yield',
+    'async',
+    'from',
+    'as',
+    'get',
+    'set'
 ]);
 // TypeScript-specific keywords
 const tsKeywords = new Set([
-    'abstract', 'any', 'as', 'asserts', 'bigint', 'boolean', 'declare', 'infer',
-    'interface', 'is', 'keyof', 'module', 'namespace', 'never', 'null', 'number',
-    'object', 'override', 'private', 'protected', 'public', 'readonly', 'require',
-    'string', 'symbol', 'type', 'undefined', 'unique', 'unknown', 'void'
+    'abstract',
+    'any',
+    'as',
+    'asserts',
+    'bigint',
+    'boolean',
+    'declare',
+    'infer',
+    'interface',
+    'is',
+    'keyof',
+    'module',
+    'namespace',
+    'never',
+    'null',
+    'number',
+    'object',
+    'override',
+    'private',
+    'protected',
+    'public',
+    'readonly',
+    'require',
+    'string',
+    'symbol',
+    'type',
+    'undefined',
+    'unique',
+    'unknown',
+    'void'
 ]);
 // Control flow keywords
 const controlKeywords = new Set([
-    'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'default', 'break',
-    'continue', 'return', 'throw', 'try', 'catch', 'finally', 'await', 'yield'
+    'if',
+    'else',
+    'for',
+    'while',
+    'do',
+    'switch',
+    'case',
+    'default',
+    'break',
+    'continue',
+    'return',
+    'throw',
+    'try',
+    'catch',
+    'finally',
+    'await',
+    'yield'
 ]);
 // Built-in constants
 const builtins = new Set(['true', 'false', 'null', 'undefined', 'NaN', 'Infinity']);
 // Built-in type names
 const builtinTypes = new Set([
-    'Array', 'Object', 'String', 'Number', 'Boolean', 'Function', 'Symbol',
-    'Promise', 'Map', 'Set', 'WeakMap', 'WeakSet', 'Date', 'RegExp', 'Error',
-    'TypeError', 'ReferenceError', 'SyntaxError', 'JSON', 'Math', 'console',
-    'window', 'document', 'globalThis', 'Buffer', 'process'
+    'Array',
+    'Object',
+    'String',
+    'Number',
+    'Boolean',
+    'Function',
+    'Symbol',
+    'Promise',
+    'Map',
+    'Set',
+    'WeakMap',
+    'WeakSet',
+    'Date',
+    'RegExp',
+    'Error',
+    'TypeError',
+    'ReferenceError',
+    'SyntaxError',
+    'JSON',
+    'Math',
+    'console',
+    'window',
+    'document',
+    'globalThis',
+    'Buffer',
+    'process'
 ]);
 /**
  * Tokens after which a regex literal can appear (expression start context)
  */
 const REGEX_VALID_AFTER = new Set([
     // Keywords that expect expressions
-    'return', 'throw', 'case', 'in', 'of', 'typeof', 'instanceof', 'void',
-    'delete', 'new', 'await', 'yield', 'default', 'extends', 'else', 'do',
+    'return',
+    'throw',
+    'case',
+    'in',
+    'of',
+    'typeof',
+    'instanceof',
+    'void',
+    'delete',
+    'new',
+    'await',
+    'yield',
+    'default',
+    'extends',
+    'else',
+    'do',
     // Operators
-    '=', '==', '===', '!=', '!==', '<', '>', '<=', '>=',
-    '+', '-', '*', '/', '%', '**', '&', '|', '^', '~', '!',
-    '&&', '||', '??', '?', ':', ',', ';',
-    '+=', '-=', '*=', '/=', '%=', '**=', '&=', '|=', '^=',
-    '&&=', '||=', '??=', '<<', '>>', '>>>', '<<=', '>>=', '>>>=',
+    '=',
+    '==',
+    '===',
+    '!=',
+    '!==',
+    '<',
+    '>',
+    '<=',
+    '>=',
+    '+',
+    '-',
+    '*',
+    '/',
+    '%',
+    '**',
+    '&',
+    '|',
+    '^',
+    '~',
+    '!',
+    '&&',
+    '||',
+    '??',
+    '?',
+    ':',
+    ',',
+    ';',
+    '+=',
+    '-=',
+    '*=',
+    '/=',
+    '%=',
+    '**=',
+    '&=',
+    '|=',
+    '^=',
+    '&&=',
+    '||=',
+    '??=',
+    '<<',
+    '>>',
+    '>>>',
+    '<<=',
+    '>>=',
+    '>>>=',
     // Opening brackets
-    '(', '[', '{',
+    '(',
+    '[',
+    '{',
     // Arrow
     '=>'
 ]);
@@ -54,8 +211,11 @@ const REGEX_VALID_AFTER = new Set([
  */
 const DIVISION_VALID_AFTER = new Set([
     // These token types indicate an expression just ended
-    ')', ']', '}', // Closing brackets
-    '++', '--', // Postfix operators
+    ')',
+    ']',
+    '}', // Closing brackets
+    '++',
+    '--' // Postfix operators
 ]);
 export class JavaScriptTokenizer {
     language;
@@ -65,8 +225,12 @@ export class JavaScriptTokenizer {
         this.isTypeScript = options.typescript ?? false;
         this.isJSX = options.jsx ?? false;
         this.language = this.isTypeScript
-            ? (this.isJSX ? 'tsx' : 'typescript')
-            : (this.isJSX ? 'jsx' : 'javascript');
+            ? this.isJSX
+                ? 'tsx'
+                : 'typescript'
+            : this.isJSX
+                ? 'jsx'
+                : 'javascript';
     }
     getInitialState() {
         return {
@@ -99,22 +263,39 @@ export class JavaScriptTokenizer {
                 return { lineNumber, tokens, text: line, state };
             }
         }
-        // Handle template literal continuation
-        if (state.inTemplateLiteral && (state.templateDepth ?? 0) > 0) {
-            const result = this.tokenizeTemplateLiteralContinuation(line, pos, state);
-            tokens.push(...result.tokens);
-            pos = result.pos;
-            if (pos >= line.length) {
-                return { lineNumber, tokens, text: line, state };
-            }
-        }
         while (pos < line.length) {
+            // Template literals: scan the string portion (between the backticks and
+            // `${` / `}`) as a single string.template token. The interpolation
+            // expression is tokenized as ordinary code below, tracking brace depth in
+            // state.templateDepth so the closing backtick is recognised. This fixes the
+            // leak where an unclosed template state bled onto every following line.
+            const inStringPortion = state.inTemplateLiteral && (state.templateDepth ?? 0) === 0;
+            const startsTemplate = !state.inTemplateLiteral && line[pos] === '`';
+            if (inStringPortion || startsTemplate) {
+                const result = this.scanTemplateString(line, pos, state, startsTemplate);
+                tokens.push(...result.tokens);
+                pos = result.pos;
+                continue;
+            }
             const remaining = line.slice(pos);
             const token = this.getNextToken(remaining, pos, state);
             if (token) {
                 tokens.push(token);
                 this.updateLastToken(token, state);
                 pos = token.end;
+                // Track brace nesting inside a ${...} interpolation so we know when it
+                // closes and we return to the template's string portion. Braces inside
+                // strings/comments are separate token types, so they aren't miscounted.
+                if (state.inTemplateLiteral &&
+                    (state.templateDepth ?? 0) > 0 &&
+                    token.type === 'punctuation.brace') {
+                    if (token.text === '{') {
+                        state.templateDepth = (state.templateDepth ?? 0) + 1;
+                    }
+                    else if (token.text === '}') {
+                        state.templateDepth = Math.max(0, (state.templateDepth ?? 1) - 1);
+                    }
+                }
             }
             else {
                 // No match - shouldn't happen but handle gracefully
@@ -150,10 +331,10 @@ export class JavaScriptTokenizer {
                 return createToken('comment.block', text, pos);
             }
         }
-        // Template literals
-        if (text.startsWith('`')) {
-            return this.tokenizeTemplateLiteral(text, pos, state);
-        }
+        // Template literals are handled in tokenizeLine's main loop
+        // (scanTemplateString) so the string portions and the ${...} interpolation
+        // expression are tokenized separately. A backtick only reaches here while
+        // inside an interpolation (a nested template); fall through to consume it.
         // Regular strings
         if (text.startsWith('"') || text.startsWith("'")) {
             return this.tokenizeString(text, pos, text[0]);
@@ -239,7 +420,11 @@ export class JavaScriptTokenizer {
         if (keywords.has(word)) {
             if (controlKeywords.has(word))
                 return 'keyword.control';
-            if (word === 'function' || word === 'class' || word === 'const' || word === 'let' || word === 'var') {
+            if (word === 'function' ||
+                word === 'class' ||
+                word === 'const' ||
+                word === 'let' ||
+                word === 'var') {
                 return 'keyword.definition';
             }
             if (word === 'import' || word === 'export' || word === 'from' || word === 'as') {
@@ -253,7 +438,20 @@ export class JavaScriptTokenizer {
                 return 'keyword.definition';
             }
             // Type keywords like 'string', 'number', 'boolean' etc
-            if (['string', 'number', 'boolean', 'any', 'unknown', 'never', 'void', 'null', 'undefined', 'object', 'symbol', 'bigint'].includes(word)) {
+            if ([
+                'string',
+                'number',
+                'boolean',
+                'any',
+                'unknown',
+                'never',
+                'void',
+                'null',
+                'undefined',
+                'object',
+                'symbol',
+                'bigint'
+            ].includes(word)) {
                 return 'type.builtin';
             }
             return 'keyword.storage';
@@ -371,59 +569,55 @@ export class JavaScriptTokenizer {
         // Unterminated string at end of line
         return createToken('string', text, pos);
     }
-    tokenizeTemplateLiteral(text, pos, state) {
-        let i = 1;
-        let result = '`';
-        while (i < text.length) {
-            if (text[i] === '\\' && i + 1 < text.length) {
-                result += text.slice(i, i + 2);
-                i += 2;
-                continue;
-            }
-            if (text[i] === '`') {
-                result += '`';
-                return createToken('string.template', result, pos);
-            }
-            if (text[i] === '$' && text[i + 1] === '{') {
-                // Template expression - for simplicity, tokenize up to this point
-                if (result.length > 1) {
-                    // Return string part first
-                    state.inTemplateLiteral = true;
-                    state.templateDepth = (state.templateDepth ?? 0) + 1;
-                    return createToken('string.template', result, pos);
-                }
-            }
-            result += text[i];
-            i++;
-        }
-        // Multi-line template literal
-        state.inTemplateLiteral = true;
-        return createToken('string.template', result, pos);
-    }
-    tokenizeTemplateLiteralContinuation(line, startPos, state) {
-        const tokens = [];
+    /**
+     * Scan the string portion of a template literal, starting at `startPos`. Emits
+     * one `string.template` token for the run of literal characters and stops at one
+     * of three boundaries:
+     *  - a closing backtick → ends the literal (clears template state);
+     *  - a `${` → emits the `${` delimiter and enters interpolation
+     *    (templateDepth = 1) so the expression is tokenized as code by the caller;
+     *  - end of line → the literal spans lines and continues next line.
+     *
+     * `isStart` is true when this is the opening backtick (vs. a continuation of a
+     * multi-line literal or the resumption after a `${…}` interpolation).
+     */
+    scanTemplateString(line, startPos, state, isStart) {
         let pos = startPos;
         let result = '';
+        if (isStart) {
+            state.inTemplateLiteral = true;
+            state.templateDepth = 0;
+            result = '`';
+            pos += 1;
+        }
         while (pos < line.length) {
-            if (line[pos] === '\\' && pos + 1 < line.length) {
+            const ch = line[pos];
+            if (ch === '\\' && pos + 1 < line.length) {
                 result += line.slice(pos, pos + 2);
                 pos += 2;
                 continue;
             }
-            if (line[pos] === '`') {
+            if (ch === '`') {
                 result += '`';
-                tokens.push(createToken('string.template', result, startPos));
                 state.inTemplateLiteral = false;
-                state.templateDepth = Math.max(0, (state.templateDepth ?? 1) - 1);
-                return { tokens, pos: pos + 1 };
+                state.templateDepth = 0;
+                return { tokens: [createToken('string.template', result, startPos)], pos: pos + 1 };
             }
-            result += line[pos];
-            pos++;
-        }
-        if (result) {
-            tokens.push(createToken('string.template', result, startPos));
+            if (ch === '$' && line[pos + 1] === '{') {
+                const tokens = [];
+                if (result) {
+                    tokens.push(createToken('string.template', result, startPos));
+                }
+                tokens.push(createToken('string.template', '${', startPos + result.length));
+                state.templateDepth = 1;
+                return { tokens, pos: pos + 2 };
+            }
+            result += ch;
+            pos += 1;
         }
-        return { tokens, pos };
+        // End of line inside the string portion → multi-line template literal.
+        state.inTemplateLiteral = true;
+        return { tokens: result ? [createToken('string.template', result, startPos)] : [], pos };
     }
     tokenizeJSXTag(text, pos, _state) {
         // Simple JSX tag detection

package/dist/components/editor/tokenizer/languages/python.js

@@ -4,29 +4,126 @@
 import { createToken } from '../base';
 // Python keywords
 const keywords = new Set([
-    'and', 'as', 'assert', 'async', 'await', 'break', 'class', 'continue',
-    'def', 'del', 'elif', 'else', 'except', 'finally', 'for', 'from',
-    'global', 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not',
-    'or', 'pass', 'raise', 'return', 'try', 'while', 'with', 'yield'
+    'and',
+    'as',
+    'assert',
+    'async',
+    'await',
+    'break',
+    'class',
+    'continue',
+    'def',
+    'del',
+    'elif',
+    'else',
+    'except',
+    'finally',
+    'for',
+    'from',
+    'global',
+    'if',
+    'import',
+    'in',
+    'is',
+    'lambda',
+    'nonlocal',
+    'not',
+    'or',
+    'pass',
+    'raise',
+    'return',
+    'try',
+    'while',
+    'with',
+    'yield'
 ]);
 const controlKeywords = new Set([
-    'if', 'elif', 'else', 'for', 'while', 'try', 'except', 'finally',
-    'with', 'break', 'continue', 'return', 'raise', 'yield', 'await'
-]);
-const builtins = new Set([
-    'True', 'False', 'None', 'self', 'cls'
+    'if',
+    'elif',
+    'else',
+    'for',
+    'while',
+    'try',
+    'except',
+    'finally',
+    'with',
+    'break',
+    'continue',
+    'return',
+    'raise',
+    'yield',
+    'await'
 ]);
+const builtins = new Set(['True', 'False', 'None', 'self', 'cls']);
 const builtinFunctions = new Set([
-    'abs', 'all', 'any', 'ascii', 'bin', 'bool', 'bytearray', 'bytes',
-    'callable', 'chr', 'classmethod', 'compile', 'complex', 'delattr',
-    'dict', 'dir', 'divmod', 'enumerate', 'eval', 'exec', 'filter',
-    'float', 'format', 'frozenset', 'getattr', 'globals', 'hasattr',
-    'hash', 'help', 'hex', 'id', 'input', 'int', 'isinstance', 'issubclass',
-    'iter', 'len', 'list', 'locals', 'map', 'max', 'memoryview', 'min',
-    'next', 'object', 'oct', 'open', 'ord', 'pow', 'print', 'property',
-    'range', 'repr', 'reversed', 'round', 'set', 'setattr', 'slice',
-    'sorted', 'staticmethod', 'str', 'sum', 'super', 'tuple', 'type',
-    'vars', 'zip', '__import__'
+    'abs',
+    'all',
+    'any',
+    'ascii',
+    'bin',
+    'bool',
+    'bytearray',
+    'bytes',
+    'callable',
+    'chr',
+    'classmethod',
+    'compile',
+    'complex',
+    'delattr',
+    'dict',
+    'dir',
+    'divmod',
+    'enumerate',
+    'eval',
+    'exec',
+    'filter',
+    'float',
+    'format',
+    'frozenset',
+    'getattr',
+    'globals',
+    'hasattr',
+    'hash',
+    'help',
+    'hex',
+    'id',
+    'input',
+    'int',
+    'isinstance',
+    'issubclass',
+    'iter',
+    'len',
+    'list',
+    'locals',
+    'map',
+    'max',
+    'memoryview',
+    'min',
+    'next',
+    'object',
+    'oct',
+    'open',
+    'ord',
+    'pow',
+    'print',
+    'property',
+    'range',
+    'repr',
+    'reversed',
+    'round',
+    'set',
+    'setattr',
+    'slice',
+    'sorted',
+    'staticmethod',
+    'str',
+    'sum',
+    'super',
+    'tuple',
+    'type',
+    'vars',
+    'zip',
+    '__import__'
 ]);
 export class PythonTokenizer {
     language = 'python';

package/dist/components/editor/tokenizer/languages/svelte.js

@@ -27,13 +27,26 @@ function reindexTokens(tokens) {
  * Svelte keywords and directives
  */
 const SVELTE_BLOCK_KEYWORDS = new Set([
-    'if', 'else', 'each', 'await', 'then', 'catch', 'key', 'snippet'
-]);
-const SVELTE_TAG_KEYWORDS = new Set([
-    'html', 'debug', 'const', 'render'
+    'if',
+    'else',
+    'each',
+    'await',
+    'then',
+    'catch',
+    'key',
+    'snippet'
 ]);
+const SVELTE_TAG_KEYWORDS = new Set(['html', 'debug', 'const', 'render']);
 const SVELTE_ATTRIBUTE_PREFIXES = [
-    'bind:', 'on:', 'use:', 'transition:', 'in:', 'out:', 'animate:', 'let:', 'class:'
+    'bind:',
+    'on:',
+    'use:',
+    'transition:',
+    'in:',
+    'out:',
+    'animate:',
+    'let:',
+    'class:'
 ];
 /**
  * Svelte tokenizer
@@ -266,10 +279,10 @@ export class SvelteTokenizer {
             const attrMatch = tag.substring(pos).match(/^([\w:-]+)(?:=)?/);
             if (attrMatch) {
                 const attrName = attrMatch[1];
-                const isSvelteAttr = SVELTE_ATTRIBUTE_PREFIXES.some(prefix => attrName.startsWith(prefix));
+                const isSvelteAttr = SVELTE_ATTRIBUTE_PREFIXES.some((prefix) => attrName.startsWith(prefix));
                 if (isSvelteAttr) {
                     // Highlight Svelte-specific attributes
-                    const prefixMatch = SVELTE_ATTRIBUTE_PREFIXES.find(p => attrName.startsWith(p));
+                    const prefixMatch = SVELTE_ATTRIBUTE_PREFIXES.find((p) => attrName.startsWith(p));
                     if (prefixMatch) {
                         tokens.push({ type: 'keyword.control', text: prefixMatch });
                         tokens.push({ type: 'tag.attribute', text: attrName.substring(prefixMatch.length) });

package/dist/components/layout/IDELayout.svelte

@@ -231,7 +231,9 @@
 	.ide-layout--resizing .ide-layout__sidebar > :global(*) {
 		opacity: 0.5;
 		filter: blur(1px);
-		transition: opacity 0.1s ease, filter 0.1s ease;
+		transition:
+			opacity 0.1s ease,
+			filter 0.1s ease;
 	}
 
 	.ide-layout__main {
@@ -278,7 +280,9 @@
 	.ide-layout--resizing .ide-layout__panel > :global(*) {
 		opacity: 0.5;
 		filter: blur(1px);
-		transition: opacity 0.1s ease, filter 0.1s ease;
+		transition:
+			opacity 0.1s ease,
+			filter 0.1s ease;
 	}
 
 	.ide-layout__status-bar {