Process for adding JUCE hooks?

[jrlanglois]

What is needed to add hooks for doing things like creating/removing/moving/resizing windows, popup menus, custom components, and so forth?

[JoshMarler]

Hey @jrlanglois , Could you give a little more context? Are you talking about instantiating a juce:::DialogWindow from React as <Dialog /> for example?

[jrlanglois]

Well, the context is about understanding how to integrate C++ code for React code to understand. I haven't a clue what the process would be!

[nick-thompson]

Touche! This is one of those things we should document better.

Generally there are two ways to cross this C++/React boundary: you can pass C++ functions into javascript and javascript functions into C++ and call them when you need, or you can create a custom native View and render it in your React component tree.

Option 1

To establish C++ functions in your js environment, see EcmascriptEngine::registerNativeMethod. You can find some good examples here: https://github.com/nick-thompson/blueprint/blob/master/blueprint/core/blueprint_GenericEditor.cpp#L149. Then, from javascript, you can invoke those when you need. See here: https://github.com/nick-thompson/blueprint/blob/master/examples/GainPlugin/jsui/src/Slider.js#L80

In the other direction, you can invoke js functions from C++ with EcmascriptEngine::invoke if you know how to find them from the global javascript object. For example, you could write, in js:

global.myFunc = function(x) {
  console.log('Hello from js', x);
};

Then you could invoke that myFunc using EcmascriptEngine::invoke. Internally we use this trick for dispatching events from C++ into js: https://github.com/nick-thompson/blueprint/blob/master/blueprint/core/blueprint_ReactApplicationRoot.h#L90.

You can also pass javascript functions as props in a React component, and invoke that function from the native view. We have an example of this in the CanvasView: https://github.com/nick-thompson/blueprint/blob/master/blueprint/core/blueprint_CanvasView.h#L717. And from javascript we can pass a function as that onDraw property: https://github.com/nick-thompson/blueprint/blob/master/examples/GainPlugin/jsui/src/App.js#L62.

Option 2

Now the other option is to define a totally custom native view, and register it with React. To do this, you can make your own C++ class that inherits blueprint::View, and override the necessary methods. Basically, a blueprint::View is a juce::Component with some extra goodies. Check out our ImageView for a concise example: https://github.com/nick-thompson/blueprint/blob/master/blueprint/core/blueprint_ImageView.h#L35. So you could, for example, write:

class MyCoolView : public blueprint::View {
  void paint(juce::Graphics& g) override {
    // Do your own paint routine like usual.
    // You can also treat this whole class instance like your normal juce::Components. Add children, `addAndMakeVisible`,
   // `resized` and everything!
  }
}

Now once you've got your custom view implementation, you have to tell React about it so that you can use it. The end goal with this is to be able to write something like this:

function MyReactApp(props) {
  return (
    <View>
      <MyCoolView customProp="hi" otherCustomProp="bye" />
    </View>
  );
}

With this, you can write your juce::Components like normal, but use React to compose these things together into your full application. So, how do we register your C++ class with React? All you need is ReactApplicationRoot::registerViewType. So, suppose you have your ReactApplicationRoot mAppRoot member, you would just:

mAppRoot.registerViewType("MyCoolView", []() {
  // This lambda will be called when we need to construct one of your custom view instances. So, first, we make one:
  auto view = std::make_unique<MyCoolView>();

  // Then we need to construct a shadow view, which will govern the layout. 99% of the time, you can just use the
  // default shadow view:
  auto shadowView = std::make_unique<ShadowViewType>(view.get());

  // Then just return these guys as a pair
  return {std::move(view), std::move(shadowView)};
});

Boom! Now React can understand your MyCoolView! Now there's one last cosmetic issue. In React, you can always make elements with React.createElement("MyCoolView", props, children);, but you rarely see that because people are used to using JSX and writing <MyCoolView {...props}>. If you want to use JSX like that you have to make this little wrapper:

function MyCoolView(props) {
  return React.createElement("MyCoolView", props, props.children);
}

// Now I can use it elsewhere in JSX...
function MyApp(props) {
  return (<MyCoolView {...props} />);
}

Et voila!

So, that was a lot, I realize, but that lays out all your options :). Better documentation is on the way!

[jrlanglois]

Excellent, thanks! Yeah, it sounds like this outta be documented somehow. Maybe the Wiki would be useful here?

[nick-thompson]

Definitely. We've moved documentation into the repo: https://github.com/nick-thompson/blueprint/tree/master/docs, which reminds me I should probably remove the wiki to avoid confusion :)

[nick-thompson]

I just added the Discussions feature of github, which looks pretty neat! I'm going to mark this as a discussion, which will close the issue attached, but preserve the question/answer here for other users who find this helpful