use a better regex to support code snippets

Author: SunburtReynolds

mdx-slide-loader.js

@@ -4,83 +4,53 @@ const matter = require('gray-matter');
 const normalizeNewline = require('normalize-newline');
 
 const EXREG = /export\sdefault\s/g;
-const MODREG = /^(import|export)\s/g;
+/*
+ * See this link for an explanation of the regex solution:
+ * https://stackoverflow.com/questions/6462578/regex-to-match-all-instances-not-inside-quotes/23667311#23667311
+ * Note that the regex isn't concerned about code blocks (```).
+ * Tracking pairs of ` should be sufficient to caputre code blocks, too.
+ */
+const MODREG = /\\`|`(?:\\`|[^`])*`|(^(?:import|export).*$)/gm;
 const SLIDEREG = /\n---\n/;
-const CODEBLOCKREG = /(`{3})(?:(?=(\\?))\2[\s\S])*?\1/g;
-const INLINECODEREG = /(`{1})(?:(?=(\\?))\2.)*?\1/g;
-const SNIPPETREG = /SPECTACLE-CODE-SNIPPET-\d/g;
 
 const nameForSlide = index => `MDXContentWrapper${index}`;
-const codeSnippetPlaceholder = index => `SPECTACLE-CODE-SNIPPET-${index}`;
 
 module.exports = async function(src) {
   const { data, content } = matter(src);
 
   const inlineModules = [];
-  const codeSnippets = {};
-  let codeSnippetCounter = 0;
 
   const callback = this.async();
   const options = Object.assign({}, getOptions(this), {
     filepath: this.resourcePath
   });
 
   /*
-   Step 1:
-   * Replace all code blocks and inline code with a temporary string.
-   * This prevents the next step from accidentally pulling `import` or `export`
-   * statements out of the code snippets (which would later break the JSX with
-   * duplicate import statements). We look for pairs of (```) before pairs of
-   * (`) so that we don't mismatch code block back ticks.
+   Step 1: 
+   * Set aside all inline JSX import and export statements from the MDX file.
+   * When mdx.sync() compiles MDX into JSX, it will stub any component that doesn't
+   * have a corresponding import. Therefore, we will re-add all of the imports/exports
+   * to each slide before compiling the MDX via mdx.sync().
    */
-  const contentWithoutCodeSnippets = normalizeNewline(content)
-    .replace(CODEBLOCKREG, codeBlock => {
-      const placeholderString = codeSnippetPlaceholder(codeSnippetCounter);
-      codeSnippets[placeholderString] = codeBlock;
-      codeSnippetCounter++;
-      return placeholderString;
-    })
-    .replace(INLINECODEREG, inlineCode => {
-      const placeholderString = codeSnippetPlaceholder(codeSnippetCounter);
-      codeSnippets[placeholderString] = inlineCode;
-      codeSnippetCounter++;
-      return placeholderString;
-    });
-
-  const slides = contentWithoutCodeSnippets
-    .split('\n')
-    /*
-     Step 2: 
-     * Set aside all inline JSX import and export statements from the MDX file.
-     * When mdx.sync() compiles MDX into JSX, it will stub any component that doesn't
-     * have a corresponding import. Therefore, we will re-add all of the imports/exports
-     * to each slide before compiling the MDX via mdx.sync().
-     */
-    .map(line => {
-      if (MODREG.test(line)) {
-        inlineModules.push(line);
+  const slides = normalizeNewline(content)
+    .replace(MODREG, (value, group1) => {
+      if (!group1) {
+        // group1 is empty, so this is not the import/export case we're looking for
+        return value;
+      } else {
+        // found an inline export or import statement
+        inlineModules.push(value);
+        return '';
       }
-      return line;
-    })
-    .filter(line => !MODREG.test(line))
-    .join('\n')
-    /*
-     Step 3:
-     * We can now safely put back the code snippets. This is important to do
-     * before compiling the MDX.
-     */
-    .replace(SNIPPETREG, placeholderString => {
-      const codeSnippet = codeSnippets[placeholderString];
-      return codeSnippet;
     })
     /* 
-     Step 4:
+     Step 2:
      * Split the MDX file by occurences of `---`. This is a reserved symbol
      * to denote slide boundaries.
      */
     .split(SLIDEREG)
     /*
-     Step 5:
+     Step 3:
      * As referenced before, we need to add the imports and exports to
      * every slide again. That way mdx.sync can find the component definitions
      * for any custom components used in the MDX file.
@@ -91,34 +61,39 @@ ${inlineModules.join('\n')}\n
 ${slide}`
     )
     /*
-     Step 6:
+     Step 4:
      * Use mdx.sync to compile a separate JSX component for each slide
      * written in MDX.
      */
     .map(slide => mdx.sync(slide, options))
     /*
-     Step 7:
+     Step 5:
      * mdx.sync will attempt to default export the component generated for each
      * slide. However, we have multiple slides and thus multiple generated components.
      * We can't export multiple defaults, so we must remove all existing occurences of
      * `export default`.
      */
     .map(slide => slide.replace(EXREG, ''))
     /*
-     Step 8:
-     * Remove the inline exports/imports again. We don't want to duplicate import/export
+     Step 6:
+     * Remove the inline exports/imports again. We don't want to duplicate inline import/export
      * statements littered throughout the file output.
      */
     .map(slide =>
-      slide
-        .split('\n')
-        .filter(line => !MODREG.test(line))
-        .filter(Boolean)
-        .join('\n')
+      slide.replace(MODREG, (value, group1) => {
+        if (!group1) {
+          // group1 is empty, so this is not the import/export case we're looking for
+          return value;
+        } else {
+          // found an inline export or import statement
+          inlineModules.push(value);
+          return '';
+        }
+      })
     )
     .map(slide => slide.trim())
     /*
-     Step 9:
+     Step 7:
      * The generated component from mdx.sync assumes it's the only component that
      * will inhabit a file. It has const definitions outside of the auto-named MDXContent
      * component. This would be fine if we weren't generating a component for each
@@ -138,9 +113,9 @@ ${wrapperName}.isMDXComponent = true;`;
   const { modules = [] } = data;
   let wrapperNames = [];
   /*
-   Step 10:
+   Step 8:
    * Begin composing the final output. Include React, mdx, modules, and the inline
-   * export/import statements that we removed in Step 8.
+   * export/import statements that we removed in Step 6.
    */
   let allCode = `/* @jsx mdx */
 import React from 'react'
@@ -152,15 +127,15 @@ ${inlineModules
   })
   .join('\n')}\n\n`;
   /*
-   Step 11:
+   Step 9:
    * Add in the slide component definitions. Keep track of the component names.
    */
   slides.forEach((s, i) => {
     allCode += s + '\n\n';
     wrapperNames.push(nameForSlide(i));
   });
   /*
-   Step 12:
+   Step 10:
    * Finally, declare the default export as an array of the slide components.
    * See /examples/mdx/test-mdx.js for how to import and use the generated slide
    * components.