Skip to content

Adds twoslash to the gatsby side #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 21, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@
},
"peacock.color": "#3178C6",
"typescript.tsdk": "node_modules/typescript/lib",
"debug.node.autoAttach": "off",
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
48 changes: 48 additions & 0 deletions packages/gatsby-remark-twoslasher-code-blocks/README.md
Original file line number Diff line number Diff line change
@@ -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
```
30 changes: 30 additions & 0 deletions packages/gatsby-remark-twoslasher-code-blocks/index.js
Original file line number Diff line number Diff line change
@@ -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
13 changes: 13 additions & 0 deletions packages/gatsby-remark-twoslasher-code-blocks/package.json
Original file line number Diff line number Diff line change
@@ -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'"
}
}
27 changes: 27 additions & 0 deletions packages/gatsby-remark-twoslasher-code-blocks/scripts/index.md
Original file line number Diff line number Diff line change
@@ -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
12 changes: 12 additions & 0 deletions packages/gatsby-remark-twoslasher-code-blocks/scripts/test.js
Original file line number Diff line number Diff line change
@@ -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)
10 changes: 10 additions & 0 deletions packages/handbook-v1/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"name": "handbook-v1",
"private": true,
"license": "MIT",
"version": "1.0.0",
"scripts": {
"build": "echo 'NOOP'",
"test": "echo 'NOOP'"
}
}
3 changes: 0 additions & 3 deletions packages/playground/.npmignore

This file was deleted.

1 change: 0 additions & 1 deletion packages/playground/README.md

This file was deleted.

14 changes: 0 additions & 14 deletions packages/playground/index.html

This file was deleted.

14 changes: 0 additions & 14 deletions packages/playground/index.tsx

This file was deleted.

20 changes: 0 additions & 20 deletions packages/playground/package.json

This file was deleted.

19 changes: 0 additions & 19 deletions packages/playground/tsconfig.json

This file was deleted.

Loading