Preliminary support for jsx. still needs work

Matsuuu · Nov 5, 2023 · f251597 · f251597
1 parent 370654e
commit f251597
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 28 deletions.
diff --git a/lib/client/vscode/src/extension.ts b/lib/client/vscode/src/extension.ts
@@ -8,14 +8,18 @@ let client: LanguageClient;
 const disposables: Disposable[] = [];
 
 const SUPPORTED_LANGUAGES = [
-    "html",
-    "typescript",
-    "javascript",
-    "php",
-    "vue"
-    // TODO: Need to add jsx etc.?
+    'javascript',
+    'javascriptreact',
+    'javascript.jsx',
+    'typescript',
+    'typescriptreact',
+    'typescript.tsx',
+    'html',
+    'vue',
+    'php'
 ]
 
+
 function registerCommands(context: ExtensionContext) {
     const restartCommandDisposable = commands.registerCommand('extension.restart', async () => {
         client.stop();

diff --git a/lib/custom-elements-languageserver-core/src/cem/analyzer.ts b/lib/custom-elements-languageserver-core/src/cem/analyzer.ts
@@ -103,7 +103,7 @@ function cacheCurrentCEM(projectPath: string, manifest: Package) {
     const manifestAsString = JSON.stringify(manifest);
     fs.writeFileSync(savePath, manifestAsString, "utf8");
 
-    console.log(`Manifest built to ${savePath}. Filesize: `, manifestAsString.length);
+    // console.log(`Manifest built to ${savePath}. Filesize: `, manifestAsString.length);
 
     return savePath;
 }

diff --git a/lib/custom-elements-languageserver-core/src/cem/cem-cache.ts b/lib/custom-elements-languageserver-core/src/cem/cem-cache.ts
@@ -104,7 +104,6 @@ function setToCEMCache(project: tss.server.Project, cemCollection: CEMCollection
 }
 
 export function refreshCEMData(projectBasePath: string) {
-    console.log("CEM REFRESH");
     const existingCollection = getCEMFromCacheByPath(projectBasePath);
     if (!existingCollection) {
         console.warn("Tried to refresh a non-existant cache. Attempted " + projectBasePath + ", but the only ones available are: ", [...CEM_COLLECTION_CACHE.keys()]);

diff --git a/lib/custom-elements-languageserver-core/src/handlers/completion.ts b/lib/custom-elements-languageserver-core/src/handlers/completion.ts
@@ -1,10 +1,7 @@
-import * as HTMLLanguageService from "vscode-html-languageservice/lib/esm/htmlLanguageService.js";
-import { LanguageService as HtmlLanguageService } from "vscode-html-languageservice/lib/esm/htmlLanguageService.js";
 import tss from "typescript/lib/tsserverlibrary.js";
 import { isAttributeNameAction, isEndTagAction, isEventNameAction, isPropertyNameAction, isTagAction, resolveActionContext } from "../scanners/action-context.js";
 import { findCustomElementTagLike, findDeclarationForTagName } from "../cem/cem-helpers.js";
 import { getCEMData } from "../export.js";
-import { completionItemToCompletionEntry } from "../interop.js";
 // @ts-expect-error
 import { ClassField } from "custom-elements-manifest";
 import { CustomElementsLanguageServiceRequest } from "../request.js";
@@ -15,9 +12,6 @@ export function getCompletionEntries(request: CustomElementsLanguageServiceReque
 
     const actionContext = resolveActionContext(htmlLanguageService, document, position);
 
-    const htmlLSCompletions = getDefaultCompletionItems(document, position, htmlLanguageService);
-    // const defaultCompletionItems = htmlLSCompletions.items.map(completionItemToCompletionEntry);
-
     const cemCollection = getCEMData(project, projectBasePath);
     let cemCompletions: tss.CompletionEntry[] = [];
 
@@ -26,7 +20,6 @@ export function getCompletionEntries(request: CustomElementsLanguageServiceReque
             isGlobalCompletion: false,
             isMemberCompletion: false,
             isNewIdentifierLocation: false,
-            // entries: [...defaultCompletionItems],
             entries: [],
         };
     }
@@ -119,15 +112,7 @@ export function getCompletionEntries(request: CustomElementsLanguageServiceReque
         isGlobalCompletion: false,
         isMemberCompletion: false,
         isNewIdentifierLocation: false,
-        // entries: [...defaultCompletionItems, ...cemCompletions],
         entries: [...cemCompletions],
     };
 }
 
-function getDefaultCompletionItems(document: HTMLLanguageService.TextDocument, position: tss.LineAndCharacter, htmlLanguageService: HtmlLanguageService) {
-    const htmlDoc = htmlLanguageService.parseHTMLDocument(document);
-    const htmlCompletions = htmlLanguageService.doComplete(document, position, htmlDoc);
-    // TODO: Cache
-
-    return htmlCompletions;
-}
diff --git a/lib/server/src/diagnostics.ts b/lib/server/src/diagnostics.ts
@@ -11,7 +11,6 @@ import { createCustomElementsLanguageServiceRequest } from "./language-services/
 import { documents } from "./text-documents";
 
 export async function runDiagnostics(uri: string, textDoc: TextDocument) {
-    console.log("Running diagnostics for ", uri);
     if (isJavascriptFile(uri)) {
         handleJavascriptDiagnostics(uri, textDoc);
     } else {
@@ -25,8 +24,9 @@ function handleJavascriptDiagnostics(uri: string, textDoc: TextDocument) {
 
     try {
         const diagnostics = languageService?.getSemanticDiagnostics(fileName);
-        const sendableDiagnostics: Array<Diagnostic> = diagnostics?.map((diag: ts.Diagnostic) => tsDiagnosticToDiagnostic(diag, textDoc))
-            .filter((diag: unknown): diag is Diagnostic => diag !== undefined) ?? []; // Stupid ts types
+        const sendableDiagnostics: Array<Diagnostic> = diagnostics
+            ?.map((diag: ts.Diagnostic) => tsDiagnosticToDiagnostic(diag, textDoc))
+            .filter((diag: unknown): diag is Diagnostic => diag !== undefined) ?? [];
 
         connection.sendDiagnostics({ uri: textDoc.uri, diagnostics: sendableDiagnostics });
     } catch (ex) {

diff --git a/lib/server/src/server.ts b/lib/server/src/server.ts
@@ -42,7 +42,6 @@ LanguageServerEventHost.getInstance().addEventListener("cem-updated", (event: Ev
         return;
     }
 
-    console.log("Cem updated");
     const docs = documents.all();
     docs.forEach((doc) => {
         runDiagnostics(doc.uri, doc);

diff --git a/lib/template-language-service/src/html-template-literal-language-service.ts b/lib/template-language-service/src/html-template-literal-language-service.ts
@@ -51,6 +51,7 @@ export class HTMLTemplateLiteralLanguageService implements TemplateLanguageServi
     }
 
     public getCompletionsAtPosition(context: TemplateContext, position: tss.LineAndCharacter): tss.CompletionInfo {
+        console.log("LS: GetCompletionsAtPosition");
         const request = createCustomElementsLanguageServiceRequest(context, position, this.htmlLanguageService);
 
         return getCompletionEntries(request);

diff --git a/usage-testing-project/src/foo.ts b/usage-testing-project/src/foo.ts
@@ -13,7 +13,7 @@ export const temp = html`
     ></example-project>
 
     <example-project>
-  
+
     <example-project .color="">
 
     <weird-element></weird-element>

diff --git a/usage-testing-project/src/react.jsx b/usage-testing-project/src/react.jsx
@@ -0,0 +1,22 @@
+import { SlBreadcrumbItem } from "@shoelace-style/shoelace";
+import React from "react";
+
+function MyButton() {
+  return (
+    <button>
+      I'm a button
+
+      <example-project></example-project>
+
+    </button>
+  );
+}
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Welcome to my app</h1>
+      <MyButton />
+    </div>
+  );
+}