Replace tree-sitter binding (#2707)

Author: devongovett

package.json

@@ -21,8 +21,8 @@
     "build:storybook-16": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16",
     "start:chromatic": "NODE_ENV=storybook start-storybook -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "build-storybook -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
-    "start:docs": "PARCEL_WORKER_BACKEND=process DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
-    "build:docs": "PARCEL_WORKER_BACKEND=process DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
+    "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
+    "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "test": "yarn jest",
     "build": "make build",
     "test:ssr": "yarn jest --config jest.ssr.config.js",

packages/dev/docs/src/syntax-highlight.css

@@ -114,7 +114,8 @@
   text-decoration: underline;
 }
 
-:global(.source) {
+:global(.source),
+:global(.embedded) {
   display: block;
   padding: 0.5em;
   color: var(--hljs-color);
@@ -135,56 +136,57 @@
   hyphens: none;
 }
 
-:global(.embedded.source) {
+:global(.embedded) {
   display: inline;
   padding: 0;
 }
 
-:global(.constant) {
+:global(.constant),
+:global(.number),
+:global(.number .type) {
   color: var(--hljs-literal-color);
 }
 
-:global(.storage.type),
-:global(.storage.modifier),
-:global(.constant.color),
-:global(.support.property-value.css) {
-  color: var(--hljs-keyword-color);
-}
-
-:global(.entity.function),
-:global(.support.function) {
+:global(.function) {
   color: var(--hljs-function-color);
 }
 
-:global(.keyword.control) {
+:global(.keyword) {
   color: var(--hljs-keyword-color);
 }
 
-:global(.class-name) {
-  color: var(--hljs-class-color);
-}
-
-:global(.entity.attribute-name) {
+:global(.attribute) {
   color: var(--hljs-attribute-color);
 }
-:global(.entity.name.tag),
-:global(.support.type) {
+:global(.tag),
+:global(.type) {
   color: var(--hljs-section-color);
 }
 
-:global(.punctuation.section) {
+:global(.punctuation.special) {
   color: var(--hljs-title-color);
 }
 
-:global(.variable.other.object.property) {
+:global(.property) {
   color: var(--hljs-variable-color);
 }
 
-:global(.string.quoted) {
+:global(.string) {
   color: var(--hljs-string-color);
 }
 
 :global(.comment) {
   color: var(--hljs-comment-color);
   font-style: italic;
 }
+
+/* regex */
+:global(.string.special) {
+  :global(.operator) {
+    color: var(--hljs-keyword-color);
+  }
+
+  :global(.punctuation.bracket) {
+    color: var(--hljs-attribute-color);
+  }
+}

packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js

@@ -12,7 +12,7 @@
 
 const {Transformer} = require('@parcel/plugin');
 const flatMap = require('unist-util-flatmap');
-const treeSitter = require('remark-tree-sitter');
+const treeSitter = require('tree-sitter-highlight');
 const {fragmentUnWrap, fragmentWrap} = require('./MDXFragments');
 const yaml = require('js-yaml');
 const dprint = require('dprint-node');
@@ -257,6 +257,27 @@ module.exports = new Transformer({
       );
     }
 
+    let visit = (await import('unist-util-visit')).visit;
+    function highlight(options) {
+      return (tree) => {
+        visit(tree, 'code', node => {
+          if (!node.lang) {
+            return;
+          }
+          let language = treeSitter.Language[node.lang.toUpperCase()];
+          if (!language) {
+            return;
+          }
+          if (!node.data) {
+            node.data = {};
+          }
+          let highlighted = treeSitter.highlightHast(node.value, language);
+          node.data.hChildren = [highlighted];
+        });
+        return tree;
+      };
+    }
+
     let {compile} = await import('@mdx-js/mdx');
     let frontmatter = (await import('remark-frontmatter')).default;
     let slug = (await import('remark-slug')).default;
@@ -268,15 +289,7 @@ module.exports = new Transformer({
         extractExamples,
         fragmentWrap,
         [frontmatter, {type: 'yaml', anywhere: true, marker: '-'}],
-        [
-          treeSitter,
-          {
-            grammarPackages: [
-              '@atom-languages/language-typescript',
-              '@atom-languages/language-css'
-            ]
-          }
-        ],
+        highlight,
         fragmentUnWrap
       ],
       rehypePlugins: [

packages/dev/parcel-transformer-mdx-docs/package.json

@@ -7,17 +7,16 @@
     "parcel": "2.0.0-nightly.949"
   },
   "dependencies": {
-    "@atom-languages/language-typescript": "atom/language-typescript#v0.6.2",
-    "@atom-languages/language-css": "atom/language-css#v0.44.4",
     "@mdx-js/mdx": "next",
     "@mdx-js/react": "next",
     "@parcel/plugin": "2.0.0-nightly.951",
-    "dprint-node": "^1.0.3",
+    "dprint-node": "^1.0.5",
     "js-yaml": "^3.13.1",
     "mdast-util-toc": "^6.1.0",
     "remark-frontmatter": "^4.0.1",
     "remark-slug": "^7.0.1",
-    "remark-tree-sitter": "^1.0.3",
-    "unist-util-flatmap": "^1.0.0"
+    "tree-sitter-highlight": "^1.0.1",
+    "unist-util-flatmap": "^1.0.0",
+    "unist-util-visit": "^4.0.0"
   }
 }