reactjs / react-magic Goto Github PK
View Code? Open in Web Editor NEWAutomatically AJAXify plain HTML with the power of React. It's magic!
License: Other
Automatically AJAXify plain HTML with the power of React. It's magic!
License: Other
If the page has >
and <
characters, JSX Transformer will fail to convert. Not sure if this should be considered by React.js team or this team.
On http://magic.reactjs.net/htmltojsx.htm, I was able to almost perfectly convent a huge chunk of text, but I thought I should let someone know that the onclick
attribute is not converting to onClick
. Perhaps onclick="alert('hi'); return false;"
could be converted to onClick={() => { alert('hi'); return false; }}
, just as a suggestion. Thanks for this tool!
I installed the package for a ReactJS web site using npm install htmltojsx
.
Try to load the module with var HTMLtoJSX = require('htmltojsx');
.
Then it's giving me the following error.
Error in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: 'child_process' in /Users/<WORKPLACE>/node_modules/xmlhttprequest/lib
@ ./~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36
Node version : v6.5.0
⇒ npm install htmltojsx
> [email protected] install /Users/<WORKPLACE>/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
[fsevents] Success: "/Users/<WORKPLACE>/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote
- [email protected] node_modules/commoner/node_modules/commander
- [email protected] node_modules/esprima-fb
[email protected] /Users/<WORKPLACE>
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
└─┬ [email protected]
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└── [email protected]
I don't know if I'm missing something obvious, but I was looking for a non-minified version of magic.js and I noticed that this version:
is not the same as this one (referenced in the usage instructions):
I'm new to github so maybe I'm missing something? It's not just that it's minified.
Awesome project!
Just a question: given that this is React under the hood--how can one listen for changes in the DOM before mounted and after while using this library? This would allow for some nice animations.
Thanks for any insight!
The library depends on the DOM for just escaping special characters. It can be done separately. This will help to run it in the worker.
Is there any way that a controlled component can be updated or made uncontrolled?
For example the <input type="submit" value="Send"/>
will not update its value on a new value on render.
Hi guys, I intend to use htmltojsx web-based only, I'm getting all this when building with webpack:
WARNING in ./~/htmltojsx/~/jsdom/~/acorn-globals/~/acorn/dist/walk.js
Critical dependencies:
1:503-510 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/htmltojsx/~/jsdom/~/acorn-globals/~/acorn/dist/walk.js 1:503-510
WARNING in ./~/htmltojsx/~/jsdom/~/acorn-globals/~/acorn/dist/acorn.js
Critical dependencies:
1:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/htmltojsx/~/jsdom/~/acorn-globals/~/acorn/dist/acorn.js 1:478-485
Is there a way to provide walk.js and acorn.js
ERROR in ./~/htmltojsx/~/jsdom/lib/jsdom.js
Module not found: Error: Cannot resolve module 'fs' in /Users/admin/git/uniregistrar/uniregistrar/uniregistrar/js/rar/node_modules/htmltojsx/node_modules/jsdom/lib
@ ./~/htmltojsx/~/jsdom/lib/jsdom.js 1:9-22
...
ERROR in ./~/htmltojsx/~/jsdom/~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Cannot resolve module 'child_process' in /Users/admin/git/uniregistrar/uniregistrar/uniregistrar/js/rar/node_modules/htmltojsx/node_modules/jsdom/node_modules/xmlhttprequest/lib
@ ./~/htmltojsx/~/jsdom/~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36
Thank you.
i want to exclude html audio tag when the browser refresh so, it can keep playing :)
For instance, the svg
stroke-width
attribute should be converted to strokeWidth
, and fill-rule
to fillRule
, etc.
React has shorthand for specifying pixel values in style. So when you put into HTMLtoJSX something like this
<div style="line-height: 50px;"></div>'
it produces
<div style={{lineHeight: 50}}>
The problem is that line-height acceptes plain values (like line-height: 50), so the above JSX is actually sets line-height style for 50, not 50px.
In htmltojsx, there is the following line:
require('react/lib/HTMLDOMPropertyConfig')
But, your package file only pulls react, not react-dom, which is causing errors such as:
module.js:327
throw err;
^
Error: Cannot find module 'react/lib/HTMLDOMPropertyConfig'
This is only happening in the htmltojsx submodule (not the core package). I believe in your core package you are picking React ~14, whereas the submodule is picking React * (which in turn is grabbing 15.x).
Hello,
When clicking on an ID link, something like <a href="#command">...
the page does not scroll.
It is the only issue I've had with an otherwise perfect module.
Is there any way to remedy this? To exclude <a>
tags with a #
symbol from the scope of this module?
Thank you.
Uncaught Error: Something bad happened when transforming HTML to JSX:
Error: Parse Error: Line 2: Expected corresponding XJS closing tag for a
What exactly does it mean? Is there a missing </a>
in the original HTML code?
edit:
this does not raise an exception:
JSXTransformer.exec('/** @jsx React.DOM */'+ (new HTMLtoJSX({createClass:false})).convert("<h1><a>a not closed a tag</h1>"));
Perhaps a -e
to add module.exports
? I modded the cli.js in order to be able to require the generated file and insert into another component's render function directly.
Really interesting project!
It seems really similar to the TurboLinks project (https://github.com/turbolinks/turbolinks)
I think your comparison to Ajaxify holds true "What makes React-Magic different is that it only updates the DOM nodes that have changed, whereas Ajaxify and similar solutions just blow away the whole document.body on every page load" except TurboLinks also caches previous pages.
One of the big problems with using TurboLinks is that scripts that rely on on document ready hooks are not executed as expected. I would assume this would be the same case.
Also TurboLinks has a directive for marking a DOM element as "permanent" which means its preserved across page loads. This is obviously the default in react magic. I wonder if there is a case for a similar markup in react magic but to do the opposite - force tear down of a component so that state can be reset.
Just a heads up for anyone wanting to have AJAX'd and diffed page loads in a more robust/mature library:
Turbo React is a drop-in library that does what react-magic does -- It loads new links via AJAX and uses React to diff the page, but without the complexity of HTMLtoJSX. It also works on any plain HTML site with no extra server configuration, and degrades gracefully on old browsers.
Demo here: https://turbo-react.herokuapp.com
It's built on the Turbolinks library from the Ruby on Rails community.
It also shares some of the same problems as react-magic, mainly breaking event bindings. Fortunately Turbolinks has it's own events for page changes/updates. Also, if you're using jQuery there is a drop-in fix.
I'm trying to convert HTML with my custom component named "Data". It looks like this:
<div>
<br/>
<Data name="foo"/>
<p>After</p>
</div>
As I result I get the following JSX in which the paragraph becomes the child of a Data tag and the tag itself is lowercased:
var MyTemplate = React.createClass({
render: function() {
return (
<div>
<br />
<data name="foo">
<p>After</p>
</data></div>
);
}
});
Is this an expected behaviour?
I don't want https://facebook.github.io/react/html-jsx.html on our site anymore. It uses this project exclusively so this project should just host it's own site.
The demos are broken, also the bookmarklet did not work for me.
Seems the location of react.min.js
changed…
GET http://facebook.github.io/react/js/react.min.js [HTTP/1.1 404 Not Found 23ms]
I've been playing around with react-magic, testing it on a number of different websites. I got one syntax error quite often. I've included a few examples of this error.
How to reproduce For each site I opened up the debug console (in Firefox), and ran this command (taken from the bookmarklet):
(function(b){function c(){if(0!==d.length){var e=d.shift(),a=b.createElement("script");a.src=e;a.onload=c;b.body.appendChild(a)}}var d=["http://fb.me/react-0.13.3.min.js","http://fb.me/JSXTransformer-0.13.3.js","http://reactjs.github.io/react-magic/magic.min.js"];c();return!1})(document);
URL | React-Magic Error |
---|---|
http://www.uschs.org/ | Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 268: Unexpected token : |
http://www.starwars.com/news | Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 5: Unexpected token : |
http://karl.tech/ | Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 12: Unexpected token : |
Maybe it has to do with inline styles?
I just used the html to jsx converter.
In the example of
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#next-remove" />
It should remove the xmlns:xlink
entirely, and replace xlink:href
to xlinkHref
.
Thoughts
Hi folks,
Some improvements have been approved on this project that I really need in my app. Is that possible for you guys to release a new version in NPM?
Much appreciated.
Alan
Issue copied from React:Issues.
I am experiencing a problem with the HTMLtoJSX converter (https://www.npmjs.com/package/htmltojsx), the same converter as officially displayed on https://facebook.github.io/react/html-jsx.html.
The HTML-code <div>{</div>
is compiled to the following JSX-code:
<div>{</div>
https://facebook.github.io/react/html-jsx.html
The JSX code fails with the following error:
Uncaught SyntaxError: embedded: Unexpected token (7:18)
5 | var Hello = React.createClass({
6 | render: function() {
> 7 | return <div>{</div>;
| ^
8 | }
9 | });
Test: https://jsfiddle.net/69z2wepo/28714/
Does anyone know a solution for the problem?
Reply from @Daniel15
Good catch, thanks for reporting this! As @zpao mentioned, please file this in the react-magic repo so I remember to fix it :)
Tried using htmltojsx
with react native, got the following:
Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: CSSProperty
Paths: /Users/bnns/projects/mobile-project/node_modules/htmltojsx/node_modules/react/lib/CSSProperty.js collides with /Users/bnns/projects/mobile-project/node_modules/react/lib/CSSProperty.js
This error is caused by a @providesModule declaration with the same name accross two different files.
Error: @providesModule naming collision:
Duplicate module name: CSSProperty
Paths: /Users/bnns/projects/mobile-project/node_modules/htmltojsx/node_modules/react/lib/CSSProperty.js collides with /Users/bnns/projects/mobile-project/node_modules/react/lib/CSSProperty.js
The latest npm version of this is from October 2015, and there have been many fixes since (one in particular, #55, being one I want to rely on!)
It’d be great to get the latest published!
JSXTransformer is long-gone, react-magic should use babel-standalone instead.
In order for "value" to behave as it does in HTML, the created React components must use "defaultValue". "value" in React creates a controlled component, which makes react-magic generate un-editable inputs.
Currently:
> converter.convert('<input value="Darth Vader">')
"<input value="Darth Vader" />
"
To behave as expected:
> converter.convert('<input value="Darth Vader">')
"<input defaultValue="Darth Vader" />
"
I have html string like this:
var html = '<div class="content" data-content="Some text. <a href="https://google.com/" target="_blank" class="external">Google!</a>">internal text</div>'
It has data-content
attribute which contains <
, >
and "
.
The output is:
<div className="content" data-content="Some text. <a href="https://google.com/" target="_blank" class="external">Google!</a>">internal text</div>
But it's not a valid jsx code.
I uses this fork to handle such case:
xcv58@ed12343
But I'm not sure whether it's correct way.
When HTML containing textarea's or pre's with newlines are fed into the HTML to JSX converter, the newlines in the textarea or pre are not converted the way they need to be for multiline content to remain intact. See why textarea value
JSX whitespace coalescing rules end up being applied when the result is rendered.
When a TextNode is encountered, HTML entities inside it are returned as HTML rather than the HTML entity. This is problematic for the use of <
and >
in particular because the tags they wrap are then interpreted as real tags.
For example:
> converter.convert("<code><body></code>");
"<code><body></code>
"
The encoded symbols are returned as the symbols themselves, which eventually throws an error in Esprima because it encounters an unclosed tag.
This is expected and documented behavior of TextNodes and their data
attribute, and it seems the way to get around it is to escape the characters differently before inserting the content into a real DOM node.
Hi,
Great job on react-magic. I'm trying to use this component with the following option:
{
createClass: true
}
I would expect the following output:
"React.createClass..."
but it turns out to be
"var NewComponent = React.createClass...."
I see in the code that the config outputClassName is optional. In the convert function we have:
if (this.config.createClass) {
if (this.config.outputClassName) {
this.output = 'var ' + this.config.outputClassName + ' = React.createClass({\n';
} else { // this is the callback i was expecting to be called
this.output = 'React.createClass({\n';
}
this.output += this.config.indent + 'render: function() {' + "\n";
this.output += this.config.indent + this.config.indent + 'return (\n';
}
But in the object constructor there is always a fallback to 'NewComponent', from the source-code:
var HTMLtoJSX = function(config) {
this.config = config || {};
if (this.config.createClass === undefined) {
this.config.createClass = true;
}
if (!this.config.indent) {
this.config.indent = ' ';
}
if (!this.config.outputClassName) { // I would not expect to have this line in place.
this.config.outputClassName = 'NewComponent';
}
};
Originally reported by @jhiswin at facebook/react#838:
-Known attributes like maxlength have to be camelcased to maxLength or whatever is in [DefaultDOMPropertyConfig] https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js
Might be a good idea to throw a warning/error for unknown properties, so they don't get discarded without you knowing.
-Styles should be lowercased before processing.
<input style="TEXT-ALIGN: center; WIDTH: 40px" maxlength=2 />
transpiles to:
<input style={{TEXTALIGN: 'center', WIDTH: 40}} maxlength={2} />
transpiles to:
React.DOM.input( {style:{TEXTALIGN: 'center', WIDTH: 40}, maxlength:2} )
generates:
<input style="-t-e-x-t-a-l-i-g-n:center;-w-i-d-t-h:40px;" data-reactid=".r[2wp76]">
When using this library via NPM and including it in another library meant for use in browsers, IN_BROWSER
needs to be set during compilation to prevent Node calls from being included/executed.
If IN_BROWSER
is meant to stick around permanently, it'd be great to document it.
Hey,
Inspired by the preload-on-hover behaviour offered by https://github.com/dieulot/instantclick I'm wondering if it would make sense to either optionally allow such functionality here, or, if it might make sense to float enough of the API to allow something like this to be implemented.
With the existing implementation of load() I suppose this would entail attempting to throttle network calls performed on events such as hover, and modifying the cachebusting functionality so that only one network call is performed (maybe to be aware of existing query parameters too). If a response is already available, it can be used directly when handleStateChange()
is called.
As another option I suppose it'd be possible to do this via a service worker by leveraging the cache API, but I'd prefer to avoid this approach as it is more likely to go horribly wrong. That said, I am happy to contribute something along those lines if it'd be welcomed.
What do you think?
Error:
Uncaught Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 31: Unexpected token var
HTML attributes with big integers are converted to javascript integer.
<a class="twitter-timeline" data-widget-id="403673174782406656" data-theme="dark" data-link-color="#f96e5b" data-border-color="#e8e8e8" data-tweet-limit="3" width="225" height="400" lang="EN">My Tweets</a>
<a className="twitter-timeline" data-widget-id={403673174782406656} data-theme="dark" data-link-color="#f96e5b" data-border-color="#e8e8e8" data-tweet-limit={3} width={225} height={400} lang="EN">My Tweets</a>
http://facebook.github.io/react/html-jsx.html
This causes problems as Javascript is able to handle integers up to +/- 9007199254740991.
Numbers in Javascript are 64-bit floating point values, the largest exact integral value is 253-1, or 9007199254740991. In ES6, this is defined as Number.MAX_SAFE_INTEGER.
http://stackoverflow.com/a/307200/5834249
The following test fails, probably because it's fed to innerHTML.
it('should handle tr, td tags', function() {
var converter = new HTMLtoJSX({ createClass: false });
expect(converter.convert('<tr><td>foo</td></tr>').trim())
.toBe('<tr><td>foo</td></tr>');
});
Fails with:
Expected '<div> foo </div>' to be '<tr><td>foo</td></tr>'.
Consequently, tons of HTML fragments won't be converted correctly, e.g. <table><tr><td>foo</td></tr></table>
becomes <table><tbody><tr><td>foo</td></tr></tbody></table>
"Uncaught Error: Something bad happened when transforming HTML to JSX: ReferenceError: tt is not defined"
The example at http://magic.reactjs.net/htmltojsx.htm is very simple, it just converts static HTML to static JSX.
But that's not very useful on it's own.
How would one write HTML that can loop through a set of items, for example? I'm talking about things like ng-repeat
in Angular, or v-for
in Vue.
Is there some way to do this? This would be super helpful, because it means a design team could be responsible for owning HTML/CSS, and developers can update the same components with view logic. And HTML/CSS widget library would ship with compiled (or with compilable) templates that are easily usable in React, without React developers having to go and manually copy/pasting HTML/CSS in a way that doesn't scale.
in demo page
Performed npm install --save htmltojsx
, then in my code: let HTMLtoJSX = require('htmltojsx')
.
I'm running node 7.7.4
with npm 4.5.0
.
Just the require
statement is enough to throw the error. There's no other htmltojsx
code in my file.
App is a React app that is running the Webpack Dev Server, and is being transpiled by Babel with the es2015
and react
presets.
ERROR in ./~/jsdom-no-contextify/lib/jsdom.js
Module not found: Error: Can't resolve 'fs' in '/Users/ben/Desktop/Work/code/ru-coding-challege/node_modules/jsdom-no-contextify/lib'
@ ./~/jsdom-no-contextify/lib/jsdom.js 1:9-22
@ ./~/htmltojsx/src/htmltojsx.js
@ ./src/js/components/app.js
@ ./src/js/containers/app-container.js
@ ./src/js/index.js
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/js/index.js
ERROR in ./~/jsdom-no-contextify/lib/jsdom/level2/html.js
Module not found: Error: Can't resolve 'fs' in '/Users/ben/Desktop/Work/code/ru-coding-challege/node_modules/jsdom-no-contextify/lib/jsdom/level2'
@ ./~/jsdom-no-contextify/lib/jsdom/level2/html.js 9:28-41
@ ./~/jsdom-no-contextify/lib/jsdom/living/index.js
@ ./~/jsdom-no-contextify/lib/jsdom.js
@ ./~/htmltojsx/src/htmltojsx.js
@ ./src/js/components/app.js
@ ./src/js/containers/app-container.js
@ ./src/js/index.js
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/js/index.js
ERROR in ./~/cssstyle/lib/CSSStyleDeclaration.js
Module not found: Error: Can't resolve 'fs' in '/Users/ben/Desktop/Work/code/ru-coding-challege/node_modules/cssstyle/lib'
@ ./~/cssstyle/lib/CSSStyleDeclaration.js 7:9-22
@ ./~/jsdom-no-contextify/lib/jsdom/level2/style.js
@ ./~/jsdom-no-contextify/lib/jsdom/living/index.js
@ ./~/jsdom-no-contextify/lib/jsdom.js
@ ./~/htmltojsx/src/htmltojsx.js
@ ./src/js/components/app.js
@ ./src/js/containers/app-container.js
@ ./src/js/index.js
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/js/index.js
ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'fs' in '/Users/ben/Desktop/Work/code/ru-coding-challege/node_modules/xmlhttprequest/lib'
@ ./~/xmlhttprequest/lib/XMLHttpRequest.js 16:9-22
@ ./~/jsdom-no-contextify/lib/jsdom/browser/Window.js
@ ./~/jsdom-no-contextify/lib/jsdom/browser/index.js
@ ./~/jsdom-no-contextify/lib/jsdom.js
@ ./~/htmltojsx/src/htmltojsx.js
@ ./src/js/components/app.js
@ ./src/js/containers/app-container.js
@ ./src/js/index.js
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/js/index.js
ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'child_process' in '/Users/ben/Desktop/Work/code/ru-coding-challege/node_modules/xmlhttprequest/lib'
@ ./~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36
@ ./~/jsdom-no-contextify/lib/jsdom/browser/Window.js
@ ./~/jsdom-no-contextify/lib/jsdom/browser/index.js
@ ./~/jsdom-no-contextify/lib/jsdom.js
@ ./~/htmltojsx/src/htmltojsx.js
@ ./src/js/components/app.js
@ ./src/js/containers/app-container.js
@ ./src/js/index.js
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/js/index.js
When i opened up http://magic.reactjs.net/htmltojsx.htm, page has frozen on loading screen.
The JSX transformer is designed to take string input in a certain syntax and convert it to React syntax. However, htmltojsx.js does not work with strings: it works with a DOM tree structure. HTMLtoJSX could skip JSX syntax and instead output React.createElement
calls, eliminating the need for the JSX transformer.
Is this feasible?
Attributes with optional values, like disabled
for example, are assigned an empty string as their value making them evaluate as falsy. In HTML, if the value is omitted the attribute defaults to truthy and so should be the case in the transform.
Currently:
> converter.convert("<input disabled>")
"<input disabled="" />
"
What should happen:
> converter.convert("<input disabled>")
"<input disabled />
"
JSX properly converts attributes with no values to true
.
Originally reported by @merges at facebook/react#1529
<div className="blah"></div>
into Live JSX EditorEXPECTED RESULT
className is still className in the conversion
ACTUAL RESULT
className is converted to classname; this is invalid JSX
I tried the bookmarklet on http://cr.yp.to/ and it fails with this in the Chrome console:
Uncaught Error: Something bad happened when transforming HTML to JSX: ReferenceError: tt is not defined
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.