React Native/Primitives support (makeShortcode override and docs)

Template middleware for React Native/primitives support

please see https://github.com/mdx-js/mdx/issues/972#issuecomment-613661375 for a clearer explanation

---

Middleware (say in the options) that allows for adding imports and a custom component for the <div> component. Or could be a config override.

Problem

<div {...props}/> in the React template breaks React primitives support (React Native, react-sketchapp, etc).

Updated

Am referring to the makeShortcode function in https://github.com/mdx-js/mdx/blob/5ce610db134f5a97f11e63910cad6034fba2d2d1/packages/mdx/mdx-hast-to-jsx.js#L146-L150 , which is a fallback for shortcodes that are not defined in the <MDXProvider>

Expected behavior

There should either be a way to use middleware to inject imports and a custom component (to replace the <div {...props/>, or a import resolver component to use, which resolves to <div> on React web, or <View> on native platforms, but this will need a resolver for each platform (pdf, react-native, react-windows, etc).

This could be in the form of an options config such as:

const options = {
  shortcodeOverride: {
    import: 'import { View } from 'react-primitives',
    component: 'View',
  }
};

Alternatives

I’m currently using a custom Webpack loader to use the library with react-sketchapp:

// ...
  const code = `/* @jsx mdx */
  import React from 'react'
  import { mdx } from '@mdx-js/react'
  import { View } from 'react-primitives'
  ${result
    .replace('return <div {...props}/>', 'return <View {...props}/>')
  `;
// ...

[macintoshhelper]

Hi! Sorry for the confusion, I worded the issue badly 😕. By the div in the “React template”, I meant the packages/mdx/mdx-hast-to-jsx.js file. The problem with native platforms is the makeShortcode function: https://github.com/mdx-js/mdx/blob/5ce610db134f5a97f11e63910cad6034fba2d2d1/packages/mdx/mdx-hast-to-jsx.js#L146-L150

What I’m doing for now, is using a custom Webpack loader that does a string replace of the <div {...props} to <View {...props}, but this feels a bit hacky, incase the mdx-hast-to-jsx.js code changes. Example code: https://github.com/elemental-design/style-guide/blob/5ea0046c896450d55fc0517fba88d316c2653014/examples/sketch/webpack-loaders/mdx.js#L31-L38

As I understand, someone can currently just use MDX with React Native/Ink/React Sketch.app with @mdx-js/runtime, but if they want to use @mdx-js/mdx with a Webpack/Rollup loader to build the mdx to jsx, they need to replace the <div with a <View (and the corresponding import) in the loader.

What I mean by middleware, would be a preprocess/postprocess callback option optionally passed into mdx-hast-to-jsx.js, or an additional imports option, and shortcode function override, and this could be passed through Webpack loader options from the webpack.config.js. Also, adding features like gray-matter requires a custom Webpack loader currently, but maybe this could be done with a callback passed to the MDX Webpack loader options? Hope this makes sense. Maybe the best solution would be to just have an ecosystem of custom Webpack loaders on npm, that could be added to the docs? webpack.config.js overrides might be an anti-pattern.

Other than this, MDX works pretty well with native platforms (React Native, React Sketch.app, etc), so long as all components are handled with the <MDXProvider components={...}> to replace react-dom fallback.

Here’s some example code of how I’m getting MDX to work with react-sketchapp: https://github.com/elemental-design/style-guide/blob/master/examples/sketch/src/i18n/components.js#L63 Maybe this would be worth adding to the documentation? Special handling is required for list support on native platforms. I created a Rollup plugin for MDX too, which could be useful for people using this project for React Native, etc. I’d be happy to open a PR documenting this.

note Also, I want to clarify that what I mean by “primitives”, is react-primitives. Which is effectively the same thing as React Native support, but is a library that provides support for react-native-web, react-native, react-sketchapp, react-figma, react-native-windows, etc. Can just think of it as support for custom React renderers like React Native.

[wooorm]

@macintoshhelper Hi, thanks for your patience. Sorry, I missed your mention.

I’m all for docs on how to do it. But, this issue is specifically about customizing div to something else I believe. How does that relate to rollup-plugin-mdx or mdx-js/runtime?