@ktjs/ts-plugin 0.1.8 → 0.1.10

package/README.md

@@ -10,6 +10,7 @@ TypeScript language service plugin for KT.js `k-for` scope variables in TSX.
 - Provides hover type info and member completions for inferred aliases.
 - Supports hover type info inside `k-for` expression strings (`item in users`) for alias/source identifiers.
 - Adds `k-for` inline semantic highlighting in string expressions (for example alias/keyword/source in `k-for="item in list"`).
+- Highlights directive attribute names (`k-for`, `k-key`, `k-if`, `k-else`, `k-else-if`, `k-model`, `k-html`) with semantic token colors.
 - Supports Vue-like syntax:
   - `k-for="item in list"`
   - `k-for="(item, i) in list"`
@@ -54,10 +55,12 @@ If VS Code still does not load the plugin, make sure it uses your workspace Type
       {
         "name": "@ktjs/ts-plugin",
         "forAttr": "k-for",
-        "itemAttr": "k-for-item",
-        "indexAttr": "k-for-index",
-        "itemName": "item",
-        "indexName": "index",
+        "keyAttr": "k-key",
+        "ifAttr": "k-if",
+        "elseAttr": "k-else",
+        "elseIfAttr": "k-else-if",
+        "modelAttr": "k-model",
+        "htmlAttr": "k-html",
         "allowOfKeyword": true
       }
     ]

package/dist/config.js

@@ -9,10 +9,12 @@ const node_path_1 = __importDefault(require("node:path"));
 function resolveConfig(config) {
     return {
         forAttr: config?.forAttr || 'k-for',
-        itemAttr: config?.itemAttr || 'k-for-item',
-        indexAttr: config?.indexAttr || 'k-for-index',
-        itemName: config?.itemName || 'item',
-        indexName: config?.indexName || 'index',
+        keyAttr: config?.keyAttr || 'k-key',
+        ifAttr: config?.ifAttr || 'k-if',
+        elseAttr: config?.elseAttr || 'k-else',
+        elseIfAttr: config?.elseIfAttr || 'k-else-if',
+        modelAttr: config?.modelAttr || 'k-model',
+        htmlAttr: config?.htmlAttr || 'k-html',
         allowOfKeyword: config?.allowOfKeyword !== false,
     };
 }

package/dist/kfor-highlighting.js

@@ -5,6 +5,7 @@ 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_TYPE = 5;
 const TOKEN_TYPE_VARIABLE = 7;
 const TOKEN_MODIFIER_READONLY = 1 << 3;
 const TOKEN_ENCODING_TYPE_OFFSET = 8;
@@ -45,6 +46,24 @@ function collectHighlightTokens(sourceFile, ts, config, span) {
             opening = node;
         }
         if (opening) {
+            const directiveTokens = collectDirectiveAttributeTokens(opening, sourceFile, ts, config);
+            for (let i = 0; i < directiveTokens.length; i++) {
+                const token = directiveTokens[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,
+                    });
+                }
+            }
             const attr = (0, jsx_attributes_1.getJsxAttribute)(opening, config.forAttr, ts);
             if (attr) {
                 const parsed = parseKForAttributeTokens(attr, sourceFile, ts, config.allowOfKeyword);
@@ -132,6 +151,35 @@ function parseKForAttributeTokens(attr, sourceFile, ts, allowOfKeyword) {
     }
     return tokens;
 }
