Skip to content

Commit

Permalink
feat: Adds support for Rmarkdown documents
Browse files Browse the repository at this point in the history
  • Loading branch information
andyquinterom committed Jul 21, 2023
1 parent 6647900 commit 39b6c08
Show file tree
Hide file tree
Showing 15 changed files with 853 additions and 340 deletions.
184 changes: 94 additions & 90 deletions inst/www/shiny.react/shiny-react.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion inst/www/shiny.react/shiny-react.js.map

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion js/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ module.exports = {
},
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'airbnb',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
Expand All @@ -19,6 +21,7 @@ module.exports = {
},
plugins: [
'react',
'@typescript-eslint'
],
rules: {},
settings: {
Expand Down
14 changes: 11 additions & 3 deletions js/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"private": true,
"scripts": {
"test": "jest",
"lint": "eslint --ext .js,.jsx src"
"lint": "eslint --ext .js,.jsx,ts,tsx src"
},
"babel": {
"presets": [
Expand All @@ -15,9 +15,11 @@
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.12.10",
"@babel/register": "^7.12.10",
"@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^6.1.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.0.4",
"eslint": "7.24.0",
"eslint": "^8.45.0",
"eslint-config-airbnb": "18.2.1",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.22.1",
Expand All @@ -28,8 +30,14 @@
"webpack-cli": "^5.0.1"
},
"dependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/rstudio-shiny": "https://github.com/rstudio/shiny#v1.7.0",
"jest": "^26.6.3",
"lodash": "^4.17.21",
"prop-types": "^15.7.2"
"prop-types": "^15.7.2",
"source-map-loader": "^4.0.1",
"ts-loader": "^9.4.4",
"typescript": "^5.1.6"
}
}
File renamed without changes.
17 changes: 9 additions & 8 deletions js/src/react/adapters.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Shiny from '@/shiny';
import PropTypes from 'prop-types';
import React, { useEffect, useState, useRef } from 'react';

import isShiny from './isShiny';
import mapReactData from './mapReactData';

export { throttle, debounce } from 'lodash';
Expand All @@ -15,11 +14,13 @@ export { throttle, debounce } from 'lodash';

const updateHandlers = {};

Shiny.addCustomMessageHandler('updateReactInput', ({ inputId, data }) => {
if (inputId in updateHandlers) {
updateHandlers[inputId](mapReactData(data));
} else throw new Error(`Attempted to update non-existent React input '${inputId}'`);
});
if (isShiny()) {
window.Shiny.addCustomMessageHandler('updateReactInput', ({ inputId, data }) => {
if (inputId in updateHandlers) {
updateHandlers[inputId](mapReactData(data));
} else throw new Error(`Attempted to update non-existent React input '${inputId}'`);
});
}

