feat: global vars

__tests__/variables/index.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { execute } from '../helpers';
+
+describe('variables', () => {
+  it('renders a variable', async () => {
+    const md = `{user.name}`;
+    const Content = await execute(md, {}, { variables: { user: { name: 'Testing' } } });
+
+    render(<Content />);
+
+    expect(screen.getByText('Testing')).toBeVisible();
+  });
+
+  it('renders a default value', async () => {
+    const md = `{user.name}`;
+    const Content = await execute(md);
+
+    render(<Content />);
+
+    expect(screen.getByText('NAME')).toBeVisible();
+  });
+
+  it('supports user variables in ESM', async () => {
+    const md = `
+export const Hello = () => <p>{user.name}</p>;
+
+<Hello />
+`;
+    const Content = await execute(md, {}, { variables: { user: { name: 'Owlbert' } } });
+
+    render(<Content />);
+
+    expect(screen.getByText('Owlbert')).toBeVisible();
+  });
+});

lib/compile.ts

@@ -26,16 +26,14 @@ const compile = (text: string, { components, copyButtons, ...opts }: CompileOpts
         remarkGfm,
         ...Object.values(transforms),
         [codeTabsTransformer, { copyButtons }],
-        variablesTransformer,
       ],
       rehypePlugins: [...rehypePlugins, [rehypeToc, { components }]],
       ...opts,
     });
 
-    return String(vfile).replace(
-      /await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/,
-      'arguments[0].imports.React',
-    );
+    return String(vfile)
+      .replace(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/, 'arguments[0].imports.React')
+      .replace('"use strict";', '"use strict";\nconst { user } = arguments[0].imports;');
   } catch (error) {
     throw error.line ? new MdxSyntaxError(error, text) : error;
   }

lib/run.tsx

@@ -11,11 +11,7 @@ import { Depth } from '../components/Heading';
 import { tocToMdx } from '../processor/plugin/toc';
 import compile from './compile';
 import { CustomComponents, RMDXModule } from '../types';
-
-interface Variables {
-  user: Record<string, string>;
-  defaults: { name: string; default: string }[];
-}
+import User, { Variables } from '../utils/user';
 
 export type RunOpts = Omit<RunOptions, 'Fragment'> & {
   components?: CustomComponents;
@@ -63,7 +59,7 @@ const run = async (string: string, _opts: RunOpts = {}) => {
       ...runtime,
       Fragment,
       baseUrl: import.meta.url,
-      imports: { React },
+      imports: { React, user: User(variables) },
       useMDXComponents,
       ...opts,
     }) as Promise<RMDXModule>;
@@ -76,7 +72,7 @@ const run = async (string: string, _opts: RunOpts = {}) => {
 
   return {
     default: () => (
-      <Contexts terms={terms} variables={variables} baseUrl={baseUrl}>
+      <Contexts terms={terms} baseUrl={baseUrl} variables={variables}>
         <Content />
       </Contexts>
     ),

utils/user.ts

@@ -0,0 +1,31 @@
+interface Default {
+  name: string;
+  default: string;
+}
+
+export interface Variables {
+  user: Record<string, string>;
+  defaults: Default[];
+}
+
+const User = (variables?: Variables) => {
+  const { user = {}, defaults = [] } = variables || {};
+
+  return new Proxy(user, {
+    get(target, attribute) {
+      if (typeof attribute === 'symbol') {
+        return '';
+      }
+
+      if (attribute in target) {
+        return target[attribute];
+      }
+
+      const def = defaults.find((d: Default) => d.name === attribute);
+
+      return def ? def.default : attribute.toUpperCase();
+    },
+  });
+};
+
+export default User;