Simple HTML to JSX converter #667
Conversation
See /react/html-jsx.html. Not directly linked from the site yet as there may still be some minor issues with it.
|
very useful tool! |
|
Thanks! I've got a Handlebars to JSX converter that's almost complete as well, I'll post it once I finish it :) I also had a proof-of-concept bookmarklet that magically made a server-rendered app into a live updating app. Basically it converted |
|
If you want to take the markup converter to the extreme, you could make it so that when you select markup in any page (or Chrome inspector tools), not only can you create a React component out of the markup, but it also captures the set of css rules needed to render it in its exact form, and generates an accompanying style sheet! @sebmarkbage can help you out there as he's gained quite a lot of knowledge of the Chrome inspector and Chrome plugins. |
|
@jordwalke That does sound like an interesting idea :). I'll keep it in mind. It'd make a good addition to the React inspector plugin that's currently Facebook-only. Someone mentioned it on IRC recently and last I heard it was going to be released as open-source shortly. |
|
@Daniel15 That sounds likely. I remember there was already a plugin that helped you do something like that in the Chrome store - not sure if it's open source, but if it were, it would not be hard to fork it to simply run the output through your markup transforming code (and boiler plate generator). I imagine that would be quite an impressive demo. |
|
This one is open source and should integrate nicely into our React developer tools! |
There was a problem hiding this comment.
If we took document as a param (rather than relying on the global) we could use this from node with jsdom
There was a problem hiding this comment.
Good idea 👍
I wanted to get this version merged in, and do the work to get it fully working with both Node.js and the website in a separate commit / pull request.
There was a problem hiding this comment.
Just want to mention it works with jsdom as is:
var fs = require("fs");
var jsdom = require("jsdom");
var htmljsx = fs.readFileSync("docs/js/html-jsx-lib.js","utf-8");
jsdom.env({
url:"http://facebook.com/",
src: [htmljsx],
done: function(errors,window){
HTMLtoJSX = window.HTMLtoJSX;
var converter = new HTMLtoJSX({
outputClassName: "MyClass",
createClass: true
});
console.log(converter.convert("<!doctype html><html></head><body><p><input></p></body></html>"));
}
});There was a problem hiding this comment.
Good to know! I'm currently on vacation but I'll look at adding a simple
command-line version to react-tools once I'm back and get some free time.
Sent from my mobile.
On Dec 29, 2013 4:03 PM, "jhiswin" notifications@github.com wrote:
In docs/_js/html-jsx-lib.js:
- reset: function() {
this.output = '';this.level = 0;- },
- /**
\* Main entry point to the converter. Given the specified HTML, returns a\* JSX object representing it.\* @param {string} html HTML to convert\* @return {string} JSX*/- convert: function(html) {
this.reset();
// It turns out browsers have good HTML parsers (imagine that).// Let's take advantage of it.var containerEl = document.createElement('div');Just want to mention it works with jsdom as is:
var fs = require("fs");
var jsdom = require("jsdom");var htmljsx = fs.readFileSync("./html-jsx-lib.js","utf-8");
jsdom.env({
"));
url:"http://sip1.idiil.org/",
src: [htmljsx],
done: function(errors,window){
HTMLtoJSX = window.HTMLtoJSX;
var converter = new HTMLtoJSX({
outputClassName: "MyClass",
createClass: true
});
console.log(converter.convert("<!doctype html>
}
});—
Reply to this email directly or view it on GitHubhttps://github.com//pull/667/files#r8579909
.
There was a problem hiding this comment.
Hey while you're at it, I'd love to see the Handlebars-JSX converter and that nifty "Reactify" bookmarklet you were talking about ;)
Definitely a lot of possibilities with that code.
|
I am inclined to merge this. @zpao do you have any reservations? |
|
We should merge to master and cherry-pick to stable branch, otherwise we'll lose this next time we cut a branch. No idea if it's possible to edit a PR, so we can either keep this and pull in the commit manually or you can close this PR and open a new one. |
|
@jordwalke That does look interesting, I'll look into it some time :) @zpao I'd have to rebase the commit to get it on top of master. I was having issues getting the JSX compiler page working on master (raised as #666) but that may just be an environment issue. We should be able to cherry pick this commit to master though (same thing but the other way). How are bug fixes normally handled? |
|
We normally land on master and merge into the stable branch (0.5-stable right this second but very shortly not). With the 0.8 branch existing now, that's what the next docs will be cut from. We could cherry-pick either way though, just makes it's a bit easier to not push it an effectively done branch. |
|
I'll rebase this on master instead (after retesting #666) and send it in a separate pull request (or update this one if possible? I don't really know how to Github). |
5 participants
Simple HTML to JSX converter, built during Hackathon 40 at Facebook. See /react/html-jsx.html. Not directly linked from the site yet as there may still be some minor issues with it.
I'll eventually split
html-jsx-lib.jsinto another project (react-tools?) as it could be used elsewhere. I think it'd work with Node.js if a module like jsdom was used to implement the DOM functionality.