feat: mdx vars (#531)

* feat: mdx variables

* cleanup

* chore: silly eslint

* chore(deps): update variable

* replace comments

Author: kellyjosephprice

__tests__/codeMirror.test.js

@@ -107,6 +107,62 @@ describe('variable substitution', () => {
   });
 });
 
+describe('variable substitution { mdx: true }', () => {
+  it('should tokenize variables (double quotes)', () => {
+    render(syntaxHighlighter('"{user.apiKey}"', 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByText('APIKEY')).toBeVisible();
+  });
+
+  it('should tokenize variables (single quotes)', () => {
+    render(syntaxHighlighter("'{user.apiKey}'", 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByText('APIKEY')).toBeVisible();
+  });
+
+  it('should keep enclosing characters around the variable', () => {
+    render(syntaxHighlighter("'{user.apiKey}'", 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent("'APIKEY'");
+  });
+
+  it('should tokenize variables outside of quotes', () => {
+    render(syntaxHighlighter('{user.apiKey}', 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByText('APIKEY')).toBeVisible();
+  });
+
+  it('should tokenize variables outside of quotes over multiple lines', () => {
+    const codeBlock = `
+    const foo = {user.apiKey};
+    const bar = {user.name};
+
+    fetch({ foo, bar, baz: {user.token} });
+  `;
+
+    render(syntaxHighlighter(codeBlock, 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByTestId('SyntaxHighlighter').textContent).toMatchInlineSnapshot(`
+      "
+          const foo = APIKEY;
+          const bar = NAME;
+
+          fetch({ foo, bar, baz: TOKEN });
+        "
+    `);
+  });
+
+  it('should tokenize multiple variables per line', () => {
+    render(syntaxHighlighter('{user.apiKey} {user.name}', 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('APIKEY NAME');
+  });
+
+  it('should not tokenize bracket style', () => {
+    render(syntaxHighlighter('<<wat>>', 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('<<wat>>');
+  });
+
+  it.each(['\\{user.wat}', '{user.wat\\}', '\\{user.wat\\}'])('should NOT tokenize escaped variables %s', code => {
+    render(syntaxHighlighter(code, 'json', { tokenizeVariables: true }, { mdx: true }));
+    expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('{user.wat}');
+  });
+});
+
 describe('Supported languages', () => {
   const languages = fixtures.map(fixture => {
     return [uppercase(path.basename(fixture)), fixture];

jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
   moduleNameMapper: {
     '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
   },
+  prettierPath: require.resolve('prettier-2'),
   setupFilesAfterEnv: [path.join(__dirname, '__tests__/jest.setup.js')],
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['<rootDir>/__tests__/__fixtures__/', '<rootDir>/__tests__/jest.setup.js'],