{"id":13849,"date":"2023-03-21T12:40:55","date_gmt":"2023-03-21T17:40:55","guid":{"rendered":"https:\/\/rud.is\/b\/?p=13849"},"modified":"2023-03-21T12:40:55","modified_gmt":"2023-03-21T17:40:55","slug":"youre-one-javascript-function-call-away-from-using-most-webr-r-functions-in-your-webr-powered-apps-sites","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2023\/03\/21\/youre-one-javascript-function-call-away-from-using-most-webr-r-functions-in-your-webr-powered-apps-sites\/","title":{"rendered":"You’re One JavaScript Function Call Away From Using (Most) WebR R Functions In Your WebR-Powered Apps\/Sites"},"content":{"rendered":"

After writing the initial version of a tutorial on wrapping and binding R functions on the javascript side of WebR<\/a>, I had a number of other WebR projects on the TODO list. But, I stuck around noodling on the whole “wrapping & binding” thing, and it dawned on me that there was a “pretty simple” way to make R functions available to javascript using javascript’s Function()<\/a> constructor. I’ll eventually get this whole thing into the GH webr-experiments repo<\/a>, but you can see below and just view-source<\/a> (it’s as of the time of this post, in the 130’s re: line #’s) to check it out before that.<\/p>\n

Dynamic JavaScript Function Creation<\/h3>\n

The Function()<\/code> constructor has many modes, one of which involves providing the whole function source and letting it build a function for you. R folks likely know you can do that in R (ref: my {curlconverter} pkg<\/a>), and it’s as straightforward on the javascript side. Open up DevTools Console and enter this:<\/p>\n

const sayHello = new Function('return function (name) { return `Hello, ${name}` }')();\n<\/code><\/pre>\n
then call the function with some string value.<\/p>\n
We only need one input to create a dynamic R function wrapper (for SUPER BASIC R functions ONLY). Yes, I truly mean that you can just do this:<\/p>\n
let rbeta = await wrapRFunction(\"rbeta\");\nawait rbeta(10, 1, 1, 0)\n<\/code><\/pre>\n
and get back the result in the way WebR’s toJs()<\/code> function returns R objects:<\/p>\n
{\n  \"type\": \"double\",\n  \"names\": null,\n  \"values\": [\n    0.9398577840605595,\n    0.42045006265859153,\n    0.26946718094298633,\n    0.3913958406551122,\n    0.8123499099597378,\n    0.49116132695862963,\n    0.754970193716774,\n    0.2952198011408607,\n    0.11734111483990002,\n    0.6263863870230043\n  ]\n}\n<\/code><\/pre>\n
Formal Attire<\/h3>\n
R’s formals()<\/code> function will let us get the argument list to a function, including any default values. We won’t be using them in this MVP version of the auto-wrapper, but I see no reason we couldn’t do that in a later iteration. It’s “easy” to make that a javascript function “the hard way”:<\/p>\n
async function formals(rFunctionName) {\n  let result = await globalThis.webR.evalR(`formals(${rFunctionName})`);\n  let output = await result.toJs();\n  return(Promise.resolve(output))\n}\n<\/code><\/pre>\n
Now, we just need to use those names to construct the function. This is an ugly little function, but it’s really just doing some basic things:<\/p>\n
async function wrapRFunction(rFunctionName) {\n  let f = await formals(rFunctionName)\n  let argNames = f.names.filter(argName => argName != '...');\n  let params = argNames.join(', ')\n  let env = argNames.map(name => `${name}: ${name}`).join(', ');\n  let fbody =\n  `return async function ${rFunctionName}(${params}) {\n    let result = await globalThis.webR.evalR(\n      '${rFunctionName}(${params})',\n      { env: { ${env} }}\n   );\n    let output = await result.toJs();\n    globalThis.webR.destroy(result);\n    return Promise.resolve(output);\n  }`;\n  return new Function(fbody)()\n}\n<\/code><\/pre>\n