{"id":19721782,"url":"https://github.com/rinterface/shinycomponent","last_synced_at":"2025-04-29T21:31:28.249Z","repository":{"id":46829208,"uuid":"400816709","full_name":"RinteRface/shinyComponent","owner":"RinteRface","description":"Single-File Components powered app","archived":false,"fork":false,"pushed_at":"2025-01-25T22:00:52.000Z","size":17459,"stargazers_count":19,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-05T19:51:10.851Z","etag":null,"topics":["ecma","golem-apps","shiny-apps","template-co","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RinteRface.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-28T14:46:01.000Z","updated_at":"2025-03-25T15:53:53.000Z","dependencies_parsed_at":"2022-09-24T17:57:05.881Z","dependency_job_id":null,"html_url":"https://github.com/RinteRface/shinyComponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RinteRface%2FshinyComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RinteRface%2FshinyComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RinteRface%2FshinyComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RinteRface%2FshinyComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RinteRface","download_url":"https://codeload.github.com/RinteRface/shinyComponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251585851,"owners_count":21613283,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecma","golem-apps","shiny-apps","template-co","webpack"],"created_at":"2024-11-11T23:15:32.412Z","updated_at":"2025-04-29T21:31:26.825Z","avatar_url":"https://github.com/RinteRface.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\noutput: github_document\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\u003e\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\"\n)\n```\n\n# shinyComponent\n\n\u003c!-- badges: start --\u003e\n[![Lifecycle: experimental](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](https://lifecycle.r-lib.org/articles/stages.html#experimental)\n[![R-CMD-check](https://github.com/RinteRface/shinyComponent/workflows/R-CMD-check/badge.svg)](https://github.com/RinteRface/shinyComponent/actions)\n\u003c!-- badges: end --\u003e\n\nApp powered by {golem}, webpack, Framework7 components (esm). WIP\nApp is deployed on [shinyapps.io](https://dgranjon.shinyapps.io/shinyComponent/).\n\n## Installation\n\nYou can install the released version of shinyComponent from [CRAN](https://CRAN.R-project.org) with:\n\n``` r\nremotes::install_github(\"RinteRface/shinyComponent\")\n```\n\n## Proof of Concept\nInterface is built with Framework 7 from JS, powered by webpack. We leverage\nTemplate components to create the app root and subroutes. On the server side, we process data from R and send them back to JS to update the components.\n\n### UI\nComponents may be written with JSX (supported by the framework7-loader, no need to install `React`!), which is more convenient than the classic template syntax. Components have either the old/new syntax so you can compare both approaches.\n\n### Main page\nApp component is driven by:\n\n```jsx\nimport ListItem from './custom-list.f7.jsx';\n\nexport default (props, {$f7, $f7ready, $on, $update }) =\u003e {\n  const title = 'Hello World';\n  let names = ['John', 'Vladimir', 'Timo'];\n\n  Shiny.addCustomMessageHandler('init', function(message) {\n    names = message;\n    $update();\n  });\n\n  // App events callback\n  $on('click', () =\u003e {\n    // callback\n  });\n\n  // This method need to be used only when you use Main App Component\n  // to make sure to call Framework7 APIs when app initialized.\n  $f7ready(() =\u003e {\n    // do stuff\n    console.log('Hello');\n  });\n\n  const openAlert = () =\u003e {\n    $f7.dialog.alert(title, function() {\n      // ok button callback\n      Shiny.setInputValue('alert_opened', false);\n    });\n    Shiny.setInputValue('alert_opened', true);\n    Shiny.setInputValue(\n      'alert',\n      {\n        message: 'Alert dialog was triggered!',\n        title: title,\n      },\n      {priority: 'event'}\n    );\n  }\n\n  const openPanel = () =\u003e {\n    $f7.panel.open('.panel-left');\n  }\n\n  return () =\u003e (\n    \u003cdiv id=\"app\"\u003e\n      \u003cdiv class=\"panel panel-left panel-init\"\u003e\n        \u003cdiv class=\"block\"\u003e\"Hello\"\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"view view-main view-init safe-areas\"\u003e\n        \u003cdiv class=\"page\"\u003e\n          \u003cdiv class=\"navbar\"\u003e\n            \u003cdiv class=\"navbar-bg\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"navbar-inner\"\u003e\n              \u003cdiv class=\"title\"\u003e{title}\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"toolbar toolbar-bottom\"\u003e\n            \u003cdiv class=\"toolbar-inner\"\u003e\n              \u003ca onClick={() =\u003e openAlert()}\u003eOpen Alert\u003c/a\u003e\n              \u003ca class=\"button button-fill\" href=\"#\" class=\"panel-open\" data-panel=\".panel-left\"\u003eLeft Panel\u003c/a\u003e\n              \u003ca href=\"/extra/\" data-transition=\"f7-cover\"\u003eNew Page\u003c/a\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"page-content\"\u003e\n            \u003cul\u003e\n              \u003cListItem title=\"Item 1\" /\u003e\n              \u003cListItem title=\"Item 2\" /\u003e\n              \u003cListItem title=\"Item 3\" /\u003e\n            \u003c/ul\u003e\n            \u003cdiv class=\"list simple-list\"\u003e\n              \u003cul\u003e\n                {names.map((name) =\u003e\n                  \u003cli\u003e{name}\u003c/li\u003e\n                )}\n              \u003c/ul\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nBelow is the code a of local sub-component, being invoked in the main App template:\n\n```jsx\nconst ListItem = (props) =\u003e {\n  return () =\u003e \u003cli\u003e{props.title}\u003c/li\u003e;\n}\n\nexport default ListItem\n```\n\n### Router\nThis app requires a router to navigate between pages. This is done with the Framework7 builtin feature. You may pass entire app components to the router, as shown below.\n\n```js\nimport Extra from '../components/extra.f7.jsx';\n\nexport default [\n  //{\n  //  path: '/'\n  //},\n  {\n    path: '/extra/',\n    asyncComponent: () =\u003e Extra\n  }\n]\n```\n\n### App init\nImportantly, we only import Framework7 modules we need, to lighten the final bundle:\n\n```js\nimport Dialog from 'framework7/esm/components/dialog/dialog.js';\nimport Gauge from 'framework7/esm/components/gauge/gauge.js';\nimport Panel from 'framework7/esm/components/panel/panel.js';\nimport View from 'framework7/esm/components/view/view.js';\nFramework7.use([Dialog, Gauge, Panel, View]);\n```\n\nApp UI is initialized passing the main app component, the routes and targeting the `#app` element, located within the `app_ui()` function:\n\n```r\napp_ui \u003c- function(request) {\n  tagList(\n    # Leave this function for adding external resources\n    golem_add_external_resources(),\n    # Your application UI logic\n    tags$body(\n      div(id = \"app\"),\n      tags$script(src = \"www/index.js\")\n    )\n  )\n}\n```\n\nSince the JS assets have to go after the `#app` element in the `body` tag, we had to comment out the `{golem}` predefined script:\n\n```r\ntags$head(\n  favicon(),\n  #bundle_resources(\n  #  path = app_sys('app/www'),\n  #  app_title = 'shinyFramework7'\n  #)\n  # Add here other external resources\n  # for example, you can add shinyalert::useShinyalert()\n  )\n```\n\nWhole `index.js` code:\n\n```js\nimport 'shiny';\n// Import Framework7\nimport Framework7 from 'framework7';\n// Import Framework7 Styles\nimport 'framework7/framework7-bundle.min.css';\n\n// Install F7 Components using .use() method on class:\nimport Dialog from 'framework7/esm/components/dialog/dialog.js';\nimport Gauge from 'framework7/esm/components/gauge/gauge.js';\nimport Panel from 'framework7/esm/components/panel/panel.js';\nimport View from 'framework7/esm/components/view/view.js';\nFramework7.use([Dialog, Gauge, Panel, View]);\n\n// Import App component\nimport App from './components/app.f7.jsx';\n\n// Import other routes\nimport routes from './modules/routes.js';\n\n// Initialize app\nvar app = new Framework7({\n  el: '#app',\n  theme: 'ios',\n  // specify main app component\n  routes: routes,\n  component: App\n});\n```\n\n### Server\n\nOn the server side (R):\n\n```r\nobserveEvent(TRUE, {\n  session$sendCustomMessage(\"init\", colnames(mtcars))\n})\n\nobserveEvent(input$alert, {\n  message(sprintf(\"Received from JS: %s\", input$alert$message))\n  message(sprintf(\"App title is %s\", input$alert$title))\n})\n\nobserve({print(input$alert_opened)})\n```\n\n## Example\n\nThis is a basic example which shows you how to solve a common problem:\n\n### Run app\n```{r, eval=FALSE}\nlibrary(shinyComponent)\n## basic example code\nrun_app()\n```\n\n### Dev mode\n```{r, eval=FALSE}\nlibrary(shinyComponent)\n## basic example code\npacker::bundle_dev()\ndevtools::load_all()\nrun_app()\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frinterface%2Fshinycomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frinterface%2Fshinycomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frinterface%2Fshinycomponent/lists"}