3 ms·

Perhaps not the best avenue for this, but I thought I'd take advantage of eyes on this discussion. How might I go about using JSX outside of React or creating s

Perhaps not the best avenue for this, but I thought I'd take advantage of eyes on this discussion. How might I go about using JSX outside of React or creating something similar? I basically want to turn custom <xml-style> code into JavaScript that instantiates custom classes that have nothing to do with the DOM. I'd like to do this via a babel plugin as well. If you can't tell, I enjoy JSX tremendously and I'd like to use it or borrow from it extensively outside of React.

drunkcatsdgaf 11y ago
https://github.com/abdmob/x2js https://github.com/abdmob/x2js
brotchie 11y ago
It's pretty straight forward to use JSX outside of React. If you're using Babel you can simply add /** @jsx ExampleDOM */ As the first line in your Javascript source file. This indicates to the transpiler to convert statements of the form <example name="Wesley" age={15}> <Message text="hello"/> <Message text="world"/> </example> into ExampleDOM('example', { name: 'Wesley', age: 15 }, ExampleDOM(Message, { text: 'hello'}), ExampleDOM(Message, { text: 'world }) ) where you implement ExampleDom as function ExampleDOM(element_or_component, attributes, ...children) { } Note that because 'example' starts with a lowercase character, it is transpiled into a string first-argument to the ExampleDOM function. If it starts with an Uppercase letter (i.e. 'Message' above) it is interpreted as an in-scope Javascript variable. We've had really good results using JSX outside of the core react library. For example, we've built a "React.js for Excel" that lets us easily create rich Excel workbooks: <worksheet clear protect flow="column" name={`Bespoke - ${network.shortname} - WACC`} tabColor={theme.bespokeBlue} displayGridlines={false} style={worksheetStyle}> <PageLayout title={`${network.name} Cost-of-Capital Worksheet`} lastUpdated={new Date()}> <UpdatedWACCEstimates network={network} determination={determination}/> <WACCForecast network={network} forecast={forecast}/> </PageLayout> </worksheet> Which looks a lot like React.js and behaves almost exactly the same, but it's targeting the Excel COM Object model rather than the HTML DOM.
- WesleyJohnson 11y ago
  Fantastic. Thank you for the detailed response and examples.

drunkcatsdgaf 11y ago

https://github.com/abdmob/x2js https://github.com/abdmob/x2js

brotchie 11y ago

It's pretty straight forward to use JSX outside of React. If you're using Babel you can simply add /** @jsx ExampleDOM */ As the first line in your Javascript source file. This indicates to the transpiler to convert statements of the form <example name="Wesley" age={15}> <Message text="hello"/> <Message text="world"/> </example> into ExampleDOM('example', { name: 'Wesley', age: 15 }, ExampleDOM(Message, { text: 'hello'}), ExampleDOM(Message, { text: 'world }) ) where you implement ExampleDom as function ExampleDOM(element_or_component, attributes, ...children) { } Note that because 'example' starts with a lowercase character, it is transpiled into a string first-argument to the ExampleDOM function. If it starts with an Uppercase letter (i.e. 'Message' above) it is interpreted as an in-scope Javascript variable. We've had really good results using JSX outside of the core react library. For example, we've built a "React.js for Excel" that lets us easily create rich Excel workbooks: <worksheet clear protect flow="column" name={`Bespoke - ${network.shortname} - WACC`} tabColor={theme.bespokeBlue} displayGridlines={false} style={worksheetStyle}> <PageLayout title={`${network.name} Cost-of-Capital Worksheet`} lastUpdated={new Date()}> <UpdatedWACCEstimates network={network} determination={determination}/> <WACCForecast network={network} forecast={forecast}/> </PageLayout> </worksheet> Which looks a lot like React.js and behaves almost exactly the same, but it's targeting the Excel COM Object model rather than the HTML DOM.

WesleyJohnson 11y ago
Fantastic. Thank you for the detailed response and examples.