10 examples of 'jsx transformer is a must to work with reactjs' in JavaScript

3
function transformComponentsInNode(node, transformComponent) {
4
  if(typeof node === 'string' || typeof node === 'number') {
5
    return node;
6
  }
7
  const { type, props } = node;
8
  if(typeof type === 'string') {
9
    // "Native" (eg. DOM) types: pass through children
10
    const { children } = props; // eslint-disable-line react/prop-types
11
    console.warn({ node });
12
    console.warn({ children });
13
    const nextChildren = React.Children.toArray(children).map((childNode) => {
14
      console.warn({ childNode });
15
      const nextChildNode = transformComponentsInNode(childNode, transformComponent);
16
      console.warn({ nextChildNode });
17
      return nextChildNode;
18
    });
19
    const nextNode = React.createElement(type, { ...props, children: nextChildren });
20
    return nextNode;
21
  }
22
  // "Components" (ie. user-defined): don't pass through children; they will be transformed later
23
  return React.createElement(
24
    transformComponents(transformComponent)(type), // eslint-disable-line no-use-before-define
25
    props,
26
  );
27
}

58
function _pluginTransformReactJsxSelf() {
59
  var data = _interopRequireDefault(require("@babel/plugin-transform-react-jsx-self"));
60
61
  _pluginTransformReactJsxSelf = function _pluginTransformReactJsxSelf() {
62
    return data;
63
  };
64
65
  return data;
66
}

10
export function ReactNET_transform(input, babelConfig, filename) {
11
	babelConfig = Object.assign({}, JSON.parse(babelConfig), {
12
		ast: false,
13
		filename,
14
	});
15
	try {
16
		return babelTransform(input, babelConfig).code;
17
	} catch (ex) {
18
		// Parsing stack is extremely long and not very useful, so just rethrow the message.
19
		throw new Error(ex.message);
20
	}
21
}

100
export default function transformer(ast) {
101
	const templateStringBuilder = [];
102
	compileTemplateRoot(ast[0], templateStringBuilder);
103
	return templateStringBuilder.join(', ');
104
}

71
var transformElement = function transformElement(element, cx) {
72
  // Straight return elements, which render to undefined
73
  if (!element) {
74
    return element;
75
  }
76
77
  var _props = undefined,
78
      _className = undefined,
79
80
  // Here we start the recursion
81
  children = recursiveTransform(element.props.children, cx);
82
83
  // Support string classnames
84
  if (typeof element.props.className === "string") {
85
    _className = element.props.className.split(" ");
86
  }
87
88
  // Support object classnames for classnames module
89
  else {
90
      _className = element.props.className;
91
    }
92
93
  // copy props and override the className
94
  _props = _extends({}, element.props, {
95
    className: cx(_className)
96
  });
97
98
  // delete the className, if it is empty
99
  // Note:
100
  // ... yeah, this is kinda silly, we could've checked earlier if the className
101
  // iss empty. But I think it's less code. Less code makes our files smaller,
102
  // and that's a good thing.
103
  if (_props.className === "") delete _props.className;
104
105
  return _react2.default.cloneElement(element, _props, children);
106
};

37
function translateFromReact (item) {
38
  if (isReactNode(item)) {
39
    const props = item.props;
40
    const chren = ensureNodes(props.children);
41
    delete props.children;
42
    return {
43
      attributes: props,
44
      childNodes: chren,
45
      localName: item.type,
46
      nodeType: 1
47
    };
48
  }
49
  return item;
50
}

55
createReactElement(data) {
56
  this.elementsLength++;
57
58
  const props = {
59
    ...data.props,
60
    key: this.elementsLength
61
  };
62
63
  let children = null;
64
  if (Array.isArray(data.children)) {
65
    children = data.children.map(this.createReactChildElement);
66
  }
67
68
  return React.createElement(data.type, props, children);
69
}

39
render() {
40
  var reactClass = this.reactClass,
41
      render = reactClass.getRender(),
42
      displayName = reactClass.getDisplayName(),
43
      instance = this.instance();
44
45
  instance.displayName = displayName;
46
47
  this.jsxElement = render.apply(instance);
48
}

6
function TransformComponent({ children }) {
7
  const wrapperRef = useRef(null);
8
  const contentRef = useRef(null);
9
  const { state, nodes } = useContext(Context);
10
  const style = {
11
    transform: `translate(${state.positionX}px, ${state.positionY}px) scale(${state.scale})`,
12
  };
13
14
  useEffect(() => {
15
    if (wrapperRef.current) {
16
      nodes.setWrapperComponent(wrapperRef.current);
17
    }
18
    if (contentRef.current) {
19
      nodes.setContentComponent(contentRef.current);
20
    }
21
  }, []);
22
23
  return (
24
    <div>
25
      <div>
26
        {children}
27
      </div>
28
    </div>
29
  );
30
}

159
export default function transformer(ast) {
160
	const templateStringBuilder = [];
161
	compileTemplateRoot(transform(ast), templateStringBuilder);
162
	return templateStringBuilder.join(', ');
163
}