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.

[wooorm]

Closing as there is little traction on this.
The main problem I see is that we need to make exceptions for more and more words. And what about function MyComponent, for example?
There is a good alternative possible, as outlined above: ~~~js eval. That can be supported in a plugin. The pseudocode for that is in in this comment.