On Tue, Feb 20, 2018 at 10:14 AM, SajithAR Ariyarathna <sajit...@wso2.com>
wrote:
>
>
> On Tue, Feb 20, 2018 at 9:47 AM, Nisala Nanayakkara <nis...@wso2.com>
> wrote:
>
>> Hi Sajith,
>>
>> No. I think what we are going to do here is to refer the 'React' which is
>> initialized by the dashboard parent app from the widget level. So setting
>> the React in global context(global.React = React) should be done in the
>> Dashboard parent app.
>>
> +1, even better
>
To be clear this *has* to be done in the parent app. To do this in widgets
would mean that React is bundled with each widget.
>
>
>> So that we can refer it from widgets by using 'externals' in the webpack
>> config.
>>
> We need to document this (putting React as an external dependency and
> using global.React). Is there any docs ATM?
>
Just read the docs. The webpack config contains some unnecessary config for
the HelloWorld.jsx. Like the html, url and css loaders. The webpack config
could be made simpler by removing these. If the user ever comes to need
additional loaders there's enough resources out there to help them figure
it out. :)
Also shall we make a widget code generator using something like yeoman ?
So we can create a configured project for the user for the widget name or
any other config they provide.
>
>> Thanks,
>> Nisala
>>
>> On Tue, Feb 20, 2018 at 9:09 AM, SajithAR Ariyarathna <sajit...@wso2.com>
>> wrote:
>>
>>> Hi Nisala,
>>>
>>> global.React = React
>>>>
>>> Can we do above in the parent Widget (https://www.npmjs.com/package
>>> /@wso2-dashboards/widget)? So that the some widget author doesn't need
>>> React as a dependency.
>>>
>>>
>>> On Thu, Feb 15, 2018 at 1:22 PM, Nisala Nanayakkara <nis...@wso2.com>
>>> wrote:
>>>
>>>> Hi Aruna,
>>>>
>>>> +1 for the approach. We have faced a similar issue in Product SP and
>>>> tested the above-mentioned fix in our local environment. It is working
>>>> fine.
>>>>
>>>> Thanks,
>>>> Nisala
>>>>
>>>> On Thu, Feb 15, 2018 at 12:04 PM, Aruna Herath <aru...@wso2.com> wrote:
>>>>
>>>>> Loading multiple copies of React in the same page creates problems
>>>>> <https://reactjs.org/warnings/refs-must-have-owner.html#multiple-copies-of-react>,
>>>>> such as errors with discriptions like "Element ref was specified as a
>>>>> string (myRefName) but no owner was set. You may have multiple copies of
>>>>> React loaded."
>>>>>
>>>>> In our dashboards, we have widgets that can be added by dragging and
>>>>> dropping. Since it should be possible to add widgets without building the
>>>>> whole app, widgets are bundled separate to the parent app. How ever this
>>>>> means react is bundled with both the widget and the parent app.
>>>>>
>>>>> Adding react as a peerDep doesn't resolve this, as peerDeps only makes
>>>>> sense if we add the widget as a dependency of the parent app and build the
>>>>> parent app only.
>>>>>
>>>>> To resolve this something we can do is to export React to the global
>>>>> scope and allow widgets to use this global reference to React. So we don't
>>>>> have to bundle React with widgets.
>>>>>
>>>>> To put React into global context in the parent dashboard app we can do,
>>>>>
>>>>> import React from 'react'
>>>>> global.React = React
>>>>>
>>>>> in the widget to use this global React ref instead of bundling use
>>>>> webpack externals <https://webpack.js.org/configuration/externals/>.
>>>>>
>>>>> webpack config should be,
>>>>>
>>>>> externals: {
>>>>> react: 'React'
>>>>> }
>>>>>
>>>>> Instead of the variable name 'React' we can even use some other name
>>>>> like 'CarbonDashboardReactGlobalRef' to avoid possible conflicts.
>>>>>
>>>>> --
>>>>> Aruna Herath
>>>>> Senior Software Engineer | WSO2
>>>>> Mobile: 0711 051 799 | 0774 569 555
>>>>>
>>>>> <http://wso2.com/signature>
>>>>>
>>>>> ___
>>>>> Dev mailing list
>>>>> Dev@wso2.org
>>>>> http://wso2.org/cgi-bin/mailman/listinfo/dev
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> *Nisala Niroshana Nanayakkara,*
>>>> Software Engineer
>>>> Mobile | +94 717600022
>>>> WSO2 Inc | http://wso2.com/
>>>>
>>>> ___
>>>> Dev mailing list
>>>> Dev@wso2.org
>>>> http://wso2.org/cgi-bin/mailman/listinfo/dev
>>>>
>>>>
>>>
>>>
>>> --
>>> Sajith Janaprasad Ariyarathna
>>> Senior Software Engineer; WSO2, Inc.; http://wso2.com/
>>> <https://wso2.com/signature>
>>>
>>
>>
>>
>> --
>> *Nisala Niroshana Nanayakkara,*
>> Software Engineer
>> Mobile | +94 717600022
>> WSO2 Inc | http://wso2.com/
>>
>
>
>
> --
> Sajith Janaprasad Ariyarathna
> Senior Software Engineer; WSO2, Inc.; http://wso2.com/
> <https://wso2.com/signature>
>
--
Aruna Herath
Senior Software Engineer | WSO2
Mobile: 0711 051 799 | 0774 569 555
<http://wso2.com/signature>
___
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev
