variables?

__tests__/variables.test.ts

@@ -0,0 +1,3 @@
+describe('user variables', () => {
+  it('should replace the values', () => {});
+});

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`: {variables.defvar}
 
-```
-<Variable variable="defvar" />
-```
+Ok, but this one is defined: {variables.email}
 
-and
+It does not render in code blocks:
 
-```js
-const xyz = "<Variable variable="defvar" />";
+```
+{variables.defvar}
 ```
 
 ## Glossary Items

example/Doc.tsx

@@ -35,6 +35,19 @@ const terms = [
   },
 ];
 
+const variables = {
+  user: {
+    email: '[email protected]',
+    name: 'Non Ofyore Beesnis',
+  },
+  defaults: [
+    {
+      name: 'defvar',
+      default: '(default value for defvar)',
+    },
+  ],
+};
+
 const Doc = () => {
   const { fixture } = useParams();
   const [searchParams] = useSearchParams();
@@ -60,7 +73,7 @@ const Doc = () => {
 
       try {
         const code = mdx.compile(doc, opts);
-        const content = await mdx.run(code, { components, terms });
+        const content = await mdx.run(code, { components, terms, variables });
 
         setError(() => null);
         setContent(() => content);

lib/compile.ts

@@ -44,10 +44,11 @@ const compile = (text: string, opts: CompileOpts = {}) => {
     delete vfile.data.toc;
   }
 
-  vfile.value = String(vfile).replace(
-    /await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/,
-    'arguments[0].imports.React',
-  );
+  vfile.value = String(vfile)
+    .replace(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/, 'arguments[0].imports.React')
+    .replace(/"use strict";/, `"use strict";\nconst { variables } = arguments[0]`);
+
+  console.log(vfile.value);
 
   return vfile;
 };

lib/run.tsx

@@ -7,14 +7,10 @@ import Variable from '@readme/variable';
 
 import * as Components from '../components';
 import Contexts from '../contexts';
-import { VFileWithToc } from '../types';
+import { VFileWithToc, Variables } from '../types';
 import { GlossaryTerm } from '../contexts/GlossaryTerms';
 import { Depth } from '../components/Heading';
-
-interface Variables {
-  user: Record<string, string>;
-  defaults: { name: string; default: string }[];
-}
+import VariableProxy from './variable-proxy';
 
 export type RunOpts = Omit<RunOptions, 'Fragment'> & {
   components?: ComponentOpts;
@@ -62,6 +58,8 @@ const run = async (stringOrFile: string | VFileWithToc, _opts: RunOpts = {}) =>
       baseUrl: import.meta.url,
       imports: { React },
       useMDXComponents: makeUseMDXComponents({ ...components, ...(toc && { p: Fragment }) }),
+      // @ts-expect-error
+      variables: VariableProxy(variables),
       ...opts,
     });
 

lib/variable-proxy.ts

@@ -0,0 +1,19 @@
+import { Variables } from '../types';
+
+const VariableProxy = (variables: Variables) => {
+  const user = variables?.user || {};
+  const defaults = variables?.defaults || [];
+
+  return new Proxy(user, {
+    get(target, prop) {
+      if (prop in target) return target[prop as string];
+
+      const found = defaults.find(d => d.name === prop);
+      if (found) return found.default;
+
+      return prop;
+    },
+  });
+};
+
+export default VariableProxy;

types.d.ts

@@ -104,4 +104,9 @@ type VFileWithToc = VFile & {
   };
 };
 
+interface Variables {
+  user: Record<string, string>;
+  defaults: { name: string; default: string }[];
+}
+
 interface CompiledComponents extends Record<string, VFileWithToc> {}