Finish layout, add test, make it work with line highlighting

Author: andrewbranch

src/factory/html.js

@@ -41,11 +41,15 @@ function createLineElement(line, meta, index, language, getLineClassName, tokens
   );
 }
 
-/** @param {GutterCell} cell */
+/** @param {GutterCell | undefined} cell */
 function createGutterCellElement(cell) {
-  return span({ class: joinClassNames('grvsc-gutter', cell.className) }, [escapeHTML(cell.text || '')], {
-    whitespace: TriviaRenderFlags.NoWhitespace
-  });
+  return span(
+    { class: joinClassNames('grvsc-gutter', cell && cell.className) },
+    [escapeHTML((cell && cell.text) || '')],
+    {
+      whitespace: TriviaRenderFlags.NoWhitespace
+    }
+  );
 }
 
 /**

src/graphql/getCodeBlockDataFromRegistry.js

@@ -52,7 +52,12 @@ function getCodeBlockDataFromRegistry(registry, key, codeBlock, getWrapperClassN
 
   const wrapperClassNameValue = getWrapperClassName();
   const themeClassNames = flatMap(possibleThemes, getThemeClassNames);
-  const preClassName = joinClassNames('grvsc-container', wrapperClassNameValue, ...themeClassNames);
+  const preClassName = joinClassNames(
+    'grvsc-container',
+    wrapperClassNameValue,
+    codeBlock.className,
+    ...themeClassNames
+  );
   const codeClassName = 'grvsc-code';
   const [defaultTheme, additionalThemes] = partitionOne(possibleThemes, t =>
     t.conditions.some(c => c.condition === 'default')

src/registerCodeNode.js

@@ -1,6 +1,8 @@
 const tokenizeWithTheme = require('./tokenizeWithTheme');
 const { getTransformedLines } = require('./transformers');
 const { getGrammar } = require('./storeUtils');
+const { joinClassNames } = require('./renderers/css');
+const { uniq } = require('./utils');
 
 /**
  * @template {Keyable} TKey
@@ -42,6 +44,7 @@ async function registerCodeBlock(
       tokenTypes = grammarData.tokenTypes;
     }
 
+    const addedClassNames = joinClassNames(...uniq(lines.map(l => l.setContainerClassName)));
     const grammar = languageId && (await registry.loadGrammarWithConfiguration(scope, languageId, { tokenTypes }));
     codeBlockRegistry.register(registryKey, {
       lines,
@@ -50,7 +53,8 @@ async function registerCodeBlock(
       languageName,
       possibleThemes,
       isTokenized: !!grammar,
-      tokenizationResults: possibleThemes.map(theme => tokenizeWithTheme(lines, theme, grammar, registry))
+      tokenizationResults: possibleThemes.map(theme => tokenizeWithTheme(lines, theme, grammar, registry)),
+      className: addedClassNames || undefined
     });
   } finally {
     unlockRegistry();

src/transformers/getTransformedLines.js

@@ -1,5 +1,7 @@
 // @ts-check
 
+const { joinClassNames } = require('../renderers/css');
+
 /**
  *
  * @param {LineTransformer[]} transformers
@@ -23,6 +25,8 @@ async function getTransformedLines(transformers, text, languageName, meta) {
     const lineGutterCells = [];
     const attrs = {};
     const graphQLData = {};
+    /** @type {string[]} */
+    const addedContainerClassNames = [];
     for (let i = 0; i < transformers.length; i++) {
       const transformer = transformers[i];
       const state = prevTransformerStates[i];
@@ -35,19 +39,30 @@ async function getTransformedLines(transformers, text, languageName, meta) {
       });
 
       prevTransformerStates[i] = txResult.state;
+      if (txResult.setContainerClassName) {
+        addedContainerClassNames.push(txResult.setContainerClassName);
+      }
       if (!txResult.line) {
         continue linesLoop;
       }
       if (txResult.gutterCells) {
         gutterCellsPerTransformer[i] = Math.max(txResult.gutterCells.length, gutterCellsPerTransformer[i] || 0);
         lineGutterCells[i] = txResult.gutterCells;
+      } else {
+        gutterCellsPerTransformer[i] = Math.max(0, gutterCellsPerTransformer[i] || 0);
       }
+
       line = txResult.line.text;
       Object.assign(attrs, txResult.line.attrs);
       Object.assign(graphQLData, txResult.data);
     }
     gutterCells.push(lineGutterCells);
-    result.push({ text: line, attrs, data: graphQLData });
+    result.push({
+      text: line,
+      attrs,
+      data: graphQLData,
+      setContainerClassName: joinClassNames(...addedContainerClassNames) || undefined
+    });
   }
 
   const flattenedGutterCells = flattenGutterCells(gutterCells, gutterCellsPerTransformer);
