Stabilize UserLayout

[ChristopherBiscardi]

Fixes #307

Pulls the layout for an MDX file into a reference that will be stable
across renders. Previously, a layout defined in MDX content as an
inline arrow function:

export default ({ children, ...props }) => <div {...props}>{children}</div>

would result in function defined inline in render, causing the
reference to be created each time resulting in a remounting.

This PR stablizes the reference by pulling the layout outside of
render, resulting in no remount.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[ChristopherBiscardi]

The additional declaration isn't making it through the compilation process. Since I tested this approach on already-compiled code it didn't have that issue when I tested originally.

I've also since discovered that a couple of things rely on the raw MDX output, like the runtime, so this would require a bit more change than anticipated.

[ChristopherBiscardi]

This approach passes the tests but still needs to be expanded so that the same thing happens in the runtime as well. buble handles classes, so this should be straightforward and I plan to do it for this PR.

[johno]

This is looking great, thanks!

We're definitely reaching a point where we might want to think about how to handle the MDX "templating" since it's starting to get pretty logic-filled. I wonder if we should just duplicate some of the output logic but have it handled differently based on whether skipExport is true or not?

[ChristopherBiscardi]

I definitely agree that this templating is getting a bit hard to work with. I messed up a quote, etc here or there a couple times. I'll finish up the full conversion and then see how it looks, then change it if it still needs changing

[silvenon]

Maybe an inline snapshot test would help, to verify that everything rendered correctly: .toMatchInlineSnapshot()

[ChristopherBiscardi]

@silvenon I added a snapshot test with the other tests in mdx/test/index.test.js. This seemed like the right place since both mdx and runtime packages have explicit tests against the JSX output. I don't know how to get rid of the wrapped quotes in the inline output though. Any ideas?

[silvenon]

I didn't realize there would be so much MDX content, it would be better if this was a regular snapshot, because it takes a lot of space.

What do you mean by wrapped quotes?

[ChristopherBiscardi]

it would be better if this was a regular snapshot, because it takes a lot of space.

Can also use a smaller content. I re-used a fixture that already existed.

What do you mean by wrapped quotes?

By wrapped quotes, I means this effect. Where there's a template string, then the string of code starts with double quotes leading to escaped doubled quotes all over the code.

.toMatchInlineSnapshot(`
"import { Baz } from \\"./Fixture\\";
import { Buz } from \\"./Fixture\\";
...

[silvenon]

Can also use a smaller content. I re-used a fixture that already existed.

Yeah, maybe it's better if you just use a single # Hello World. It should be enough to monitor this simple output.

By wrapped quotes, I means this effect. Where there's a template string, then the string of code starts with double quotes leading to escaped doubled quotes all over the code.

The string itself may not be pretty to look at, but try to mess up the output and see the diff when you run the test. If the diff is nice, that's all that matters. 😉

[silvenon]

Looks nice!

[ChristopherBiscardi]

rebased. Only significant change was the additional prettier dep causing a conflict in mdx/package.json. Will squash/merge after tests pass.