feat: support tag import shorthands in ts files

Author: DylanPiercey

.changeset/witty-ghosts-pump.md

@@ -0,0 +1,7 @@
+---
+"@marko/language-server": patch
+"@marko/type-check": patch
+"marko-vscode": patch
+---
+
+Support resolving tag import shorthands in typescript files.

packages/language-server/src/service/marko/complete/Import.ts

@@ -1,17 +1,22 @@
-import type { Node } from "@marko/language-tools";
+import { type Node, NodeType } from "@marko/language-tools";
 import { CompletionItem, TextEdit } from "vscode-languageserver";
 
 import getTagNameCompletion from "../util/get-tag-name-completion";
 import type { CompletionMeta, CompletionResult } from ".";
 
+const staticImportReg = /^\s*(?:static|client|server) import\b/;
 const importTagReg = /(['"])<((?:[^'"\\>]|\\.)*)>?\1/;
 
 export function Import({
   node,
   file: { parsed, filename, lookup },
-}: CompletionMeta<Node.Import>): CompletionResult {
-  // check for import statement
+}: CompletionMeta<Node.Import | Node.Static>): CompletionResult {
   const value = parsed.read(node);
+  if (node.type === NodeType.Static && !staticImportReg.test(value)) {
+    // Checks for `static import`, `client import` and `server import`.
+    return;
+  }
+
   const match = importTagReg.exec(value);
   if (match) {
     const [{ length }] = match;

packages/language-server/src/service/marko/complete/index.ts

@@ -26,6 +26,7 @@ const handlers: Record<
   AttrName,
   AttrValue,
   Import,
+  Static: Import,
 };
 
 export const doComplete: Plugin["doComplete"] = async (doc, params) => {

packages/language-server/src/ts-plugin/host.ts

@@ -3,12 +3,14 @@ import {
   getExt,
   isDefinitionFile,
   Processors,
+  Project,
 } from "@marko/language-tools";
 import path from "path";
 import type ts from "typescript/lib/tsserverlibrary";
 
 const fsPathReg = /^(?:[./\\]|[A-Z]:)/i;
 const modulePartsReg = /^((?:@(?:[^/]+)\/)?(?:[^/]+))(.*)$/;
+const importTagReg = /<([^>]+)>/;
 
 export interface ExtractedSnapshot extends Extracted {
   snapshot: ts.IScriptSnapshot;
@@ -151,7 +153,21 @@ export function patch(
 
       for (let i = 0; i < moduleLiterals.length; i++) {
         const moduleLiteral = moduleLiterals[i];
-        const moduleName = moduleLiteral.text;
+        let moduleName = moduleLiteral.text;
+
+        const tagNameMatch = importTagReg.exec(moduleName);
+        if (tagNameMatch) {
+          // Try to resolve `import Tag from "<tag>"` style imports.
+          const [, tagName] = tagNameMatch;
+          const tagDef = Project.getTagLookup(
+            path.dirname(containingFile),
+          ).getTag(tagName);
+          const tagFileName = tagDef && (tagDef.template || tagDef.renderer);
+          if (tagFileName) {
+            moduleName = tagFileName;
+          }
+        }
+
         const processor =
           moduleName[0] !== "*" ? getProcessor(moduleName) : undefined;
         if (processor) {

packages/type-check/src/run.ts

@@ -7,6 +7,7 @@ import {
   isDefinitionFile,
   type Location,
   Processors,
+  Project,
 } from "@marko/language-tools";
 import crypto from "crypto";
 import color from "kleur";
@@ -37,6 +38,7 @@ const getCanonicalFileName = ts.sys.useCaseSensitiveFileNames
   ? (fileName: string) => fileName
   : (fileName: string) => fileName.toLowerCase();
 const fsPathReg = /^(?:[./\\]|[A-Z]:)/i;
+const importTagReg = /<([^>]+)>/;
 const modulePartsReg = /^((?:@(?:[^/]+)\/)?(?:[^/]+))(.*)$/;
 const isRemapExtensionReg = /\.ts$/;
 const isSourceMapExtensionReg = /\.map$/;
@@ -187,7 +189,21 @@ export default function run(opts: Options) {
 
         for (let i = 0; i < moduleLiterals.length; i++) {
           const moduleLiteral = moduleLiterals[i];
-          const moduleName = moduleLiteral.text;
+          let moduleName = moduleLiteral.text;
+
+          const tagNameMatch = importTagReg.exec(moduleName);
+          if (tagNameMatch) {
+            // Try to resolve `import Tag from "<tag>"` style imports.
+            const [, tagName] = tagNameMatch;
+            const tagDef = Project.getTagLookup(
+              path.dirname(containingFile),
+            ).getTag(tagName);
+            const tagFileName = tagDef && (tagDef.template || tagDef.renderer);
+            if (tagFileName) {
+              moduleName = tagFileName;
+            }
+          }
+
           const processor =
             moduleName[0] !== "*" ? getProcessor(moduleName) : undefined;
           if (processor) {