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.