@@ -94,17 +109,17 @@ async function getTransformedLines(transformers, text, languageName, meta) {
  * @returns {GutterCell[][]}
  */
 function flattenGutterCells(gutterCells, gutterCellsPerTransformer) {
+  const totalGutterCells = gutterCellsPerTransformer.reduce((a, b) => a + b, 0);
   return gutterCells.map(transformerResults => {
     /** @type {GutterCell[]} */
-    const result = [];
+    const result = Array(totalGutterCells).fill(undefined);
     for (let i = 0; i < transformerResults.length; i++) {
       const currentTransformerCells = transformerResults[i];
-      const length = currentTransformerCells ? currentTransformerCells.length : 0;
-      const padding = gutterCellsPerTransformer[i] - length;
       if (currentTransformerCells) {
-        result.push(...currentTransformerCells);
+        for (let j = 0; j < currentTransformerCells.length; j++) {
+          result[(gutterCellsPerTransformer[i - 1] || 0) + j] = currentTransformerCells[j];
+        }
       }
-      result.fill(undefined, result.length, result.length + padding);
     }
     return result;
   });

src/transformers/highlightDirectiveLineTransformer.js

@@ -1,62 +1,12 @@
 // @ts-check
-const { highlightLine } = require('./transformerUtils');
+const { highlightLine, getCommentContent, getCommentRegExp } = require('./transformerUtils');
 const { getScope } = require('../storeUtils');
 
 /**
- * @param {string} language
- * @param {string} scope
- * @param {Record<string, (message: string) => string>} languageCommentMap
- * @return {(commentMessage: string) => string} curried function taking a string argument and
- *   prefixing/wrapping that with a language's comment syntax
- */
-const getCommentForLanguage = (language, scope, languageCommentMap) => message => {
-  // example: languageCommentMap = {js: str => `// ${str}`}
-  if (languageCommentMap[language]) {
-    return languageCommentMap[language](message);
-  }
-
-  switch (scope) {
-    case 'source.python':
-    case 'source.ruby':
-    case 'source.shell':
-    case 'source.perl':
-    case 'source.coffee':
-    case 'source.yaml':
-      return `# ${message}`;
-    case 'source.css':
-    case 'source.c':
-    case 'source.cpp':
-    case 'source.objc':
-    case 'source.css.less':
-      return `/* ${message} */`;
-    case 'text.html.derivative':
-    case 'text.xml':
-    case 'text.html.markdown':
-      return `<!-- ${message} -->`;
-    case 'source.clojure':
-      return `; ${message}`;
-    case 'source.sql':
-      return `-- ${message}`;
-    default:
-      return `// ${message}`;
-  }
-};
-
-/**
- * @param {string} text
- * @param {(directive: string) => string} commentWrapper
- * @return {(directive: string) => boolean} curried function taking a directive string and checking
- *   whether it equals the line text
- */
-const textIsHighlightDirective = (text, commentWrapper) => directive =>
-  ['// ' + directive, commentWrapper(directive)].includes(text.trim());
-
-/**
- * @param {Record<string, (message: string) => string>} languageCommentMap user-defined object mapping language keys to commenting functions
  * @param {Record<string, string>} languageAliases
  * @param {GatsbyCache} cache
  */
-function createHighlightDirectiveLineTransformer(languageCommentMap, languageAliases, cache) {
+function createHighlightDirectiveLineTransformer(languageAliases, cache) {
   let grammarCache;
   /** @type {LineTransformer<HighlightCommentTransfomerState>} */
   const transformer = async ({ line, language, state }) => {
@@ -65,30 +15,24 @@ function createHighlightDirectiveLineTransformer(languageCommentMap, languageAli
     }
 
     const scope = getScope(language, grammarCache, languageAliases);
-    const commentWrapper = getCommentForLanguage(language, scope, languageCommentMap);
-    const isDirective = textIsHighlightDirective(line.text, commentWrapper);
-    if (isDirective('highlight-start')) {
+    const commentContent = getCommentContent(line.text, scope, /*trim*/ true);
+
+    if (commentContent === 'highlight-start') {
       return { state: { inHighlightRange: true } }; // no `line` - drop this line from output
     }
-    if (isDirective('highlight-end')) {
+    if (commentContent === 'highlight-end') {
       return { state: { inHighlightRange: false } }; // again no `line`
     }
-    if (isDirective('highlight-next-line')) {
+    if (commentContent === 'highlight-next-line') {
       return { state: { highlightNextLine: true } }; // again no `line`
     }
-    if (
-      line.text.endsWith(commentWrapper('highlight-line')) ||
-      line.text.endsWith('// highlight-line') ||
-      (state && state.inHighlightRange)
-    ) {
+    if (commentContent === 'highlight-line' || (state && state.inHighlightRange)) {
       // return attrs with added class name, text with comment removed, current state
       return {
-        line: highlightLine(
-          line,
-          line.text.replace(commentWrapper('highlight-line'), '').replace('// highlight-line', '')
-        ),
+        line: highlightLine(line, line.text.replace(getCommentRegExp(scope), '')),
         state,
-        data: { isHighlighted: true }
+        data: { isHighlighted: true },
+        setContainerClassName: 'grvsc-has-line-highlighting'
       };
     }
     if (state && state.highlightNextLine) {
@@ -98,7 +42,8 @@ function createHighlightDirectiveLineTransformer(languageCommentMap, languageAli
       return {
         line: highlightLine(line),
         state: { ...state, highlightNextLine: false },
-        data: { isHighlighted: true }
+        data: { isHighlighted: true },
+        setContainerClassName: 'grvsc-has-line-highlighting'
       };
     }
     return { line, state }; // default: don’t change anything, propagate state to next call

src/transformers/highlightMetaTransformer.js

@@ -46,7 +46,8 @@ const highlightMetaTransformer = ({ meta, line, state = getInitialState(meta) })
     state: {
       lineNumber: state.lineNumber + 1,
       highlightedLines: isHighlighted ? state.highlightedLines.slice(1) : state.highlightedLines
-    }
+    },
+    setContainerClassName: isHighlighted ? 'grvsc-has-line-highlighting' : undefined
   };
 };
 

src/transformers/index.js

@@ -1,6 +1,7 @@
 // @ts-check
 const { highlightMetaTransformer } = require('./highlightMetaTransformer');
 const { createHighlightDirectiveLineTransformer } = require('./highlightDirectiveLineTransformer');
+const { createLineNumberLineTransformer } = require('./lineNumberTransformer');
 const getTransformedLines = require('./getTransformedLines');
 
 /**
@@ -9,7 +10,11 @@ const getTransformedLines = require('./getTransformedLines');
  * @returns {LineTransformer[]}
  */
 function getDefaultLineTransformers(pluginOptions, cache) {
-  return [createHighlightDirectiveLineTransformer({}, pluginOptions.languageAliases, cache), highlightMetaTransformer];
+  return [
+    createHighlightDirectiveLineTransformer(pluginOptions.languageAliases, cache),
+    highlightMetaTransformer,
+    createLineNumberLineTransformer(pluginOptions.languageAliases, cache)
+  ];
 }
 
 /**

src/transformers/lineNumberTransformer.js

@@ -0,0 +1,91 @@
+const { getCommentContent, getCommentRegExp } = require('./transformerUtils');
+const { getScope } = require('../storeUtils');
+const lineNumberRegExp = /L(\d+)$/;
+
+/**
+ * @param {Record<string, string>} languageAliases
+ * @param {GatsbyCache} cache
+ */
+function createLineNumberLineTransformer(languageAliases, cache) {
+  let grammarCache;
+
+  /** @type {LineTransformer<number>} */
+  const lineNumberTransformer = async ({ meta, state, line, language }) => {
+    if (!grammarCache) {
+      grammarCache = await cache.get('grammars');
+    }
+
+    const scope = getScope(language, grammarCache, languageAliases);
+    const commentContent = getCommentContent(line.text, scope, /*trim*/ true);
+    if (commentContent) {
+      const match = lineNumberRegExp.exec(commentContent);
+      if (match && match[1]) {
+        const lineNumber = parseInt(match[1], 10);
+        if (!isNaN(lineNumber)) {
+          return {
+            state: lineNumber,
+            line: {
+              ...line,
+              text: line.text.replace(getCommentRegExp(scope), '')
+            },
+            gutterCells: [
+              {
+                className: 'grvsc-line-number',
+                text: String(lineNumber)
+              }
+            ],
+            data: {
+              lineNumber
+            }
+          };
+        }
+      }
+    }
+
+    if (state !== undefined) {
+      return {
+        state: state + 1,
+        line,
+        gutterCells: [
+          {
+            className: 'grvsc-line-number',
+            text: String(state + 1)
+          }
+        ],
+        data: {
+          lineNumber: state + 1
+        }
+      };
+    }
+
+    if (meta.numberLines !== undefined) {
+      const lineNumber = typeof meta.numberLines === 'number' ? meta.numberLines : 1;
+      return {
+        state: lineNumber,
+        line,
+        gutterCells: [
+          {
+            className: 'grvsc-line-number',
+            text: String(lineNumber)
+          }
+        ],
+        data: {
+          lineNumber
+        }
+      };
+    }
+
+    return { state, line };
+  };
+
+  lineNumberTransformer.displayName = 'lineNumber';
+  lineNumberTransformer.schemaExtension = `
+    type GRVSCTokenizedLine {
+      lineNumber: Int
+    }
+  `;
+
+  return lineNumberTransformer;
+}
+
+module.exports = { createLineNumberLineTransformer };