rinterface / charpente Goto Github PK

View Code? Open in Web Editor NEW

50.0 5.0 9.0 4.87 MB

Seamlessly design robust 'shiny' extensions

Home Page: https://rinterface.github.io/charpente/

License: Other

R 85.61% HTML 4.88% JavaScript 9.51%

shiny r development esbuild html css javascript

charpente's Issues

Support download icons, fonts, ...

Whenever downloading an icon deps, we have to get the fonts ...

CRAN release

cc @schloerke : what do you see missing in terms of features for a CRAN release?

Add @internal keyword to add_dependencies

May cause issues with {pkgdown}...

Support for fontAwesome Icons

Thanks for this great package. Would be great if html_2_R( ) can detect font awesome icons and add icon( )

Stop create_charpente() when license is not provided

Would be nice if there's a first check to see if the license argument is provided in create_charpente(), otherwise you end up with a half-complete package.

Simple fix:

  if(missing(license)) {
    ui_stop('Please provide a license, e.g. "mit" or "gpl3"')
  }

also update example in roxygen documentation 📝

Allow additional args in result of create_custom_dependency()

The resulting dependency functions of create_custom_dependency are not that convenient to work with if you want to add other HTML dependencies that are not in your package, like font awesome.

By allowing additional arguments, users can add dependencies (or other tags) to the tagList. The result of create_custom_dependency() could then look like this:

#' sportsswitch dependencies utils
#'
#' @description This function attaches sportsswitch dependencies to the given tag
#'
#' @param tag Element to attach the dependencies.
#' @param ... Additional arguments passed to \code{\link[htmltools]{tagList}}.
#'
#' @importFrom utils packageVersion
#' @importFrom htmltools tagList htmlDependency
#' @export
add_sportsswitch_deps <- function(tag, ...) {
 sportsswitch_deps <- htmlDependency(
  name = "sportsswitch",
  version = "0.1.0",
  src = c(file = "shinySportsKit-0.1.0"),
  script = "dist/sportsswitch.min.js",
  stylesheet = "dist/sportsswitch.min.css",
  package = "shinySportsKit",
 )
 tagList(tag, sportsswitch_deps, ...)
}

This allows users to add another dependency like font awesome like so:

add_sportsswitch_deps(
  tag,
  fontawesome::fa_html_dependency()
)

This is mainly handy for component based bundling, where some components make use of dependency X, and others don't.

Currently the alternative is to use two or more tagLists, which is fine, but just a bit lengthy:

c(
  add_sportsswitch_deps(
    tag
  ),
  tagList(fontawesome::fa_html_dependency())
)

bug: `reference_script` semicolon misplaced

Thanks for all the work done, it is really awesome!

There is a little (but important) misspelling in the reference_script function, at line 121 of utils.R, where the semicolon is placed inside the file name and that lets to an error: Could not resolve "./<name>;" from esbuild.

The problem is at sprintf("import './%s.js;'", name)