const withFirstCall = (first, rest) => {
let firstCall = true;
Expand Down Expand Up @@ -48,7 +49,7 @@ function useValue(inputId, defaultValue, rateLimit) {
const [value, setValue] = useState(defaultValue);
const ref = useRef();
useEffect(() => {
const setInputValue = (v) => Shiny.setInputValue(inputId, v);
const setInputValue = (v) => window.Shiny.setInputValue(inputId, v);
if (rateLimit === undefined) {
ref.current = setInputValue;
// No cleanup effect
Expand Down
19 changes: 10 additions & 9 deletions js/src/react/findAndRenderReactData.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import Shiny from '@/shiny';
import ReactDOM from 'react-dom';

import onceShinyInitialized from './onceShinyInitialized';
import mapReactData from './mapReactData';
import isShiny from './isShiny';

const binding = new Shiny.OutputBinding();
binding.find = (scope) => scope.find('.react-container');
binding.renderValue = (container, { data, deps }) => {
Shiny.renderDependencies(deps);
ReactDOM.render(mapReactData(data), container);
};
Shiny.outputBindings.register(binding);
if (isShiny()) {
const binding = new window.Shiny.OutputBinding();
binding.find = (scope) => scope.find('.react-container');
binding.renderValue = (container, { data, deps }) => {
window.Shiny.renderDependencies(deps);
ReactDOM.render(mapReactData(data), container);
};
window.Shiny.outputBindings.register(binding);
}

function unmountContainersAtNode(node) {
if (node instanceof Element) {
Expand Down
3 changes: 3 additions & 0 deletions js/src/react/isShiny.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function isShiny(): boolean {
return !!window.Shiny
}
5 changes: 2 additions & 3 deletions js/src/react/mapReactData.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Shiny from '@/shiny';
import React from 'react';

import { needsBindingWrapper, ShinyBindingWrapper } from './shinyBindings';
Expand Down Expand Up @@ -87,14 +86,14 @@ dataMappers.element = ({ module, name, props: propsData }) => {
// on every call (this works thanks to `priority: 'event'`).
dataMappers.event = ({ id }) => (
() => {
Shiny.setInputValue(id, true, { priority: 'event' });
window.Shiny.setInputValue(id, true, { priority: 'event' });
}
);

// Used to implement `setInput()` R function.
dataMappers.input = ({ id, jsAccessor }) => {
const getValue = eval(`(args) => (args${jsAccessor})`); // eslint-disable-line no-eval
return (...args) => {
Shiny.setInputValue(id, getValue(args), { priority: 'event' });
window.Shiny.setInputValue(id, getValue(args), { priority: 'event' });
};
};
4 changes: 2 additions & 2 deletions js/src/react/onceShinyInitialized.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Shiny from '@/shiny';
import isShiny from './isShiny';

// Shiny initializes some functions after a delay:
// https://github.com/rstudio/shiny/blob/cda59da698eba1deda20ba09ca8b7f0b0b149f87/srcts/src/shiny/index.ts#L101
function shinyInitialized() {
return Shiny.setInputValue !== undefined;
return isShiny() ? window.Shiny.setInputValue !== undefined : true;
}

// Run `callback` and keep retrying with exponential backoff until it returns true.
Expand Down
7 changes: 3 additions & 4 deletions js/src/react/shinyBindings.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Shiny from '@/shiny';
import PropTypes from 'prop-types';
import React, { useEffect, useRef } from 'react';

Expand All @@ -23,9 +22,9 @@ export function ShinyBindingWrapper({ children }) {
const ref = useRef();
useEffect(() => {
const wrapper = ref.current;
Shiny.initializeInputs(wrapper);
Shiny.bindAll(wrapper);
return () => Shiny.unbindAll(wrapper);
window.Shiny.initializeInputs(wrapper);
window.Shiny.bindAll(wrapper);
return () => window.Shiny.unbindAll(wrapper);
}, []);

return (
Expand Down
1 change: 0 additions & 1 deletion js/src/setupModules.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ window.jsmodule = {
'prop-types': require('prop-types'),
'react': require('react'),
'react-dom': require('react-dom'),
'@/shiny': require('@/shiny'),
'@/shiny.react': require('./react'),
'@/shiny.react/test-components': require('./test-components'),
};
109 changes: 109 additions & 0 deletions js/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */

/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */

/* Language and Environment */
"target": "es2019", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
"jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */

/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

/* JavaScript Support */
"allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
// "outDir": "./", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */

/* Type Checking */
"strict": false, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */

/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
10 changes: 4 additions & 6 deletions js/webpack.config.babel.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,15 @@ export default {
path: join(__dirname, '..', 'inst', 'www', 'shiny.react'),
filename: 'shiny-react.js',
},
resolve: { extensions: ['.js', '.jsx'] },
resolve: { extensions: ['.js', '.jsx', '.jsx', '.tsx', '.ts'] },
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader'],
},
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
{ test: /\.(js|jsx)$/, use: ['babel-loader'] },
],
},
externals: {
'@/shiny': 'Shiny',
'react': 'React',
'react-dom': 'ReactDOM',
},
Expand Down
Loading

0 comments on commit 39b6c08

Please sign in to comment.