feat: jsx variables

README.md

@@ -91,7 +91,7 @@ Extends [`RunOptions`](https://mdxjs.com/packages/mdx/#runoptions)
 - `components` (`Record<string, MDXModule>`, optional) -- An object of tag names to executed components.
 - `imports` (`Record<string, unknown>`, optional) -- An object of modules to import.
 - `terms` (`GlossaryTerm[]`, optional)
-- `variables` (`Variables`, optional)
+- `variables` (`Variables`, optional) -- An object containing [user variables}(https://github.com/readmeio/variable).
 
 ### `RMDXModule`
 

__tests__/compilers/compatability.test.ts

@@ -2,21 +2,6 @@ import { mdx } from '../../index';
 import * as rdmd from '@readme/markdown-legacy';
 
 describe('compatability with RDMD', () => {
-  it('compiles variable nodes', () => {
-    const ast = {
-      type: 'readme-variable',
-      text: 'parliament',
-      data: {
-        hName: 'readme-variable',
-        hProperties: {
-          variable: 'parliament',
-        },
-      },
-    };
-
-    expect(mdx(ast).trim()).toBe('<Variable name="parliament" />');
-  });
-
   it('compiles glossary nodes', () => {
     const ast = {
       type: 'readme-glossary-item',

__tests__/compilers/variable.test.ts

@@ -0,0 +1,16 @@
+import * as rmdx from '../../index';
+
+describe('variable compiler', () => {
+  it('compiles back to the ', () => {
+    const mdx = `
+## Hello!
+
+{user.name}
+
+### Bye bye!
+    `;
+    const tree = rmdx.mdast(mdx);
+
+    expect(rmdx.mdx(tree).trim()).toStrictEqual(mdx.trim());
+  });
+});

__tests__/transformers/variables.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import * as rmdx from '../../index';
+import { execute } from '../helpers';
+import { render, screen } from '@testing-library/react';
+
+describe('variables transformer', () => {
+  it('renders user variables', async () => {
+    const mdx = '{user.name}';
+    const variables = {
+      user: {
+        name: 'Test User',
+      },
+    };
+    const Content = await execute(mdx, { variables });
+
+    render(<Content />);
+
+    expect(screen.findByText('Test User')).toBeDefined();
+  });
+
+  it('renders user variables in a phrasing context', async () => {
+    const mdx = 'Hello, {user.name}!';
+    const variables = {
+      user: {
+        name: 'Test User',
+      },
+    };
+    const Content = await execute(mdx, { variables });
+
+    render(<Content />);
+
+    expect(screen.findByText('Test User')).toBeDefined();
+  });
+
+  it('parses variables into the mdast', () => {
+    const mdx = `{user.name}`;
+
+    // @ts-ignore
+    expect(rmdx.mdast(mdx)).toStrictEqualExceptPosition({
+      children: [
+        {
+          children: [],
+          data: {
+            hName: 'Variable',
+            hProperties: {
+              name: 'name',
+            },
+          },
+          type: 'readme-variable',
+        },
+      ],
+      type: 'root',
+    });
+  });
+});

components/Code/index.tsx

@@ -55,7 +55,7 @@ const Code = (props: CodeProps) => {
   };
 
   const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
-  const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts) : code;
+  const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts, { mdx: true }) : code;
 
   return (
     <>

docs/variable-tests.md

@@ -4,16 +4,20 @@ category: 5fdf9fc9c2a7ef443e937315
 hidden: true
 ---
 
-<Variable variable="defvar" /> and `<Variable variable="defvar" />` and:
+This is the variable `defvar`: {user.defvar}
+
+Ok, but this one is defined: {user.email}
+
+It **does** render in code blocks:
 
 ```
-<Variable variable="defvar" />
+{user.defvar}
 ```
 
-and
+And if you don't want that, you can escape it:
 
-```js
-const xyz = "<Variable variable="defvar" />";
+```
+\{user.defvar}
 ```
 
 ## Glossary Items

example/Doc.tsx

@@ -11,20 +11,22 @@ const components = {
 
 > 📘 It can render JSX components!
 `,
+  Test: `
+export const Test = ({ color = 'thistle' } = {}) => {
+  return <div style={{ backgroundColor: color }}>
+    Hello, World!
+  </div>;
+};
+
+export default Test;
+  `,
 };
 
 const executedComponents = {};
 Object.entries(components).forEach(async ([tag, body]) => {
   executedComponents[tag] = await mdx.run(mdx.compile(body));
 });
 
-const variables = {
-  user: {
-    email: '[email protected]',
-  },
-  defaults: [],
-};
-
 const terms = [
   {
     term: 'demo',
@@ -40,6 +42,19 @@ const terms = [
   },
 ];
 
+const variables = {
+  user: {
+    email: '[email protected]',
+    name: 'kelly joseph price',
+  },
+  defaults: [
+    {
+      name: 'defvar',
+      default: '(default value for defvar)',
+    },
+  ],
+};
+
 const Doc = () => {
   const { fixture } = useParams();
   const [searchParams] = useSearchParams();