Merge remote-tracking branch 'origin/vs-code-importer'

Author: chriseppstein

Diff for: packages/@css-blocks/core/src/configuration/types.ts

@@ -20,8 +20,8 @@ export interface Configuration {
   preprocessors: Preprocessors;
 
   /**
-   * An importer is an object that is in charge of findi
-   *
+   * An importer is an object that is in charge of finding the contents of a
+   * block file from its @block directive
    */
   importer: Importer;
 

Diff for: packages/@css-blocks/language-server/README.md

@@ -0,0 +1,23 @@
+This is the language server for css-blocks that can plug into any client, such
+as, vs code.
+
+Contributing
+1. `yarn run compile` in the root folder of `css-blocks`. This will compile all
+   the code, including this package.
+2. Open css-blocks from the workspace. Locate `css-blocks.code-workspace` file
+   within `css-blocks` project. It should bring a pop up at the bottom that says
+   something like “use workspace”. Click on it. If it does not, try the
+   following  steps:
+  1. from command palette, choose “Close workspace” - that should close
+     everything and take you to the vscode start screen
+  2. choose “Open folder”
+  3. navigate to css-blocks and choose to open the css-blocks.code-workspace
+     file directly
+3. Open the debug panel by pressing `cmd+shift+D`
+4. At the top there should be a drop down. select Client + Server
+5. After that, pressing f5 or clicking the “play” icon next to the selected
+   configuration should run the extension
+6. If youre making changes to the server and you need to compile them as the
+   changes are made, go to `css-blocks/packages/@css-blocks/language-server` and
+   run `yarn watch`
+

Diff for: packages/@css-blocks/language-server/package.json

@@ -35,6 +35,6 @@
     "watch": "watch 'yarn run test' './src' --wait=3"
   },
   "volta": {
-    "node": "10.11.0"
+    "node": "10.13.0"
   }
 }

Diff for: packages/@css-blocks/language-server/src/Importer.ts

@@ -0,0 +1,33 @@
+import { Configuration, ImportedFile, NodeJsImporter } from "@css-blocks/core";
+import { TextDocuments } from "vscode-languageserver";
+import { URI } from "vscode-uri";
+
+/**
+ * Imports the contents of the file from the language server client if its
+ * already opened on the client. Otherwise, it proxies to the NodeJSImporter to
+ * read the file from the disk
+ */
+export class LSImporter extends NodeJsImporter {
+  documents: TextDocuments;
+  constructor(documents: TextDocuments) {
+    super();
+    this.documents = documents;
+  }
+
+  async import(identifier: string, config: Configuration): Promise<ImportedFile> {
+    // the uri expected is that of a file
+    let clientDocument = this.documents.get(URI.file(identifier).toString());
+    // if the document is opened on the client, read from there
+    // this will allow us to access the contents of an unsaved file
+    if (clientDocument) {
+      return {
+        syntax: this.syntax(identifier, config),
+        identifier,
+        defaultName: this.defaultName(identifier, config),
+        contents: clientDocument.getText(),
+      };
+    }
+    // else import from the defaultImporter (which is the NodeJSImporter) as before
+    return super.import(identifier, config);
+  }
+}

Diff for: packages/@css-blocks/language-server/src/Server.ts

