export evaluate function for remote content (#2725)

* export `evaluate` function for remote content

* fix rust icon on dark mode

* prettier

* add changelog

* update snapshots

* update snapshots

Author: Dimitri POSTOLOV

Diff for: .changeset/four-beds-smash.md

@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+export `evaluate` function for remote content

Diff for: .changeset/tough-years-sell.md

@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+add rust icon

Diff for: packages/nextra/src/client/components/index.ts

@@ -5,7 +5,7 @@ export { Code } from './code.js'
 export { CopyToClipboard } from './copy-to-clipboard.js'
 export { FileTree } from './file-tree.js'
 export { Pre } from './pre.js'
-export { RemoteContent } from './remote-content.js'
+export { RemoteContent, evaluate } from './remote-content.js'
 export { Steps } from './steps.js'
 export { Table } from './table.js'
 export { Tabs } from './tabs.js'

Diff for: packages/nextra/src/client/components/pre.tsx

@@ -52,7 +52,7 @@ export function Pre({
             '_border-b-0'
           )}
         >
-          {Icon && <Icon className="_h-3.5 _w-auto _shrink-0" />}
+          {Icon && <Icon className="_h-4 _w-auto _shrink-0" />}
           <span className="_truncate">{filename}</span>
           {copyButton}
         </div>

Diff for: packages/nextra/src/client/components/remote-content.tsx

@@ -3,7 +3,10 @@ import { jsxRuntime } from '../jsx-runtime.cjs'
 import type { MDXComponents } from '../mdx.js'
 import { useMDXComponents } from '../mdx.js'
 
-function evaluate(compiledSource: string, scope: Record<string, unknown> = {}) {
+export function evaluate(
+  compiledSource: string,
+  scope: Record<string, unknown> = {}
+) {
   // if we're ready to render, we can assemble the component tree and let React do its thing
   // first we set up the scope which has to include the mdx custom
   // create element function as well as any components we're using

Diff for: packages/nextra/src/client/icons/index.ts

@@ -22,4 +22,4 @@ export { ReactComponent as CPPIcon } from './c++.svg'
 export { ReactComponent as CsharpIcon } from './csharp.svg'
 export { ReactComponent as GraphQLIcon } from './graphql.svg'
 export { ReactComponent as PythonIcon } from './python.svg'
-export { ReactComponent as RustIcon } from './rust.svg';
+export { ReactComponent as RustIcon } from './rust.svg'

Diff for: packages/nextra/src/client/icons/rust.svg

@@ -205,6 +205,12 @@ describe('rehypeIcon', () => {
                 <_components.span> </_components.span>
               </_components.code>
             </_components.pre>
+            {'\\n'}
+            <_components.pre icon={RustIcon} tabIndex="0" data-language="rs" data-word-wrap="" data-copy="">
+              <_components.code>
+                <_components.span> </_components.span>
+              </_components.code>
+            </_components.pre>
           </>
         )
       }

Diff for: packages/nextra/src/server/rehype-plugins/__tests__/rehype-icon.test.ts

@@ -22,7 +22,7 @@ export const REHYPE_ICON_DEFAULT_REPLACES: Record<string, string> = {
   python: 'PythonIcon',
   py: 'PythonIcon',
   rust: 'RustIcon',
-  rs: 'RustIcon',
+  rs: 'RustIcon'
 }
 
 function createImport(iconName: string) {