Merge pull request #131 from microsoft/gatsby-twoslash

Adds twoslash to the gatsby side

Author: Orta

.vscode/settings.json

@@ -14,4 +14,5 @@
   },
   "peacock.color": "#3178C6",
   "typescript.tsdk": "node_modules/typescript/lib",
+  "debug.node.autoAttach": "off",
 }

package.json

@@ -12,7 +12,7 @@
     "husky": "^3.0.9"
   },
   "scripts": {
-    "bootstrap": "yarn build-tsconfig-reference-md",
+    "bootstrap": "yarn workspaces run build",
     "start": "yarn workspace typescriptlang-org start",
     "build-site": "yarn workspace typescriptlang-org build",
     "build-tsconfig-reference-md": "yarn workspace tsconfig-reference build",

packages/gatsby-remark-twoslasher-code-blocks/README.md

@@ -0,0 +1,48 @@
+### gatsby-remark-twoslasher-code-blocks
+
+Sets up code blocks to run through ts-twoslasher:
+
+```js
+{
+  resolve: `gatsby-transformer-remark`,
+  options: {
+    plugins: [
+      "gatsby-remark-twoslasher-code-blocks",
+      {
+        resolve: `gatsby-remark-images`,
+        options: {
+          maxWidth: 590,
+        },
+      },
+      {
+        resolve: `gatsby-remark-responsive-iframe`,
+        options: {
+          wrapperStyle: `margin-bottom: 1.0725rem`,
+        },
+      },
+      "gatsby-remark-autolink-headers",
+      "gatsby-remark-prismjs",
+      "gatsby-remark-copy-linked-files",
+      "gatsby-remark-smartypants",
+    ],
+  },
+}
+```
+
+Currently it only works when you specify twoslash in your codeblock
+
+```js
+// Nothing will happen
+'''ts
+// @showEmit
+// @target ES5
+const staysAsTypeScript = true
+'''
+
+// This will convert
+'''ts twoslash
+// @showEmit
+// @target ES5
+
+const staysAsTypeScript = false
+```

packages/gatsby-remark-twoslasher-code-blocks/index.js

@@ -0,0 +1,30 @@
+// @ts-enable 
+
+const visit = require('unist-util-visit');
+const {twoslasher} = require(require.resolve("ts-twoslasher"))
+
+/**
+ * The function doing the work of transforming any codeblock samples
+ * which have opted-in to the twoslash pattern.
+ * 
+ * @param {Node} node 
+ */
+const visitor = (node) => {
+  if (!node.meta || !node.meta.includes("twoslash")) return
+
+  const results = twoslasher(node.value, node.lang)
+  node.value = results.code
+  node.lang = results.extension
+  node.twoslash = {
+    highlights: results.highlights,
+    playgroundURL: results.playgroundURL,
+    queries: results.queries,
+  }
+}
+
+/** The plugin API */
+module.exports = ({ markdownAST }) => {
+  visit(markdownAST, 'code', visitor);
+};
+
+module.exports.visitor = visitor

packages/gatsby-remark-twoslasher-code-blocks/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "gatsby-remark-twoslasher-code-blocks",
+  "version": "0.1.0",
+  "license": "MIT",
+  "dependencies": {
+    "ts-twoslasher": "0.1.0",
+    "unist-util-visit": "^2.0.1"
+  },
+  "scripts": {
+    "build": "echo 'NOOP'",
+    "test": "echo 'NOOP'"
+  }
+}

packages/gatsby-remark-twoslasher-code-blocks/scripts/index.md

@@ -0,0 +1,27 @@
+## Some markdown
+
+I shouldn't get changed:
+
+```ts
+// @showEmit
+export function fn(arr: number[]) {
+  const arr2 = [1, ...arr];
+}
+```
+
+I should:
+
+```ts twoslash
+// @showEmit
+// @target: ES5
+// @downleveliteration
+// @importhelpers
+
+// --importHelpers on: Spread helper will be imported from 'tslib'
+
+export function fn(arr: number[]) {
+  const arr2 = [1, ...arr];
+}
+```
+
+Cool, a paragraph after

packages/gatsby-remark-twoslasher-code-blocks/scripts/test.js

@@ -0,0 +1,12 @@
+var remark = require("remark")
+var visit = require("unist-util-visit")
+
+const { readFileSync }= require("fs")
+
+var remark = require("remark")
+var visit = require("unist-util-visit")
+var {visitor} = require("../")
+
+var tree = remark().parse(readFileSync(__dirname + "/index.md", "utf8"))
+visit(tree, "code", visitor)
+console.log(tree)

packages/handbook-v1/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "handbook-v1",
+  "private": true,
+  "license": "MIT",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "echo 'NOOP'",
+    "test": "echo 'NOOP'"
+  }
+}