@ktjs/ts-plugin 0.1.5 → 0.1.6

package/README.md

@@ -8,6 +8,7 @@ TypeScript language service plugin for KT.js `k-for` scope variables in TSX.
 - Suppresses TS2304 (`Cannot find name ...`) for aliases declared by `k-for`.
 - Infers alias types from iterable/indexed sources (for example `k-for="item in users"` makes `item` resolve to `users[number]`).
 - Provides hover type info and member completions for inferred aliases.
+- Adds `k-for` inline semantic highlighting in string expressions (for example alias/keyword/source in `k-for="item in list"`).
 - Supports Vue-like syntax:
   - `k-for="item in list"`
   - `k-for="(item, i) in list"`

package/dist/index.js

@@ -4,6 +4,7 @@ const completion_1 = require("./completion");
 const constants_1 = require("./constants");
 const config_1 = require("./config");
 const identifiers_1 = require("./identifiers");
+const kfor_highlighting_1 = require("./kfor-highlighting");
 const scope_analysis_1 = require("./scope-analysis");
 const type_resolution_1 = require("./type-resolution");
 function init(modules) {
@@ -38,6 +39,28 @@ function init(modules) {
                 return !(0, scope_analysis_1.isSuppressed)(diagnostic.start, name, analysis.scopes);
             });
         };
