RFC: Support variable declaration (const/let/var)

[johno]

Currently, users leverage export syntax in order to instantiate local variables for usage in an MDX file. We could introduce const/let/var to better define an MDX document's API by allowing users to not need to overload exports for local variables.

Nothing else would really differ from the export syntax except that we'd read const/let/var directly.

const

const MyComponent = () => <div style={{ padding: 20, backgroundColor: 'tomato' }} />

let

let MyComponent = () => <div style={{ padding: 20, backgroundColor: 'tomato' }} />

var

var MyComponent = () => <div style={{ padding: 20, backgroundColor: 'tomato' }} />

[wooorm]

I think there are two alternatives (using a different style to show that they’d allow more too):

• b) executable code

  # heading
  
  ```js run
  function MyComponent() {
    return <div style={{ padding: 20, backgroundColor: 'tomato' }} />
  }
  ```
  
  paragraph
  

• c) expressions

  # heading
  
  {
    function MyComponent() {
      return <div style={{ padding: 20, backgroundColor: 'tomato' }} />
    }
  }
  
  paragraph
  

(note: we could also allow imports/exports in those. And even allow both syntax B && C, where syntax C would be a shortcut for B?)

[aleclarson]

This feature would be much appreciated, as export const breaks Fast Refresh when its value is not a component.

[ng-hai]

I'm not sure my issue related to this. I'm using MDX/React with Parcel bundler, somehow it does not interpolate React expression

export const name = "world";

# Hello {name.toUpperCase()}

{1+1}

<p>{1 + 1}</p>

And how it renders

Hello {name.toUpperCase()}
{1+1}
2

[wooorm]

@ng-hai that is unrelated to this proposal. You show MDX 2 features and Parcel does not support MDX 2 apparently.