Use react vs. preact

Author: gnestor

bower.json

@@ -6,6 +6,7 @@
     "bootstrap": "bootstrap#~3.4",
     "bootstrap-tour": "0.9.0",
     "codemirror": "components/codemirror#~5.37",
+    "create-react-class": "https://cdn.jsdelivr.net/npm/[email protected]/create-react-class.min.js",
     "es6-promise": "~1.0",
     "font-awesome": "components/font-awesome#~4.7.0",
     "google-caja": "5669",
@@ -16,9 +17,7 @@
     "marked": "~0.4",
     "MathJax": "^2.7.4",
     "moment": "~2.19.3",
-    "preact": "https://unpkg.com/preact@~7.2.0/dist/preact.min.js",
-    "preact-compat": "https://unpkg.com/preact-compat@~3.14.3/dist/preact-compat.min.js",
-    "proptypes": "https://unpkg.com/proptypes@~0.14.4/index.js",
+    "react": "~16.0.0",
     "requirejs": "~2.2",
     "requirejs-text": "~2.0.15",
     "requirejs-plugins": "~1.0.3",

notebook/static/notebook/js/shortcuteditor.js

@@ -12,9 +12,6 @@ define([
     dialog,
     marked
 ) {
-    var render = preact.render;
-    var createClass = preactCompat.createClass;
-    var createElement = preactCompat.createElement;
 
 
 /**
@@ -33,7 +30,7 @@ var humanize_action_id = function(str) {
  * Wether an action have a keybinding or not.
  **/
 
-var KeyBinding = createClass({
+var KeyBinding = createReactClass({
   displayName: 'KeyBindings',
   getInitialState: function() {
     return {shrt:''};
@@ -53,38 +50,38 @@ var KeyBinding = createClass({
       event.preventDefault();
       return false;
     };
-    return createElement('form', {className:'jupyter-keybindings',
+    return React.createElement('form', {className:'jupyter-keybindings',
             onSubmit: binding_setter
         },
-              createElement('i', {className: "pull-right fa fa-plus", alt: 'add-keyboard-shortcut',
+              React.createElement('i', {className: "pull-right fa fa-plus", alt: 'add-keyboard-shortcut',
                   onClick: binding_setter
               }),
-              createElement('input', {
+              React.createElement('input', {
                                       type:'text', 
                                placeholder:'add shortcut', 
                                  className:'pull-right'+((available||empty)?'':' alert alert-danger'),
                                      value:that.state.shrt,
                                   onChange:that.handleShrtChange
               }),
               that.props.shortcuts ? that.props.shortcuts.map(function (item, index) {
-                return createElement('span', {className: 'pull-right'},
-                  createElement('kbd', {}, [
+                return React.createElement('span', {className: 'pull-right'},
+                  React.createElement('kbd', {}, [
                     item.h,
-                    createElement('i', {className: "fa fa-times", alt: 'remove '+item.h,
+                    React.createElement('i', {className: "fa fa-times", alt: 'remove '+item.h,
                       onClick:function () {
                         that.props.unbind(item.raw);
                       }
                     })
                   ])
                 );
               }): null,
-              createElement('div', {title: '(' + that.props.ckey + ')' ,
+              React.createElement('div', {title: '(' + that.props.ckey + ')' ,
                 className:'jupyter-keybindings-text'}, that.props.display )
       );
   }
 });
 
-var KeyBindingList = createClass({
+var KeyBindingList = createReactClass({
   displayName: 'KeyBindingList',
   getInitialState: function(){
     return {data:[]};
@@ -95,7 +92,7 @@ var KeyBindingList = createClass({
   render: function() {
       var that = this;
       var children = this.state.data.map(function (binding) {
-          return createElement(KeyBinding, Object.assign({}, binding, {
+          return React.createElement(KeyBinding, Object.assign({}, binding, {
           onAddBindings: function (shortcut, action) {
               that.props.bind(shortcut, action);
               that.setState({data:that.props.callback()});
@@ -107,7 +104,7 @@ var KeyBindingList = createClass({
              }
           }));
       });
-      children.unshift(createElement('div', {className:'well', key:'disclamer', id:'short-key-binding-intro', dangerouslySetInnerHTML:
+      children.unshift(React.createElement('div', {className:'well', key:'disclamer', id:'short-key-binding-intro', dangerouslySetInnerHTML:
             {__html: 
             marked(
 
@@ -116,7 +113,7 @@ var KeyBindingList = createClass({
             "See more [**details of defining keyboard shortcuts**](#long-key-binding-intro) below."
             )}
       }));
-      children.push(createElement('div', {className:'well', key:'disclamer', id:'long-key-binding-intro', dangerouslySetInnerHTML:
+      children.push(React.createElement('div', {className:'well', key:'disclamer', id:'long-key-binding-intro', dangerouslySetInnerHTML:
             {__html: 
             marked(
 
@@ -165,7 +162,7 @@ var KeyBindingList = createClass({
             "Changing the keybindings of edit mode is not currently available."
             )}
       }));
-      return createElement('div',{}, children);
+      return React.createElement('div',{}, children);
     }
 });
 
@@ -217,8 +214,8 @@ var ShortcutEditor = function(notebook) {
     mod.addClass("modal_stretch");
 
     mod.modal('show');
-    render(
-        createElement(KeyBindingList, {
+    ReactDOM.render(
+        React.createElement(KeyBindingList, {
             callback: function () { return  get_shortcuts_data(notebook);},
             bind: function (shortcut, command) {
                 return notebook.keyboard_manager.command_shortcuts._persist_shortcut(shortcut, command);

notebook/templates/page.html

@@ -16,9 +16,9 @@
     {% endblock %}
     <link rel="stylesheet" href="{{ base_url }}custom/custom.css" type="text/css" />
     <script src="{{static_url("components/es6-promise/promise.min.js")}}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{static_url('components/preact/index.js')}}" type="text/javascript"></script>
-    <script src="{{static_url('components/proptypes/index.js')}}" type="text/javascript"></script>
-    <script src="{{static_url('components/preact-compat/index.js')}}" type="text/javascript"></script>
+    <script src="{{static_url('components/react/react.production.min.js')}}" type="text/javascript"></script>
+    <script src="{{static_url('components/react/react-dom.production.min.js')}}" type="text/javascript"></script>
+    <script src="{{static_url('components/create-react-class/index.js')}}" type="text/javascript"></script>
     <script src="{{static_url('components/requirejs/require.js') }}" type="text/javascript" charset="utf-8"></script>
     <script>
       require.config({

setupbase.py

@@ -136,6 +136,7 @@ def find_package_data():
         pjoin(components, "bootstrap", "dist", "js", "bootstrap.min.js"),
         pjoin(components, "bootstrap-tour", "build", "css", "bootstrap-tour.min.css"),
         pjoin(components, "bootstrap-tour", "build", "js", "bootstrap-tour.min.js"),
+        pjoin(components, "create-react-class", "index.js"),
         pjoin(components, "font-awesome", "css", "*.css"),
         pjoin(components, "es6-promise", "*.js"),
         pjoin(components, "font-awesome", "fonts", "*.*"),
@@ -148,9 +149,7 @@ def find_package_data():
         pjoin(components, "jquery-ui", "themes", "smoothness", "jquery-ui.min.css"),
         pjoin(components, "jquery-ui", "themes", "smoothness", "images", "*"),
         pjoin(components, "marked", "lib", "marked.js"),
-        pjoin(components, "preact", "index.js"),
-        pjoin(components, "preact-compat", "index.js"),
-        pjoin(components, "proptypes", "index.js"),
+        pjoin(components, "react", "react.production.min.js"),
         pjoin(components, "requirejs", "require.js"),
         pjoin(components, "requirejs-plugins", "src", "json.js"),
         pjoin(components, "requirejs-text", "text.js"),