+function collectDirectiveAttributeTokens(opening, sourceFile, ts, config) {
+    const directiveNames = new Set([
+        config.forAttr,
+        config.keyAttr,
+        config.ifAttr,
+        config.elseAttr,
+        config.elseIfAttr,
+        config.modelAttr,
+        config.htmlAttr,
+    ]);
+    const tokens = [];
+    for (const directiveName of directiveNames) {
+        const attr = (0, jsx_attributes_1.getJsxAttribute)(opening, directiveName, ts);
+        if (!attr) {
+            continue;
+        }
+        const start = attr.name.getStart(sourceFile);
+        const length = attr.name.getWidth(sourceFile);
+        if (length <= 0) {
+            continue;
+        }
+        tokens.push({
+            start,
+            length,
+            kind: 'directive',
+        });
+    }
+    return tokens;
+}
 function collectAliasTokens(aliasText, baseStart, aliases) {
     const result = [];
     const allowed = new Set(aliases);
@@ -235,9 +283,11 @@ function buildSemanticSpans(tokens, format, ts) {
             spans.push({
                 start: token.start,
                 length: token.length,
-                classification: token.kind === 'keyword'
-                    ? encodeSemantic2020(TOKEN_TYPE_VARIABLE, TOKEN_MODIFIER_READONLY)
-                    : encodeSemantic2020(TOKEN_TYPE_VARIABLE, 0),
+                classification: token.kind === 'directive'
+                    ? encodeSemantic2020(TOKEN_TYPE_TYPE, 0)
+                    : token.kind === 'keyword'
+                        ? encodeSemantic2020(TOKEN_TYPE_VARIABLE, TOKEN_MODIFIER_READONLY)
+                        : encodeSemantic2020(TOKEN_TYPE_VARIABLE, 0),
             });
         }
         return spans;
@@ -247,7 +297,11 @@ function buildSemanticSpans(tokens, format, ts) {
         spans.push({
             start: token.start,
             length: token.length,
-            classification: token.kind === 'keyword' ? ts.ClassificationType.keyword : ts.ClassificationType.identifier,
+            classification: token.kind === 'directive'
+                ? ts.ClassificationType.className
+                : token.kind === 'keyword'
+                    ? ts.ClassificationType.keyword
+                    : ts.ClassificationType.identifier,
         });
     }
     return spans;

package/dist/scope-analysis.js

@@ -6,7 +6,6 @@ exports.collectBindingsAtPosition = collectBindingsAtPosition;
 exports.resolveBindingsForForAttribute = resolveBindingsForForAttribute;
 const jsx_attributes_1 = require("./jsx-attributes");
 const kfor_parser_1 = require("./kfor-parser");
-const identifiers_1 = require("./identifiers");
 const type_resolution_1 = require("./type-resolution");
 function getFileAnalysis(fileName, languageService, ts, config) {
     const program = languageService.getProgram();
@@ -78,22 +77,19 @@ function collectKForScopes(sourceFile, checker, ts, config) {
 }
 function resolveScopeBindings(opening, forAttr, checker, config, ts) {
     const forExpression = (0, jsx_attributes_1.getAttributeText)(forAttr, ts);
-    if (forExpression !== undefined) {
-        const parsed = (0, kfor_parser_1.parseKForExpression)(forExpression, config.allowOfKeyword);
-        if (parsed) {
-            const sourceTypes = (0, type_resolution_1.resolveExpressionTypesFromText)(parsed.source, {
-                checker,
-                ts,
-                scopeNode: opening,
-            });
-            return createBindings(parsed.aliases, sourceTypes, checker, opening, ts);
-        }
+    if (forExpression === undefined) {
+        return [];
+    }
+    const parsed = (0, kfor_parser_1.parseKForExpression)(forExpression, config.allowOfKeyword);
+    if (!parsed) {
+        return [];
     }
-    const itemName = (0, jsx_attributes_1.getScopeName)(opening, config.itemAttr, config.itemName, ts);
-    const indexName = (0, jsx_attributes_1.getScopeName)(opening, config.indexAttr, config.indexName, ts);
-    const aliases = (0, identifiers_1.uniqueIdentifiers)([itemName, indexName]);
-    const sourceTypes = getLegacyForSourceTypes(forAttr, checker, ts);
-    return createBindings(aliases, sourceTypes, checker, opening, ts);
+    const sourceTypes = (0, type_resolution_1.resolveExpressionTypesFromText)(parsed.source, {
+        checker,
+        ts,
+        scopeNode: opening,
+    });
+    return createBindings(parsed.aliases, sourceTypes, checker, opening, ts);
 }
 function createBindings(names, sourceTypes, checker, scopeNode, ts) {
     if (names.length === 0) {
@@ -146,10 +142,3 @@ function expandUnionTypes(types, ts) {
     }
     return result;
 }
-function getLegacyForSourceTypes(forAttr, checker, ts) {
-    const expression = (0, jsx_attributes_1.getAttributeExpression)(forAttr, ts);
-    if (!expression || ts.isStringLiteralLike(expression)) {
-        return [];
-    }
-    return [checker.getTypeAtLocation(expression)];
-}

package/dist/types.d.ts

@@ -1,18 +1,22 @@
 import type tsModule from 'typescript/lib/tsserverlibrary';
 export interface KForPluginConfig {
     forAttr?: string;
-    itemAttr?: string;
-    indexAttr?: string;
-    itemName?: string;
-    indexName?: string;
+    keyAttr?: string;
+    ifAttr?: string;
+    elseAttr?: string;
+    elseIfAttr?: string;
+    modelAttr?: string;
+    htmlAttr?: string;
     allowOfKeyword?: boolean;
 }
 export interface ResolvedConfig {
     forAttr: string;
-    itemAttr: string;
-    indexAttr: string;
-    itemName: string;
-    indexName: string;
+    keyAttr: string;
+    ifAttr: string;
+    elseAttr: string;
+    elseIfAttr: string;
+    modelAttr: string;
+    htmlAttr: string;
     allowOfKeyword: boolean;
 }
 export interface KForBinding {

package/package.json

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