added the ability to auto import typescript in cqmd

newlinedotco · Oct 19, 2019 · 92d1b2f · 92d1b2f
1 parent a9425c6
commit 92d1b2f
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 7 deletions.
diff --git a/packages/remark-cq/index.js b/packages/remark-cq/index.js
@@ -370,9 +370,7 @@ async function visitCq(ast, vFile, options) {
           .toString();
       } catch (err) {
         console.warn(
-          `WARNING: cq couldn't find ${actualFilename} at ${
-            node.position.start.line
-          }:${node.position.start.column}`
+          `WARNING: cq couldn't find ${actualFilename} at ${node.position.start.line}:${node.position.start.column}`
         );
         vFile.message(err, node.position, "remark-cq");
 
@@ -395,7 +393,14 @@ async function visitCq(ast, vFile, options) {
         }
       }
       const query = node.query;
-      const cqOpts = node.options;
+
+      let engine = "babylon";
+      if (actualFilename && actualFilename.match(/\.tsx?/)) {
+        engine = "typescript";
+      }
+
+      let cqDefaults = { engine };
+      let cqOpts = { ...cqDefaults, ...node.options };
 
       let results;
 
@@ -449,9 +454,7 @@ async function visitCq(ast, vFile, options) {
               ? `#L${allMetas.startLine}`
               : "";
 
-          allMetas.url = `${
-            cqOpts.defaultMetaRootUrl
-          }/${importedPath}${anchor}`;
+          allMetas.url = `${cqOpts.defaultMetaRootUrl}/${importedPath}${anchor}`;
         }
 
         if (metaTypes) {

diff --git a/packages/remark-cq/test.js b/packages/remark-cq/test.js
@@ -208,4 +208,20 @@ const dogs = () => "Like snuggles";
   t.end();
 });
 
+test("remark-cq code imports TypeScript crop-query works", async t => {
+  const markup = `
+The code:
+
+{lang=javascript,crop-query=.constructor}  
+<<[](test/typescript.ts)`;
+  const actual = (await render(markup, { root: __dirname })).contents;
+  const expected = `<p>The code:</p>
+<pre><code class="language-javascript">constructor() {
+  this.onProductSelected = new EventEmitter();
+}
+</code></pre>`;
+  t.equal(actual, expected);
+  t.end();
+});
+
 // TODO -- when `cq-fetch` is working, ensure that metaRootUrl doesn't override a file that comes from another repo
diff --git a/packages/remark-cq/test/typescript.ts b/packages/remark-cq/test/typescript.ts
@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Product } from "../product.model";
+
+/**
+ * @ProductsList: A component for rendering all ProductRows and
+ * storing the currently selected Product
+ */
+@Component({
+  selector: "products-list",
+  templateUrl: "./products-list.component.html"
+})
+export class ProductsListComponent {
+  /**
+   * @input productList - the Product[] passed to us
+   */
+  @Input() productList: Product[];
+
+  /**
+   * @output onProductSelected - outputs the current
+   *          Product whenever a new Product is selected
+   */
+  @Output() onProductSelected: EventEmitter<Product>;
+
+  /**
+   * @property currentProduct - local state containing
+   *             the currently selected `Product`
+   */
+  private currentProduct: Product;
+
+  constructor() {
+    this.onProductSelected = new EventEmitter();
+  }
+
+  clicked(product: Product): void {
+    this.currentProduct = product;
+    this.onProductSelected.emit(product);
+  }
+
+  isSelected(product: Product): boolean {
+    if (!product || !this.currentProduct) {
+      return false;
+    }
+    return product.sku === this.currentProduct.sku;
+  }
+}