Hi Lasantha, Could you please elaborate more on the css modules approach regarding the use of webpack config for name spacing the css classes.
So that we can provide a sample webpack config for the widget authors to refer when they are writing their widgets. Thanks, Tanya On Wed, Sep 13, 2017 at 5:26 PM, Lasantha Samarakoon <[email protected]> wrote: > Hi all, > > We looked into the Shadow DOM approach, but as Dakshika mentioned it is > only supported by limited number of browsers resulting we cannot consider > it as a feasible solution. > > There are couple of other popular approaches that we can follow in order > to achieve CSS isolation. *None of these approaches* can be enforced from > the dashboard framework level, but needs to be followed and implemented by > the widget authors (i.e. because each widget is an separate React project > with Single component). Hence what we can do is provide proper guidelines > to widget authors on how to write widgets. > > CSS in JS: > > In this approach the CSS styles are defined as JavaScript objects, and > those styles can be set to each HTML elements using the style attribute as > depicted in the following example. Once this is rendered the styles behave > similar to inline CSS styles. > Ex: > > ... > > const styles = { > button: { > /* Styles goes here... */ > } > } > > class MyComponent extends React.Component { > /* ... */ > render() {Javascript > return ( > <button style={styles.button} /> > ); > } > /* ... */ > } > > > CSS Modules: > > The other approach is using CSS modules. A CSS modules is a CSS file which > all class names are scoped locally (to single React component). This > scoping happens by suffixing each CSS class at the build time. > > So in this approach the each React component has its own CSS stylesheet > which needs to be imported. From the widget author's perspective, the > stylesheet needs to be imported and then the respective CSS classes can be > accessed as Javascript objects. Following examples depicts how this > approach looks like. > Ex: > > ... > import styles from './MyComponent.css'; > > class MyComponent extends React.component { > /* ... */ > render() { > return ( > <button className={styles.myButton} /> > ) > } > /* ... */ > } > > > > Appreciate your feedback on the best approach we can follow. Or if there > are better solutions please do suggest :) > > > Thanks, > > *Lasantha Samarakoon* | Software Engineer > WSO2, Inc. > #20, Palm Grove, Colombo 03, Sri Lanka > <https://maps.google.com/?q=20,+Palm+Grove,+Colombo+03,+Sri+Lanka&entry=gmail&source=g> > Mobile: +94 (71) 214 1576 <071%20214%201576> > Email: [email protected] > Web: www.wso2.com > > lean . enterprise . middleware > > On Fri, Sep 1, 2017 at 12:21 PM, Dakshika Jayathilaka <[email protected]> > wrote: > >> Hi All, >> >> AFAIK shadow DOM not supported by many browsers ATM. Can't we simply use >> unique ID and extend the class with ID to prevent the CSS conflicts. >> >> Regards, >> >> *Dakshika Jayathilaka* >> PMC Member & Committer of Apache Stratos >> Associate Technical Lead >> WSO2, Inc. >> lean.enterprise.middleware >> 0771100911 <077%20110%200911> >> >> On Thu, Aug 31, 2017 at 1:44 PM, Lasantha Samarakoon <[email protected]> >> wrote: >> >>> Hi all, >>> >>> In the new React based dashboard widget is defined as a another React >>> component. ATM these widgets are basic React components which extends from >>> React.Component class. >>> >>> But within these widgets we need to provide some extra capabilities for >>> widget developers such as providing mechanism to inter-communicate among >>> widgets via pub/sub, provide APIs to save widget states, etc. And also >>> there is another issue with the current implementation i.e. the CSS styles >>> embedded within a widget may conflict with styles applied to dashboard and >>> other widgets (no CSS isolation). >>> >>> *Solution:* >>> >>> As a common solution for these requirements we thought of introducing a >>> base widget class so that all the other widgets can extend from this base >>> class instead of React.Component. By introducing this base class we can >>> provide additional capabilities to widget developers. >>> >>> Ex. 1) Pub/sub >>> >>> For the Pub/sub implementation base widget component can expose methods >>> and events for widgets to use (methods for publishing/subscribing to topic). >>> >>> Ex. 2) CSS isolation >>> >>> For CSS isolation we can isolate the widget content using React shadow >>> DOM. For that we can introduce a new method called renderWidget() in the >>> widget base class and all the widgets can define the renderWidget() instead >>> of the React's render() method. Within the render() method of the widget >>> class we can invoke the renderWidget() method and wrap the resultant >>> content using React shadow DOM. High level implementation of those >>> components will be as follows. >>> >>> *Widget base component:* >>> >>> class Widget extends React.Component { >>> /* ... */ >>> render() { >>> return ( >>> <ShadowDom> >>> renderWidget() >>> </ShadowDom> >>> ); >>> } >>> /* ... */ >>> } >>> >>> >>> *Widget component:* >>> >>> class MyWidget extends Widget { >>> /* ... */ >>> renderWidget() { >>> return <MyWidgetContent />; >>> } >>> /* ... */ >>> } >>> >>> >>> Any feedback on this? >>> >>> Regards, >>> >>> *Lasantha Samarakoon* | Software Engineer >>> WSO2, Inc. >>> #20, Palm Grove, Colombo 03, Sri Lanka >>> <https://maps.google.com/?q=20,+Palm+Grove,+Colombo+03,+Sri+Lanka&entry=gmail&source=g> >>> Mobile: +94 (71) 214 1576 <+94%2071%20214%201576> >>> Email: [email protected] >>> Web: www.wso2.com >>> >>> lean . enterprise . middleware >>> >>> _______________________________________________ >>> Architecture mailing list >>> [email protected] >>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture >>> >>> >> > -- Tanya Madurapperuma Associate Technical Lead, WSO2 Inc. : wso2.com Mobile : +94718184439 Blog : http://tanyamadurapperuma.blogspot.com
_______________________________________________ Architecture mailing list [email protected] https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
