Parse react component map to new component - reactjs

Question

I am trying to figure out how to take a react component as input and map to a new component tree (replacing tags and modifying as desired). In this specific case, I would like to take a component written for DOM output and modify it to for native output.
So a very simplified component might go from:
<MyComponent>
<p>foo</p>
</MyComponent>
to:
<MyComponent>
<Text>foo</Text>
</MyComponent>
Bonus points for modifying individual tags props, such as adding style props, event handlers, et cetera. I know if there is an answer it won't be one-size-fits-all. I'm just hoping for some guidelines as to general approach/others who have encountered this use-case and pushed it forward.

Answer 1

Something like this seems to work reasonably well, although passing styles down the tree is an open question. Well, at least we know that the transpilation from one set of tags to another is possible. Props https://stackoverflow.com/users/2578335/giles-copp
// traverse.js
import React from 'react';
export function kindOf(node) {
if (node === null || node === undefined || typeof node === 'boolean') {
return 'Empty';
}
if (typeof node === 'string' || typeof node === 'number') {
return 'Text';
}
if (Array.isArray(node)) {
return 'Fragment';
}
const { type } = node;
if (typeof type === 'string') {
return 'DOMElement';
}
return 'ComponentElement';
}
export function defaultTraverse(path) {
const kind = kindOf(path.node);
if (kind === 'Empty') {
return path.node;
}
if (kind === 'Text') {
return path.node;
}
if (kind === 'Fragment') {
return path.node.map(path.traverse);
}
return React.cloneElement(
path.node,
path.node.props,
...path.traverseChildren(),
);
}
export default function traverse(node, visitor) {
const {
Empty = defaultTraverse,
Text = defaultTraverse,
Fragment = defaultTraverse,
DOMElement = defaultTraverse,
ComponentElement = defaultTraverse
} = visitor;
const path = {
node,
kindOf,
defaultTraverse() {
return defaultTraverse(path);
},
traverse(childNode, childVisitor = visitor) {
return traverse(childNode, childVisitor);
},
traverseChildren(childVisitor = visitor) {
return React.Children.toArray(path.node.props.children).map(
(childNode) => path.traverse(childNode, childVisitor)
);
},
visitor
};
if (node === null || node === undefined || typeof node === 'boolean') {
return Empty(path);
}
if (typeof node === 'string' || typeof node === 'number') {
return Text(path);
}
if (Array.isArray(node)) {
return Fragment(path);
}
const { type } = node;
if (typeof type === 'string') {
return DOMElement(path);
}
return ComponentElement(path);
}
// transpile.js
import React from 'react';
import { Image, Text, View } from 'react-native';
import traverse from './traverse';
const viewNodeTypes = ['div'];
const textNodeTypes = ['h1', 'p'];
const inlineNodeTypes = ['span', 'b', 'em'];
const dom2ReactNative = (node) => traverse(node, {
ComponentElement(path) {
if (path.node.type === 'img') {
return React.createElement(
Image,
path.node.props
);
}
},
DOMElement(path) {
if (textNodeTypes.includes(path.node.type)) {
return React.createElement(
Text,
path.node.props,
...path.traverseChildren(),
);
} else if (viewNodeTypes.includes(path.node.type)) {
return React.createElement(
View,
path.node.props,
...path.traverseChildren(),
);
} else if (inlineNodeTypes.includes(path.node.type)) {
return path.node.props.children;
}
return React.cloneElement(
path.node,
path.node.props,
...path.traverseChildren(),
);
}
});
export default dom2ReactNative;