Bootstrap function supports passing in custom context, but does not support adding the required childContextTypes declaration

[robertfw]

Trying something like...

Bootstrap = context.bootstrap(<Application />, {foo: "bar"});

Will result in:

Uncaught Error: Invariant Violation: Bootstrap.getChildContext(): key "foo" is not defined in childContextTypes.

I am currently just making my own bootstrap, but a simple fix would probably look something like:

bootstrap: function (rootComp, reactContext, reactContextTypes) {
    var ctx = this;

    var effectiveReactContext = reactContext || {};
    effectiveReactContext.morearty = ctx;

   var effectiveReactContextTypes = reactContextTypes || {}
   effectiveReactContextTypes.morearty = React.PropTypes.instanceOf(Context).isRequired;

    return React.createClass({
      displayName: 'Bootstrap',

      childContextTypes: effectiveReactContextTypes,

      getChildContext: function () {
        return effectiveReactContext;
      },

      componentWillMount: function () {
        ctx.init(this);
      },

      render: function () {
        return React.createFactory(rootComp)({ binding: ctx.getBinding() });
      }
    });

I forked and was going to send in a PR but couldn't figure out how to build the project to test the change.

[kapooostin]

There is a scripts section in package.json.

[Tvaroh]

@robertfw, with current React approach to context, you need to define a wrapper component with getChildContext and other methods defined. Search Morearty source for getChildContext/childContextTypes.

[robertfw]

@kapooostin thanks, I missed that.

@Tvaroh from what I see/understand, for context.bootstrap to accept additional context via reactContext, it must also add the corresponding definition in it's own childContextTypes.

I am trying a different approach with Morearty sitting behind a flux store (I am using Fluxxor, specifically), so for now this isn't an issue for me, but I wonder if others might run into this.

[Tvaroh]

@robertfw, previously, Morearty was using now deprecated React's withContext approach that was easier to use and required less ceremony. But now all this childContextTypes stuff is required.

[Kineolyan]

Hello everyone,

@robertfw since the issue is not closed yet, would it be possible to also add support for additional props to the elements ?
Something like:

bootstrap: function (rootComp, reactContext, reactContextTypes, reactProps) {
    ...
    return React.createClass({
      ...
      render: function () {
        var rootProps = reactProps || {};
        rootProps.bindind = ctx.getBinding();
        return React.createFactory(rootComp)(rootProps);
      }
    });
}

I read few thing about context, but I think that this simple use would also be interesting. Yet, I'm still new at React.
Bye

[Tvaroh]

@Kineolyan, as an alternative you can wrap your root component into another component and pass all required props right there. Does it solve your use case?

[Kineolyan]

Hello @Tvaroh, yes I updated the bootstrap method to include properties updates inside but I think I ended up with issues.
I will retry it soon and keep you updated.

[Kineolyan]

Hi @Tvaroh, yes, it is also possible to wrap the root into another component, having the proper properties. I was "polluting" this open issue to also offer my little improvement.
I effectively changed the boostrap method to include additional properties.
Thanks for previously answering.
Bye

[Tvaroh]

@Kineolyan, no problems, your input is absolutely welcome! :)