Support React 15

[th0r]

When I migrated my universal app (browser + node) to React 15 I've noticed that I have 2 react versions in my webpack bundle.
Appeared that this package has "react": "^0.14.0" as its dep.
I tried to change it to ^0.14.0 || ^15.0.0 and everything seemed fine except this "attempted to reuse markup" error:

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) put type="password" id="0" name="current
 (server) put type="password" name="currentPasswor

Looks like this package adds some id's to form fields on client but doesn't do it on server.
And also I think react dep should be under peerDependencies to throw an error in such situations. As I can see you've already done it for tcomb-form.

Thanks!

[gcanti]

Hi @th0r, thanks for pointing out.

I tried to change it to ^0.14.0 || ^15.0.0 and everything seemed fine
And also I think react dep should be under peerDependencies

👍 I'll do that asap

except this "attempted to reuse markup" error:

Are you using ReactDOMServer.renderToString or ReactDOMServer.renderToStaticMarkup?

[th0r]

I'm using ReactDOMServer.renderToString.
Seems like it happens because of the order of input's attributes: it's type="password" id="0" name="..." on client and type, name, id on the server...
And another thing is this._reactInternalInstance._rootNodeID is null in React 15 and id's for form inputs don't have any prefix...

[th0r]

Shit, what's going on there?! I restart node server and the order of attributes is right for the first 2 (???) queries:

<input type="password" id="test2" name="password" class="form-control" value="" data-reactid="21"/>

But after the second one the order is changing (!!!):

<input type="password" name="password" id="test2" class="form-control" value="" data-reactid="21"/>

WTF?!
And the funny thing is that when I console.log props that are passed to the <input/> component in textbox.renderInput the order of them is always the same:

{ id: 'test2',
  name: 'password',
  placeholder: undefined,
  type: 'password',
  className: 'form-control',
  disabled: undefined,
  value: '',
  onChange: [Function] }

Seems like a bug in React but I'm not sure...

[gcanti]

change to ^0.14.0 || ^15.0.0
react dep under peerDependencies

Just released in https://github.com/gcanti/tcomb-form-templates-bootstrap/releases/tag/v0.2.1

For what concerns server rendering I'll investigate further tomorrow (I'm not able to reproduce the issue right now). If in react 15 this._reactInternalInstance._rootNodeID is null that's a big problem as I can no more generate solid unique ids.

[gcanti]

If in react 15 this._reactInternalInstance._rootNodeID is null that's a big problem as I can no more generate solid unique ids

Working on this... maybe I could use this._reactInternalInstance._nativeContainerInfo._idCounter instead

[gcanti]

Ok, just pushed on master (https://github.com/gcanti/tcomb-form) a possible fix. Could you please test it out in your use case?

[th0r]

Here is the issue about changing attributes order (facebook/react#6451) so it's not even React bug.

[th0r]

P.S. Node 6 doesn't have this bug.

[th0r]

Working on this... maybe I could use this._reactInternalInstance._nativeContainerInfo._idCounter instead

Could you please test it out in your use case?

IDs look fine now. Thanks a lot!

[gcanti]

Thanks for testing out, a new release is on its way...