From 0f71411af69e4a2be33d2be3a076993020e9f430 Mon Sep 17 00:00:00 2001 From: Alan Dipert Date: Fri, 8 Feb 2019 12:52:42 -0800 Subject: [PATCH 1/2] First cut, using webpack to build react-tools.js --- .gitignore | 3 +- inst/www/react-tools/react-tools.js | 122 +- inst/www/react-tools/react-tools.js.map | 1 + karma.conf.js | 17 +- package.json | 13 +- srcjs/react-tools.js | 120 ++ webpack.config.js | 30 + yarn.lock | 1440 +++++++++++++---------- 8 files changed, 1005 insertions(+), 741 deletions(-) create mode 100644 inst/www/react-tools/react-tools.js.map create mode 100644 srcjs/react-tools.js create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore index a422f90..63e58fe 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ inst/doc node_modules reactR.Rcheck -reactR_*.tar.gz \ No newline at end of file +reactR_*.tar.gz +*.swp diff --git a/inst/www/react-tools/react-tools.js b/inst/www/react-tools/react-tools.js index aafdb66..3b68e09 100644 --- a/inst/www/react-tools/react-tools.js +++ b/inst/www/react-tools/react-tools.js @@ -1,120 +1,2 @@ -window.reactR = (function () { - /** - * Recursively transforms tag, a JSON representation of an instance of a - * React component and its children, into a React element suitable for - * passing to ReactDOM.render. - * @param {Object} components - * @param {Object} tag - */ - function hydrate(components, tag) { - if (typeof tag === 'string') return tag; - if (tag.name[0] === tag.name[0].toUpperCase() - && !components.hasOwnProperty(tag.name)) { - throw new Error("Unknown component: " + tag.name); - } - var elem = components.hasOwnProperty(tag.name) ? components[tag.name] : tag.name, - args = [elem, tag.attribs]; - for (var i = 0; i < tag.children.length; i++) { - args.push(hydrate(components, tag.children[i])); - } - return React.createElement.apply(React, args); - } - - var defaultOptions = { - // The name of the property on the root tag to use for the width, if - // it's updated. - widthProperty: "width", - // The name of the property on the root tag to use for the height, if - // it's updated. - heightProperty: "height", - // Whether or not to append the string 'px' to the width and height - // properties when they change. - appendPx: false, - // Whether or not to dynamically update the width and height properties - // of the last known tag when the computed width and height change in - // the browser. - renderOnResize: false - }; - - function mergeOptions(options) { - var merged = {}; - for (var k in defaultOptions) { - merged[k] = defaultOptions[k]; - } - for (var k in options) { - if (!defaultOptions.hasOwnProperty(k)) { - throw new Error("Unrecognized option: " + k); - } - merged[k] = options[k]; - } - return merged; - } - - function formatDimension(dim, options) { - if (options.appendPx) { - return dim + 'px'; - } else { - return dim; - } - } - - function isTag(value) { - return (typeof value === 'object') - && value.hasOwnProperty('name') - && value.hasOwnProperty('attribs') - && value.hasOwnProperty('children'); - } - - /** - * Creates an HTMLWidget that is updated by rendering a React component. - * React component constructors are made available by specifying them by - * name in the components object. - * @param {string} name - * @param {string} type - * @param {Object} components - * @param {Object} options - */ - function reactWidget(name, type, components, options) { - var actualOptions = mergeOptions(options); - HTMLWidgets.widget({ - name: name, - type: type, - factory: function (el, width, height) { - var lastValue, - renderValue = (function (value) { - if (actualOptions.renderOnResize) { - // value.tag might be a primitive string, in which - // case there is no attribs property. - if (typeof value.tag === 'object') { - value.tag.attribs[actualOptions["widthProperty"]] = formatDimension(width); - value.tag.attribs[actualOptions["heightProperty"]] = formatDimension(height); - } - lastValue = value; - } - ReactDOM.render(hydrate(components, value.tag), el); - }); - return { - renderValue: renderValue, - resize: function (newWidth, newHeight) { - if (actualOptions.renderOnResize) { - width = newWidth; - height = newHeight; - renderValue(lastValue); - } - } - }; - } - }) - } - - return { - reactWidget: reactWidget, - hydrate: hydrate, - __internal: { - defaultOptions: defaultOptions, - mergeOptions: mergeOptions, - formatDimension: formatDimension, - isTag: isTag - } - }; -})() \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}window.reactR=function(){function e(t,r){if("string"==typeof r)return r;if(r.name[0]===r.name[0].toUpperCase()&&!t.hasOwnProperty(r.name))throw new Error("Unknown component: "+r.name);for(var n=[t.hasOwnProperty(r.name)?t[r.name]:r.name,r.attribs],o=0;o Date: Mon, 11 Feb 2019 08:47:41 -0800 Subject: [PATCH 2/2] webpack: use mode = development --- inst/www/react-tools/react-tools.js | 230 +++++++++++++++++++++++- inst/www/react-tools/react-tools.js.map | 2 +- webpack.config.js | 1 + 3 files changed, 231 insertions(+), 2 deletions(-) diff --git a/inst/www/react-tools/react-tools.js b/inst/www/react-tools/react-tools.js index 3b68e09..ef3cc39 100644 --- a/inst/www/react-tools/react-tools.js +++ b/inst/www/react-tools/react-tools.js @@ -1,2 +1,230 @@ -!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}window.reactR=function(){function e(t,r){if("string"==typeof r)return r;if(r.name[0]===r.name[0].toUpperCase()&&!t.hasOwnProperty(r.name))throw new Error("Unknown component: "+r.name);for(var n=[t.hasOwnProperty(r.name)?t[r.name]:r.name,r.attribs],o=0;o