Выполнение преобразований jsx на клиенте

Я создаю приложение, которое позволяет пользователям создавать и применять свои собственные компоненты и шаблоны. Я хочу, чтобы пользователи могли редактировать строки данных jsx, а затем выполнять преобразование на стороне клиента для визуализации.

В то время как in the in browser transform выполняет преобразования jsx на встроенных скриптах, а react-tools доступен на сервере, я не могу определить, как сделать функцию transform доступной клиенту.

Встроенное преобразование браузера по-видимому, не предоставляет никаких методов доступа, и Atomify/Browserify аварийно завершает работу, когда я пытаюсь использовать преобразование react-tools на клиенте.

2 6
javascript reactjs babeljs

2 ответа:

Модуль JSXTransformer экспортирует две функции:

  • transform принимает исходный код JSX в виде строки и возвращает объект с ключом code, значение которого является строкой JavaScript, которую затем можно вычислить.

  • exec работает как transform, и результат затем передается в eval.

Этот вызов: 

JSXTransformer.transform("React.createClass({render: function() { return <div></div>; } });").code

...производит этот простой вывод JavaScript: 

"React.createClass({render: function() { return React.createElement("div", null); } });"
6

JSXTransformer был устаревшие в середине 2015 года в пользу Бабеля в браузере решение, babel-standalone: https://babeljs.io/docs/setup/#installation

Обсуждение здесь: https://github.com/facebook/react/issues/5497

0