Standardize component imports across the new console code - Issue moz…

…illa#53 (mozilla#73)
nchevobbe · Apr 22, 2016 · cb52b1c · cb52b1c
1 parent 0571f48
commit cb52b1c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 25 deletions.
diff --git a/devtools/client/webconsole/new-console-output/components/message-container.js b/devtools/client/webconsole/new-console-output/components/message-container.js
@@ -9,7 +9,7 @@
 // React & Redux
 const {
   createClass,
-  createElement,
+  createFactory,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 
@@ -23,7 +23,7 @@ const MessageContainer = createClass({
   render() {
     const { message } = this.props;
     let MessageComponent = getMessageComponent(message.messageType);
-    return createElement(MessageComponent, { message });
+    return MessageComponent({ message });
   }
 });
 
@@ -40,7 +40,7 @@ function getMessageComponent(messageType) {
       MessageComponent = require("devtools/client/webconsole/new-console-output/components/message-types/page-error").PageError;
       break;
   }
-  return MessageComponent;
+  return createFactory(MessageComponent);
 }
 
 module.exports.MessageContainer = MessageContainer;

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js b/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js
@@ -8,12 +8,12 @@
 
 // React & Redux
 const {
-  createElement,
+  createFactory,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
-const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
-const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
+const MessageRepeat = createFactory(require("devtools/client/webconsole/new-console-output/components/message-repeat").MessageRepeat);
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 ConsoleApiCall.displayName = "ConsoleApiCall";
 
@@ -26,8 +26,8 @@ function ConsoleApiCall(props) {
   const messageBody =
     dom.span({className: "message-body devtools-monospace"},
       formatTextContent(message.data.arguments));
-  const icon = createElement(MessageIcon, {severity: message.severity});
-  const repeat = createElement(MessageRepeat, {repeat: message.repeat});
+  const icon = MessageIcon({severity: message.severity});
+  const repeat = MessageRepeat({repeat: message.repeat});
   const children = [
     messageBody,
     repeat

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/date-preview.js b/devtools/client/webconsole/new-console-output/components/message-types/date-preview.js
@@ -8,14 +8,13 @@
 
 // React & Redux
 const {
-  createElement,
   createFactory,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 
 const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link").VariablesViewLink);
-const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 DatePreview.displayName = "DatePreview";
 
@@ -35,7 +34,7 @@ function DatePreview(props) {
     }),
     dom.span({ className: "cm-string-2" }, ` ${dateString}`)
   ];
-  const icon = createElement(MessageIcon, { severity });
+  const icon = MessageIcon({ severity });
 
   // @TODO Use of "is" is a temporary hack to get the category and severity
   // attributes to be applied. There are targeted in webconsole's CSS rules,

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/default-renderer.js b/devtools/client/webconsole/new-console-output/components/message-types/default-renderer.js
@@ -8,17 +8,17 @@
 
 // React & Redux
 const {
-  createElement,
+  createFactory,
   DOM: dom,
 } = require("devtools/client/shared/vendor/react");
-const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 DefaultRenderer.displayName = "DefaultRenderer";
 
 function DefaultRenderer(props) {
   const { category, severity } = props;
 
-  const icon = createElement(MessageIcon, { severity });
+  const icon = MessageIcon({ severity });
 
   // @TODO Use of "is" is a temporary hack to get the category and severity
   // attributes to be applied. There are targeted in webconsole's CSS rules,

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js b/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js
@@ -8,11 +8,9 @@
 
 // React & Redux
 const {
-  createElement,
-  DOM: dom,
+  createFactory,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
-const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
 
 EvaluationResult.displayName = "EvaluationResult";
 
@@ -24,7 +22,7 @@ function EvaluationResult(props) {
   const { message } = props;
   let PreviewComponent = getPreviewComponent(message.data);
 
-  return createElement(PreviewComponent, {
+  return PreviewComponent({
     data: message.data,
     category: message.category,
     severity: message.severity
@@ -35,10 +33,10 @@ function getPreviewComponent(data) {
   if (typeof data.class != "undefined") {
     switch (data.class) {
       case "Date":
-        return require("devtools/client/webconsole/new-console-output/components/message-types/date-preview").DatePreview;
+        return createFactory(require("devtools/client/webconsole/new-console-output/components/message-types/date-preview").DatePreview);
     }
   }
-  return require("devtools/client/webconsole/new-console-output/components/message-types/default-renderer").DefaultRenderer;
+  return createFactory(require("devtools/client/webconsole/new-console-output/components/message-types/default-renderer").DefaultRenderer);
 }
 
 module.exports.EvaluationResult = EvaluationResult;
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/page-error.js b/devtools/client/webconsole/new-console-output/components/message-types/page-error.js
@@ -8,12 +8,12 @@
 
 // React & Redux
 const {
-  createElement,
+  createFactory,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
-const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
-const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
+const MessageRepeat = createFactory(require("devtools/client/webconsole/new-console-output/components/message-repeat").MessageRepeat);
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 PageError.displayName = "PageError";
 
@@ -26,8 +26,8 @@ function PageError(props) {
   const messageBody =
     dom.span({className: "message-body devtools-monospace"},
       message.data.errorMessage);
-  const repeat = createElement(MessageRepeat, {repeat: message.repeat});
-  const icon = createElement(MessageIcon, {severity: message.severity});
+  const repeat = MessageRepeat({repeat: message.repeat});
+  const icon = MessageIcon({severity: message.severity});
   const children = [
     messageBody,
     repeat