+        proxy.getEncodedSemanticClassifications = (fileName, span, format) => {
+            const classifications = languageService.getEncodedSemanticClassifications(fileName, span, format);
+            if (!(0, config_1.isJsxLikeFile)(fileName)) {
+                return classifications;
+            }
+            const sourceFile = languageService.getProgram()?.getSourceFile(fileName);
+            if (!sourceFile) {
+                return classifications;
+            }
+            return (0, kfor_highlighting_1.addKForSemanticClassifications)(classifications, sourceFile, span, format, ts, config);
+        };
+        proxy.getEncodedSyntacticClassifications = (fileName, span) => {
+            const classifications = languageService.getEncodedSyntacticClassifications(fileName, span);
+            if (!(0, config_1.isJsxLikeFile)(fileName)) {
+                return classifications;
+            }
+            const sourceFile = languageService.getProgram()?.getSourceFile(fileName);
+            if (!sourceFile) {
+                return classifications;
+            }
+            return (0, kfor_highlighting_1.addKForSyntacticClassifications)(classifications, sourceFile, span, ts, config);
+        };
         proxy.getQuickInfoAtPosition = (fileName, position) => {
             const quickInfo = languageService.getQuickInfoAtPosition(fileName, position);
             if (!(0, config_1.isJsxLikeFile)(fileName)) {

package/dist/kfor-highlighting.d.ts

@@ -0,0 +1,4 @@
+import type tsModule from 'typescript/lib/tsserverlibrary';
+import type { ResolvedConfig } from './types';
+export declare function addKForSemanticClassifications(base: tsModule.Classifications, sourceFile: tsModule.SourceFile, span: tsModule.TextSpan, format: tsModule.SemanticClassificationFormat | undefined, ts: typeof tsModule, config: ResolvedConfig): tsModule.Classifications;
+export declare function addKForSyntacticClassifications(base: tsModule.Classifications, sourceFile: tsModule.SourceFile, span: tsModule.TextSpan, ts: typeof tsModule, config: ResolvedConfig): tsModule.Classifications;

package/dist/kfor-highlighting.js

@@ -0,0 +1,407 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addKForSemanticClassifications = addKForSemanticClassifications;
+exports.addKForSyntacticClassifications = addKForSyntacticClassifications;
+const jsx_attributes_1 = require("./jsx-attributes");
+const kfor_parser_1 = require("./kfor-parser");
+const identifiers_1 = require("./identifiers");
+const TOKEN_TYPE_VARIABLE = 7;
+const TOKEN_MODIFIER_READONLY = 1 << 3;
+const TOKEN_MODIFIER_LOCAL = 1 << 5;
+const TOKEN_ENCODING_TYPE_OFFSET = 8;
+const IDENTIFIER_PATTERN = /[A-Za-z_$][A-Za-z0-9_$]*/g;
+const KEYWORD_DELIMITER_PATTERN = /\s+(in|of)\s+/;
+function addKForSemanticClassifications(base, sourceFile, span, format, ts, config) {
+    const tokens = collectHighlightTokens(sourceFile, ts, config, span);
+    if (tokens.length === 0) {
+        return base;
+    }
+    const semanticSpans = buildSemanticSpans(tokens, format, ts);
+    if (semanticSpans.length === 0) {
+        return base;
+    }
+    return mergeClassifications(base, semanticSpans, false);
+}
+function addKForSyntacticClassifications(base, sourceFile, span, ts, config) {
+    const tokens = collectHighlightTokens(sourceFile, ts, config, span);
+    if (tokens.length === 0) {
+        return base;
+    }
+    const keywordSpans = buildSyntacticKeywordSpans(tokens, ts);
+    if (keywordSpans.length === 0) {
+        return base;
+    }
+    return mergeClassifications(base, keywordSpans, true);
+}
+function collectHighlightTokens(sourceFile, ts, config, span) {
+    const tokens = [];
+    const spanStart = span.start;
+    const spanEnd = span.start + span.length;
+    const visit = (node) => {
+        let opening;
+        if (ts.isJsxElement(node)) {
+            opening = node.openingElement;
+        }
+        else if (ts.isJsxSelfClosingElement(node)) {
+            opening = node;
+        }
+        if (opening) {
+            const attr = (0, jsx_attributes_1.getJsxAttribute)(opening, config.forAttr, ts);
+            if (attr) {
+                const parsed = parseKForAttributeTokens(attr, sourceFile, ts, config.allowOfKeyword);
+                for (let i = 0; i < parsed.length; i++) {
+                    const token = parsed[i];
+                    const tokenStart = token.start;
+                    const tokenEnd = token.start + token.length;
+                    if (tokenEnd <= spanStart || tokenStart >= spanEnd) {
+                        continue;
+                    }
+                    const clippedStart = Math.max(tokenStart, spanStart);
+                    const clippedEnd = Math.min(tokenEnd, spanEnd);
+                    if (clippedEnd > clippedStart) {
+                        tokens.push({
+                            start: clippedStart,
+                            length: clippedEnd - clippedStart,
+                            kind: token.kind,
+                        });
+                    }
+                }
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return uniqueTokens(tokens);
+}
+function parseKForAttributeTokens(attr, sourceFile, ts, allowOfKeyword) {
+    const content = getAttributeRawContent(attr, sourceFile, ts);
+    if (!content) {
+        return [];
+    }
+    const raw = content.text;
+    const rawOffset = content.start;
+    const value = raw.trim();
+    if (!value) {
+        return [];
+    }
+    const parsed = (0, kfor_parser_1.parseKForExpression)(value, allowOfKeyword);
+    if (!parsed) {
+        return [];
+    }
+    const trimStart = raw.length - raw.trimStart().length;
+    const delimiterMatch = KEYWORD_DELIMITER_PATTERN.exec(value);
+    if (!delimiterMatch) {
+        return [];
+    }
+    const keyword = delimiterMatch[1];
+    const keywordOffsetInDelimiter = delimiterMatch[0].indexOf(keyword);
+    const leftSegment = value.slice(0, delimiterMatch.index);
+    const rightSegment = value.slice(delimiterMatch.index + delimiterMatch[0].length);
+    const leftLeading = leftSegment.length - leftSegment.trimStart().length;
+    const leftTrimmed = leftSegment.trim();
+    let aliasText = leftTrimmed;
+    let aliasTextStartInRaw = trimStart + leftLeading;
+    if (leftTrimmed.startsWith('(') && leftTrimmed.endsWith(')')) {
+        aliasText = leftTrimmed.slice(1, -1);
+        aliasTextStartInRaw += 1;
+    }
+    const rightLeading = rightSegment.length - rightSegment.trimStart().length;
+    const sourceText = rightSegment.trim();
+    const sourceTextStartInRaw = trimStart + delimiterMatch.index + delimiterMatch[0].length + rightLeading;
+    const keywordStartInRaw = trimStart + delimiterMatch.index + keywordOffsetInDelimiter;
+    const tokens = [];
+    const aliasTokens = collectAliasTokens(aliasText, aliasTextStartInRaw, parsed.aliases);
+    for (let i = 0; i < aliasTokens.length; i++) {
+        tokens.push({
+            start: rawOffset + aliasTokens[i].start,
+            length: aliasTokens[i].length,
+            kind: 'alias',
+        });
+    }
+    tokens.push({
+        start: rawOffset + keywordStartInRaw,
+        length: keyword.length,
+        kind: 'keyword',
+    });
+    const sourceTokens = collectSourceTokens(sourceText, sourceTextStartInRaw, ts);
+    for (let i = 0; i < sourceTokens.length; i++) {
+        tokens.push({
+            start: rawOffset + sourceTokens[i].start,
+            length: sourceTokens[i].length,
+            kind: 'source',
+        });
+    }
+    return tokens;
+}
+function collectAliasTokens(aliasText, baseStart, aliases) {
+    const result = [];
+    const allowed = new Set(aliases);
+    let match;
+    IDENTIFIER_PATTERN.lastIndex = 0;
+    while ((match = IDENTIFIER_PATTERN.exec(aliasText))) {
+        const name = match[0];
+        if (!allowed.has(name) || !(0, identifiers_1.isValidIdentifier)(name)) {
+            continue;
+        }
+        result.push({
+            start: baseStart + match.index,
+            length: name.length,
+            kind: 'alias',
+        });
+    }
+    return result;
+}
+function collectSourceTokens(sourceText, baseStart, ts) {
+    const tokens = collectSourceTokensWithAst(sourceText, baseStart, ts);
+    if (tokens.length > 0) {
+        return tokens;
+    }
+    const fallback = [];
+    let match;
+    IDENTIFIER_PATTERN.lastIndex = 0;
+    while ((match = IDENTIFIER_PATTERN.exec(sourceText))) {
+        const name = match[0];
+        if (!(0, identifiers_1.isValidIdentifier)(name)) {
+            continue;
+        }
+        fallback.push({
+            start: baseStart + match.index,
+            length: name.length,
+            kind: 'source',
+        });
+    }
+    return fallback;
+}
+function collectSourceTokensWithAst(sourceText, baseStart, ts) {
+    const snippet = `(${sourceText});`;
+    const tempSourceFile = ts.createSourceFile('__k_for_highlight.ts', snippet, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    if (tempSourceFile.statements.length === 0) {
+        return [];
+    }
+    const statement = tempSourceFile.statements[0];
+    if (!ts.isExpressionStatement(statement)) {
+        return [];
+    }
+    const result = [];
+    const visit = (node) => {
+        if (ts.isIdentifier(node) && (0, identifiers_1.isValidIdentifier)(node.text)) {
+            const start = node.getStart(tempSourceFile) - 1;
+            const end = start + node.getWidth(tempSourceFile);
+            if (start >= 0 && end <= sourceText.length) {
+                result.push({
+                    start: baseStart + start,
+                    length: end - start,
+                    kind: 'source',
+                });
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(statement.expression);
+    return result;
+}
+function getAttributeRawContent(attr, sourceFile, ts) {
+    const initializer = attr.initializer;
+    if (!initializer) {
+        return undefined;
+    }
+    if (ts.isStringLiteral(initializer)) {
+        const quotedText = initializer.getText(sourceFile);
+        if (quotedText.length < 2) {
+            return undefined;
+        }
+        return {
+            start: initializer.getStart(sourceFile) + 1,
+            text: quotedText.slice(1, -1),
+        };
+    }
+    const expression = (0, jsx_attributes_1.getAttributeExpression)(attr, ts);
+    if (!expression || !ts.isStringLiteralLike(expression)) {
+        return undefined;
+    }
+    const quotedText = expression.getText(sourceFile);
+    if (quotedText.length < 2) {
+        return undefined;
+    }
+    return {
+        start: expression.getStart(sourceFile) + 1,
+        text: quotedText.slice(1, -1),
+    };
+}
+function buildSemanticSpans(tokens, format, ts) {
+    const spans = [];
+    if (format === ts.SemanticClassificationFormat.TwentyTwenty) {
+        for (let i = 0; i < tokens.length; i++) {
+            const token = tokens[i];
+            if (token.kind === 'keyword') {
+                continue;
+            }
+            spans.push({
+                start: token.start,
+                length: token.length,
+                classification: token.kind === 'alias'
+                    ? encodeSemantic2020(TOKEN_TYPE_VARIABLE, TOKEN_MODIFIER_READONLY | TOKEN_MODIFIER_LOCAL)
+                    : encodeSemantic2020(TOKEN_TYPE_VARIABLE, 0),
+            });
+        }
+        return spans;
+    }
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        spans.push({
+            start: token.start,
+            length: token.length,
+            classification: token.kind === 'keyword' ? ts.ClassificationType.keyword : ts.ClassificationType.identifier,
+        });
+    }
+    return spans;
+}
+function buildSyntacticKeywordSpans(tokens, ts) {
+    const spans = [];
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        if (token.kind !== 'keyword') {
+            continue;
+        }
+        spans.push({
+            start: token.start,
+            length: token.length,
+            classification: ts.ClassificationType.keyword,
+        });
+    }
+    return spans;
+}
+function encodeSemantic2020(typeIndex, modifiers) {
+    return ((typeIndex + 1) << TOKEN_ENCODING_TYPE_OFFSET) + modifiers;
+}
+function mergeClassifications(base, overlays, replaceOverlaps) {
+    if (overlays.length === 0) {
+        return base;
+    }
+    const baseSpans = decodeSpans(base.spans);
+    const extraSpans = normalizeSpans(overlays);
+    if (extraSpans.length === 0) {
+        return base;
+    }
+    const merged = replaceOverlaps
+        ? [...removeOverlayOverlaps(baseSpans, extraSpans), ...extraSpans]
+        : [...baseSpans, ...extraSpans];
+    const normalized = normalizeSpans(merged);
+    return {
+        spans: encodeSpans(normalized),
+        endOfLineState: base.endOfLineState,
+    };
+}
+function removeOverlayOverlaps(baseSpans, overlays) {
+    const result = [];
+    for (let i = 0; i < baseSpans.length; i++) {
+        let segments = [baseSpans[i]];
+        for (let j = 0; j < overlays.length; j++) {
+            const overlay = overlays[j];
+            const nextSegments = [];
+            for (let k = 0; k < segments.length; k++) {
+                const segment = segments[k];
+                const segmentStart = segment.start;
+                const segmentEnd = segment.start + segment.length;
+                const overlayStart = overlay.start;
+                const overlayEnd = overlay.start + overlay.length;
+                if (overlayEnd <= segmentStart || overlayStart >= segmentEnd) {
+                    nextSegments.push(segment);
+                    continue;
+                }
+                if (segmentStart < overlayStart) {
+                    nextSegments.push({
+                        start: segmentStart,
+                        length: overlayStart - segmentStart,
+                        classification: segment.classification,
+                    });
+                }
+                if (overlayEnd < segmentEnd) {
+                    nextSegments.push({
+                        start: overlayEnd,
+                        length: segmentEnd - overlayEnd,
+                        classification: segment.classification,
+                    });
+                }
+            }
+            segments = nextSegments;
+            if (segments.length === 0) {
+                break;
+            }
+        }
+        for (let j = 0; j < segments.length; j++) {
+            result.push(segments[j]);
+        }
+    }
+    return result;
+}
+function decodeSpans(spans) {
+    const decoded = [];
+    for (let i = 0; i + 2 < spans.length; i += 3) {
+        const start = spans[i];
+        const length = spans[i + 1];
+        const classification = spans[i + 2];
+        if (length <= 0) {
+            continue;
+        }
+        decoded.push({ start, length, classification });
+    }
+    return decoded;
+}
+function encodeSpans(spans) {
+    const encoded = [];
+    for (let i = 0; i < spans.length; i++) {
+        const span = spans[i];
+        encoded.push(span.start, span.length, span.classification);
+    }
+    return encoded;
+}
+function normalizeSpans(spans) {
+    if (spans.length === 0) {
+        return [];
+    }
+    const sorted = spans
+        .filter((span) => span.length > 0)
+        .slice()
+        .sort((left, right) => {
+        if (left.start !== right.start) {
+            return left.start - right.start;
+        }
+        if (left.length !== right.length) {
+            return left.length - right.length;
+        }
+        return left.classification - right.classification;
+    });
+    const normalized = [];
+    for (let i = 0; i < sorted.length; i++) {
+        const span = sorted[i];
+        const previous = normalized[normalized.length - 1];
+        if (previous &&
+            previous.start === span.start &&
+            previous.length === span.length &&
+            previous.classification === span.classification) {
+            continue;
+        }
+        normalized.push(span);
+    }
+    return normalized;
+}
+function uniqueTokens(tokens) {
+    if (tokens.length === 0) {
+        return [];
+    }
+    const map = new Map();
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        const key = `${token.start}:${token.length}:${token.kind}`;
+        if (!map.has(key)) {
+            map.set(key, token);
+        }
+    }
+    return Array.from(map.values()).sort((left, right) => {
+        if (left.start !== right.start) {
+            return left.start - right.start;
+        }
+        return left.length - right.length;
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/ts-plugin",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "TypeScript language service plugin for kt.js k-for scope names in TSX.",
   "type": "commonjs",
   "main": "./dist/index.js",