├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── docs ├── Contribute.md ├── DefiningComponents.md ├── GettingStarted.md ├── InteropWithThirdParty.md ├── KnownIssues.md ├── Migration.md ├── Navigation.md ├── RefsToComponents.md ├── ReleaseProcess.md ├── SriModules.md ├── StatelessFunctionComponents.md ├── VDOM.md ├── WebRouter.md ├── drawernav.gif ├── moviesapp.gif ├── sri.png ├── stacknav.gif ├── tabnav.gif ├── web-basic.gif ├── web-mui.gif └── web-relay.gif └── sri.png /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-vendored 2 | 3 | *.java linguist-vendored 4 | 5 | *.m linguist-vendored -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.class 2 | *.log 3 | 4 | # sbt specific 5 | .cache/ 6 | .history/ 7 | .lib/ 8 | dist/* 9 | target/ 10 | lib_managed/ 11 | src_managed/ 12 | project/boot/ 13 | project/plugins/project/ 14 | 15 | # Scala-IDE specific 16 | .scala_dependencies 17 | .worksheet 18 | 19 | #Intellij 20 | .idea 21 | *.iml 22 | 23 | #mac 24 | .DS_Store 25 | 26 | 27 | 28 | #node 29 | 30 | node_modules/ 31 | npm-debug.log 32 | 33 | 34 | #project 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sri 2 | 3 | [![Join the chat at https://gitter.im/chandu0101/sri](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/scalajs-react-interface/sri?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | Sri (Scalajs React interface) is a scalajs library to build truly native cross platform (mobile (ios and android) and web) applications. It is based on [reactjs](http://facebook.github.io/react/) and [react-native](https://facebook.github.io/react-native/), so you must be familiar with them in order to use this library. 6 | 7 | 8 | ![sri](sri.png) 9 | 10 | 11 | ## Code of Conduct 12 | 13 | If you want live happily in sri org, you need to adapt to two simple things `diversity` and `equality`. 14 | 15 | ***Diversity***: 16 | 17 | 1) Realise the fact that not every human Mother Tongue is English. 18 | 19 | 2) If you find someones English is not good,try to help that person or just ignore and do your work. 20 | 21 | 22 | ***Equality***: 23 | 24 | 1) What ever tag(CEO,VP,Lead,Sr.Dev,Architect,Jr.Dev,..) you have before your name,you're just another human being on this planet. 25 | 26 | 2) If you find someone doing wrong technically,try fixing it by sending a PR/guide constructively or just ignore and do your work. 27 | 28 | 29 | # Docs 30 | 31 | - [Getting Started](./docs/GettingStarted.md) 32 | - [Sri Modules](./docs/SriModules.md) 33 | - [Defining Components](./docs/DefiningComponents.md) 34 | - [Functions as Components](./docs/StatelessFunctionComponents.md) 35 | - [VDOM](./docs/VDOM.md) 36 | - [Navigation](./docs/Navigation.md) 37 | - [Web Router](./docs/WebRouter.md) 38 | - [Refs To Components](./docs/RefsToComponents.md) 39 | - [Interop With ThirdParty Components](./docs/InteropWithThirdParty.md) 40 | - [Contribute](./docs/Contribute.md) 41 | 42 | 43 | # Community 44 | 45 | If you have any question regarding sri , create an issue [here](https://github.com/scalajs-react-interface/discuss/issues) -------------------------------------------------------------------------------- /docs/Contribute.md: -------------------------------------------------------------------------------- 1 | # Contribute 2 | 3 | 1) Check out [Sri Modules](SriModules.md) for better understanding of internals. 4 | 5 | 2) Sri uses [scalafmt](http://scalameta.org/scalafmt/) default config. 6 | 7 | 3) Check out [Enhancements](https://github.com/scalajs-react-interface/incubator/issues) and [Bugs](https://github.com/scalajs-react-interface/sri/issues) 8 | 9 | 10 | ### Maintainers Note 11 | 12 | 1) Whenever you create a release tag use the current date in your time zone (eg: Today is 2017.5.5(YYYY-m-d) here, release tag : v2017.5.5) 13 | 14 | 2) If you have to create more release tags in a single day then go with `v2017.5.5.x` where x is positive integer starts from 1 and increment by step 1. 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/DefiningComponents.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | #### Component with Props and No State 4 | 5 | 6 | ```scala 7 | 8 | @ScalaJSDefined 9 | class HelloMessage extends ReactComponentP[HelloMessage.Props] { 10 | def render() = { 11 | Text(s"Hello ${props.name}") 12 | } 13 | } 14 | 15 | object HelloMessage { 16 | case class Props(name : String) 17 | def apply(props:Props) = CreateElement[HelloMessage](props) 18 | } 19 | 20 | //usage 21 | HelloMessage(HelloMessage.Props("Scala.js")) 22 | ``` 23 | 24 | 25 | #### Component with State and No Props 26 | 27 | 28 | ```scala 29 | @ScalaJSDefined 30 | class HelloMessage extends ReactComponentS[HelloMessage.State] { 31 | 32 | inititalState(State("initial")) 33 | 34 | def render() = { 35 | Text(s"Hello ${state.name}") 36 | } 37 | 38 | } 39 | 40 | object HelloMessage { 41 | case class State(name:String) 42 | def apply() = CreateElementNoProps[HelloMessage]() 43 | } 44 | 45 | //usage 46 | 47 | HelloMessage() 48 | 49 | ``` 50 | 51 | 52 | #### Component with Props and State 53 | 54 | 55 | ```scala 56 | @ScalaJSDefined 57 | class Counter extends ReactComponent[Counter.Props,Counter.State] { 58 | initialState(State(count= 0)) 59 | def render() = { 60 | View( 61 | Text(s"Hello ${props.name}"), 62 | Text(onPress = tick _)(s"Clicks: ${state.count}") 63 | ) 64 | } 65 | def tick() = { 66 | setState((state:State) => state.copy(count = state.count + 1)) 67 | } 68 | } 69 | 70 | object Counter { 71 | case class Props(name: String) 72 | case class State(count: Int) 73 | 74 | def apply(props:Props) = CreateElement[Counter](props) 75 | } 76 | 77 | //usage 78 | HelloMessage(HelloMessage.Props("Scala.js")) 79 | ``` 80 | 81 | ***Note:*** If you want to define initialState from Props you need to place `initialState(State(count= props.count))` call inside `componentWillMount` life cycle method because props are not available in primary constructor, that being said [Props in initialState is an AntiPattern](http://reactjs.cn/react/tips/props-in-getInitialState-as-anti-pattern.html), 82 | if you're using data management libraries like [diode](https://github.com/suzaku-io/diode) or [redux](http://redux.js.org/docs/introduction/) or [relay](https://facebook.github.io/relay/) you don't come across this situation. 83 | 84 | #### Component with No State and No Props 85 | 86 | 87 | ```scala 88 | @ScalaJSDefined 89 | class HelloMessage extends ReactComponentNoPS { 90 | 91 | def render() = { 92 | Text(s"Hello Scala.js") 93 | } 94 | 95 | } 96 | 97 | object HelloMessage { 98 | def apply() = CreateElementNoProps[HelloMessage]() 99 | } 100 | 101 | //usage 102 | HelloMessage() 103 | 104 | ``` 105 | 106 | #### Component with Children 107 | 108 | If any of your components have children just use `WithChildren` variants of `CreateElement` 109 | 110 | ```scala 111 | @ScalaJSDefined 112 | class HelloMessage extends ReactComponentP[HelloMessage.Props] { 113 | def render() = { 114 | Text(s"Hello ${props.name}") 115 | } 116 | } 117 | 118 | object HelloMessage { 119 | case class Props(name : String) 120 | def apply(props:Props)(children:ReactNode*) = CreateElementWithChildren[HelloMessage](props,children= children.toJSArray) 121 | } 122 | 123 | //usage 124 | 125 | HelloMessage(HelloMessage.Props("Scala.js"))("child1","child2") 126 | ``` 127 | 128 | 129 | ```scala 130 | @ScalaJSDefined 131 | class HelloMessage extends ReactComponentS[HelloMessage.State] { 132 | 133 | inititalState(State("initial")) 134 | 135 | def render() = { 136 | Text(s"Hello ${state.name}") 137 | } 138 | 139 | } 140 | 141 | object HelloMessage { 142 | case class State(name:String) 143 | def apply(key:String)(children:ReactNode*) = CreateElementNoPropsWithChildren[HelloMessage](key = key,children = children.toJSArray) 144 | } 145 | 146 | //usage 147 | 148 | HelloMessage(key="1")("child1","child2") 149 | 150 | ``` 151 | 152 | 153 | ***Note:*** all ReactComponent`..` are pure components,meaning they will be updated only when reference of `Props/State` changed,If your component has children make sure that all children also pure components. for some reason if you want to use `mutable` classes as props/state then use not pure counter parts. 154 | 155 | `ReactComponentP` -> `ReactComponentNotPureP` 156 | 157 | `ReactComponentS` -> `ReactComponentNotPureS` 158 | 159 | `ReactComponent` -> `ReactComponentNotPure` 160 | 161 | `Hint: @ScalaJSDefined annotation is not needed in scala.js 1.0 :) ` 162 | -------------------------------------------------------------------------------- /docs/GettingStarted.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | All templates are based on Giter8, make sure you installed sbt 0.13.16 or above on your machine. 4 | 5 | Which app you want to build ? 6 | 7 | - [Native Mobile App](#native-mobile-app) 8 | - [Web App](#web-app) 9 | - [Web And Mobile App coming soon](#web-and-mobile-app) 10 | 11 | 12 | 13 | 14 | # Native Mobile App 15 | 16 | Make sure you have your environment setup : https://facebook.github.io/react-native/docs/getting-started.html (one time process) 17 | 18 | 19 | - [App With Stack Navigation](#stack-navigation) 20 | - [App With Tab Navigation](#tab-navigation) 21 | - [App With Drawer Navigation](#drawer-navigation) 22 | 23 | 24 | #### Stack Navigation 25 | 26 | ![stacknav](stacknav.gif) 27 | 28 | 29 | ```scala 30 | 31 | sbt new scalajs-react-interface/mobile.g8 32 | 33 | //it will ask for your project name and package, enter them and continue 34 | 35 | // if all goes well it will create a new folder with name you specified above 36 | 37 | cd project-name//name you specified above 38 | 39 | react-native init project-name//make sure you enter same name as above 40 | 41 | //it will create new folder with `project-name` , your dir will be like `project-name`/`project-name`. 42 | 43 | //copy android and ios folders from inner `project-name` folder to outer `project-name` folder and then delete inner `project-name` folder. 44 | 45 | npm install or yarn install 46 | 47 | // start server 48 | 49 | npm start 50 | 51 | // Start Development 52 | 53 | ``` 54 | [Sbt Tasks](#mobile-development) 55 | 56 | 57 | #### Tab Navigation 58 | 59 | ![stacknav](tabnav.gif) 60 | 61 | 62 | ```scala 63 | 64 | sbt new scalajs-react-interface/mobile.g8 -b tab-navigation 65 | 66 | //it will ask for your project name and package, enter them and continue 67 | 68 | // if all goes well it will create a new folder with name you specified above 69 | 70 | cd project-name//name you specified above 71 | 72 | react-native init project-name//make sure you enter same name as above 73 | 74 | //it will create new folder with `project-name` , your dir will be like `project-name`/`project-name`. 75 | 76 | //copy android and ios folders from inner `project-name` folder to outer `project-name` folder and then delete inner `project-name` folder. 77 | 78 | npm install or yarn install 79 | 80 | react-native link react-native-vector-icons 81 | 82 | // start server 83 | 84 | npm start 85 | 86 | // Start Development 87 | 88 | ``` 89 | [Sbt Tasks](#mobile-development) 90 | 91 | 92 | #### Drawer Navigation 93 | 94 | ![stacknav](drawernav.gif) 95 | 96 | 97 | ```scala 98 | 99 | sbt new scalajs-react-interface/mobile.g8 -b drawer-navigation 100 | 101 | //it will ask for your project name and package, enter them and continue 102 | 103 | // if all goes well it will create a new folder with name you specified above 104 | 105 | cd project-name//name you specified above 106 | 107 | react-native init project-name//make sure you enter same name as above 108 | 109 | //it will create new folder with `project-name` , your dir will be like `project-name`/`project-name`. 110 | 111 | //copy android and ios folders from inner `project-name` folder to outer `project-name` folder and then delete inner `project-name` folder. 112 | 113 | npm install or yarn install 114 | 115 | react-native link react-native-vector-icons 116 | 117 | // start server 118 | 119 | npm start 120 | 121 | // Start Development 122 | 123 | ``` 124 | [Sbt Tasks](#mobile-development) 125 | 126 | 127 | 128 | 129 | 130 | #### Mobile Development 131 | 132 | ***iOS*** : 133 | 134 | ```sh 135 | sbt ~ios:dev // for devlopment 136 | sbt ios:prod // for production 137 | // open new terminal 138 | react-native run-ios 139 | ``` 140 | 141 | ***Android*** : 142 | 143 | ```sh 144 | sbt ~android:dev // for devlopment 145 | sbt android:prod // for production 146 | // start your android emulator / connect ur device 147 | // open new terminal 148 | react-native run-android 149 | ``` 150 | 151 | # Web App 152 | 153 | - [Web Basic(vdom,css,router)](#web-basic) 154 | - [Web MaterialUI(vdom,css,router,material-ui)](#web-materialui) 155 | - [Web RelayGraphcool(vdom,css,router,relay,graphcool)](#web-relay-graphcool) 156 | 157 | #### Web Basic 158 | 159 | ![Demo](web-basic.gif) 160 | 161 | 162 | ```scala 163 | 164 | git clone https://github.com/scalajs-react-interface/web-examples 165 | 166 | cd basic 167 | 168 | // follow instructions in README.md 169 | 170 | ``` 171 | 172 | #### Web MaterialUI 173 | 174 | ![Demo](web-mui.gif) 175 | 176 | 177 | ```scala 178 | 179 | git clone https://github.com/scalajs-react-interface/web-examples 180 | 181 | cd materialui 182 | 183 | // follow instructions in README.md 184 | 185 | ``` 186 | 187 | #### Web Relay Graphcool 188 | 189 | ![Demo](web-relay.gif) 190 | 191 | 192 | ```scala 193 | 194 | git clone https://github.com/scalajs-react-interface/web-examples 195 | 196 | cd relay-graphcool 197 | 198 | // follow instructions in README.md 199 | 200 | ``` 201 | 202 | 203 | # Web And Mobile App 204 | 205 | coming soon.. 206 | 207 | -------------------------------------------------------------------------------- /docs/InteropWithThirdParty.md: -------------------------------------------------------------------------------- 1 | # Interop With Third Party Components 2 | 3 | If you want to use a reactjs component in your project then you must define a wrapper for js component. 4 | 5 | ## Example 6 | Let say we have a JS component , Name : AwesomeJSComp , props .. 7 | ```js 8 | propTypes: { 9 | numberOfLines: React.PropTypes.number.isRequired, 10 | onPress: React.PropTypes.func, // function with zero args 11 | suppressHighlighting: React.PropTypes.bool, 12 | testID: React.PropTypes.string, 13 | } 14 | 15 | ``` 16 | 17 | 18 | ### Using FunctionObjectMacro 19 | 20 | 21 | ```scala 22 | 23 | import sri.macros.{ 24 | exclude, 25 | FunctionObjectMacro, 26 | OptDefault => NoValue, 27 | OptionalParam => U 28 | } 29 | import sri.core.{CreateElementJSNoInline, ReactElement, ReactNode} 30 | import scala.scalajs.js.JSConverters.genTravConvertible2JSRichGenTrav 31 | import scala.scalajs.js 32 | import scala.scalajs.js.annotation.{JSImport} 33 | import sri.core.{JSComponent} 34 | 35 | //first import the js component lib , let say if jslib available as npm package `awesome-js-comp` 36 | 37 | @js.native 38 | @JSImport("awesome-js-comp", JSImport.Default) 39 | object AwesomeJSComp extends JSComponent[js.Object] 40 | 41 | 42 | object AwesomeJS { 43 | @inline 44 | def apply(numberOfLines: Int, 45 | onPress: U[() => Unit] = NoValue, 46 | suppressHighlighting: U[Boolean] = NoValue, 47 | @exclude key: String | Int = null, 48 | @exclude ref: js.Function1[AwesomeJSComp.type, Unit] = null, 49 | testID: U[String] = NoValue) 50 | : ReactElement { type Instance = AwesomeJSComp.type } = { 51 | 52 | val props = FunctionObjectMacro() 53 | CreateElementJSNoInline[AwesomeJSComp.type](AwesomeJSComp, props, key, ref) 54 | } 55 | 56 | } 57 | 58 | //if component accepts children 59 | 60 | object AwesomeJS { 61 | @inline 62 | def apply(numberOfLines: Int, 63 | onPress: U[() => Unit] = NoValue, 64 | suppressHighlighting: U[Boolean] = NoValue, 65 | @exclude key: String | Int = null, 66 | @exclude ref: js.Function1[AwesomeJSComp.type, Unit] = null, 67 | testID: U[String] = NoValue)(children: ReactNode*) 68 | : ReactElement { type Instance = AwesomeJSComp.type } = { 69 | 70 | val props = FunctionObjectMacro() 71 | CreateElementJSNoInline[AwesomeJSComp.type](AwesomeJSComp, 72 | props, 73 | key, 74 | ref, 75 | children.toJSArray) 76 | } 77 | 78 | } 79 | 80 | //usage 81 | 82 | AwesomeJS(numberOfLines = 4,testID = "hello"); 83 | 84 | ``` 85 | 86 | ***Note:*** If you're wondering why we're using `OptionalParam` instead of `js.UndefOr` check this : https://github.com/scala-js/scala-js/issues/2714 87 | 88 | ### Using ScalaJSDefined traits 89 | 90 | ```scala 91 | 92 | import sri.core.{CreateElementJSNoInline, ReactElement, ReactNode} 93 | import sri.macros.exclude 94 | import scala.scalajs.js.JSConverters.genTravConvertible2JSRichGenTrav 95 | import scala.scalajs.js 96 | import scala.scalajs.js.{UndefOr => U,undefined} 97 | import sri.core.{JSComponent} 98 | import scala.scalajs.js.annotation.{JSImport, ScalaJSDefined} 99 | import scala.scalajs.js.| 100 | 101 | //first import the js component lib , let say if jslib available as npm package `awesome-js-comp` 102 | 103 | @js.native 104 | @JSImport("awesome-js-comp", JSImport.Default) 105 | object AwesomeJSComp extends JSComponent[AwesomeJSCompProps] 106 | 107 | 108 | @ScalaJSDefined 109 | trait AwesomeJSCompProps extends js.Object { 110 | val numberOfLines: Int 111 | val onPress: U[() => Unit] = undefined 112 | val suppressHighlighting: U[Boolean] = undefined 113 | val testID: U[String] = undefined 114 | 115 | } 116 | 117 | object AwesomeJS { 118 | @inline 119 | def apply(props: AwesomeJSCompProps, 120 | @exclude key: String | Int = null, 121 | @exclude ref: js.Function1[AwesomeJSComp.type, Unit] = null) 122 | : ReactElement { type Instance = AwesomeJSComp.type } = { 123 | CreateElementJSNoInline[AwesomeJSComp.type](AwesomeJSComp, 124 | props, 125 | key, 126 | ref) 127 | } 128 | 129 | } 130 | 131 | //if component accepts children 132 | object AwesomeJS { 133 | @inline 134 | def apply(props: AwesomeJSCompProps, 135 | @exclude key: String | Int = null, 136 | @exclude ref: js.Function1[AwesomeJSComp.type, Unit] = null)( 137 | children: ReactNode*) 138 | : ReactElement { type Instance = AwesomeJSComp.type } = { 139 | CreateElementJSNoInline[AwesomeJSComp.type](AwesomeJSComp, 140 | props, 141 | key, 142 | ref, 143 | children.toJSArray) 144 | } 145 | 146 | } 147 | 148 | 149 | //usage 150 | 151 | AwesomeJS(props = new AwesomeJSCompProps { 152 | override val numberOfLines: Int = 2 153 | override val testID: U[String] = "hello" 154 | }) 155 | 156 | 157 | ``` 158 | 159 | 160 | ## Real World Examples 161 | 162 | https://github.com/scalajs-react-interface/universal/blob/master/src/main/scala/sri/universal/components/UniversalComponents.scala -------------------------------------------------------------------------------- /docs/KnownIssues.md: -------------------------------------------------------------------------------- 1 | # Known Issues 2 | 3 | -------------------------------------------------------------------------------- /docs/Migration.md: -------------------------------------------------------------------------------- 1 | # Migration 2 | 3 | Upgrading from old sri(0.x.x) to new sri(2017.x.x) 4 | 5 | 6 | 1) `ReactComponent` renamed to `Component` check out [this](DefiningComponents.md) guide. 7 | 8 | 2) all `setState` calls now accepts function only 9 | 10 | ```scala 11 | //old 12 | setState(state.copy(...)) 13 | 14 | //new 15 | setState((state:State) => state.copy(...)) 16 | ``` 17 | 18 | 3) Old WebRouter is deprecated , for now copy old webrouter files to your project until some one work on https://github.com/scalajs-react-interface/incubator/issues/3 19 | 20 | 21 | 4) all primitives(dom tags and react-native basics) comes with limited set of props, More Info : https://github.com/chandu0101/sri/issues/56#issuecomment-281671656 22 | 23 | 5) removed packages core.all , mobile.all, universal.all, web.all 24 | 25 | ```scala 26 | 27 | //old 28 | import sri.core.all._ 29 | 30 | //new 31 | 32 | import sri.core._ 33 | ``` -------------------------------------------------------------------------------- /docs/Navigation.md: -------------------------------------------------------------------------------- 1 | # Navigation 2 | 3 | Sri navigation module is wrapper for [react-navigation](https://reactnavigation.org/) , make sure you go through the docs of react-navigation before using it. 4 | 5 | #### Example : 6 | 7 | ***Javascript*** 8 | 9 | ```javascript 10 | 11 | class MyHomeScreen extends React.Component { 12 | static navigationOptions = { 13 | title: 'Home', 14 | } 15 | 16 | render() { 17 | return ( 18 |