[{"path":"http://tomelliott.co.nz/ts/LICENSE.html","id":null,"dir":"","previous_headings":"","what":"MIT License","title":"MIT License","text":"Copyright (c) 2024 Tom Elliott Permission hereby granted, free charge, person obtaining copy software associated documentation files (“Software”), deal Software without restriction, including without limitation rights use, copy, modify, merge, publish, distribute, sublicense, /sell copies Software, permit persons Software furnished , subject following conditions: copyright notice permission notice shall included copies substantial portions Software. SOFTWARE PROVIDED “”, WITHOUT WARRANTY KIND, EXPRESS IMPLIED, INCLUDING LIMITED WARRANTIES MERCHANTABILITY, FITNESS PARTICULAR PURPOSE NONINFRINGEMENT. EVENT SHALL AUTHORS COPYRIGHT HOLDERS LIABLE CLAIM, DAMAGES LIABILITY, WHETHER ACTION CONTRACT, TORT OTHERWISE, ARISING , CONNECTION SOFTWARE USE DEALINGS SOFTWARE.","code":""},{"path":"http://tomelliott.co.nz/ts/articles/simple-react-app.html","id":"install-the-ts-package","dir":"Articles","previous_headings":"","what":"Install the ts package","title":"Build a simple ReactJS app","text":"","code":"devtools::install_github('tmelliott/ts')"},{"path":"http://tomelliott.co.nz/ts/articles/simple-react-app.html","id":"write-the-r-code","dir":"Articles","previous_headings":"","what":"Write the R code","title":"Build a simple ReactJS app","text":"code saved file called faithful-app.R, can preview results calling functions: ’s ! ’ll use ts_compile() later create server code Typescript schema app.","code":"cat(readLines('faithful-app.R'), sep = '\\n') #> library(ts) #> #> get_hist <- ts_function( #> function(bins = ts_integer(1)) { #> h <- hist(faithful$waiting, breaks = bins, plot = FALSE) #> data.frame(x = h$mids, y = h$density) #> }, #> result = ts_dataframe(x = ts_numeric(0), y = ts_numeric(0)) #> ) #> get_smoother <- ts_function( #> function(bandwidth = ts_numeric(1)) { #> d <- density(faithful$waiting, bw = bandwidth) #> data.frame(x = d$x, y = d$y) #> }, #> result = ts_dataframe(x = ts_numeric(0), y = ts_numeric(0)) #> ) source('faithful-app.R') get_hist$call(10) #> x y #> 1 42.5 0.0029411765 #> 2 47.5 0.0161764706 #> 3 52.5 0.0242647059 #> 4 57.5 0.0176470588 #> 5 62.5 0.0102941176 #> 6 67.5 0.0073529412 #> 7 72.5 0.0198529412 #> 8 77.5 0.0397058824 #> 9 82.5 0.0404411765 #> 10 87.5 0.0169117647 #> 11 92.5 0.0036764706 #> 12 97.5 0.0007352941"},{"path":"http://tomelliott.co.nz/ts/articles/simple-react-app.html","id":"create-the-react-app","dir":"Articles","previous_headings":"","what":"Create the React app","title":"Build a simple ReactJS app","text":"’m using Vite create app, use framework. Whatever use, ’ll need able bundle code (including libraries zod). now able see default Vite app running http://localhost:5173 (similar, see console output). Now install rserve-ts zod packages:","code":"pnpm create vite faithful-demo --template vanilla-ts cd faithful-demo pnpm install pnpm run dev pnpm install rserve-ts zod"},{"path":"http://tomelliott.co.nz/ts/articles/simple-react-app.html","id":"create-the-server-code","dir":"Articles","previous_headings":"Create the React app","what":"Create the server code","title":"Build a simple ReactJS app","text":"now use ts_compile() function create two files: faithful-app.rserve.R file start Rserve instance apps functions available. faithful-app.rserve.ts contains TypeScript schema (using zod) let use R functions directly app like typescript function! ’ll send straight faithful-demo/src directory.","code":"ts_compile('faithful-app.R', filename = 'faithful-demo/src/faithful-app.rserve')"},{"path":"http://tomelliott.co.nz/ts/articles/simple-react-app.html","id":"write-the-app","dir":"Articles","previous_headings":"Create the React app","what":"Write the app","title":"Build a simple ReactJS app","text":"rest process simply requires writing TypeScript code. won’t go detail since ’s focus vignette, can see code written basic comments. Copy paste get app running.","code":"// main.ts import \"./style.css\"; import RserveClient from \"rserve-ts\"; import faithfulApp from \"./faithful-app.rserve\"; import { z } from \"zod\"; document.querySelector(\"#app\")!.innerHTML = `

Rserve and TypeScript<\/h1>
Number of bins: