Skip to content

Commit 2ce3d87

Browse files
AngelFelizRAngelFelizR
authored
updating notes of chapter 21 (#31)
1 parent 9e91678 commit 2ce3d87

File tree

3 files changed

+246
-11
lines changed

3 files changed

+246
-11
lines changed

‎21_automate-new-template-creation-with-charpente.Rmd‎

Lines changed: 246 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,245 @@
22

33
**Learning objectives:**
44

5-
- THESE ARE NICE TO HAVE BUT NOT ABSOLUTELY NECESSARY
5+
- Providing tools for **translating an HTML template** into **a package** that helps you to:
66

7-
## SLIDE 1
7+
- **Document** the underlying API.
8+
- **Design unit tests** to guaranty code robustness and improve long term plan.
9+
- **Ensure file organization** to make easier collaboration.
810

9-
- ADD SLIDES AS SECTIONS (`##`).
10-
- TRY TO KEEP THEM RELATIVELY SLIDE-LIKE; THESE ARE NOTES, NOT THE BOOK ITSELF.
11+
## Benefits of using {charpente} {.unnumbered}
12+
13+
- Eases the import of external dependencies.
14+
- Speeds up the HTML to R conversion like the `{html2R}` Shiny app by Alan Dipert.
15+
- Eases JS code management.
16+
17+
``` r
18+
charpente::html_2_R('<div class="divclass" id = "someid"></div>')
19+
20+
#> tags$div(
21+
#> class = "divclass",
22+
#> id = "someid"
23+
#> )
24+
```
25+
26+
## Bulma study case: Create a new project {.unnumbered}
27+
28+
1. Close your current R project.
29+
30+
![](image/21-automate-new-template/01-close-rstudio-project.png)
31+
32+
## Bulma study case: Create a new project {.unnumbered}
33+
34+
2. Use the package to create the new project directory.
35+
36+
``` r
37+
charpente::create_charpente("BulmaCase", license = "mit")
38+
```
39+
40+
3. Open the new project.
41+
42+
![](image/21-automate-new-template/02-open-new-project.png)
43+
44+
## Bulma study case: Checking Results {.unnumbered}
45+
46+
4. The description file doesn't import `{charpente}`.
47+
48+
``` r
49+
Package: BulmaCase
50+
Title: What the Package Does (One Line, Title Case)
51+
Version: 0.0.0.9000
52+
Authors@R:
53+
person("First", "Last", , "[email protected]", role = c("aut", "cre"))
54+
Description: What the package does (one paragraph).
55+
License: MIT + file LICENSE
56+
Imports:
57+
htmltools,
58+
shiny,
59+
utils
60+
Encoding: UTF-8
61+
Roxygen: list(markdown = TRUE)
62+
RoxygenNote: 7.3.2
63+
Suggests:
64+
testthat (>= 3.0.0)
65+
Config/testthat/edition: 3
66+
```
67+
68+
## Bulma study case: Checking Results {.unnumbered}
69+
70+
5. On the project we can find `R/BulmaCase-utils.R` to make available functions to:
71+
72+
- Facilitate HTML dependency management
73+
74+
- `add_dependencies`: Attach all created dependencies in the ./R directory to the provided tag.
75+
76+
<br>
77+
78+
- Validate HTML
79+
80+
- `validate_width`: Validate Bootstrap compatible element width parameter [1,12].
81+
- `hasCssClass`: Return `TRUE` if a shiny.tag object has a CSS class, `FALSE` otherwise.
82+
- `tagAssert`: Check that a tag has specific type or class.
83+
- `tagMatches`: Check that tag has a particular id, name or class.
84+
- `findAttribute`: Find the child of the targeted element that has a specific attribute and value.
85+
86+
<br>
87+
88+
- Avoid repeating code
89+
90+
- `equals`: Similar to `==` but safer in relation to vector length. `equals(1, 1L)` returns `TRUE`.
91+
- `dropNulls`: Remove `NULL` list elements.
92+
93+
## Bulma study case: Install Bulma dependencies {.unnumbered}
94+
95+
6. Go to the [jsdelivr](https://www.jsdelivr.com/) website and find the correct repository.
96+
97+
7. The function `create_dependency` will take care of creating the next step for us:
98+
99+
```
100+
library(htmltools)
101+
bulma_deps <- htmlDependency(
102+
name = ...,
103+
version = ...,
104+
src = c(href = ...),
105+
stylesheet = ...
106+
)
107+
108+
add_bulma_deps <- function(tag) {
109+
tagList(..., bulma_deps)
110+
}
111+
```
112+
113+
## Bulma study case: Install Bulma dependencies {.unnumbered}
114+
115+
8. Define the source to get dependencies:
116+
117+
+-------------------------------------+----------------------------------------------------------------+
118+
| Locally (recommend) | Connecting to content delivery network (CDN) |
119+
+=====================================+================================================================+
120+
| ``` r | ``` r |
121+
| create_dependency( | create_dependency( |
122+
| "bulma", | "bulma", |
123+
| tag = "0.9.3" | tag = "0.9.3", |
124+
| ) | options = charpente_options(local = FALSE) |
125+
| ``` | ) |
126+
| | ``` |
127+
+-------------------------------------+----------------------------------------------------------------+
128+
| ``` r | ``` r |
129+
| add_bulma_deps <- function(tag) { | add_bulma_deps <- function(tag) { |
130+
| bulma_deps <- htmlDependency( | bulma_deps <- htmlDependency( |
131+
| name = "bulma", | name = "bulma", |
132+
| version = "0.9.3", | version = "0.9.3", |
133+
| src = c(file = "bulma-0.9.3"), | src = c(href = "https://cdn.jsdelivr.net/npm/[email protected]/"), |
134+
| stylesheet = "css/bulma.min.css", | stylesheet = "css/bulma.min.css" |
135+
| package = "mypkg", | ) |
136+
| ) | tagList(tag, bulma_deps) |
137+
| tagList(tag, bulma_deps) | } |
138+
| } | ``` |
139+
| ``` | |
140+
+-------------------------------------+----------------------------------------------------------------+
141+
142+
***Note:** The current version of the package only has the local argument in the `charpente_options`*
143+
144+
```
145+
charpente_options <- function(local = TRUE) {
146+
list(local = local)
147+
}
148+
```
149+
150+
## Bulma study case: Minimal page template {.unnumbered}
151+
152+
9. Transform the starter page template in to R format using `charpente::html_2_R(template_html, path = "/html")`:
153+
154+
``` r
155+
tags$html(
156+
tags$head(
157+
tags$meta(charset = "utf-8"),
158+
tags$meta(
159+
name = "viewport",
160+
content = "width=device-width,
161+
initial-scale=1"
162+
),
163+
tags$title("Hello Bulma!"),
164+
tags$link(
165+
rel = "stylesheet",
166+
href = "https://cdn.jsdelivr.net/
167+
/bulma.min.css"
168+
)
169+
),
170+
tags$body(tags$section(
171+
class = "section",
172+
tags$div(
173+
class = "container",
174+
tags$h1(
175+
class = "title",
176+
"Hello World"
177+
),
178+
tags$p(
179+
class = "subtitle",
180+
"My first website with",
181+
tags$strong("Bulma"),
182+
"!"
183+
)
184+
)
185+
))
186+
)
187+
```
188+
189+
## Bulma study case: Minimal page template {.unnumbered}
190+
191+
10. Create function of the page by taking in consideration that:
192+
193+
- Shiny will add the css dependency when running the app
194+
- It's better to define another function to add each section.
195+
196+
``` r
197+
bulma_page <- function(..., title = NULL) {
198+
tagList(
199+
tags$head(
200+
tags$meta(charset = "utf-8"),
201+
tags$meta(
202+
name = "viewport",
203+
content = "width=device-width, initial-scale=1"
204+
),
205+
tags$title(title)
206+
),
207+
add_bulma_deps(tags$body(...))
208+
)
209+
}
210+
```
211+
212+
## Bulma study case: Creating Custom Handler {.unnumbered}
213+
214+
11. Adding JS dependency.
215+
216+
``` r
217+
create_dependency("@vizuaalog/bulmajs", "0.12.2")
218+
```
219+
220+
12. Defining the structure for the notification.
221+
222+
``` r
223+
create_custom_handler("notification")
224+
```
225+
226+
+---------------------------------------------------+-----------------------------------------+
227+
| `notification-handler.R` | `notification.js` |
228+
+===================================================+=========================================+
229+
| ``` r | ``` javascriptreact |
230+
| send_notification_message <- function( | $(function() { |
231+
| id = NULL, | Shiny.addCustomMessageHandler( |
232+
| options = NULL, | 'notification', function(message) { |
233+
| session = shiny::getDefaultReactiveDomain() | Bulma('body').notification({ |
234+
| ) { | body: 'Example notification', |
235+
| message <- list( | color: 'info' |
236+
| # your logic | }).show(); |
237+
| ) | }); |
238+
| | }); |
239+
| session$sendCustomMessage(type = "notification", | ``` |
240+
| message) | |
241+
| } | |
242+
| ``` | |
243+
+---------------------------------------------------+-----------------------------------------+
11244

12245
## Meeting Videos
13246

@@ -16,13 +249,15 @@
16249
`r knitr::include_url("https://www.youtube.com/embed/hzn4Kn4-cD4")`
17250

18251
<details>
19-
<summary> Meeting chat log </summary>
20252

253+
<summary>Meeting chat log</summary>
254+
255+
```
256+
00:05:34 Russ Hyde: begin
257+
00:08:30 Trevin Flickinger: Yeah, I’m utilizing golem now at work
258+
00:58:15 Russ Hyde: https://github.com/RinteRface/shinyMobile has the srcjs folder
259+
00:59:28 Russ Hyde: They load {charpente} in https://github.com/RinteRface/shinyMobile/blob/master/tools/build.R
260+
01:02:36 Russ Hyde: end
21261
```
22-
00:05:34 Russ Hyde: begin
23-
00:08:30 Trevin Flickinger: Yeah, I’m utilizing golem now at work
24-
00:58:15 Russ Hyde: https://github.com/RinteRface/shinyMobile has the srcjs folder
25-
00:59:28 Russ Hyde: They load {charpente} in https://github.com/RinteRface/shinyMobile/blob/master/tools/build.R
26-
01:02:36 Russ Hyde: end
27-
```
262+
28263
</details>

‎image/21-automate-new-template/01-close-rstudio-project.png‎

38.9 KB
Loading

‎image/21-automate-new-template/02-open-new-project.png‎

77 KB
Loading

0 commit comments

Comments
 (0)