Remove react and add preact

src/main.js

@@ -29,16 +29,21 @@ require.config({
     paths: {
         "text"              : "thirdparty/text/text",
         "i18n"              : "thirdparty/i18n/i18n",
-        "react"             : "thirdparty/react",
 
         // The file system implementation. Change this value to use different
         // implementations (e.g. cloud-based storage).
         "fileSystemImpl"    : "filesystem/impls/appshell/AppshellFileSystem"
     },
+    packages: [
+        {
+            name: "thirdparty/preact",
+            location: "thirdparty/preact",
+            main: "preact-compat"
+        }
+    ],
     map: {
         "*": {
-            "thirdparty/CodeMirror2": "thirdparty/CodeMirror",
-            "thirdparty/react":       "react"
+            "thirdparty/CodeMirror2": "thirdparty/CodeMirror"
         }
     }
 });

src/project/FileTreeView.js

@@ -31,8 +31,8 @@
 define(function (require, exports, module) {
     "use strict";
 
-    var React             = require("thirdparty/react"),
-        ReactDOM          = require("thirdparty/react-dom"),
+    var React             = require("thirdparty/preact"),
+        ReactDOM          = require("thirdparty/preact"),
         Classnames        = require("thirdparty/classnames"),
         Immutable         = require("thirdparty/immutable"),
         _                 = require("thirdparty/lodash"),
@@ -219,6 +219,7 @@ define(function (require, exports, module) {
 
             var node = this.refs.name;
             node.setSelectionRange(0, _getName(fullname, extension).length);
+            node.focus(); // set focus on the rename input
             ViewUtils.scrollElementIntoView($("#project-files-container"), $(node), true);
         },
 
@@ -480,6 +481,11 @@ define(function (require, exports, module) {
                 extension = LanguageManager.getCompoundFileExtension(fullname),
                 name = _getName(fullname, extension);
 
+            // React automatically wraps content in a span element whereas preact doesn't, so do it manually
+            if (name) {
+                name = DOM.span({}, name);
+            }
+
             if (extension) {
                 extension = DOM.span({
                     className: "extension"
@@ -601,6 +607,7 @@ define(function (require, exports, module) {
 
             var node = this.refs.name;
             node.setSelectionRange(0, fullname.length);
+            node.focus(); // set focus on the rename input
             ViewUtils.scrollElementIntoView($("#project-files-container"), $(node), true);
         },
 
@@ -758,11 +765,16 @@ define(function (require, exports, module) {
                     parentPath: this.props.parentPath
                 });
             } else {
+                // React automatically wraps content in a span element whereas preact doesn't, so do it manually
+                if (this.props.name) {
+                    var name = DOM.span({}, this.props.name);
+                }
+
                 // Need to flatten the arguments because getIcons returns an array
                 var aArgs = _.flatten([{
                     href: "#",
                     className: directoryClasses
-                }, thickness, this.getIcons(), this.props.name]);
+                }, thickness, this.getIcons(), name]);
                 nameDisplay = DOM.a.apply(DOM.a, aArgs);
             }
 
@@ -1035,11 +1047,11 @@ define(function (require, exports, module) {
 
             return DOM.div(
                 null,
+                contents,
                 selectionBackground,
                 contextBackground,
                 extensionForSelection,
-                extensionForContext,
-                contents
+                extensionForContext
             );
         }
     }));

src/styles/jsTreeTheme.less

@@ -26,7 +26,7 @@
 /* (these are based on jsTree's default theme .css file, so they are not very LESS-like) */
 @li-min-height: 23px;
 
-.jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
+.jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; z-index:1; }
 .jstree li { display:block; min-height:@li-min-height; line-height:16px; white-space:nowrap; min-width:18px; }
 .jstree-rtl li { margin-left:0; margin-right:18px; }
 .jstree > ul > li { margin-left:0; }

src/thirdparty/preact/events.js

@@ -0,0 +1,8 @@
+define (function(require, exports, module){
+    'use strict';
+
+    module.exports = `onKeyDown onKeyPress onKeyUp onFocus onBlur onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onChange onInput onSubmit onTouchCancel onTouchEnd onTouchMove onTouchStart onLoad onError onAnimationStart onAnimationEnd onAnimationIteration onTransitionEnd`.split(' ').map(item => {
+        const event =  item.replace('on', '');
+        return event.charAt(0).toLowerCase() + event.substr(1);
+    });
+});