Whole function code should look like this (although semicolon could be avoided since I've test it and newline does the work, IMHO it is better if it stays there):

reference_script <- function(name) {
  write(
    sprintf("import './%s.js';", name),
    file = "./srcjs/main.js",
    append = TRUE
  )
  ui_done("Script successfully added to JS entry point!")
}

Load htmltools

library(htmltools) is required when new project gets opened and it tries to find findDependencies( ) and htmlDependency( )

Allow to initialise esbuild independently of anything else

cc @hypebright.

Idea: make this exported:

# Setup esbuild for JS code management
  set_esbuild()
  # Add mocha for tests
  set_mocha()
  # Ignore files/folders: srcjs, node_modules, ...
  use_build_ignore(
    c(
      "srcjs",
      "node_modules",
      "package.json",
      "package-lock.json",
      "styles",
      "esbuild.dev.json",
      "esbuild.prod.json"
    )
  )
  use_git_ignore("node_modules")
...

Import external dependencies from templates

What is the best way to import HTML templates deps:

github
npm
other

Poke @JohnCoene

remove .onAttach

This causes issue when using charpente like charpente::create_dependency("bulma") ...

Move to esbuild

Better workflow and module support.

WIP

Enhance esbuild configuration for component based bundling

Currently, the esbuild configuration files are set up to process a single entry file, ./src/js/main.js, and generate one output file in inst/<<name>>-<<version>>/dist/<<name>>.js. While this monolithic bundling approach suits scenarios where all JS and CSS assets are conveniently loaded at once, it might be overkill for packages containing independent components.

For packages with individual (and independent) components, a component-based bundling approach would be more desirable. Each component should have its own bundle that can be independently loaded into the HTML.

To facilitate component-based bundling, we need to modify the esbuild configuration files to support multiple entry points and specify an output directory instead of a single output file. This adjustment will provide users with greater flexibility in shaping the build results.

The entry points can be passed as an argument to build_js(). Default will be monolithic bundling, so the default for this argument should be the main.js file.

Example config file for component-based bundling:

import esbuild from "esbuild";
import {sassPlugin} from 'esbuild-sass-plugin';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';

esbuild
  .build({
    entryPoints: ["./srcjs/hello-main.js", "./srcjs/greeting-main.js"],
    outdir: "inst/testcharpente-0.0.0.9000/dist",
    entryNames: '[name].min',
    bundle: true,
    format: "esm",
    minify: true, // prod
    sourcemap: "external", // prod
    plugins: [
      sassPlugin({
        async transform(source) {
          const { css } = await postcss([autoprefixer]).process(source);
          return css;
        },
      }),
    ]
  })
  .then(() => console.log("⚡ Build complete! ⚡"))
  .catch(() => process.exit(1));

'could not find function "label"'

Using the example from https://developer.mozilla.org/fr/docs/Web/HTML/Element/select

charpente::html_2_R('  <div class = "w3-col s3">
      <label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
  </div>')

will generate the following output:

── Converting code ... ──

✓ Code converted with success.
ℹ Copy and paste the following R code
──────────────────────────────
div(
  class = "w3-col s3",
  label(
    `for` = "pet-select",
    "Choose a pet:"
  ),
  select(
    name = "pets",
    id = "pet-select",
    option(
      value = NA,
      "--Please choose an option--"
    ),
    option(
      value = "dog",
      "Dog"
    ),
    option(
      value = "cat",
      "Cat"
    ),
    option(
      value = "hamster",
      "Hamster"
    ),
    option(
      value = "parrot",
      "Parrot"
    ),
    option(
      value = "spider",
      "Spider"
    ),
    option(
      value = "goldfish",
      "Goldfish"
    )
  )
)

But label is not a function from {htmltools} nor {shiny}.

A possibility here would be to prefix everything with tags$ :)

Cheers,
Colin

Update outdated GA files

Update CICD outdated files.

pkgdown
check

Structure - Use cases - Contexts

Based on what I understand there are a number of distinct use cases or contexts in which those functions can be run.

Golem application (can be identified from config file)
Bare shiny app (inferred from app.R)
Template created from create_template

These imply different paths for both the R and JavaScript files.

JavaScript

Golem = inst/app/www
Bare shiny app in www directory
Template - to be defined

Should we follow a common directory structure from those respective roots (?) where inputs are in inputs dir, etc.

Golem: create new R file for each new input/output/handler + create new function for htmlDependency?
Bare shiny app: should these be created in a separate file(s)?
Template: probably similar to golem? (both are R packages)

Auto detect entry points

We could add an auto_detect argument to build_js, that will auto discover the entry points in a given folder (or in the default srcjs). Currently when you're doing component based bundling you constantly need to provide all the entry points, like so:

build_js(entry_points = c("componentA.js", "componentB.js", "componentC.js"))

and if you accidentally forget to give the entry_point arg, you end up with a main.js file again 🙃.

It could look like this instead:

build_js(auto_detect = TRUE)

Default would be FALSE (or TRUE even, if that works in combination while ensuring backwards compatibility?) and it would automatically look for .js files in the directory given in dir.

Best regards,

npm::npm_path_get()
#>                  npm 
#> "/usr/local/bin/npm"
charpente::create_charpente("~/charpente.test")
#> ✓ Setting active project to '/home/rstudio/charpente.test'
#> Package: charpente.test
#> Title: What the Package Does (One Line, Title Case)
#> Version: 0.0.0.9000
#> Authors@R (parsed):
#>     * First Last <[email protected]> [aut, cre] (YOUR-ORCID-ID)
#> Description: What the package does (one paragraph).
#> License: `use_mit_license()`, `use_gpl3_license()` or friends to pick a
#>     license
#> Imports:
#>     htmltools,
#>     shiny,
#>     utils
#> Encoding: UTF-8
#> Roxygen: list(markdown = TRUE)
#> RoxygenNote: 7.1.2
#> ✓ Setting active project to '<no active project>'
#> ✓ Package 'charpente.test' successfuly created!
#> Warning in dir.create("inst"): 'inst' existe déjà
#> Warning in dir.create(sprintf("inst/%s-0.0.0.9000", pkg_name)): 'inst/
#> charpente.test-0.0.0.9000' existe déjà
#> Error in paste0("use_", license, "_license()"): l'argument "license" est manquant, avec aucune valeur par défaut

sessioninfo::session_info()
#> ─ Session info ───────────────────────────────────────────────────────────────
#>  setting  value
#>  version  R version 4.1.2 (2021-11-01)
#>  os       Ubuntu 20.04.3 LTS
#>  system   x86_64, linux-gnu
#>  ui       X11
#>  language (EN)
#>  collate  fr_FR.UTF-8
#>  ctype    fr_FR.UTF-8
#>  tz       Etc/UTC
#>  date     2022-03-01
#>  pandoc   2.14.0.3 @ /usr/lib/rstudio-server/bin/pandoc/ (via rmarkdown)
#> 
#> ─ Packages ───────────────────────────────────────────────────────────────────
#>  package     * version    date (UTC) lib source
#>  assertthat    0.2.1      2019-03-21 [1] RSPM (R 4.1.0)
#>  backports     1.4.1      2021-12-13 [1] RSPM (R 4.1.0)
#>  charpente     0.0.0.9000 2022-02-19 [1] Github (RinteRface/charpente@e94b77a)
#>  cli           3.2.0      2022-02-14 [1] RSPM (R 4.1.0)
#>  crayon        1.5.0      2022-02-14 [1] RSPM (R 4.1.0)
#>  desc          1.4.0      2021-09-28 [1] RSPM (R 4.1.0)
#>  digest        0.6.29     2021-12-01 [1] RSPM (R 4.1.0)
#>  ellipsis      0.3.2      2021-04-29 [1] RSPM (R 4.1.0)
#>  erratum       2.2.0      2022-01-03 [1] RSPM (R 4.1.0)
#>  evaluate      0.14       2019-05-28 [1] RSPM (R 4.1.0)
#>  fansi         1.0.2      2022-01-14 [1] RSPM (R 4.1.0)
#>  fastmap       1.1.0      2021-01-25 [1] RSPM (R 4.1.0)
#>  fs            1.5.2      2021-12-08 [1] RSPM (R 4.1.0)
#>  glue          1.6.1      2022-01-22 [1] RSPM (R 4.1.0)
#>  highr         0.9        2021-04-16 [1] RSPM (R 4.1.0)
#>  hms           1.1.1      2021-09-26 [1] RSPM (R 4.1.0)
#>  htmltools     0.5.2      2021-08-25 [1] RSPM (R 4.1.0)
#>  knitr         1.37       2021-12-16 [1] RSPM (R 4.1.0)
#>  lifecycle     1.0.1      2021-09-24 [1] RSPM (R 4.1.0)
#>  magrittr      2.0.2      2022-01-26 [1] RSPM (R 4.1.0)
#>  npm           1.0.0.9000 2022-02-19 [1] Github (JohnCoene/npm@1f00998)
#>  pillar        1.7.0      2022-02-01 [1] RSPM (R 4.1.0)
#>  pkgconfig     2.0.3      2019-09-22 [1] RSPM (R 4.1.0)
#>  purrr         0.3.4      2020-04-17 [1] RSPM (R 4.1.0)
#>  R.cache       0.15.0     2021-04-30 [1] RSPM (R 4.1.0)
#>  R.methodsS3   1.8.1      2020-08-26 [1] RSPM (R 4.1.0)
#>  R.oo          1.24.0     2020-08-26 [1] RSPM (R 4.1.0)
#>  R.utils       2.11.0     2021-09-26 [1] RSPM (R 4.1.0)
#>  R6            2.5.1      2021-08-19 [1] RSPM (R 4.1.0)
#>  readr         2.1.2      2022-01-30 [1] RSPM (R 4.1.0)
#>  reprex        2.0.1      2021-08-05 [1] RSPM (R 4.1.0)
#>  rlang         1.0.1      2022-02-03 [1] RSPM (R 4.1.0)
#>  rmarkdown     2.11       2021-09-14 [1] RSPM (R 4.1.0)
#>  roxygen2      7.1.2      2021-09-08 [1] RSPM (R 4.1.0)
#>  rprojroot     2.0.2      2020-11-15 [1] RSPM (R 4.1.0)
#>  rstudioapi    0.13       2020-11-12 [1] RSPM (R 4.1.0)
#>  sessioninfo   1.2.2      2021-12-06 [1] RSPM (R 4.1.0)
#>  stringi       1.7.6      2021-11-29 [1] RSPM (R 4.1.0)
#>  stringr       1.4.0      2019-02-10 [1] RSPM (R 4.1.0)
#>  styler        1.6.2      2021-09-23 [1] RSPM (R 4.1.0)
#>  tibble        3.1.6      2021-11-07 [1] RSPM (R 4.1.0)
#>  tzdb          0.2.0      2021-10-27 [1] RSPM (R 4.1.0)
#>  usethis       2.1.5      2021-12-09 [1] RSPM (R 4.1.0)
#>  utf8          1.2.2      2021-07-24 [1] RSPM (R 4.1.0)
#>  vctrs         0.3.8      2021-04-29 [1] RSPM (R 4.1.0)
#>  withr         2.4.3      2021-11-30 [1] RSPM (R 4.1.0)
#>  xfun          0.29       2021-12-14 [1] RSPM (R 4.1.0)
#>  XML           3.99-0.8   2021-09-17 [1] RSPM (R 4.1.0)
#>  xml2          1.3.3      2021-11-30 [1] RSPM (R 4.1.0)
#>  yaml          2.2.2      2022-01-25 [1] RSPM (R 4.1.0)
#> 
#>  [1] /usr/local/lib/R/site-library
#>  [2] /usr/local/lib/R/library
#> 
#> ──────────────────────────────────────────────────────────────────────────────

^{Created on 2022-03-01 by the reprex package (v2.0.1)}

rinterface / charpente Goto Github PK

charpente's Issues

Recommend Projects

Recommend Topics

Recommend Org