问解析react组件映射到新组件

EN

// 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;