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',
+    });
+  });
+});

docs/variable-tests.md

@@ -4,16 +4,14 @@ category: 5fdf9fc9c2a7ef443e937315
 hidden: true
 ---
 
-<Variable variable="defvar" /> and `<Variable variable="defvar" />` and:
+This is the variable `defvar`: {user.defvar}
 
-```
-<Variable variable="defvar" />
-```
+Ok, but this one is defined: {user.email}
 
-and
+It does not render in code blocks:
 
-```js
-const xyz = "<Variable variable="defvar" />";
+```
+{user.defvar}
 ```
 
 ## Glossary Items

example/Doc.tsx

@@ -18,13 +18,6 @@ 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 +33,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();

processor/compile/compatibility.ts

@@ -5,7 +5,6 @@ import { toXml } from 'xast-util-to-xml';
 import { NodeTypes } from '../../enums';
 
 type CompatNodes =
-  | { type: NodeTypes.variable; text: string }
   | { type: NodeTypes.glossary; data: { hProperties: { term: string } } }
   | { type: NodeTypes.glossary; data: { hName: 'Glossary' }; children: [{ type: 'text'; value: string }] }
   | { type: NodeTypes.reusableContent; tag: string }
@@ -29,8 +28,6 @@ const html = (node: Html) => {
 
 const compatibility = (node: CompatNodes) => {
   switch (node.type) {
-    case NodeTypes.variable:
-      return `<Variable name="${node.text}" />`;
     case NodeTypes.glossary:
       // @ts-expect-error
       const term = node.data?.hProperties?.term || node.children[0].value;

processor/compile/index.ts

@@ -5,6 +5,7 @@ import gemoji from './gemoji';
 import htmlBlock from './html-block';
 import image from './image';
 import compatibility from './compatibility';
+import variable from './variable';
 import { NodeTypes } from '../../enums';
 
 function compilers() {
@@ -19,7 +20,7 @@ function compilers() {
     [NodeTypes.embed]: embed,
     [NodeTypes.htmlBlock]: htmlBlock,
     [NodeTypes.image]: image,
-    [NodeTypes.variable]: compatibility,
+    [NodeTypes.variable]: variable,
     [NodeTypes.glossary]: compatibility,
     [NodeTypes.reusableContent]: compatibility,
     html: compatibility,