Finish main plugin implementation

Author: andrewbranch

src/createCodeNodeRegistry.js

@@ -5,13 +5,15 @@ const { getTokenDataFromMetadata } = require('../lib/vscode/modes');
 const { declaration } = require('./renderers/css');
 
 /**
- * @template TKey
+ * @template {Keyable} TKey
  * @param {CodeNodeRegistryOptions=} options
  * @returns {CodeNodeRegistry<TKey>}
  */
 function createCodeNodeRegistry({ prefixAllClassNames } = {}) {
-  /** @type {Map<TKey, RegisteredCodeBlockData & { index: number }>} */
-  const nodeMap = new Map();
+  /** @type {Map<TKey, RegisteredCodeNodeData>} */
+  const blockMap = new Map();
+  /** @type {Map<TKey, RegisteredCodeNodeData>} */
+  const spanMap = new Map();
   /** @type {ConditionalTheme[]} */
   let themes = [];
   /** @type {Map<string, { colorMap: string[], settings: Record<string, string> }>} */
@@ -23,16 +25,17 @@ function createCodeNodeRegistry({ prefixAllClassNames } = {}) {
 
   return {
     register: (key, data) => {
-      nodeMap.set(key, { ...data, index: nodeMap.size });
+      const map = key.type === 'code' ? blockMap : spanMap;
+      map.set(key, { ...data, index: map.size });
       themes = concatConditionalThemes(themes, data.possibleThemes);
       data.tokenizationResults.forEach(({ theme, colorMap, settings }) =>
         themeColors.set(theme.identifier, { colorMap, settings })
       );
     },
-    forEachLine: (node, action) => nodeMap.get(node).lines.forEach(action),
+    forEachLine: (node, action) => blockMap.get(node).lines.forEach(action),
     forEachToken: (node, lineIndex, tokenAction) => {
       generateClassNames();
-      const { tokenizationResults, isTokenized, lines } = nodeMap.get(node);
+      const { tokenizationResults, isTokenized, lines } = blockMap.get(node);
       if (!isTokenized) {
         return;
       }
@@ -78,7 +81,8 @@ function createCodeNodeRegistry({ prefixAllClassNames } = {}) {
         });
       });
     },
-    forEachCodeBlock: nodeMap.forEach.bind(nodeMap),
+    forEachCodeBlock: blockMap.forEach.bind(blockMap),
+    forEachCodeSpan: spanMap.forEach.bind(spanMap),
     getAllPossibleThemes: () => themes.map(theme => ({ theme, settings: themeColors.get(theme.identifier).settings })),
     getTokenStylesForTheme: themeIdentifier => {
       /** @type {ReturnType<CodeNodeRegistry['getTokenStylesForTheme']>} */
@@ -113,7 +117,14 @@ function createCodeNodeRegistry({ prefixAllClassNames } = {}) {
     if (themeTokenClassNameMap) return;
     themeTokenClassNameMap = new Map();
     zippedLines = new Map();
-    nodeMap.forEach(({ lines, tokenizationResults, isTokenized }, node) => {
+    blockMap.forEach(generate);
+    spanMap.forEach(generate);
+
+    /**
+     * @param {RegisteredCodeNodeData} data
+     * @param {TKey} node
+     */
+    function generate({ lines, tokenizationResults, isTokenized }, node) {
       if (!isTokenized) return;
       /** @type {Token[][][]} */
       const zippedLinesForNode = [];
@@ -141,7 +152,7 @@ function createCodeNodeRegistry({ prefixAllClassNames } = {}) {
           });
         });
       });
-    });
+    }
   }
 }
 

src/factory/html.js

@@ -33,6 +33,18 @@ function createLineElement(line, meta, index, language, getLineClassName, tokens
   return span(attrs, children, { whitespace: TriviaRenderFlags.NoWhitespace });
 }
 
