Fix - App generated by react-juce fails to render

[vvvar]

Steps to reproduce

1. Following "Integrating Your Project" guideline, generate JS project using:

   cd packages/react-juce
   npm run init -- ~/MyProject/Source/jsui

   and build it

   cd ~/MyProject/Source/jsui
   $ npm start

2. Point JUCE application to your JS build as described in guideline
3. Compile and run application

Result

Error in console:

Error: {}
    at [anon] (/Users/vladislavvoinov/libs/blueprint/react_juce/duktape/extras/console/duk_console.c:49) internal
    at error () native strict preventsyield
    at jn (main.js:5098) strict
    at [anon] (main.js:5098) strict
    at me (main.js:5098) strict
    at ye (main.js:5098) strict
    at Hr (main.js:5098) strict
    at Br (main.js:5098) strict
    at Wr (main.js:5098) strict
    at Rr (main.js:5098) strict
    at cr (main.js:5098) strict
    [...]

==== Error in JavaScript runtime. Context: ====
ctx: top=1, stack=["TypeError: undefined not callable (property 'addChild' of [object Object])\n    at [anon] (/Users/vladislavvoinov/libs/blueprint/react_juce/duktape/src-noline/duktape.c:65639) internal\n    at [anon] (main.js:5089) strict\n    at [anon] (main.js:5089) strict\n    at [anon] (main.js:5098) strict\n    at nr (main.js:5098) strict\n    at rr (main.js:5098) strict\n    at or (main.js:5098) strict\n    at Br (main.js:5098) strict\n    at Wr (main.js:5098) strict\n    at Rr (main.js:5098) strict\n    at cr (main.js:5098) strict\n    [...]"]

TypeError: undefined not callable (property 'addChild' of [object Object])
    at [anon] (/Users/vladislavvoinov/libs/blueprint/react_juce/duktape/src-noline/duktape.c:65639) internal
    at [anon] (main.js:5089) strict
    at [anon] (main.js:5089) strict
    at [anon] (main.js:5098) strict
    at nr (main.js:5098) strict
    at rr (main.js:5098) strict
    at or (main.js:5098) strict
    at Br (main.js:5098) strict
    at Wr (main.js:5098) strict
    at Rr (main.js:5098) strict
    at cr (main.js:5098) strict
    [...]

and on the screen(orange background + traces).

Fix

Turned out, template used in command npm run init -- ~/MyProject/Source/jsui has old version of react-juce, which expects "BlueprintNative" object to have a "addChild" method which is not supported:

// from the ReactApplicationRoot.cpp, no addChild provided for __BlueprintNative__
...
    void ReactApplicationRoot::bindNativeRenderingHooks()
    {
        const auto ns = "__BlueprintNative__";

        engine->registerNativeProperty(ns, juce::JSON::parse("{}"));

        engine->registerNativeMethod(ns, "invokeViewMethod", [this](const juce::var::NativeFunctionArgs& args) -> juce::var
        {
            jassert(args.numArguments >= 2);
            const ViewId       viewId = args.arguments[0];
            const juce::String method = args.arguments[1];

            const juce::var::NativeFunctionArgs methodArgs(args.thisObject, args.arguments + 2, args.numArguments - 2);
            return viewManager.invokeViewMethod(viewId, method, methodArgs);
        });

        addMethodBinding<1>(ns, "createViewInstance", &ReactApplicationRoot::createViewInstance);
        addMethodBinding<1>(ns, "createTextViewInstance", &ReactApplicationRoot::createTextViewInstance);
        addMethodBinding<3>(ns, "setViewProperty", &ReactApplicationRoot::setViewProperty);
        addMethodBinding<2>(ns, "setRawTextValue", &ReactApplicationRoot::setRawTextValue);
        addMethodBinding<3>(ns, "insertChild", &ReactApplicationRoot::insertChild);
        addMethodBinding<2>(ns, "removeChild", &ReactApplicationRoot::removeChild);
        addMethodBinding<0>(ns, "getRootInstanceId", &ReactApplicationRoot::getRootInstanceId);
        addMethodBinding<0>(ns, "resetAfterCommit", &ReactApplicationRoot::resetAfterCommit);
    }
...

[nick-thompson]

Wow, an oversight on my part! Great catch, thank you