I will try to answer both questions. Since I write various code generators, I think my reasoning will be useful.
Why doesn't React provide a transpiler?
I believe that the main reason for this is not even so much that JXS appeared earlier. The main problem with the code now is its standards, which are still not fully supported by browsers. Thus, Babel is needed primarily for interpreting JS and only then JSX. And since he is so needed, why not delegate this responsibility to it.
Is there no other way to transpile JSX into JavaScript?
On the one hand - no, but not all that bad. I think the React team could quickly write their own transpiler. I say this because although there are some difficulties, they are so insignificant that it is not possible or too hard. Of course, these words can be perceived as unsubstantiated, so I chose a middle ground between writing a transpiler here and giving an example of code.
Of course, code transpilation is usually done at the development stage and not at runtime, but I will give exactly the transpilation runtime in the snippet. This is similar to when you wrap your JSX code in a script tag with type="text/babel",
and for this also includes the babel file
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
In order to get rid of goal, you can make another type of script and throw out babel.
Here is an example that I will try to create and I came up with a new type of script "text/react" and everything so that it does not start ahead of time with errors:
<script type="text/react">
const App = () => {
const clickHanler = ()=> {
alert("you clicked me")
}
return (
<button onClick={clickHanler} style={{color:'green'}}>Click me</button>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>
Now you need to go through a few steps.
1 Find this script on the page.
2 Transpile it.
3 Run for execution.
To do this, in another script, I will place several functions, very simplified.
window.addEventListener('DOMContentLoaded', function () {
return transformScriptTags();
}, false);
We need to catch the moment when we can start transpiling by running transformScriptTags.
function disableScriptTags() {
window.removeEventListener('DOMContentLoaded', transformScriptTags);
}
We will eventually disable this handler.
The transpiler function will contain:
1 The way to extract tags, in fact, I used recursion for this, but the given code will be without it.
2 Next, we transform the result into an object tree with the structure:
{
tagName : ''
children : [
...
],
attributes : {}
}
3 Then we recursively put everything together in also tree like this:
React.createElement(
'h1',
{className: 'greeting'},
'Hello world'
);
4 We replace in the old script and insert it as a new one.
That's all, here's an example:
function transformScriptTags(scriptTags) {
//https://stackoverflow.com/questions/68607607/why-my-state-is-not-re-rendering-when-my-state-changes-in-this-reducer-in-redux
const code = document.querySelector('#code');
const oldScript = document.querySelector('script[type="text/react"]');
const reTag = /<(?:([A-Za-z0-9]*) ([^>]*)>(.*?)<\/\1>|[A-Za-z0-9]* [^>]*\/>)/;
const unwrap = e => e.match(/^\{.*\}$/) ? e.slice(1, -1) : e;
const wrapText = e => e.match(/^\{.*\}$/) ? e : `'${e}'`;
const ObjectToReact = (json) =>{
const result = ''
const {tagName, attributes, children} = json;
return `React.createElement(
'${tagName}'${!attributes || Object.entries(attributes).length === 0
? ', null'
: `, {${Object.entries(attributes).reduce((acc,[key, value]) => acc += `${key}:${unwrap(value)},`, '')}}`}
${children ? children.map(e => e.match(reTag) ? `,${ObjectToReact(e)}`: `,${wrapText(e)}` ) :''})`
}
const allScriptText = oldScript.innerHTML
const matched = allScriptText.match(reTag)
const element = {
tagName : matched[1],
children : [matched[3]],
attributes : matched[2].split(' ')
.reduce((acc,e) => ({...acc, [e.split('=')[0]]:e.split('=')[1]}), {})
}
const reactElement = ObjectToReact(element)
const newScriptText = allScriptText
.replace(matched[0], reactElement)
.replace('<App />', 'App()')
const newScript = document.createElement('script');
newScript.innerHTML = newScriptText;
disableScriptTags();
document.body.removeChild(oldScript);
document.body.appendChild(newScript);
code.textContent=newScriptText;
}
function disableScriptTags() {
window.removeEventListener('DOMContentLoaded', transformScriptTags);
}
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<div id="root"></div>
<pre id="code"></pre>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function () {
return transformScriptTags();
}, false);
</script>
<script type="text/react">
const App = () => {
const clickHanler = ()=> {
alert("you clicked me")
}
return (
<button onClick={clickHanler} style={{color:'green'}}>Click me</button>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>
