Broken example about hypernova

[goatslacker]

I'll change it to regular CJS to simplify it.

The original reasoning is that you'll most likely be doing some transpiling for the browser and probably for the server too since some features don't run on latest node. If you're transpiling then you'll probably be either using import on the server, or you'll figure out how to transpile export default into module.exports with some plugin, maybe this one?

These are too many assumptions though. :) Thanks for bringing it up.

[alexindigo]

Yep, I did transpile with babel and react + es2015 presents, this what I've got:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _hypernovaReact = require('hypernova-react');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function MyComponent(props) {
  return _react2.default.createElement(
    'div',
    null,
    'Hello, ',
    this.props.name,
    '!'
  );
}

exports.default = (0, _hypernovaReact.renderReact)('MyComponent.js', MyComponent);

And server side rendering is all I care about and I'd be getting my components in es6/jsx so compiling will be part of the deploy process.

[goatslacker]

I'm actually using just plain old CJS in the simple example since that's the quickest way to get something working:

https://github.com/airbnb/hypernova/blob/master/examples/simple/app/assets/javascripts/MyComponent.js

I'll be putting up a more complex example: routing, state management, etc soon.

[alexindigo]

One more question, about that example:

function MyComponent(props) {
  return <div>Hello, {this.props.name}!</div>;
}

You're passing props object, but using this.props. :)

[alexindigo]

Will check your example, thanks.

[goatslacker]

@alexindigo where is that at? That's a bug.

[alexindigo]

I see you fixed it here, but old version is still on npm:

[alexindigo]

Playing more and with your updated example, I noticed that onClick handler gets lost.

component:

import React from 'react';
import { renderReact } from 'hypernova-react';

function MyComponent(props) {
  return <div onClick={() => alert('Click handlers work.')}>Hello, {props.name}!</div>;
}

export default renderReact('MyComponent.js', MyComponent);

Compiled:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _hypernovaReact = require('hypernova-react');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function MyComponent(props) {
  return _react2.default.createElement(
    'div',
    { onClick: function onClick() {
        return alert('Click handlers work.');
      } },
    'Hello, ',
    props.name,
    '!'
  );
}

exports.default = (0, _hypernovaReact.renderReact)('MyComponent.js', MyComponent);

Output:

{
  "success": true,
  "error": null,
  "results": {
    "MyComponent.js": {
      "name": "MyComponent.js",
      "html": "<div data-hypernova-key=\"MyComponentjs\"><div data-reactroot=\"\" data-reactid=\"1\" data-react-checksum=\"1633367769\"><!-- react-text: 2 -->Hello, <!-- /react-text --><!-- react-text: 3 -->Alex<!-- /react-text --><!-- react-text: 4 -->!<!-- /react-text --></div></div>\n<script type=\"application/json\" data-hypernova-key=\"MyComponentjs\"><!--{\"theseAreProps\":true,\"name\":\"Alex\",\"someOtherProps\":[\"one\",\"two\",\"three\"]}--></script>",
      "meta": {},
      "duration": 9.820868,
      "statusCode": 200,
      "success": true,
      "error": null
    }
  }
}

onClick is gone, not sure if it's a feature or a bug.

[alexindigo]

And one more thing, it's not clear to me (yet),
why I need to have import { renderReact } from 'hypernova-react';
as part of the component, is it different from the built-in React method?

Thank you.

[alexindigo]

I see, it doesn't really renders it, more like priming for the hypernova usage:

function (props) {
          var contents = _server2['default'].renderToString(_react2['default'].createElement(component, props));
          return (0, _hypernova.serialize)(name, contents, props);
        }

[goatslacker]

@alexindigo ah yes, npm has the old README. When I publish a next version to npm the README will be updated there as well.

As for onClick handler being "lost", React doesn't include any event handlers in the markup itself, that all lives in the code which is also included on the page and runs on the page.

The markup that you're producing is just the server-rendered HTML that is displayed to the user. Once you're on the browser with the JS loaded the React component will become "active" which will enable any event handlers and run componentDidMount on your components.