On Tue, Feb 20, 2018 at 10:18 AM, Nisala Nanayakkara <nis...@wso2.com> wrote:
> Hi Sajith, > > We need to document this (putting React as an external dependency and >> using global.React). Is there any docs ATM? >> > > No. We do not add this to document yet. We need to improve the documents > related "Creating Custom Widgets"[1] with this change. > > [1] - https://docs.wso2.com/display/SP400/Creating+Custom+Widgets > Let's add this to [1] > > > Thanks, > Nisala > > 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 >> >> >>> 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? >> >> >>> 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> >> > > > > -- > *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>
_______________________________________________ Dev mailing list Dev@wso2.org http://wso2.org/cgi-bin/mailman/listinfo/dev