@@ -52,16 +52,17 @@ export class Server {
 
   async onDidChangeContent(e: TextDocumentChangeEvent) {
       // only track incremental changes within block files
-      // NOTE: this does seem to cause a little bit of weirdness when editing a
-      // template with errors since the error locations do not get updated until
-      // saving the file. We may want to validate the open template files on
-      // every change?
+      this.blockFactory.reset();
       if (isBlockFile(e.document.uri)) {
-        const cssBlockErrors = await documentContentChange(e, this.blockParser);
+        const cssBlockErrors = await documentContentChange(e, this.blockFactory);
         this.sendDiagnostics(cssBlockErrors, e.document.uri);
 
       } else if (isTemplateFile(e.document.uri)) {
         // Validate template
+        // NOTE: this does seem to cause a little bit of weirdness when editing a
+        // template with errors since the error locations do not get updated until
+        // saving the file. We may want to validate the open template files on
+        // every change?
       }
 
   }

Diff for: packages/@css-blocks/language-server/src/eventHandlers/documentContentChange.ts

@@ -1,16 +1,21 @@
-import { CssBlockError } from "@css-blocks/core/dist/src";
-import { BlockParser } from "@css-blocks/core/dist/src/BlockParser/BlockParser";
+import { BlockFactory, CssBlockError } from "@css-blocks/core/dist/src";
 import { TextDocumentChangeEvent } from "vscode-languageserver";
 import { URI } from "vscode-uri";
 
-import { isBlockFile, parseBlockErrors } from "../util/blockUtils";
+import { isBlockFile } from "../util/blockUtils";
 
-export async function documentContentChange(e: TextDocumentChangeEvent, parser: BlockParser): Promise<CssBlockError[]> {
+export async function documentContentChange(e: TextDocumentChangeEvent, blockFactory: BlockFactory): Promise<CssBlockError[]> {
   const { uri } = e.document;
 
   if (isBlockFile(uri)) {
-    return await parseBlockErrors(parser, URI.parse(uri).fsPath, e.document.getText());
+    try {
+      // parses the block file to get the block and errors if there's a problem
+      // along the way. The importer ensures that we're getting live contents if
+      // the block file is opened
+      await blockFactory.getBlockFromPath(URI.parse(uri).fsPath);
+    } catch (error) {
+      return error instanceof CssBlockError ? [error] : [];
+    }
   }
-
   return [];
 }

Diff for: packages/@css-blocks/language-server/src/run.ts

@@ -1,6 +1,7 @@
 import { Syntax } from "@css-blocks/core/dist/src";
 import { ProposedFeatures, TextDocuments, createConnection } from "vscode-languageserver";
 
+import { LSImporter } from "./Importer";
 import { EmberClassicTransformer } from "./pathTransformers/EmberClassicTransformer";
 import { Server } from "./Server";
 
@@ -11,6 +12,6 @@ const pathTransformer = new EmberClassicTransformer(Syntax.css);
 const connection = createConnection(ProposedFeatures.all);
 const documents = new TextDocuments();
 
-let server = new Server(connection, documents, pathTransformer);
+let server = new Server(connection, documents, pathTransformer, {importer: new LSImporter(documents)});
 
 server.listen();

Diff for: packages/@css-blocks/language-server/src/util/blockUtils.ts

@@ -1,7 +1,4 @@
-import { CssBlockError, Syntax } from "@css-blocks/core/dist/src";
-import { BlockParser } from "@css-blocks/core/dist/src/BlockParser/BlockParser";
 import * as fs from "fs";
-import { postcss } from "opticss";
 import * as path from "path";
 import { CompletionItem, CompletionItemKind, Position, TextDocument } from "vscode-languageserver";
 import { URI } from "vscode-uri";
@@ -14,27 +11,6 @@ export function isBlockFile(uriOrFsPath: string) {
   return uriOrFsPath.endsWith(".block.css");
 }
 
-export async function parseBlockErrors(parser: BlockParser, blockFsPath: string, sourceText: string): Promise<CssBlockError[]> {
-  let errors: CssBlockError[] = [];
-
-  try {
-    await parser.parseSource({
-      identifier: blockFsPath,
-      defaultName: path.parse(blockFsPath).name.replace(/\.block/, ""),
-      originalSource: sourceText,
-      originalSyntax: Syntax.css,
-      parseResult: postcss.parse(sourceText, { from: blockFsPath }),
-      dependencies: [],
-    });
-  } catch (error) {
-    if (error instanceof CssBlockError) {
-      errors = errors.concat(error);
-    }
-  }
-
-  return errors;
-}
-
 /**
  * If the cursor line has an import path, we check to see if the current position
  * of the cursor in the line is within the bounds of the import path to decide