mirror of
https://github.com/adobe/brackets.git
synced 2024-11-20 01:42:55 +01:00
Remove react and add preact (#13608)
* Add Preact library * Change react to preact * Fix problems caused by replacing react with preact * Add Preact test utils and dependencies * Change requires from react to preact in FileTreeView-test * Fix problems caused by replacing react test utils with preact test utils * Remove react * Make findRenderedDOMComponentWithTag function as helper function * Find and Replace react with preact * Make preact, preact-compat, preact-test-utils as node_modules * Change preact-compat dependency to point to adobe's fork
This commit is contained in:
Boopesh Mahendran
Swagatam Mitra
parent
92819092bd
commit
c0c1b677d6
5
.gitignore
vendored
5
.gitignore
vendored
@ -13,6 +13,11 @@ Thumbs.db
|
||||
# ignore files copied from node_modules to src/thirdparty
|
||||
/src/thirdparty/CodeMirror
|
||||
/src/thirdparty/less.min.js
|
||||
/src/thirdparty/preact
|
||||
/src/thirdparty/preact-compat
|
||||
/src/thirdparty/preact-test-utils
|
||||
/src/thirdparty/simulate-event
|
||||
/src/thirdparty/xtend
|
||||
|
||||
# ignore compiled files
|
||||
/dist
|
||||
|
||||
30
Gruntfile.js
30
Gruntfile.js
@ -141,13 +141,41 @@ module.exports = function (grunt) {
|
||||
'less/dist/less.min.js'
|
||||
]
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
dest: 'src/thirdparty/preact-compat',
|
||||
cwd: 'src/node_modules/preact-compat',
|
||||
src: [
|
||||
'dist/preact-compat.min.js'
|
||||
]
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
dest: 'src/thirdparty/simulate-event',
|
||||
cwd: 'src/node_modules/simulate-event',
|
||||
src: [
|
||||
'simulate-event.js'
|
||||
]
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
dest: 'src/thirdparty/xtend',
|
||||
cwd: 'src/node_modules/xtend',
|
||||
src: [
|
||||
'mutable.js',
|
||||
'immutable.js'
|
||||
]
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
dest: 'src/thirdparty/acorn',
|
||||
cwd: 'src/node_modules/acorn',
|
||||
src: [
|
||||
'dist/{,*/}*'
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -29,16 +29,16 @@ 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"
|
||||
"fileSystemImpl" : "filesystem/impls/appshell/AppshellFileSystem",
|
||||
"preact-compat" : "thirdparty/preact-compat/preact-compat.min",
|
||||
"preact" : "thirdparty/preact/preact"
|
||||
},
|
||||
map: {
|
||||
"*": {
|
||||
"thirdparty/CodeMirror2": "thirdparty/CodeMirror",
|
||||
"thirdparty/react": "react"
|
||||
"thirdparty/CodeMirror2": "thirdparty/CodeMirror"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
60
src/npm-shrinkwrap.json
generated
60
src/npm-shrinkwrap.json
generated
@ -232,6 +232,16 @@
|
||||
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.1.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"immutability-helper": {
|
||||
"version": "2.3.1",
|
||||
"from": "immutability-helper@>=2.1.2 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.3.1.tgz"
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.2",
|
||||
"from": "invariant@>=2.2.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz"
|
||||
},
|
||||
"is-my-json-valid": {
|
||||
"version": "2.15.0",
|
||||
"from": "is-my-json-valid@>=2.12.4 <3.0.0",
|
||||
@ -262,6 +272,11 @@
|
||||
"resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "3.0.2",
|
||||
"from": "js-tokens@>=3.0.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz"
|
||||
},
|
||||
"jsbn": {
|
||||
"version": "0.1.1",
|
||||
"from": "jsbn@>=0.1.0 <0.2.0",
|
||||
@ -297,6 +312,11 @@
|
||||
"from": "less@2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/less/-/less-2.7.2.tgz"
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.3.1",
|
||||
"from": "loose-envify@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz"
|
||||
},
|
||||
"mime": {
|
||||
"version": "1.3.4",
|
||||
"from": "mime@>=1.2.11 <2.0.0",
|
||||
@ -343,6 +363,36 @@
|
||||
"resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"preact": {
|
||||
"version": "8.2.1",
|
||||
"from": "preact@8.2.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-8.2.1.tgz"
|
||||
},
|
||||
"preact-compat": {
|
||||
"version": "3.17.0",
|
||||
"from": "boopeshmahendran/preact-compat",
|
||||
"resolved": "git://github.com/boopeshmahendran/preact-compat.git#3b7df38300fc4f1b26e9547a3ea1220e9fbc6d74"
|
||||
},
|
||||
"preact-render-to-string": {
|
||||
"version": "3.6.3",
|
||||
"from": "preact-render-to-string@>=3.6.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-3.6.3.tgz"
|
||||
},
|
||||
"preact-test-utils": {
|
||||
"version": "0.1.3",
|
||||
"from": "preact-test-utils@0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/preact-test-utils/-/preact-test-utils-0.1.3.tgz"
|
||||
},
|
||||
"preact-transition-group": {
|
||||
"version": "1.1.1",
|
||||
"from": "preact-transition-group@>=1.1.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/preact-transition-group/-/preact-transition-group-1.1.1.tgz"
|
||||
},
|
||||
"pretty-format": {
|
||||
"version": "3.8.0",
|
||||
"from": "pretty-format@>=3.5.1 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz"
|
||||
},
|
||||
"promise": {
|
||||
"version": "7.1.1",
|
||||
"from": "promise@>=7.1.1 <8.0.0",
|
||||
@ -373,6 +423,11 @@
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"simulate-event": {
|
||||
"version": "1.4.0",
|
||||
"from": "simulate-event@>=1.4.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/simulate-event/-/simulate-event-1.4.0.tgz"
|
||||
},
|
||||
"sntp": {
|
||||
"version": "1.0.9",
|
||||
"from": "sntp@>=1.0.0 <2.0.0",
|
||||
@ -399,6 +454,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"standalone-react-addons-pure-render-mixin": {
|
||||
"version": "0.1.1",
|
||||
"from": "standalone-react-addons-pure-render-mixin@>=0.1.1 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz"
|
||||
},
|
||||
"stringstream": {
|
||||
"version": "0.0.5",
|
||||
"from": "stringstream@>=0.0.4 <0.1.0",
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
"dependencies": {
|
||||
"acorn": "5.1.1",
|
||||
"codemirror": "5.28.0",
|
||||
"less": "2.7.2"
|
||||
"less": "2.7.2",
|
||||
"preact": "8.2.1",
|
||||
"preact-test-utils": "0.1.3",
|
||||
"preact-compat": "adobe/preact-compat"
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,14 +25,13 @@
|
||||
|
||||
/**
|
||||
* This is the view layer (template) for the file tree in the sidebar. It takes a FileTreeViewModel
|
||||
* and renders it to the given element using React. User actions are signaled via an ActionCreator
|
||||
* and renders it to the given element using Preact. User actions are signaled via an ActionCreator
|
||||
* (in the Flux sense).
|
||||
*/
|
||||
define(function (require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var React = require("thirdparty/react"),
|
||||
ReactDOM = require("thirdparty/react-dom"),
|
||||
var Preact = require("preact-compat"),
|
||||
Classnames = require("thirdparty/classnames"),
|
||||
Immutable = require("thirdparty/immutable"),
|
||||
_ = require("thirdparty/lodash"),
|
||||
@ -42,7 +41,7 @@ define(function (require, exports, module) {
|
||||
ViewUtils = require("utils/ViewUtils"),
|
||||
KeyEvent = require("utils/KeyEvent");
|
||||
|
||||
var DOM = React.DOM;
|
||||
var DOM = Preact.DOM;
|
||||
|
||||
/**
|
||||
* @private
|
||||
@ -116,7 +115,7 @@ define(function (require, exports, module) {
|
||||
* Create an appropriate div based "thickness" to indent the tree correctly.
|
||||
*
|
||||
* @param {int} depth The depth of the current node.
|
||||
* @return {ReactComponent} The resulting div.
|
||||
* @return {PreactComponent} The resulting div.
|
||||
*/
|
||||
function _createThickness(depth) {
|
||||
return DOM.div({
|
||||
@ -133,7 +132,7 @@ define(function (require, exports, module) {
|
||||
* Create, and indent correctly, the arrow icons used for the folders.
|
||||
*
|
||||
* @param {int} depth The depth of the current node.
|
||||
* @return {ReactComponent} The resulting ins.
|
||||
* @return {PreactComponent} The resulting ins.
|
||||
*/
|
||||
function _createAlignedIns(depth) {
|
||||
return DOM.ins({
|
||||
@ -206,7 +205,7 @@ define(function (require, exports, module) {
|
||||
* * name: the name of the file, including the extension
|
||||
* * actions: the action creator responsible for communicating actions the user has taken
|
||||
*/
|
||||
var fileRenameInput = React.createFactory(React.createClass({
|
||||
var fileRenameInput = Preact.createFactory(Preact.createClass({
|
||||
mixins: [renameBehavior],
|
||||
|
||||
/**
|
||||
@ -219,6 +218,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);
|
||||
},
|
||||
|
||||
@ -291,7 +291,7 @@ define(function (require, exports, module) {
|
||||
* Calls the icon providers to get the collection of icons (most likely just one) for
|
||||
* the current file or directory.
|
||||
*
|
||||
* @return {Array.<ReactComponent>} icon components to render
|
||||
* @return {Array.<PreactComponent>} icon components to render
|
||||
*/
|
||||
getIcons: function () {
|
||||
var result,
|
||||
@ -302,14 +302,14 @@ define(function (require, exports, module) {
|
||||
result = extensions.get("icons").map(function (callback) {
|
||||
try {
|
||||
var result = callback(data);
|
||||
if (result && !React.isValidElement(result)) {
|
||||
result = React.DOM.span({
|
||||
if (result && !Preact.isValidElement(result)) {
|
||||
result = Preact.DOM.span({
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: $(result)[0].outerHTML
|
||||
}
|
||||
});
|
||||
}
|
||||
return result; // by this point, returns either undefined or a React object
|
||||
return result; // by this point, returns either undefined or a Preact object
|
||||
} catch (e) {
|
||||
console.error("Exception thrown in FileTreeView icon provider: " + e, e.stack);
|
||||
}
|
||||
@ -362,7 +362,7 @@ define(function (require, exports, module) {
|
||||
* * extensions: registered extensions for the file tree
|
||||
* * forceRender: causes the component to run render
|
||||
*/
|
||||
var fileNode = React.createFactory(React.createClass({
|
||||
var fileNode = Preact.createFactory(Preact.createClass({
|
||||
mixins: [contextSettable, pathComputer, extendable],
|
||||
|
||||
/**
|
||||
@ -394,11 +394,11 @@ define(function (require, exports, module) {
|
||||
|
||||
if (isSelected && !wasSelected) {
|
||||
// TODO: This shouldn't really know about project-files-container
|
||||
// directly. It is probably the case that our React tree should actually
|
||||
// directly. It is probably the case that our Preact tree should actually
|
||||
// start with project-files-container instead of just the interior of
|
||||
// project-files-container and then the file tree will be one self-contained
|
||||
// functional unit.
|
||||
ViewUtils.scrollElementIntoView($("#project-files-container"), $(ReactDOM.findDOMNode(this)), true);
|
||||
ViewUtils.scrollElementIntoView($("#project-files-container"), $(Preact.findDOMNode(this)), true);
|
||||
} else if (!isSelected && wasSelected && this.state.clickTimer !== null) {
|
||||
this.clearTimer();
|
||||
}
|
||||
@ -480,6 +480,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"
|
||||
@ -590,7 +595,7 @@ define(function (require, exports, module) {
|
||||
* * name: the name of the file, including the extension
|
||||
* * actions: the action creator responsible for communicating actions the user has taken
|
||||
*/
|
||||
var directoryRenameInput = React.createFactory(React.createClass({
|
||||
var directoryRenameInput = Preact.createFactory(Preact.createClass({
|
||||
mixins: [renameBehavior],
|
||||
|
||||
/**
|
||||
@ -601,6 +606,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);
|
||||
},
|
||||
|
||||
@ -638,7 +644,7 @@ define(function (require, exports, module) {
|
||||
* * extensions: registered extensions for the file tree
|
||||
* * forceRender: causes the component to run render
|
||||
*/
|
||||
directoryNode = React.createFactory(React.createClass({
|
||||
directoryNode = Preact.createFactory(Preact.createClass({
|
||||
mixins: [contextSettable, pathComputer, extendable],
|
||||
|
||||
/**
|
||||
@ -758,11 +764,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);
|
||||
}
|
||||
|
||||
@ -787,7 +798,7 @@ define(function (require, exports, module) {
|
||||
* * extensions: registered extensions for the file tree
|
||||
* * forceRender: causes the component to run render
|
||||
*/
|
||||
directoryContents = React.createFactory(React.createClass({
|
||||
directoryContents = Preact.createFactory(Preact.createClass({
|
||||
|
||||
/**
|
||||
* Need to re-render if the sort order or the contents change.
|
||||
@ -852,7 +863,7 @@ define(function (require, exports, module) {
|
||||
* * visible: should this be visible now
|
||||
* * selectedClassName: class name applied to the element that is selected
|
||||
*/
|
||||
var fileSelectionBox = React.createFactory(React.createClass({
|
||||
var fileSelectionBox = Preact.createFactory(Preact.createClass({
|
||||
/**
|
||||
* When the component has updated in the DOM, reposition it to where the currently
|
||||
* selected node is located now.
|
||||
@ -862,7 +873,7 @@ define(function (require, exports, module) {
|
||||
return;
|
||||
}
|
||||
|
||||
var node = ReactDOM.findDOMNode(this),
|
||||
var node = Preact.findDOMNode(this),
|
||||
selectedNode = $(node.parentNode).find(this.props.selectedClassName),
|
||||
selectionViewInfo = this.props.selectionViewInfo;
|
||||
|
||||
@ -901,7 +912,7 @@ define(function (require, exports, module) {
|
||||
* * selectedClassName: class name applied to the element that is selected
|
||||
* * className: class to be applied to the extension element
|
||||
*/
|
||||
var selectionExtension = React.createFactory(React.createClass({
|
||||
var selectionExtension = Preact.createFactory(Preact.createClass({
|
||||
/**
|
||||
* When the component has updated in the DOM, reposition it to where the currently
|
||||
* selected node is located now.
|
||||
@ -911,7 +922,7 @@ define(function (require, exports, module) {
|
||||
return;
|
||||
}
|
||||
|
||||
var node = ReactDOM.findDOMNode(this),
|
||||
var node = Preact.findDOMNode(this),
|
||||
selectedNode = $(node.parentNode).find(this.props.selectedClassName).closest("li"),
|
||||
selectionViewInfo = this.props.selectionViewInfo;
|
||||
|
||||
@ -977,7 +988,7 @@ define(function (require, exports, module) {
|
||||
* * forceRender: causes the component to run render
|
||||
* * platform: platform that Brackets is running on
|
||||
*/
|
||||
var fileTreeView = React.createFactory(React.createClass({
|
||||
var fileTreeView = Preact.createFactory(Preact.createClass({
|
||||
|
||||
/**
|
||||
* Update for any change in the tree data or directory sorting preference.
|
||||
@ -1035,11 +1046,11 @@ define(function (require, exports, module) {
|
||||
|
||||
return DOM.div(
|
||||
null,
|
||||
contents,
|
||||
selectionBackground,
|
||||
contextBackground,
|
||||
extensionForSelection,
|
||||
extensionForContext,
|
||||
contents
|
||||
extensionForContext
|
||||
);
|
||||
}
|
||||
}));
|
||||
@ -1059,7 +1070,7 @@ define(function (require, exports, module) {
|
||||
return;
|
||||
}
|
||||
|
||||
ReactDOM.render(fileTreeView({
|
||||
Preact.render(fileTreeView({
|
||||
treeData: viewModel.treeData,
|
||||
selectionViewInfo: viewModel.selectionViewInfo,
|
||||
sortDirectoriesFirst: viewModel.sortDirectoriesFirst,
|
||||
|
||||
@ -129,8 +129,8 @@ define(function (require, exports, module) {
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* Reference to the container of the React component. Everything in this
|
||||
* node is managed by React.
|
||||
* Reference to the container of the Preact component. Everything in this
|
||||
* node is managed by Preact.
|
||||
* @type {Element}
|
||||
*/
|
||||
var fileTreeViewContainer;
|
||||
@ -1358,11 +1358,11 @@ define(function (require, exports, module) {
|
||||
* Adds an icon provider. The callback is invoked before each tree item is rendered, and can
|
||||
* return content to prepend to the item.
|
||||
*
|
||||
* @param {!function(!{name:string, fullPath:string, isFile:boolean}):?string|jQuery|DOMNode|React.DOM.ins} callback
|
||||
* @param {!function(!{name:string, fullPath:string, isFile:boolean}):?string|jQuery|DOMNode|Preact.DOM.ins} callback
|
||||
* * `name`: the file or directory name
|
||||
* * `fullPath`: full path to the file or directory
|
||||
* * `isFile`: true if it's a file, false if it's a directory
|
||||
* Return a string of HTML text, a React.DOM.ins instance, a jQuery object, or a DOM node; or undefined
|
||||
* Return a string of HTML text, a Preact.DOM.ins instance, a jQuery object, or a DOM node; or undefined
|
||||
* to prepend nothing.
|
||||
*/
|
||||
function addIconProvider(callback) {
|
||||
|
||||
@ -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; }
|
||||
|
||||
42
src/thirdparty/react-dom.js
vendored
42
src/thirdparty/react-dom.js
vendored
@ -1,42 +0,0 @@
|
||||
/**
|
||||
* ReactDOM v0.14.7
|
||||
*
|
||||
* Copyright 2013-2015, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
*/
|
||||
// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
|
||||
;(function(f) {
|
||||
// CommonJS
|
||||
if (typeof exports === "object" && typeof module !== "undefined") {
|
||||
module.exports = f(require('react'));
|
||||
|
||||
// RequireJS
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define(['react'], f);
|
||||
|
||||
// <script>
|
||||
} else {
|
||||
var g;
|
||||
if (typeof window !== "undefined") {
|
||||
g = window;
|
||||
} else if (typeof global !== "undefined") {
|
||||
g = global;
|
||||
} else if (typeof self !== "undefined") {
|
||||
g = self;
|
||||
} else {
|
||||
// works providing we're not in "use strict";
|
||||
// needed for Java 8 Nashorn
|
||||
// see https://github.com/facebook/react/issues/3037
|
||||
g = this;
|
||||
}
|
||||
g.ReactDOM = f(g.React);
|
||||
}
|
||||
|
||||
})(function(React) {
|
||||
return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
||||
});
|
||||
20771
src/thirdparty/react.js
vendored
20771
src/thirdparty/react.js
vendored
File diff suppressed because it is too large
Load Diff
@ -26,6 +26,18 @@ module.exports = function (grunt) {
|
||||
"./src/thirdparty/semver.browser.js",
|
||||
"-p",
|
||||
"--output-library-target=amd"
|
||||
],
|
||||
[
|
||||
"./src/node_modules/preact/dist/preact.min.js",
|
||||
"./src/thirdparty/preact/preact.js",
|
||||
"-p",
|
||||
"--output-library-target=amd"
|
||||
],
|
||||
[
|
||||
"./src/node_modules/preact-test-utils/lib/index.js",
|
||||
"./src/thirdparty/preact-test-utils/preact-test-utils.js",
|
||||
"-p",
|
||||
"--output-library-target=amd"
|
||||
]
|
||||
];
|
||||
var doneWithWebpackTask = _.after(webpackTasks.length, done);
|
||||
|
||||
@ -32,14 +32,13 @@ require.config({
|
||||
"spec" : "../test/spec",
|
||||
"text" : "thirdparty/text/text",
|
||||
"i18n" : "thirdparty/i18n/i18n",
|
||||
"react" : "thirdparty/react",
|
||||
"fileSystemImpl" : "filesystem/impls/appshell/AppshellFileSystem",
|
||||
"preferences/PreferencesImpl" : "../test/TestPreferencesImpl"
|
||||
},
|
||||
map: {
|
||||
"*": {
|
||||
"thirdparty/react": "react"
|
||||
}
|
||||
"preferences/PreferencesImpl" : "../test/TestPreferencesImpl",
|
||||
"preact-compat" : "thirdparty/preact-compat/preact-compat.min",
|
||||
"preact" : "thirdparty/preact/preact",
|
||||
"preact-test-utils" : "thirdparty/preact-test-utils/preact-test-utils",
|
||||
"simulate-event" : "thirdparty/simulate-event/simulate-event",
|
||||
"xtend" : "thirdparty/xtend"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -29,21 +29,39 @@ define(function (require, exports, module) {
|
||||
|
||||
var FileTreeView = require("project/FileTreeView"),
|
||||
FileTreeViewModel = require("project/FileTreeViewModel"),
|
||||
React = require("thirdparty/react"),
|
||||
ReactDOM = require("thirdparty/react-dom"),
|
||||
Preact = require("preact-compat"),
|
||||
Immutable = require("thirdparty/immutable"),
|
||||
RTU = React.addons.TestUtils,
|
||||
PTU = require("preact-test-utils"),
|
||||
_ = require("thirdparty/lodash");
|
||||
|
||||
// Preact Test Utils doesn't have findRenderedDOMComponentWithTag method
|
||||
// So create it
|
||||
var findRenderedDOMComponentWithTag = function(root, tagName) {
|
||||
var nodes = [];
|
||||
if (root.base.tagName.toUpperCase() === tagName.toUpperCase()){
|
||||
nodes.push(root.base);
|
||||
} else {
|
||||
for (var i = 0; i < root.base.childNodes.length; ++i) {
|
||||
if (root.base.childNodes[i].tagName === tagName.toUpperCase()) {
|
||||
nodes.push(root.base.childNodes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (nodes.length !== 1) {
|
||||
throw new Error('Did not find exactly one match for tag:' + tagName);
|
||||
}
|
||||
return nodes[0];
|
||||
};
|
||||
|
||||
describe("FileTreeView", function () {
|
||||
|
||||
describe("_fileNode", function () {
|
||||
it("should create a component with the right information", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map()
|
||||
}));
|
||||
var a = RTU.findRenderedDOMComponentWithTag(rendered, "a");
|
||||
var a = findRenderedDOMComponentWithTag(rendered, "a");
|
||||
expect(a.children[0].textContent).toBe("");
|
||||
expect(a.children[1].textContent).toBe(" ");
|
||||
expect(a.children[2].textContent).toBe("afile");
|
||||
@ -52,7 +70,7 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should call icon extensions to replace the default icon", function () {
|
||||
var extensionCalls = 0,
|
||||
rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map(),
|
||||
parentPath: "/foo/",
|
||||
@ -62,14 +80,14 @@ define(function (require, exports, module) {
|
||||
expect(data.name).toBe("afile.js");
|
||||
expect(data.isFile).toBe(true);
|
||||
expect(data.fullPath).toBe("/foo/afile.js");
|
||||
return React.DOM.ins({}, "ICON");
|
||||
return Preact.DOM.ins({}, "ICON");
|
||||
}]
|
||||
})
|
||||
}));
|
||||
|
||||
expect(extensionCalls).toBe(1);
|
||||
|
||||
var a = RTU.findRenderedDOMComponentWithTag(rendered, "a");
|
||||
var a = findRenderedDOMComponentWithTag(rendered, "a");
|
||||
expect(a.children[0].textContent).toBe("");
|
||||
expect(a.children[1].textContent).toBe("ICON");
|
||||
expect(a.children[2].textContent).toBe("afile");
|
||||
@ -78,7 +96,7 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should allow icon extensions to return a string for the icon", function () {
|
||||
var extensionCalls = 0,
|
||||
rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map(),
|
||||
parentPath: "/foo/",
|
||||
@ -92,12 +110,12 @@ define(function (require, exports, module) {
|
||||
|
||||
expect(extensionCalls).toBe(1);
|
||||
|
||||
var a = RTU.findRenderedDOMComponentWithTag(rendered, "a");
|
||||
var a = findRenderedDOMComponentWithTag(rendered, "a");
|
||||
expect(a.children[0].textContent).toBe("");
|
||||
expect(a.children[2].textContent).toBe("afile");
|
||||
expect(a.children[3].textContent).toBe(".js");
|
||||
|
||||
var $a = $(ReactDOM.findDOMNode(a)),
|
||||
var $a = $(Preact.findDOMNode(a)),
|
||||
$ins = $a.find("ins");
|
||||
|
||||
expect($ins.text()).toBe("ICON");
|
||||
@ -105,14 +123,14 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should set context on a node by right click", function () {
|
||||
var actions = jasmine.createSpyObj("actions", ["setContext"]);
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map(),
|
||||
actions: actions,
|
||||
parentPath: "/foo/"
|
||||
}));
|
||||
var node = ReactDOM.findDOMNode(rendered);
|
||||
React.addons.TestUtils.Simulate.mouseDown(node, {
|
||||
var node = Preact.findDOMNode(rendered);
|
||||
PTU.Simulate.mouseDown(node, {
|
||||
button: 2
|
||||
});
|
||||
expect(actions.setContext).toHaveBeenCalledWith("/foo/afile.js");
|
||||
@ -120,15 +138,15 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should set context on a node by control click on Mac", function () {
|
||||
var actions = jasmine.createSpyObj("actions", ["setContext"]);
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map(),
|
||||
actions: actions,
|
||||
parentPath: "/foo/",
|
||||
platform: "mac"
|
||||
}));
|
||||
var node = ReactDOM.findDOMNode(rendered);
|
||||
React.addons.TestUtils.Simulate.mouseDown(node, {
|
||||
var node = Preact.findDOMNode(rendered);
|
||||
PTU.Simulate.mouseDown(node, {
|
||||
button: 0,
|
||||
ctrlKey: true
|
||||
});
|
||||
@ -137,15 +155,15 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should not set context on a node by control click on Windows", function () {
|
||||
var actions = jasmine.createSpyObj("actions", ["setContext"]);
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map(),
|
||||
actions: actions,
|
||||
parentPath: "/foo/",
|
||||
platform: "win"
|
||||
}));
|
||||
var node = ReactDOM.findDOMNode(rendered);
|
||||
React.addons.TestUtils.Simulate.mouseDown(node, {
|
||||
var node = Preact.findDOMNode(rendered);
|
||||
PTU.Simulate.mouseDown(node, {
|
||||
button: 0,
|
||||
ctrlKey: true
|
||||
});
|
||||
@ -154,7 +172,7 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should allow icon extensions to return a jQuery object for the icon", function () {
|
||||
var extensionCalls = 0,
|
||||
rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map(),
|
||||
parentPath: "/foo/",
|
||||
@ -168,7 +186,7 @@ define(function (require, exports, module) {
|
||||
|
||||
expect(extensionCalls).toBe(1);
|
||||
|
||||
var a = RTU.findRenderedDOMComponentWithTag(rendered, "a");
|
||||
var a = findRenderedDOMComponentWithTag(rendered, "a");
|
||||
expect(a.children[0].textContent).toBe("");
|
||||
expect(a.children[2].textContent).toBe("afile");
|
||||
expect(a.children[3].textContent).toBe(".js");
|
||||
@ -181,7 +199,7 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should call addClass extensions", function () {
|
||||
var extensionCalls = 0,
|
||||
rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map(),
|
||||
parentPath: "/foo/",
|
||||
@ -200,18 +218,18 @@ define(function (require, exports, module) {
|
||||
|
||||
expect(extensionCalls).toBe(1);
|
||||
|
||||
var li = RTU.findRenderedDOMComponentWithTag(rendered, "li");
|
||||
var li = findRenderedDOMComponentWithTag(rendered, "li");
|
||||
expect(li.className).toBe("jstree-leaf new classes are cool");
|
||||
});
|
||||
|
||||
it("should render a rename component", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileNode({
|
||||
name: "afile.js",
|
||||
entry: Immutable.Map({
|
||||
rename: true
|
||||
})
|
||||
}));
|
||||
var input = RTU.findRenderedDOMComponentWithTag(rendered, "input");
|
||||
var input = findRenderedDOMComponentWithTag(rendered, "input");
|
||||
expect(input.value).toBe("afile.js");
|
||||
});
|
||||
|
||||
@ -223,7 +241,7 @@ define(function (require, exports, module) {
|
||||
extensions: Immutable.Map()
|
||||
};
|
||||
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileNode(props));
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileNode(props));
|
||||
|
||||
var newProps = _.clone(props);
|
||||
expect(rendered.shouldComponentUpdate(newProps)).toBe(false);
|
||||
@ -299,14 +317,14 @@ define(function (require, exports, module) {
|
||||
|
||||
describe("_directoryNode and _directoryContents", function () {
|
||||
it("should format a closed directory", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
name: "thedir",
|
||||
parentPath: "/foo/",
|
||||
entry: Immutable.fromJS({
|
||||
children: null
|
||||
})
|
||||
}));
|
||||
var dirLI = ReactDOM.findDOMNode(rendered),
|
||||
var dirLI = Preact.findDOMNode(rendered),
|
||||
dirA = $(dirLI).find("a")[0];
|
||||
|
||||
expect(dirLI.children[1].textContent).toBe(" thedir");
|
||||
@ -324,7 +342,7 @@ define(function (require, exports, module) {
|
||||
sortDirectoriesFirst: false
|
||||
};
|
||||
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryNode(props));
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryNode(props));
|
||||
|
||||
var newProps = _.clone(props);
|
||||
|
||||
@ -353,7 +371,7 @@ define(function (require, exports, module) {
|
||||
|
||||
it("should call extensions for directories", function () {
|
||||
var extensionCalled = false,
|
||||
rendered = RTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
rendered = PTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
name: "thedir",
|
||||
parentPath: "/foo/",
|
||||
entry: Immutable.fromJS({
|
||||
@ -361,7 +379,7 @@ define(function (require, exports, module) {
|
||||
}),
|
||||
extensions: Immutable.fromJS({
|
||||
icons: [function (data) {
|
||||
return React.DOM.ins({}, "ICON");
|
||||
return Preact.DOM.ins({}, "ICON");
|
||||
}],
|
||||
addClass: [function (data) {
|
||||
extensionCalled = true;
|
||||
@ -377,7 +395,7 @@ define(function (require, exports, module) {
|
||||
|
||||
expect(extensionCalled).toBe(true);
|
||||
|
||||
var dirLI = ReactDOM.findDOMNode(rendered),
|
||||
var dirLI = Preact.findDOMNode(rendered),
|
||||
dirA = $(dirLI).find("a")[0];
|
||||
|
||||
expect(dirLI.className).toBe("jstree-closed new classes are cool");
|
||||
@ -386,30 +404,30 @@ define(function (require, exports, module) {
|
||||
});
|
||||
|
||||
it("should allow renaming a closed directory", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
name: "thedir",
|
||||
entry: Immutable.fromJS({
|
||||
children: null,
|
||||
rename: true
|
||||
})
|
||||
}));
|
||||
var input = RTU.findRenderedDOMComponentWithTag(rendered, "input");
|
||||
var input = findRenderedDOMComponentWithTag(rendered, "input");
|
||||
expect(input.value).toBe("thedir");
|
||||
});
|
||||
|
||||
it("should be able to list files", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryContents({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryContents({
|
||||
contents: Immutable.fromJS({
|
||||
"afile.js": {}
|
||||
})
|
||||
}));
|
||||
var fileLI = ReactDOM.findDOMNode(rendered),
|
||||
var fileLI = Preact.findDOMNode(rendered),
|
||||
fileA = $(fileLI).find("a")[0];
|
||||
expect(fileA.children[2].textContent).toBe("afile");
|
||||
});
|
||||
|
||||
it("should be able to list closed directories", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
name: "thedir",
|
||||
entry: Immutable.fromJS({
|
||||
open: true,
|
||||
@ -421,17 +439,17 @@ define(function (require, exports, module) {
|
||||
})
|
||||
}));
|
||||
|
||||
var subdirLI = ReactDOM.findDOMNode(rendered),
|
||||
var subdirLI = Preact.findDOMNode(rendered),
|
||||
subdirA = $(subdirLI).find(".jstree-closed > a")[0];
|
||||
expect(subdirA.children[2].textContent).toBe("subdir");
|
||||
});
|
||||
|
||||
it("should be able to list open subdirectories", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
name: "twoLevel",
|
||||
entry: twoLevel
|
||||
}));
|
||||
var dirLI = ReactDOM.findDOMNode(rendered);
|
||||
var dirLI = Preact.findDOMNode(rendered);
|
||||
|
||||
var subdirLI = $(dirLI).find(".jstree-open"),
|
||||
aTags = subdirLI.find("a");
|
||||
@ -452,12 +470,12 @@ define(function (require, exports, module) {
|
||||
open: true
|
||||
});
|
||||
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryNode({
|
||||
name: "hasDirs",
|
||||
entry: directory,
|
||||
sortDirectoriesFirst: true
|
||||
}));
|
||||
var html = ReactDOM.findDOMNode(rendered).outerHTML;
|
||||
var html = Preact.findDOMNode(rendered).outerHTML;
|
||||
expect(html.indexOf("subdir")).toBeLessThan(html.indexOf("afile"));
|
||||
});
|
||||
|
||||
@ -469,7 +487,7 @@ define(function (require, exports, module) {
|
||||
extensions : Immutable.Map()
|
||||
};
|
||||
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._directoryContents(props));
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._directoryContents(props));
|
||||
|
||||
var newProps = _.clone(props);
|
||||
|
||||
@ -508,7 +526,7 @@ define(function (require, exports, module) {
|
||||
});
|
||||
|
||||
it("should render the directory", function () {
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileTreeView({
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileTreeView({
|
||||
projectRoot: {},
|
||||
treeData: new Immutable.Map({
|
||||
"subdir": twoLevel.getIn(["children", "subdir"])
|
||||
@ -517,7 +535,7 @@ define(function (require, exports, module) {
|
||||
sortDirectoriesFirst: false
|
||||
}));
|
||||
|
||||
var rootNode = ReactDOM.findDOMNode(rendered),
|
||||
var rootNode = Preact.findDOMNode(rendered),
|
||||
aTags = $(rootNode).find("a");
|
||||
expect(aTags.length).toBe(2);
|
||||
expect(aTags[0].children[2].textContent).toBe("subdir");
|
||||
@ -533,7 +551,7 @@ define(function (require, exports, module) {
|
||||
extensions : Immutable.Map()
|
||||
};
|
||||
|
||||
var rendered = RTU.renderIntoDocument(FileTreeView._fileTreeView(props));
|
||||
var rendered = PTU.renderIntoDocument(FileTreeView._fileTreeView(props));
|
||||
|
||||
var newProps = _.clone(props);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user