What's the default behavior for default & namespace imports/exports?

[hahnbeelee]

I am trying to recreate how imports/exports work utilizing next-mdx-remote (which conventionally doesn't support imports/exports) When you have a page with a default import or a namespace import, what is the expected behavior?

import * as NamespaceImport from './source.mdx';
import DefaultImport from './source.mdx';

When you do a default import does it only work when you have a default export in the source mdx file?
When you have a namespace import does it just import all the contents of the source mdx file?

[ChristianMurphy]

Hey @hahnbeelee! 👋

What's the default behavior for default & namespace imports/exports?

MDX exports translate into ESM exports, the behavior matches the standard https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

When you have a page with a default import or a namespace import, what is the expected behavior?

You can generate unlimited examples of the expected behavior with https://mdxjs.com/playground/

One that you may find particularly illustrative.

import { test } from 'node:test';

# page

export { test }

compiles to

import {jsx as _jsx} from "react/jsx-runtime";
import {test} from 'node:test';
export {test};
function _createMdxContent(props) {
  const _components = {
    h1: "h1",
    ...props.components
  };
  return _jsx(_components.h1, {
    children: "page"
  });
}
export default function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}

the default export is the page/component contents.
any explicit names exports within the document (like test) become named exports as well.

import Page from './example.mdx' // just the page
import Page, { test } from './example.mdx' // the page and the named export
import * as space from './example.mdx' // an object with `default` (the page) and `test` properties.

[hahnbeelee]

Hi @ChristianMurphy !
Wow thank you so much for the speedy and thorough response! And nice to meet you, I'm very used to getting a response from @wooorm haha nice to meet and interact with others working on mdx!~

Just tried out the MDX playground, but am looking more for a VSCode-esque playground where I can see how multiple mdx files can interact with each other.

this one makes complete sense:

import Page, { test } from './example.mdx' // the page and the named export

When you say "just the page" for a default import, do you mean something like the following will essentially be imported into the page that is importing it?

export const Page = "# page";

And for...

import * as space from './example.mdx' // an object with `default` (the page) and `test` properties.

it becomes

export const space = {
  default: "# page",
  test: <insert-test-value>
}

?

[ChristianMurphy]

VSCode-esque playground where I can see how multiple mdx files can interact with each other.

mdx itself doesn't do any interaction between files.
Each mdx file is compiled independently, and produces its own JavaScript file.
Any interaction between files is handled by either a JS runtime or a bundler.

When you say "just the page" for a default import, do you mean something like the following will essentially be imported into the page that is importing it?

I mean the default export will be a hyperscript/JSX/react function.
That when you run it as <Page> or jsx(Page) it will render as a component.

export const Page = "# page";

export const space = {
  default: "# page",
  test: <insert-test-value>
}

Conceptually yes and yes.
Though the component will have translated # into an <h1> by this point.

[hahnbeelee]

cool, tysm!

[ChristianMurphy]

Also on this particular comment

VSCode-esque playground

If you have not already, do checkout mdx analyzer
source and utilities: https://github.com/mdx-js/mdx-analyzer
VSCode extension: https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx