@@ -95,13 +95,13 @@ A component combinator is a **parametrizable** function which... **combines** co
95
95
The principle is deceptively simple. Now let's see some examples of use.
96
96
97
97
# Examples
98
- ## Layout vs. feature
98
+ ## Separating layout from feature
99
99
The following implementation corresponds to the layout specifications :
100
100
101
101
- layout specifications (in order from top to bottom of appearance on screen)
102
102
- header
103
- - feature : we will reuse here the component from the routing demo (introduced in a later
104
- section)
103
+ - feature : we will reuse here the component from the nested routing demo (introduced in a
104
+ later section)
105
105
- footer
106
106
- made of three groups (with miscellaneous navigation links) and a header
107
107
- sitemap
@@ -178,7 +178,19 @@ the structure of our application is more self-evident, i.e. simpler to read.
178
178
Let's move on to cases exemplifying a more complex combining logic.
179
179
180
180
## Login gateway
181
- For instance, the structure behind a login section of an application goes as such:
181
+ For instance, specification for a login section of an application could go as such:
182
+
183
+ - Functional specifications
184
+ - if user is logged, show the main page
185
+ - if user is not logged, show the login page, and redirect to ` index ` route when login is performed
186
+ - Technical specifications
187
+ - ` MainPage ` takes the concern of implementing the main page logic.
188
+ - ` LoginPage ` is parameterized by a redirect route, and is in charge of logging in the user
189
+ - ` convertAuthToIsLoggedIn ` emits ` IS_NOT_LOGGED_IN ` or ` IS_LOGGED_IN ` according to whether the user is logged or not
190
+
191
+ ![ login demo with Switch combinator] ( examples/SwitchLogin/assets/login_demo.gif )
192
+
193
+ A tentaive code to implement those specification with our library would look like :
182
194
183
195
``` javascript
184
196
export const App = Switch ({
@@ -194,18 +206,6 @@ export const App = Switch({
194
206
]);
195
207
```
196
208
197
- and translates the simple design :
198
-
199
- - Functional specifications
200
- - if user is logged, show the main page
201
- - if user is not logged, show the login page, and redirect to ` index ` route when login is performed
202
- - Technical specifications
203
- - ` MainPage ` takes the concern of implementing the main page logic.
204
- - ` LoginPage ` is parameterized by a redirect route, and is in charge of logging in the user
205
- - ` convertAuthToIsLoggedIn ` emits ` IS_NOT_LOGGED_IN ` or ` IS_LOGGED_IN ` according to whether the user is logged or not
206
-
207
- ![ login demo with Switch combinator] ( examples/SwitchLogin/assets/login_demo.gif )
208
-
209
209
The same code could be written in a ` JSX ` -like dialect as :
210
210
211
211
``` javascript
@@ -418,6 +418,8 @@ function getProjectNavigationItems$(sources, settings) {
418
418
}
419
419
```
420
420
421
+ ![ sample app demo with miscellaneous combinators] ( examples/AllInDemo/assets/images/animated_demo.gif )
422
+
421
423
Note the use of the ad-hoc combinators ` Navigation ` , ` NavigationSection ` and ` NavigationItem ` .
422
424
They are for instance defined as :
423
425
@@ -455,6 +457,12 @@ function Navigation(navigationSettings, componentArray) {
455
457
}
456
458
` ` `
457
459
460
+ Unless you have to implement some very specific combining logic that we haven't met in our large
461
+ codebase, you should not have to use ` m` in another form than ` Combine` . If that should happen,
462
+ you will need to delve into the documentation where we detail the three strategies we use for
463
+ combining components. If you come up with a useful component combinator that is not here, feel
464
+ free to publish it in its own package.
465
+
458
466
While the full syntax and semantics of the component combinators haven't been exposed[^EFSM],
459
467
hopefully the examples serve to portray the merits of using a component model, under which an
460
468
application is written as a component tree, where components are glued with convenient component combinators
0 commit comments