|
1 | | -scalajs-react [neo] |
| 1 | +scalajs-react |
2 | 2 | ============= |
3 | 3 |
|
4 | 4 | [](https://travis-ci.org/japgolly/scalajs-react) |
5 | 5 | [](https://gitter.im/japgolly/scalajs-react?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) |
6 | 6 |
|
7 | | -This branch is where a [redesign](https://github.com/japgolly/scalajs-react/issues/259) is currently taking place. |
8 | | -At the moment, it's all in a new module called [`neo`](neo/src). |
9 | | - |
10 | | -The v0.x.y series started as an experiment and grew organically from there. |
11 | | -As such, it has accrued a number of annoyances and obstacles to desired improvements, |
12 | | -that can now only be solved by a redesign. |
13 | | -This begins a v1.x.y series and will begin with **v1.0.0**. |
14 | | - |
15 | | -Contributions welcome. |
16 | | - |
17 | | -# Done |
18 | | - |
19 | | -- Component interfaces that allow any kind (JS, Scala, Clojure) of React component to be used generically. |
20 | | - |
21 | | - This is really awesome because it allows a component to declare access to a subset of any component's state as long as it is a certain type, then satisfy it using Monocle to zoom in and/or transform along the way, even if its a JS component. |
22 | | - |
23 | | - - Allow (any kind of) constructor transforms. |
24 | | - - Allow (any kind of) props transforms. |
25 | | - - Allow (any kind of) state transforms. |
26 | | - |
27 | | -- Better Constructors |
28 | | - - Agnostic to underlying implementation of component (JS, Scala, etc.) |
29 | | - - Don't ask for non-existent or singleton props. |
30 | | - - Depending on component, either don't ask for children, or ensure children are specified. |
31 | | - - Allows possibility of even more children type-safety such as requiring exactly one child. |
32 | | - - Input can be transformed. |
33 | | - - Output can be transformed. |
34 | | - - Additional raw React props fields can be configured. |
35 | | - |
36 | | -- More transparency. No more hidden magic. |
37 | | - - A separate `.raw` package that contains the React JS facade (without any Scala niceness). |
38 | | - - All components expose their raw JS types. |
39 | | - - All Scala components expose their underlying JS components. |
40 | | - - It should be trivial to reuse `scalajs-react` components in other React libraries, and vice-versa. |
41 | | - |
42 | | -- `JsComponent` - Import React components written in pure JS. |
43 | | - ([test JS](neo/src/test/resources/component-es3.js) & [test Scala](neo/src/test/scala/japgolly/scalajs/react/JsComponentTest.scala)) |
44 | | - |
45 | | - Importing a JS component is now a one-liner. |
46 | | - ```scala |
47 | | - val Component = JsComponent[JsProps, Children.None, JsState]("ReactXYZ") |
48 | | - ``` |
49 | | - |
50 | | -- Type-safety for JS components that expose ad-hoc methods once mounted. |
51 | | - You can now specify the JS facade. |
52 | | - |
53 | | -- `JsFnComponent` - Import React functional components written in pure JS. |
54 | | - ([test JS](neo/src/test/resources/component-fn.js) & [test Scala](neo/src/test/scala/japgolly/scalajs/react/JsFnComponentTest.scala)) |
55 | | - |
56 | | -- `ScalaComponent` - Create React components in Scala. |
57 | | - |
58 | | -- `ScalaFnComponent` - Create React functional components in Scala. |
59 | | - |
60 | | -- Safe `PropsChildren` type and usage. |
61 | | - |
62 | | -- Consistency wrt wrapping typed effects. Eg. `BackendScope.getDOMNode` should be `Callback`/direct just like everything else. |
63 | | - |
64 | | -- Virtual DOM major revision. |
65 | | - - Rewrite and simplify types. Now easier to work with internally. This no longer bears any resemblence to Scalatags and certainly can no longer be considered a fork. Scalatags was tremedously helpful in this journey so if you have a chance, give @lihaoyi a big thanks for his work. |
66 | | - - Improved efficiency for vdom representation and creation. |
67 | | - - Add type-safety between attributes/styles and values. Eg `^.disabled := 7` no longer compiles. |
68 | | - - Event attributes now know which types of events they will generate. Eg `^.onMouseDown` knows to expect a mouse event and won't compile if you pass it a drag event handler. |
69 | | - - React node array handling is safer, more efficient and has its own type with a nicer interface. |
70 | | - - No more automatic expansion of `Seq`s. Either use `seq: _*` yourself or turn it into a `ReactArray`. |
71 | | - - Optional vdom supported when enclosed in `Option` or `js.UndefOr`. |
72 | | - - All vdom now has `.when(condition)` and `.unless(condition)` when will omit it unless a given condition is met. This replaces the `cond ?= (vdom)` syntax. |
73 | | - - All vdom composes the same way, call `.apply` on what you have and specify more. This was usually the case but there were a few corner cases that had differences. |
74 | | - - Easier and clearer access to SVG VDOM. |
75 | | - - Manually-specified style objects now compose with other style attributes. |
76 | | - |
77 | | - ``` |
78 | | - ReactArray(...) |
79 | | - Seq(...).toReactArray |
80 | | - Array(...).toReactArray |
81 | | -
|
82 | | - Attr :=? Option(Value) |
83 | | - Option(Tag | Attr | Component | Value | TagMod) |
84 | | - (Tag | Attr | Component | Value | TagMod).when(Boolean) |
85 | | - (Tag | Attr | Component | Value | TagMod).unless(Boolean) |
86 | | - ``` |
87 | | - |
88 | | -- Component (and constituent) mapping. |
89 | | - - Can map props & state (at top-level, and in Unmounted & Mounted too). |
90 | | - - Can map the constructor type. |
91 | | - - Can map next stage (i.e. Component→Unmounted and Unmounted→Mounted). |
92 | | - - Can change effect type in Mounted. |
93 | | - |
94 | | -- Refs. |
95 | | - - Remove String-based refs. React.JS has deprecated these and will remove them. |
96 | | - - Type-safe refs to HTML/SVG tags that preserve the DOM type. |
97 | | - - Type-safe refs to Scala components. |
98 | | - - Type-safe refs to JS components. |
99 | | - - Prevent refs to functional components. |
100 | | - |
101 | | -- Revise & integrate the `extra` module. |
102 | | -- Revise & integrate the Scalaz module. |
103 | | -- Revise & integrate the Monocle module. |
104 | | -- Revise & integrate the `test` module. |
105 | | -- StateSnapshot + lens helper (#293) |
106 | | -- Update the `gh-pages` module. |
107 | | -- over-zealous inlining (#324) |
108 | | - |
109 | | -# Pending |
110 | | - |
111 | | -- Update doc. |
112 | | - |
113 | | -# Maybe |
114 | | - |
115 | | -- Static and dynamic props (for Scala components). |
116 | | - Probably not as a normal Scala function is all that's really needed. |
117 | | - There's no big need to avoid creating a new component per staic data. |
118 | | - See also #180 |
119 | | - |
120 | | -- Anything ES6-related should be easy to add now. Please contribute if interested. |
121 | | - - Facades over ES6-based JS classes. (I tried briefly but didn't get the JS working.) |
122 | | - - Scala-based ES6-based classes. Because it's important to some people. (Apparently its faster but I'm yet to see any benchmarks or other evidence supporting this.) |
123 | | - - Once the above works, it would be good to be able to choose a backend type for `ScalaComponent.build`. |
124 | | - |
125 | | -# Release note / migration reminders |
126 | | - |
127 | | -Refactored: |
128 | | - * ExternalVar/ReusableVar -> StateSnapshot |
129 | | - * ReusableVal/ReusableVal2 -> Reusable |
130 | | - * ReusableFn(x).{set,mod}State -> ReusableFn.state(x).{set,mod} |
131 | | - * Listenable.* |
132 | | - * CompStatee -> StateAccess |
133 | | - * `_ChangeData` -> `SimEvent._` |
134 | | - * events |
135 | | - * `[test]` ComponentTester -> RTU.{withRenderedIntoDocument,modifyProps,replaceProps} |
136 | | - * `[test]` WithExternalCompStateAccess -> ReactTestVar#stateAccess |
137 | | - |
138 | | -* Update in ScalaDoc: |
139 | | - * ReactComponentB |
140 | | - |
141 | | -* Moved into extra: |
142 | | - * domCast |
143 | | - * domAsHtml |
144 | | - * domToHtml |
145 | | - |
146 | | -* Removed completely: |
147 | | - * tryFocus |
148 | | - * tryTo |
149 | | - * {set,mod}StateCB |
150 | | - * CallbackB |
151 | | - * ReusableFn#asVar{,R} |
152 | | - * ReusableFn#fnA, ReusableFnA |
153 | | - |
154 | | -* VDOM |
155 | | - * `^.dangerouslySetInnerHtml := x` instead of `^.dangerouslySetInnerHtml(x)`. |
156 | | - * Import `vdom.html_<^._` instead of `vdom.prefix_<^._`. |
157 | | - * `?=` deprecated in favour of `when`/`unless`. |
158 | | - * Change `:=` to `:=?` when the right-hand side is an `Option`. |
159 | | - * TagMod: `+` and `compose` replaced with `apply(TagMod*)` just like tags. |
160 | | - * Use `VdomAttr[A]("")` in place of `"".reactAttr`. |
161 | | - * Use `VdomStyle[A]("")` in place of `"".reactStyle`. |
162 | | - * Use `HtmlTag("")` or `HtmlTagOf[N]("")` in place of `"".reactTag`. |
163 | | - * No more auto conversion of vdom arrays. Either use `blah: _*`, `TagMod(blah: _*)`, or `blah.toVdomArray`, `VdomArray(…)`. |
164 | | - * Explain all the Seq => TagMod/Array gotchas; see PrefixedTest |
165 | | - |
166 | | -Px |
167 | | - |
168 | | -Ref usage is hugely different now |
169 | | - |
170 | | -CompState.WriteAccess migration |
171 | | - |
172 | | -ReactComponent{,U,M]_ migration |
173 | | - |
174 | | -add cheatsheets |
175 | | - |
176 | | -add usage recommendations |
177 | | -- stateless |
178 | | - |
179 | | -------------------- |
180 | | - |
181 | | -shallow renderer |
182 | | - |
183 | | -is Callback necessary from non-render lifecycle hooks? |
184 | | -DOM isn't used, is it really confusing? |
185 | | - |
186 | | -Rename {Read,Write}{Id,CB} in StateAccessor? |
187 | | - |
188 | | -new releases for scalacss & test-state |
189 | | - |
190 | | -router's {dyn,}render{,R} |
| 7 | +Lifts Facebook's [React](https://facebook.github.io/react/) library into [Scala.js](http://www.scala-js.org/) and endeavours to make it as type-safe and Scala-friendly as possible. |
| 8 | + |
| 9 | +Provides (opt-in) support for pure functional programming, using [Scalaz](https://github.com/scalaz/scalaz) and [Monocle](https://github.com/julien-truffaut/Monocle). |
| 10 | + |
| 11 | +Comes utility modules [`extra`](extra/) and [`test`](test/), helpful for React in Scala(.js), rather than React in JS. |
| 12 | +Includes a router, testing utils, performance utils, more. |
| 13 | + |
| 14 | +##### Contents |
| 15 | + |
| 16 | +- [Usage & Getting Started](doc/USAGE.md) |
| 17 | + - [VDOM](doc/VDOM.md) |
| 18 | + - [Refs](doc/REFS.md) |
| 19 | + - [The `Callback` class](doc/CALLBACK.md) |
| 20 | +- Delving deeper |
| 21 | + - [Types](doc/TYPES.md) |
| 22 | + - [Interoperability](doc/INTEROP.md) |
| 23 | + - [Functional programming](doc/FP.md) |
| 24 | +- Scala-only Utilities |
| 25 | + - [Router](doc/ROUTER.md) |
| 26 | + - [Performance Management](doc/PERFORMANCE.md) |
| 27 | + - [Other](doc/EXTRA.md) |
| 28 | +- [Testing](doc/TESTING.md) |
| 29 | +- [Live Examples & Demos](https://japgolly.github.io/scalajs-react/) |
| 30 | +- ScalaDoc: [core](https://www.javadoc.io/doc/com.github.japgolly.scalajs-react/core_sjs0.6_2.11/0.11.3) | [extra](https://www.javadoc.io/doc/com.github.japgolly.scalajs-react/extra_sjs0.6_2.11/0.11.3) | [scalaz72](https://www.javadoc.io/doc/com.github.japgolly.scalajs-react/ext-scalaz72_sjs0.6_2.12/0.11.3) | [monocle](https://www.javadoc.io/doc/com.github.japgolly.scalajs-react/ext-monocle_sjs0.6_2.12/0.11.3) | [test](https://www.javadoc.io/doc/com.github.japgolly.scalajs-react/test_sjs0.6_2.12/0.11.3) |
| 31 | +- [Changelogs](doc/changelog) — [Latest](doc/changelog/0.11.3.md) |
| 32 | + |
| 33 | + |
| 34 | +##### External Resources |
| 35 | + |
| 36 | +* Templates & Tutorials |
| 37 | + * [chandu0101 / scalajs-react-template](https://github.com/chandu0101/scalajs-react-template) |
| 38 | + * [ochrons / scalajs-spa-tutorial](https://github.com/ochrons/scalajs-spa-tutorial) |
| 39 | + * [TodoMVC example](http://todomvc.com/examples/scalajs-react) |
| 40 | + * [Scala.js and React: Building an Application for the Web](https://scala-bility.blogspot.com/2015/05/scalajs-and-react-building-application.html) |
| 41 | + |
| 42 | +* Libraries |
| 43 | + * [test-state](https://github.com/japgolly/test-state/) - Integration/Functional/Property testing for scalajs-react. |
| 44 | + * [scalajs-benchmark](https://github.com/japgolly/scalajs-benchmark/) |
| 45 | + * [chandu0101 / scalajs-react-components](https://github.com/chandu0101/scalajs-react-components) |
| 46 | + * [payalabs / scalajs-react-mdl](https://github.com/payalabs/scalajs-react-mdl) - (Material Design Lite components) |
| 47 | + |
| 48 | +##### Requirements: |
| 49 | +* React 15.3+ |
| 50 | +* Scala 2.11 or 2.12. |
| 51 | +* Scala.JS 0.6.14+ |
0 commit comments