Make line transformers async compatible

Author: andrewbranch

src/graphql/createSchemaCustomization.js

@@ -9,13 +9,13 @@ const rootSchema = fs.readFileSync(path.resolve(__dirname, 'schema.graphql'), 'u
  * @param {*} nodeApiOptions
  * @param {PluginOptions} options
  */
-function createSchemaCustomization({ actions }, options) {
+function createSchemaCustomization({ actions, cache }, options) {
   const { createTypes } = actions;
   logger.setLevel(options.logLevel || 'error');
   createTypes(rootSchema);
   const lineTransformers = options.getLineTransformers
-    ? options.getLineTransformers(options)
-    : getDefaultLineTransformers();
+    ? options.getLineTransformers(options, cache)
+    : getDefaultLineTransformers(options, cache);
 
   for (const transformer of lineTransformers) {
     if (transformer.schemaExtension) {

src/graphql/highlight.js

@@ -25,7 +25,7 @@ async function highlight(args, pluginOptions, { cache, createNodeId }) {
     ...rest
   } = await plugin.once(() => setup(pluginOptions, cache));
 
-  const lineTransformers = await getLineTransformers(
+  const lineTransformers = getLineTransformers(
     {
       theme,
       languageAliases,

src/index.js

@@ -41,7 +41,7 @@ function createPlugin() {
       ...rest
     } = await once(() => setup(options, cache), 'setup');
 
-    const lineTransformers = await getLineTransformers(
+    const lineTransformers = getLineTransformers(
       {
         theme,
         wrapperClassName,
@@ -185,8 +185,8 @@ function createPlugin() {
   }
 
   textmateHighlight.getRegistry = getRegistry;
-  textmateHighlight.createSchemaCustomization = createSchemaCustomization;
   textmateHighlight.once = once;
+  textmateHighlight.createSchemaCustomization = createSchemaCustomization;
   return textmateHighlight;
 }
 

src/registerCodeBlock.js

@@ -30,7 +30,7 @@ async function registerCodeBlock(
   const grammarCache = await cache.get('grammars');
   const [registry, unlockRegistry] = await getTextMateRegistry();
   try {
-    const lines = getTransformedLines(lineTransformers, text, languageName, meta);
+    const lines = await getTransformedLines(lineTransformers, text, languageName, meta);
     /** @type {import('vscode-textmate').ITokenTypeMap} */
     let tokenTypes = {};
     /** @type {number} */

src/transformers/getTransformedLines.js

@@ -6,9 +6,9 @@
  * @param {string} text
  * @param {string} languageName
  * @param {object} meta
- * @returns {Line[]}
+ * @returns {Promise<Line[]>}
  */
-function getTransformedLines(transformers, text, languageName, meta) {
+async function getTransformedLines(transformers, text, languageName, meta) {
   /** @type {Line[]} */
   const result = [];
   const rawLines = text.split(/\r?\n/);
@@ -22,7 +22,7 @@ function getTransformedLines(transformers, text, languageName, meta) {
       const transformer = transformers[i];
       const state = prevTransformerStates[i];
       /** @type {LineTransformerResult} */
-      const txResult = transformer({
+      const txResult = await transformer({
         state,
         line: { text: line, attrs },
         meta,

src/transformers/highlightDirectiveLineTransformer.js

@@ -54,11 +54,16 @@ const textIsHighlightDirective = (text, commentWrapper) => directive =>
 /**
  * @param {Record<string, (message: string) => string>} languageCommentMap user-defined object mapping language keys to commenting functions
  * @param {Record<string, string>} languageAliases
- * @param {*} grammarCache
+ * @param {GatsbyCache} cache
  */
-function createHighlightDirectiveLineTransformer(languageCommentMap, languageAliases, grammarCache) {
+function createHighlightDirectiveLineTransformer(languageCommentMap, languageAliases, cache) {
+  let grammarCache;
   /** @type {LineTransformer<HighlightCommentTransfomerState>} */
-  const transformer = ({ line, language, state }) => {
+  const transformer = async ({ line, language, state }) => {
+    if (!grammarCache) {
+      grammarCache = await cache.get('grammars');
+    }
+
     const scope = getScope(language, grammarCache, languageAliases);
     const commentWrapper = getCommentForLanguage(language, scope, languageCommentMap);
     const isDirective = textIsHighlightDirective(line.text, commentWrapper);
@@ -101,7 +106,7 @@ function createHighlightDirectiveLineTransformer(languageCommentMap, languageAli
 
   transformer.displayName = 'highlightCommentDirective';
   transformer.schemaExtension = `
-    type GRVSCLine {
+    type GRVSCTokenizedLine {
       isHighlighted: Boolean
     }
   `;

src/transformers/highlightMetaTransformer.js

@@ -52,7 +52,7 @@ const highlightMetaTransformer = ({ meta, line, state = getInitialState(meta) })
 
 highlightMetaTransformer.displayName = 'highlightCodeFenceOptions';
 highlightMetaTransformer.schemaExtension = `
-  type GRVSCLine {
+  type GRVSCTokenizedLine {
     isHighlighted: Boolean
   }
 `;

src/transformers/index.js

@@ -6,13 +6,10 @@ const getTransformedLines = require('./getTransformedLines');
 /**
  * @param {PluginOptions} pluginOptions
  * @param {GatsbyCache} cache
- * @returns {Promise<LineTransformer[]>}
+ * @returns {LineTransformer[]}
  */
-async function getDefaultLineTransformers(pluginOptions, cache) {
-  return [
-    createHighlightDirectiveLineTransformer({}, pluginOptions.languageAliases, await cache.get('grammars')),
-    highlightMetaTransformer
-  ];
+function getDefaultLineTransformers(pluginOptions, cache) {
+  return [createHighlightDirectiveLineTransformer({}, pluginOptions.languageAliases, cache), highlightMetaTransformer];
 }
 
 /**
@@ -25,8 +22,8 @@ function addLineTransformers(...transformers) {
    * @param {PluginOptions} pluginOptions
    * @param {GatsbyCache} cache
    */
-  async function getLineTransformers(pluginOptions, cache) {
-    return [...transformers, ...(await getDefaultLineTransformers(pluginOptions, cache))];
+  function getLineTransformers(pluginOptions, cache) {
+    return [...transformers, ...getDefaultLineTransformers(pluginOptions, cache)];
   }
 }
 

src/types.d.ts

@@ -63,7 +63,7 @@ interface PluginOptions {
   replaceColor?: (colorValue: string, theme: string) => string;
   logLevel?: 'trace' | 'debug' | 'info' | 'warn' | 'error';
   host?: Host;
-  getLineTransformers?: (pluginOptions: PluginOptions, cache: GatsbyCache) => LineTransformer[] | Promise<LineTransformer[]>;
+  getLineTransformers?: (pluginOptions: PluginOptions, cache: GatsbyCache) => LineTransformer[];
 }
 
 interface GatsbyCache {
@@ -181,7 +181,7 @@ interface LineTransformerArgs<T> extends LineTransformerInfo<T> {
 }
 
 interface LineTransformer<T = any> {
-  (args: LineTransformerArgs<T>): LineTransformerResult<T>;
+  (args: LineTransformerArgs<T>): LineTransformerResult<T> | Promise<LineTransformerResult<T>>;
   displayName: string;
   schemaExtension?: string;
 }