improve MDX Components

[onemen]

ExercisePartRoute component get bloated with all the MDX component that are defined inline.

what do you think about move

<Mdx
	code={data.exerciseStepApp?.instructionsCode}
	components={{
		CodeFile,
		CodeFileNotification,
		DiffLink,
		InlineFile,
		LinkToApp,
		pre: PreWithButtons,
	}}
/>

with all the components list to a new file or to utils/mdx.tsx, then you can import ExerciseMdx and wrap it with useMemo if needed.

another improvement is to add remark plugin to validate inputs to Mdx components to prevents

- to <InlineFile file="app/routes/users_+/$username.tsx" /> so we can handle
+ to <InlineFile file="app/routes/users+/$username.tsx" /> so we can handle

[kentcdodds]

I like both of these suggestions 👍

[onemen]

<InlineFile file="app/routes/users+/$username.tsx" />

Sometimes, InlineFile is used to create new files, so i can not check if app/routes/users+/$username.tsx exist, or event if the routes exist....

do you have any idea how to find if the there is an error in this case?
<InlineFile file="app/routes/users_+/$username.tsx" />

or another typo
<InlineFile file="app/routes/usrs+/$username.tsx" /> ?

[kentcdodds]

We could have a "createFile" prop. If that isn't supplied then we error.

[kentcdodds]

I've made a number of improvements since this was opened. I think we're good now.