Support XUL

[jlongster]

I'm filing this issue because we are seriously looking at using React in Firefox devtools, and I'm starting to work on migrating a few of our components. XUL has weird constraints on the format of the DOM in edge cases, and I hope that somehow we can make it work. Long-term we want to migrate away from XUL but that's not an option for a while.

React.createElement works very nicely to create all the custom XUL elements.

The first thing I ran into is boolean attributes. In XUL, you always have to specify a property value, so <foo hidden> is invalid, it must be <foo hidden="true">. I fixed it for the hidden attribute by changing

hidden: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,

to just

hidden: MUST_USE_ATTRIBUTE,

in the HTMLDOMPropertyConfig option. I foresee having to customize this object more. An interesting solution would be a private API to override this config somehow. I'm not well along enough yet to suggest a real solution, but I want to document things as I hit them.

[sophiebits]

We generate <input disabled=""> currently which works in both HTML5 and XHTML. Does that work or does the value need to be 'true'?

Right now React probably won't be usable without forking the property stuff (sorry!) but hopefully there's not too much else. I want to support SVG better soon and maybe improved XUL support can come with that too.

[jlongster]

Honestly I don't know XUL too well, an empty string might work. When I tried creating the following element:

          React.createElement("toolbarbutton", {
            id: "pretty-print",
            className: "devtools-toolbarbutton",
            tooltiptext: "prettyPrint",
            command: "prettyPrintCommand",
            hidden: "true"
          })

It generated markup that had an empty hidden attribute (i.e. <toolbarbutton ... hidden>. I think an empty string would be fine.

I'm not too worried about having to maintain a patch on top of React to make it XUL compatible. We want to migrate off XUL as soon as we can anyway, though that probably will take a while...

[sophiebits]

Hm, I thought it should work:

react/src/renderers/dom/shared/DOMPropertyOperations.js

Lines 123 to 126 in d67f23f

	if (propertyInfo.hasBooleanValue ||
	(propertyInfo.hasOverloadedBooleanValue && value === true)) {
	return attributeName + '=""';
	}

[jlongster]

Oh, I'm using v0.13.3 which is the latest downloadable version from the site. What version should I try? (that version does not do that)

[sophiebits]

Oh, I guess that's not in a release yet. http://react.zpao.com/builds/master/latest/ has builds from master if you're feeling adventurous, or you can wait for 0.14 in about a month.

[jlongster]

The question is if I trust builds from @zpao :) (I kid)

[zpao]

I'm definitely sneaking exploits in there to get access to the machines with Firefox code.

[jlongster]

So far I've had to add the following attributes which are supported in XUL:

• flex
• command

Otherwise these attributes are stripped from the output when rendering a component with them (like Foo({ command: "togglePretty" })). I'm sure there are others, and I'll try to make a complete list at some point.

I'm sure any work for Web Components compatibility would help here too, but I don't really care about Web Components so I'm not going to bet on it. Still happy to just have a small patch on top of React.

EDIT: @zpao OUR SOURCES HAVE BEEN HACKED

[jlongster]

I just have to add: thank you thank you for the superb lifecycle methods. I'm having resounding success wrapping our current components into React ones, even complicated things like a big list of items. Not really related here, but an example: https://gist.github.com/jlongster/f50f88da616a4d7b3032

[sophiebits]

Neat technique.

[jlongster]

React 0.14 essentially removes all these problems. Now my only problem is #5856