+/**
+ * @param {number} index
+ * @param {string} language
+ * @param {string | undefined} className
+ * @param {grvsc.HTMLElement[]} tokens
+ */
+function createCodeSpanElement(index, language, className, tokens) {
+  return code({ class: className, 'data-language': language, 'data-index': index }, tokens, {
+    whitespace: TriviaRenderFlags.NoWhitespace
+  });
+}
+
 /**
  * Returns the token element array with contiguous spans having the same class name
  * merged into a single span to minimize the number of elements returned.
@@ -90,5 +102,6 @@ module.exports = {
   createTokenElement,
   createLineElement,
   createCodeBlockElement,
-  createStyleElement
+  createStyleElement,
+  createCodeSpanElement
 };

src/getPossibleThemes.js

@@ -14,19 +14,9 @@ const {
  * @param {T} codeNodeData
  * @returns {Promise<ConditionalTheme[]>}
  */
-async function getPossibleThemes(
-  themeOption,
-  themeCache,
-  contextDirectory,
-  codeNodeData
-) {
+async function getPossibleThemes(themeOption, themeCache, contextDirectory, codeNodeData) {
   if (typeof themeOption === 'function') {
-    return getPossibleThemes(
-      themeOption(codeNodeData),
-      themeCache,
-      contextDirectory,
-      codeNodeData
-    );
+    return getPossibleThemes(themeOption(codeNodeData), themeCache, contextDirectory, codeNodeData);
   }
 
   if (typeof themeOption === 'string') {
@@ -36,12 +26,7 @@ async function getPossibleThemes(
   /** @type {ConditionalTheme[]} */
   let themes;
   if (themeOption.default) {
-    themes = await getPossibleThemes(
-      themeOption.default,
-      themeCache,
-      contextDirectory,
-      codeNodeData
-    );
+    themes = await getPossibleThemes(themeOption.default, themeCache, contextDirectory, codeNodeData);
   }
   if (themeOption.dark) {
     themes = concatConditionalThemes(themes, [

src/graphql/getCodeBlockDataFromRegistry.js

@@ -5,10 +5,10 @@ const { flatMap, partitionOne, escapeHTML } = require('../utils');
 const { createTokenElement, createLineElement, createCodeBlockElement } = require('../factory/html');
 
 /**
- * @template TKey
+ * @template {Keyable} TKey
  * @param {CodeNodeRegistry<TKey>} registry
  * @param {TKey} key
- * @param {RegisteredCodeBlockData} codeBlock
+ * @param {RegisteredCodeNodeData} codeBlock
  * @param {() => string} getWrapperClassName
  * @param {(line: LineData) => string} getLineClassName
  * @returns {Omit<grvsc.gql.GRVSCCodeBlock, 'id'>}

src/graphql/getCodeSpanDataFromRegistry.js

@@ -0,0 +1,48 @@
+const { renderHTML } = require('../renderers/html');
+const { partitionOne } = require('../utils');
+const { createTokenElement, createCodeSpanElement } = require('../factory/html');
+
+/**
+ * @template {Keyable} TKey
+ * @param {CodeNodeRegistry<TKey>} registry
+ * @param {TKey} key
+ * @param {RegisteredCodeNodeData} codeSpan
+ * @param {() => string} getClassName
+ * @returns {Omit<grvsc.gql.GRVSCCodeSpan, 'id'>}
+ */
+function getCodeSpanDataFromRegistry(registry, key, codeSpan, getClassName) {
+  const { index, languageName, text, possibleThemes } = codeSpan;
+  /** @type {grvsc.HTMLElement[]} */
+  const tokenElements = [];
+  /** @type {grvsc.gql.GRVSCToken[]} */
+  const gqlTokens = [];
+
+  registry.forEachToken(key, 0, token => {
+    const html = createTokenElement(token);
+    tokenElements.push(html);
+    gqlTokens.push({
+      ...token,
+      className: html.attributes.class,
+      html: renderHTML(html)
+    });
+  });
+
+  const className = getClassName();
+  const html = createCodeSpanElement(index, languageName, className, tokenElements);
+  const [defaultTheme, additionalThemes] = partitionOne(possibleThemes, t =>
+    t.conditions.some(c => c.condition === 'default')
+  );
+
+  return {
+    index,
+    text,
+    html: renderHTML(html),
+    language: languageName,
+    className: getClassName(),
+    defaultTheme,
+    additionalThemes,
+    tokens: gqlTokens
+  };
+}
+
+module.exports = getCodeSpanDataFromRegistry;

src/graphql/getThemes.js

@@ -17,7 +17,7 @@ async function convertThemeArgument(theme, themeCache) {
 }
 
 /**
- * @param {ThemeOption} themeOption
+ * @param {ThemeOption<CodeBlockData | CodeSpanData>} themeOption
  * @param {grvsc.gql.CSSArgs} args
  * @param {ThemeCache} themeCache
  * @returns {Promise<ConditionalTheme[]>}
@@ -40,7 +40,7 @@ async function getThemes(themeOption, args, themeCache) {
         `evaluating 'grvscHighlight'.`
     );
   }
-  return getPossibleThemes(themeOption, themeCache, undefined, undefined, undefined, undefined, undefined);
+  return getPossibleThemes(themeOption, themeCache, undefined, undefined);
 }
 
 module.exports = getThemes;

src/graphql/highlight.js

@@ -1,13 +1,14 @@
 const setup = require('../setup');
 const plugin = require('../../index');
-const registerCodeBlock = require('../registerCodeBlock');
-const parseCodeFenceHeader = require('../parseCodeFenceHeader');
-const createCodeBlockRegistry = require('../createCodeBlockRegistry');
+const { registerCodeBlock } = require('../registerCodeNode');
+const parseCodeFenceHeader = require('../parseCodeFenceInfo');
+const createCodeNodeRegistry = require('../createCodeNodeRegistry');
 const getCodeBlockDataFromRegistry = require('./getCodeBlockDataFromRegistry');
 const getThemes = require('./getThemes');
 const { createHash } = require('crypto');
 const { getScope } = require('../storeUtils');
-const registryKey = 0;
+/** @type {{ type: 'code' }} */
+const registryKey = { type: 'code' };
 
 /**
  * @param {grvsc.gql.HighlightArgs} args
@@ -41,11 +42,11 @@ async function highlight(args, pluginOptions, { cache, createNodeId }) {
   const possibleThemes = await getThemes(theme, args, themeCache);
   const scope = getScope(args.language, grammarCache, languageAliases);
   /** @type {CodeNodeRegistry<typeof registryKey>} */
-  const codeBlockRegistry = createCodeBlockRegistry({ prefixAllClassNames: true });
+  const codeNodeRegistry = createCodeNodeRegistry({ prefixAllClassNames: true });
   const meta = parseCodeFenceHeader(args.language, args.meta);
 
   await registerCodeBlock(
-    codeBlockRegistry,
+    codeNodeRegistry,
     registryKey,
     possibleThemes,
     () => plugin.getRegistry(cache, scope),
@@ -59,9 +60,9 @@ async function highlight(args, pluginOptions, { cache, createNodeId }) {
 
   /** @type {Omit<grvsc.gql.GRVSCCodeBlock, 'id'>} */
   let result;
-  codeBlockRegistry.forEachCodeBlock(codeBlock => {
+  codeNodeRegistry.forEachCodeBlock(codeBlock => {
     result = getCodeBlockDataFromRegistry(
-      codeBlockRegistry,
+      codeNodeRegistry,
       registryKey,
       codeBlock,
       getWrapperClassName,
@@ -72,6 +73,7 @@ async function highlight(args, pluginOptions, { cache, createNodeId }) {
       return typeof wrapperClassName === 'function'
         ? wrapperClassName({
             language: codeBlock.languageName,
+            node: undefined,
             markdownNode: undefined,
             codeFenceNode: undefined,
             parsedOptions: codeBlock.meta

src/index.js

@@ -11,6 +11,7 @@ const parseCodeFenceInfo = require('./parseCodeFenceInfo');
 const parseCodeSpanInfo = require('./parseCodeSpanInfo');
 const createSchemaCustomization = require('./graphql/createSchemaCustomization');
 const getCodeBlockGraphQLDataFromRegistry = require('./graphql/getCodeBlockDataFromRegistry');
+const getCodeSpanGraphQLDataFromRegistry = require('./graphql/getCodeSpanDataFromRegistry');
 const { registerCodeBlock, registerCodeSpan } = require('./registerCodeNode');
 const { createHash } = require('crypto');
 const { setChildNodes } = require('./cacheUtils');
@@ -63,25 +64,30 @@ function createPlugin() {
 
     /** @type {(MDASTNode<'code'> | MDASTNode<'inlineCode'>)[]} */
     const nodes = [];
-    visit(markdownAST, ({ type }) => type === 'code' || type === 'inlineCode', node => {
-      nodes.push(node);
-    });
+    visit(
+      markdownAST,
+      ({ type }) => type === 'code' || type === 'inlineCode',
+      node => {
+        nodes.push(node);
+      }
+    );
 
     // 2. For each code fence found, parse its header, determine what themes it will use,
     //    and register its contents with a central code block registry, performing tokenization
     //    along the way.
 
-    /** @type {grvsc.gql.GRVSCCodeBlock[]} */
+    /** @type {(grvsc.gql.GRVSCCodeBlock | grvsc.gql.GRVSCCodeSpan)[]} */
     const graphQLNodes = [];
-    /** @type {CodeNodeRegistry<MDASTNode>} */
+    /** @type {CodeNodeRegistry<MDASTNode<'code' | 'inlineCode'>>} */
     const codeNodeRegistry = createCodeNodeRegistry();
     for (const node of nodes) {
       /** @type {string} */
       const text = node.value || (node.children && node.children[0] && node.children[0].value);
       if (!text) continue;
-      const { languageName, meta, text: parsedText = text } = node.type === 'code'
-        ? parseCodeFenceInfo(node.lang ? node.lang.toLowerCase() : '', node.meta)
-        : parseCodeSpanInfo(text, inlineCode.marker);
+      const { languageName, meta, text: parsedText = text } =
+        node.type === 'code'
+          ? parseCodeFenceInfo(node.lang ? node.lang.toLowerCase() : '', node.meta)
+          : parseCodeSpanInfo(text, inlineCode.marker);
 
       if (node.type === 'inlineCode' && !languageName) {
         continue;
@@ -138,7 +144,7 @@ function createPlugin() {
       }
     }
 
-    // 3. For each code block registered, convert its tokenization and theme data
+    // 3. For each code block/span registered, convert its tokenization and theme data
     //    to a GraphQL-compatible representation, including HTML renderings. At the same
     //    time, change the original code fence Markdown node to an HTML node and set
     //    its value to the HTML rendering contained in the GraphQL node.
@@ -153,7 +159,8 @@ function createPlugin() {
       );
 
       // Update Markdown node
-      node.type = 'html';
+      /** @type {MDASTNode} */
+      (node).type = 'html';
       node.value = graphQLNode.html;
 
       // Push GraphQL node
@@ -182,6 +189,38 @@ function createPlugin() {
       }
     });
 
+    codeNodeRegistry.forEachCodeSpan((codeSpan, node) => {
+      const graphQLNode = getCodeSpanGraphQLDataFromRegistry(codeNodeRegistry, node, codeSpan, getClassName);
+
+      // Update Markdown node
+      /** @type {MDASTNode} */
+      (node).type = 'html';
+      node.value = graphQLNode.html;
+
+      // Push GraphQL node
+      graphQLNodes.push({
+        ...graphQLNode,
+        id: createNodeId(`GRVSCCodeSpan-${markdownNode.id}-${codeSpan.index}`),
+        parent: markdownNode.id,
+        internal: {
+          type: 'GRVSCCodeSpan',
+          contentDigest: createHash('md5')
+            .update(JSON.stringify(graphQLNode))
+            .digest('hex')
+        }
+      });
+
+      function getClassName() {
+        return typeof inlineCode.className === 'function'
+          ? inlineCode.className({
+              language: codeSpan.languageName,
+              markdownNode,
+              node
+            })
+          : inlineCode.className;
+      }
+    });
+
     // 4. Generate CSS rules for each theme used by one or more code blocks in the registry,
     //    then append that CSS to the Markdown AST in an HTML node.
 

src/parseCodeSpanInfo.js

@@ -6,7 +6,10 @@
 function parseCodeSpanInfo(text, delimiter) {
   const index = text.indexOf(delimiter);
   if (index <= 0) return { languageName: undefined, meta: undefined, text };
-  const languageName = text.slice(0, index).trim().toLowerCase();
+  const languageName = text
+    .slice(0, index)
+    .trim()
+    .toLowerCase();
   if (!languageName) return { languageName: undefined, meta: undefined, text };
   return { languageName, meta: undefined, text: text.slice(index + delimiter.length) };
 }