Comments (6)
This library is really designed to only handle HTML - Data
is not a regular HTML tag 😛
from react-magic.
I need this supported too — couldn't we just leave the casing of tags alone?
from react-magic.
Yeah...I'm a little confused about what's going on here. If you have actual React components you're mixing with React Magic, there's a reason this isn't supported -- you'll potentially be creating colossal memory leaks and violating just about every React best practice.
It seems like the way to handle this would be to avoid using React Magic and instead work on reconstructing all the major page elements in React with properly nested components. I know that sounds like a lot of extra effort, but I think you'll regret anything less in the long run.
from react-magic.
@KyleAMathews is this a Gatsby issue? If so, I'm definitely starting to understand why you might need or want this, even if it is against best practices -- I'm not sure how to get around this yet, though. Looking through the parser, I'm nervous this may be more than just a casing issue by the time we get to the bottom of it.
from react-magic.
I just want the HTML to jsx piece not the magic bit. I am interested in it for gatsby. Working on making it so you can add jsx to markdown. Would to compile to HTML from markdown then to jsx and need the jsx to survive through that. Could also write a markdown to jsx convertor which might be easier actually.
from react-magic.
couldn't we just leave the casing of tags alone?
It's using the browser's HTML parser, which tends to convert tags to lowercase (as regular HTML tags are not case sensitive). This library was designed only for use as a HTML to JSX converter, not a HTML+JSX to JSX converter, and thus it does not support the use case of a chunk of HTML that has existing JSX elements in it.
The Node.js build uses jsdom instead, but it works similarly. This library is really built for use in a browser though.
from react-magic.
Related Issues (20)
- Ability to preload links on hover, or expose enough of an API for users to implement. HOT 1
- Comparison to TurboLinks
- Getting hit with wall of errors HOT 3
- Convert hyphenated attributes into camelCase HOT 1
- [HtmlToJsx] View logic? F.e., how do we loop through items in an HTML view? HOT 2
- onclick attribute not getting renamed to onClick HOT 1
- Feature Request : Make this work in a web worker HOT 1
- HTMLtoJSX page is broken HOT 3
- HTML to JSX is broken HOT 5
- Autofocus isn't camel-cased HOT 2
- Change React.createClass to ES class
- feature request: serialize nodes and attributes to custom code
- HTMLtoJSX, better document default behavior
- SVG: incorrect gradientunits attribute
- complex style prop not parsed correctly
- White-space conversion on text nodes or inline elements HOT 2
- react 16 HOT 1
- Reactmagic site have "<" unexcpected error
- Add option to output Functional component (as well as import and export statement)
- ref value in react
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-magic.