@nteract/presentational-components - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

lib/index.js

@@ -6,6 +6,4 @@ "use strict";
 });
-exports.Cells = exports.Cell = exports.Input = exports.Source = exports.Prompt = exports.PromptBuffer = exports.Outputs = exports.Pagers = exports.themes = undefined;
+exports.Cells = exports.Cell = exports.Source = exports.PromptBuffer = exports.Prompt = exports.Pagers = exports.Outputs = exports.Input = exports.themes = undefined;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _styles = require("./styles");
@@ -22,8 +20,3 @@
 });
-exports.promptText = promptText;
 
-var _style = require("styled-jsx/style");
-
-var _style2 = _interopRequireDefault(_style);
-
 var _react = require("react");
@@ -37,283 +30,32 @@
 
-var _themes = require("./themes");
+var _input = require("./components/input.js");
 
-var themes = _interopRequireWildcard(_themes);
+var _outputs = require("./components/outputs.js");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+var _pagers = require("./components/pagers.js");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _prompt = require("./components/prompt.js");
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _source = require("./components/source.js");
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var _cell = require("./components/cell.js");
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var _cells = require("./components/cells.js");
 
-exports.themes = themes;
+var _themes = require("./themes");
 
-var Pagers = exports.Pagers = function (_React$Component) {
-  _inherits(Pagers, _React$Component);
+var themes = _interopRequireWildcard(_themes);
 
-  function Pagers() {
-    _classCallCheck(this, Pagers);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    return _possibleConstructorReturn(this, (Pagers.__proto__ || Object.getPrototypeOf(Pagers)).apply(this, arguments));
-  }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-  _createClass(Pagers, [{
-    key: "render",
-    value: function render() {
-      if (this.props.hidden || this.props.children === null || React.Children.count(this.props.children) === 0) {
-        return null;
-      }
-      return React.createElement(
-        "div",
-        {
-          className: "jsx-4211432262" + " " + "pagers"
-        },
-        React.createElement(
-          Outputs,
-          null,
-          this.props.children
-        ),
-        React.createElement(_style2.default, {
-          styleId: "4211432262",
-          css: ".pagers.jsx-4211432262{background-color:var(--theme-pager-bg,#fafafa);}"
-        })
-      );
-    }
-  }]);
-
-  return Pagers;
-}(React.Component);
-
-Pagers.defaultProps = {
-  children: null,
-  hidden: false
-};
-
-var Outputs = exports.Outputs = function (_React$Component2) {
-  _inherits(Outputs, _React$Component2);
-
-  function Outputs() {
-    _classCallCheck(this, Outputs);
-
-    return _possibleConstructorReturn(this, (Outputs.__proto__ || Object.getPrototypeOf(Outputs)).apply(this, arguments));
-  }
-
-  _createClass(Outputs, [{
-    key: "render",
-    value: function render() {
-      if (this.props.hidden) {
-        return null;
-      }
-
-      if (this.props.children) {
-        return React.createElement(
-          "div",
-          {
-            className: "jsx-2230648903" + " " + "outputs"
-          },
-          this.props.children,
-          React.createElement(_style2.default, {
-            styleId: "2230648903",
-            css: ".outputs.jsx-2230648903{padding:10px 10px 10px calc(var(--prompt-width,50px) + 10px);word-wrap:break-word;overflow-y:auto;outline:none;}.outputs.jsx-2230648903 a{color:var(--link-color-unvisited,blue);}.outputs.jsx-2230648903 a:visited{color:var(--link-color-visited,blue);}.outputs.jsx-2230648903>div:empty{display:none;}.outputs.jsx-2230648903 code{font-family:\"Source Code Pro\";white-space:pre-wrap;font-size:14px;}.outputs.jsx-2230648903 pre{white-space:pre-wrap;font-size:14px;word-wrap:break-word;}.outputs.jsx-2230648903 img{display:block;max-width:100%;}.outputs.jsx-2230648903 kbd{display:inline-block;border:1px solid #ccc;border-radius:4px;padding:0.1em 0.5em;margin:0 0.2em;box-shadow:0 1px 0px rgba(0,0,0,0.2),0 0 0 2px #fff inset;background-color:#f7f7f7;}.outputs.jsx-2230648903 table{border-collapse:collapse;}.outputs.jsx-2230648903 th,.outputs.jsx-2230648903 td,.outputs.jsx-2230648903 .th,.outputs.jsx-2230648903 .td{padding:0.5em 1em;border:1px solid var(--theme-app-border,#cbcbcb);}.outputs.jsx-2230648903 th{text-align:left;}.outputs.jsx-2230648903 blockquote{padding:0.75em 0.5em 0.75em 1em;background:var(--theme-cell-output-bg,white);border-left:0.5em solid #ddd;}.outputs.jsx-2230648903 .blockquote::before{display:block;height:0;content:\"\u201C\";margin-left:-0.95em;font:italic 400%/1 Open Serif,Georgia,\"Times New Roman\",serif;color:solid var(--theme-app-border,#cbcbcb);}.outputs.jsx-2230648903 blockquote p.jsx-2230648903{display:inline;}.outputs.jsx-2230648903 dd{display:block;-webkit-margin-start:40px;}.outputs.jsx-2230648903 dl{display:block;-webkit-margin-before:1__qem;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;}.outputs.jsx-2230648903 dt{display:block;}.outputs.jsx-2230648903 dl{width:100%;overflow:hidden;padding:0;margin:0;}.outputs.jsx-2230648903 dt{font-weight:bold;float:left;width:20%;padding:0;margin:0;}.outputs.jsx-2230648903 dd{float:left;width:80%;padding:0;margin:0;}.outputs.jsx-2230648903 .list-inline li.jsx-2230648903{display:inline;padding-right:20px;text-align:center;}"
-          })
-        );
-      }
-
-      return null;
-    }
-  }]);
-
-  return Outputs;
-}(React.Component);
-// Totally fake component for consistency with indents of the editor area
-
-
-Outputs.defaultProps = {
-  children: null,
-  hidden: false
-};
-
-var PromptBuffer = exports.PromptBuffer = function (_React$Component3) {
-  _inherits(PromptBuffer, _React$Component3);
-
-  function PromptBuffer() {
-    _classCallCheck(this, PromptBuffer);
-
-    return _possibleConstructorReturn(this, (PromptBuffer.__proto__ || Object.getPrototypeOf(PromptBuffer)).apply(this, arguments));
-  }
-
-  _createClass(PromptBuffer, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", { className: "prompt" });
-    }
-  }]);
-
-  return PromptBuffer;
-}(React.Component);
-
-function promptText(props) {
-  if (props.running) {
-    return "[*]";
-  }
-  if (props.queued) {
-    return "[…]";
-  }
-  if (typeof props.counter === "number") {
-    return "[" + props.counter + "]";
-  }
-  return "[ ]";
-}
-
-var Prompt = exports.Prompt = function (_React$Component4) {
-  _inherits(Prompt, _React$Component4);
-
-  function Prompt() {
-    _classCallCheck(this, Prompt);
-
-    return _possibleConstructorReturn(this, (Prompt.__proto__ || Object.getPrototypeOf(Prompt)).apply(this, arguments));
-  }
-
-  _createClass(Prompt, [{
-    key: "render",
-    value: function render() {
-      return React.createElement(
-        "div",
-        { className: "prompt" },
-        promptText(this.props)
-      );
-    }
-  }]);
-
-  return Prompt;
-}(React.Component);
-
-Prompt.defaultProps = {
-  counter: null,
-  running: false,
-  queued: false
-};
-
-var Source = exports.Source = function (_React$Component5) {
-  _inherits(Source, _React$Component5);
-
-  function Source() {
-    _classCallCheck(this, Source);
-
-    return _possibleConstructorReturn(this, (Source.__proto__ || Object.getPrototypeOf(Source)).apply(this, arguments));
-  }
-
-  _createClass(Source, [{
-    key: "render",
-    value: function render() {
-      // Build in a default renderer when they pass a plain string
-      // This is primarily for use with non-editable contexts (notebook-preview)
-      // to make rendering much faster (compared to codemirror)
-      // Ref: https://github.com/nteract/notebook-preview/issues/20
-      if (typeof this.props.children === "string") {
-        return React.createElement(
-          _syntaxHighlighter2.default,
-          {
-            language: this.props.language,
-            className: this.props.className
-          },
-          this.props.children
-        );
-      }
-      // Otherwise assume they have their own editor component
-      return React.createElement(
-        "div",
-        { className: "input" },
-        this.props.children
-      );
-    }
-  }]);
-
-  return Source;
-}(React.Component);
-
-Source.defaultProps = {
-  children: "",
-  language: "text",
-  className: "input",
-  theme: "light"
-};
-
-var Input = exports.Input = function (_React$Component6) {
-  _inherits(Input, _React$Component6);
-
-  function Input() {
-    _classCallCheck(this, Input);
-
-    return _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
-  }
-
-  _createClass(Input, [{
-    key: "render",
-    value: function render() {
-      if (this.props.hidden) {
-        return null;
-      }
-
-      return React.createElement(
-        "div",
-        {
-          className: "jsx-3078085327" + " " + "input-container"
-        },
-        this.props.children,
-        React.createElement(_style2.default, {
-          styleId: "3078085327",
-          css: ".input-container.jsx-3078085327{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.input-container.invisible.jsx-3078085327{height:34px;}.input-container.jsx-3078085327 .prompt{font-family:monospace;font-size:12px;line-height:22px;width:var(--prompt-width,50px);padding:9px 0;text-align:center;color:var(--theme-cell-prompt-fg,black);background-color:var(--theme-cell-prompt-bg,#fafafa);-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}.input-container.jsx-3078085327 .input{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;background-color:var(--theme-cell-input-bg,#fafafa);}"
-        })
-      );
-    }
-  }]);
-
-  return Input;
-}(React.Component);
-
-Input.defaultProps = {
-  children: null,
-  hidden: false
-};
-var Cell = exports.Cell = function Cell(props) {
-  var children = props.children;
-  return React.createElement(
-    "div",
-    {
-      className: "jsx-1668992431" + " " + ("cell " + (props.isSelected ? "focused" : ""))
-    },
-    React.createElement(_style2.default, {
-      styleId: "1668992431",
-      css: ".cell.jsx-1668992431{position:relative;background:var(--theme-cell-bg,white);-webkit-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;}.cell.jsx-1668992431:hover{box-shadow:var(--theme-cell-shadow-hover);}.cell.focused.jsx-1668992431{box-shadow:var(--theme-cell-shadow-focus);}.cell.jsx-1668992431:hover .prompt,.cell.jsx-1668992431:active .prompt{background-color:var(--theme-cell-prompt-bg-hover);color:var(--theme-cell-prompt-fg-hover);}.cell.jsx-1668992431:focus .prompt,.cell.focused.jsx-1668992431 .prompt{background-color:var(--theme-cell-prompt-bg-focus);color:var(--theme-cell-prompt-fg-focus);}"
-    }),
-    children
-  );
-};
-
-Cell.defaultProps = {
-  isSelected: false,
-  children: null
-};
-
-var Cells = exports.Cells = function Cells(props) {
-  return React.createElement(
-    "div",
-    {
-      className: "jsx-2311117239" + " " + "cells"
-    },
-    React.createElement(_style2.default, {
-      styleId: "2311117239",
-      css: ".cells.jsx-2311117239>*{margin:20px;}.cells.jsx-2311117239{font-family:\"Source Sans Pro\",Helvetica Neue,Helvetica,Arial, sans-serif;font-size:16px;background-color:var(--theme-app-bg);color:var(--theme-app-fg);padding-bottom:10px;}"
-    }),
-    props.children
-  );
-};
-
-Cells.defaultProps = {
-  children: [],
-  selected: null
-};
+exports.themes = themes;
+exports.Input = _input.Input;
+exports.Outputs = _outputs.Outputs;
+exports.Pagers = _pagers.Pagers;
+exports.Prompt = _prompt.Prompt;
+exports.PromptBuffer = _prompt.PromptBuffer;
+exports.Source = _source.Source;
+exports.Cell = _cell.Cell;
+exports.Cells = _cells.Cells;

lib/styles.js

@@ -22,2 +22,8 @@ "use strict";
 
+(function () {
+  var enterModule = require('react-hot-loader').enterModule;
+
+  enterModule && enterModule(module);
+})();
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -48,5 +54,29 @@
     }
+  }, {
+    key: "__reactstandin__regenerateByEval",
+    // @ts-ignore
+    value: function __reactstandin__regenerateByEval(key, code) {
+      // @ts-ignore
+      this[key] = eval(code);
+    }
   }]);
 
   return Styles;
-}(React.Component);
+}(React.Component);
+
+;
+
+(function () {
+  var reactHotLoader = require('react-hot-loader').default;
+
+  var leaveModule = require('react-hot-loader').leaveModule;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(Styles, "Styles", "src/styles.js");
+  leaveModule(module);
+})();
+
+;

lib/syntax-highlighter/index.js

@@ -21,2 +21,8 @@ "use strict";
 
+(function () {
+  var enterModule = require('react-hot-loader').enterModule;
+
+  enterModule && enterModule(module);
+})();
+
 // import syntax from "./theme";
@@ -28,2 +34,8 @@
     language = "python";
+  } else if (language === "text/x-scala") {
+    // Adjust for the scala codemirror type
+    language = "scala";
+  } else if (language.startsWith("text/x-")) {
+    // Strip off the language from the mimetype
+    language = language.slice("text/x-".length);
   }
@@ -48,3 +60,2 @@
 
-
 Highlighter.defaultProps = {
@@ -57,2 +68,20 @@ theme: "light",
 
-exports.default = Highlighter;
+var _default = Highlighter;
+exports.default = _default;
+;
+
+(function () {
+  var reactHotLoader = require('react-hot-loader').default;
+
+  var leaveModule = require('react-hot-loader').leaveModule;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(Highlighter, "Highlighter", "src/syntax-highlighter/index.js");
+  reactHotLoader.register(_default, "default", "src/syntax-highlighter/index.js");
+  leaveModule(module);
+})();
+
+;

lib/syntax-highlighter/theme.js

@@ -6,3 +6,10 @@ "use strict";
 });
-exports.default = {
+
+(function () {
+  var enterModule = require('react-hot-loader').enterModule;
+
+  enterModule && enterModule(module);
+})();
+
+var _default = {
   hljs: {
@@ -110,2 +117,19 @@ display: "block",
   }
-};
+};
+exports.default = _default;
+;
+
+(function () {
+  var reactHotLoader = require('react-hot-loader').default;
+
+  var leaveModule = require('react-hot-loader').leaveModule;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(_default, "default", "src/syntax-highlighter/theme.js");
+  leaveModule(module);
+})();
+
+;

lib/themes/dark.js

@@ -6,2 +6,26 @@ "use strict";
 });
-exports.default = "\n\n  --theme-app-bg: #2b2b2b;\n  --theme-app-fg: var(--nt-color-midnight-lightest);\n  --theme-app-border: var(--nt-color-midnight-light);\n\n  --theme-primary-bg: var(--nt-color-midnight);\n  --theme-primary-bg-hover: var(--nt-color-midnight);\n  --theme-primary-bg-focus: var(--nt-color-midnight-light);\n\n  --theme-primary-fg: var(--nt-color-midnight-light);\n  --theme-primary-fg-hover: var(--nt-color-midnight-lighter);\n  --theme-primary-fg-focus: var(--theme-app-fg);\n\n  --theme-secondary-bg: var(--theme-primary-bg);\n  --theme-secondary-bg-hover: var(--theme-primary-bg-hover);\n  --theme-secondary-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-secondary-fg: var(--nt-color-midnight-light);\n  --theme-secondary-fg-hover: var(--nt-color-midnight-lighter);\n  --theme-secondary-fg-focus: var(--theme-primary-fg);\n\n  --theme-primary-shadow-hover: 1px  1px 3px rgba(255, 255, 255, 0.12), -1px -1px 3px rgba(255, 255, 255, 0.12);\n  --theme-primary-shadow-focus: 3px  3px 9px rgba(255, 255, 255, 0.12), -3px -3px 9px rgba(255, 255, 255, 0.12);\n\n  --theme-title-bar-bg: var(--nt-color-midnight-darkest);\n\n  --theme-menu-bg: var(--theme-primary-bg);\n  --theme-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-menu-bg-focus: var(--theme-primary-bg-focus);\n  --theme-menu-shadow: var(--theme-primary-shadow-hover);\n\n  --theme-menu-fg: var(--theme-app-fg);\n  --theme-menu-fg-hover: var(--theme-app-fg);\n  --theme-menu-fg-focus: var(--theme-app-fg);\n\n  --theme-cell-bg: var(--theme-app-bg);\n  --theme-cell-shadow-hover: var(--theme-primary-shadow-hover);\n  --theme-cell-shadow-focus: var(--theme-primary-shadow-focus);\n\n  --theme-cell-prompt-bg: var(--theme-primary-bg);\n  --theme-cell-prompt-bg-hover: var(--theme-primary-bg);\n  --theme-cell-prompt-bg-focus: var(--theme-primary-bg);\n\n  --theme-cell-prompt-fg: var(--theme-primary-fg);\n  --theme-cell-prompt-fg-hover: var(--theme-primary-fg-hover);\n  --theme-cell-prompt-fg-focus: var(--theme-primary-fg-focus);\n\n  --theme-cell-toolbar-bg: var(--theme-primary-bg);\n  --theme-cell-toolbar-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-toolbar-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-toolbar-fg: var(--theme-secondary-fg);\n  --theme-cell-toolbar-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-toolbar-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-cell-menu-bg: var(--theme-primary-bg);\n  --theme-cell-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-menu-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-menu-fg: var(--theme-primary-fg);\n  --theme-cell-menu-fg-hover: var(--theme-primary-fg-hover);\n  --theme-cell-menu-fg-focus: var(--theme-primary-fg-focus);\n\n  --theme-cell-input-bg: var(--theme-secondary-bg);\n  --theme-cell-input-fg: var(--theme-app-fg);\n\n  --theme-cell-output-bg: var(--theme-app-bg);\n  --theme-cell-output-fg: var(--theme-primary-fg);\n\n  --theme-cell-creator-bg: var(--theme-app-bg);\n\n  --theme-cell-creator-fg: var(--theme-secondary-fg);\n  --theme-cell-creator-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-creator-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-pager-bg: #111;\n\n  --cm-background: #111;\n  --cm-color: #ecf0f1;\n\n  --cm-gutter-bg: #777;\n\n  --cm-comment: #777;\n  --cm-keyword: #3498db;\n  --cm-string: #f1c40f;\n  --cm-builtin: #16a085;\n  --cm-special: #1abc9c;\n  --cm-variable: #ecf0f1;\n  --cm-number: #2ecc71;\n  --cm-meta: #95a5a6;\n  --cm-link: #2ecc71;\n  --cm-operator: #ecf0f1;\n  --cm-def: #ecf0f1;\n\n  --cm-activeline-bg: #e8f2ff;\n  --cm-matchingbracket-outline: grey;\n  --cm-matchingbracket-color: white;\n\n  --cm-hint-color: var(--theme-app-fg);\n  --cm-hint-color-active: var(--cm-color);\n  --cm-hint-bg: var(--theme-app-bg);\n  --cm-hint-bg-active: #111;\n\n  --status-bar: #111;\n";
+
+(function () {
+  var enterModule = require('react-hot-loader').enterModule;
+
+  enterModule && enterModule(module);
+})();
+
+var _default = "\n\n  --theme-app-bg: #2b2b2b;\n  --theme-app-fg: var(--nt-color-midnight-lightest);\n  --theme-app-border: var(--nt-color-midnight-light);\n\n  --theme-primary-bg: var(--nt-color-midnight);\n  --theme-primary-bg-hover: var(--nt-color-midnight);\n  --theme-primary-bg-focus: var(--nt-color-midnight-light);\n\n  --theme-primary-fg: var(--nt-color-midnight-light);\n  --theme-primary-fg-hover: var(--nt-color-midnight-lighter);\n  --theme-primary-fg-focus: var(--theme-app-fg);\n\n  --theme-secondary-bg: var(--theme-primary-bg);\n  --theme-secondary-bg-hover: var(--theme-primary-bg-hover);\n  --theme-secondary-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-secondary-fg: var(--nt-color-midnight-light);\n  --theme-secondary-fg-hover: var(--nt-color-midnight-lighter);\n  --theme-secondary-fg-focus: var(--theme-primary-fg);\n\n  --theme-primary-shadow-hover: 1px  1px 3px rgba(255, 255, 255, 0.12), -1px -1px 3px rgba(255, 255, 255, 0.12);\n  --theme-primary-shadow-focus: 3px  3px 9px rgba(255, 255, 255, 0.12), -3px -3px 9px rgba(255, 255, 255, 0.12);\n\n  --theme-title-bar-bg: var(--nt-color-midnight-darkest);\n\n  --theme-menu-bg: var(--theme-primary-bg);\n  --theme-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-menu-bg-focus: var(--theme-primary-bg-focus);\n  --theme-menu-shadow: var(--theme-primary-shadow-hover);\n\n  --theme-menu-fg: var(--theme-app-fg);\n  --theme-menu-fg-hover: var(--theme-app-fg);\n  --theme-menu-fg-focus: var(--theme-app-fg);\n\n  --theme-cell-bg: var(--theme-app-bg);\n  --theme-cell-shadow-hover: var(--theme-primary-shadow-hover);\n  --theme-cell-shadow-focus: var(--theme-primary-shadow-focus);\n\n  --theme-cell-prompt-bg: var(--theme-primary-bg);\n  --theme-cell-prompt-bg-hover: var(--theme-primary-bg);\n  --theme-cell-prompt-bg-focus: var(--theme-primary-bg);\n\n  --theme-cell-prompt-fg: var(--theme-primary-fg);\n  --theme-cell-prompt-fg-hover: var(--theme-primary-fg-hover);\n  --theme-cell-prompt-fg-focus: var(--theme-primary-fg-focus);\n\n  --theme-cell-toolbar-bg: var(--theme-primary-bg);\n  --theme-cell-toolbar-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-toolbar-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-toolbar-fg: var(--theme-secondary-fg);\n  --theme-cell-toolbar-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-toolbar-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-cell-menu-bg: var(--theme-primary-bg);\n  --theme-cell-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-menu-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-menu-fg: var(--theme-primary-fg);\n  --theme-cell-menu-fg-hover: var(--theme-primary-fg-hover);\n  --theme-cell-menu-fg-focus: var(--theme-primary-fg-focus);\n\n  --theme-cell-input-bg: var(--theme-secondary-bg);\n  --theme-cell-input-fg: var(--theme-app-fg);\n\n  --theme-cell-output-bg: var(--theme-app-bg);\n  --theme-cell-output-fg: var(--theme-primary-fg);\n\n  --theme-cell-creator-bg: var(--theme-app-bg);\n\n  --theme-cell-creator-fg: var(--theme-secondary-fg);\n  --theme-cell-creator-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-creator-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-pager-bg: #111;\n\n  --cm-background: #111;\n  --cm-color: #ecf0f1;\n\n  --cm-gutter-bg: #777;\n\n  --cm-comment: #777;\n  --cm-keyword: #3498db;\n  --cm-string: #f1c40f;\n  --cm-builtin: #16a085;\n  --cm-special: #1abc9c;\n  --cm-variable: #ecf0f1;\n  --cm-number: #2ecc71;\n  --cm-meta: #95a5a6;\n  --cm-link: #2ecc71;\n  --cm-operator: #ecf0f1;\n  --cm-def: #ecf0f1;\n\n  --cm-activeline-bg: #e8f2ff;\n  --cm-matchingbracket-outline: grey;\n  --cm-matchingbracket-color: white;\n\n  --cm-hint-color: var(--theme-app-fg);\n  --cm-hint-color-active: var(--cm-color);\n  --cm-hint-bg: var(--theme-app-bg);\n  --cm-hint-bg-active: #111;\n\n  --status-bar: #111;\n";
+exports.default = _default;
+;
+
+(function () {
+  var reactHotLoader = require('react-hot-loader').default;
+
+  var leaveModule = require('react-hot-loader').leaveModule;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(_default, "default", "src/themes/dark.js");
+  leaveModule(module);
+})();
+
+;

lib/themes/light.js

@@ -7,2 +7,10 @@ "use strict";
 
+(function () {
+  var enterModule = require('react-hot-loader').enterModule;
+
+  enterModule && enterModule(module);
+})();
+
+var _default = "\n\n  --theme-app-bg: white;\n  --theme-app-fg: var(--nt-color-midnight);\n  --theme-app-border: var(--nt-color-grey-light);\n\n  --theme-primary-bg: var(--nt-color-grey-lightest);\n  --theme-primary-bg-hover: var(--nt-color-grey-lighter);\n  --theme-primary-bg-focus: var(--nt-color-grey-light);\n\n  --theme-primary-fg: var(--nt-color-midnight-light);\n  --theme-primary-fg-hover: var(--nt-color-midnight);\n  --theme-primary-fg-focus: var(--theme-app-fg);\n\n  --theme-secondary-bg: var(--theme-primary-bg);\n  --theme-secondary-bg-hover: var(--theme-primary-bg-hover);\n  --theme-secondary-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-secondary-fg: var(--nt-color-midnight-lighter);\n  --theme-secondary-fg-hover: var(--nt-color-midnight-light);\n  --theme-secondary-fg-focus: var(--theme-primary-fg);\n\n  --theme-primary-shadow-hover: 1px  1px 3px rgba(0, 0, 0, 0.12), -1px -1px 3px rgba(0, 0, 0, 0.12);\n  --theme-primary-shadow-focus: 3px  3px 9px rgba(0, 0, 0, 0.12), -3px -3px 9px rgba(0, 0, 0, 0.12);\n\n  --theme-title-bar-bg: var(--theme-primary-bg-hover);\n\n  --theme-menu-bg: var(--theme-primary-bg);\n  --theme-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-menu-bg-focus: var(--theme-primary-bg-focus);\n  --theme-menu-shadow: var(--theme-primary-shadow-hover);\n\n  --theme-menu-fg: var(--theme-app-fg);\n  --theme-menu-fg-hover: var(--theme-app-fg);\n  --theme-menu-fg-focus: var(--theme-app-fg);\n\n  --theme-cell-bg: var(--theme-app-bg);\n  --theme-cell-shadow-hover: var(--theme-primary-shadow-hover);\n  --theme-cell-shadow-focus: var(--theme-primary-shadow-focus);\n\n  --theme-cell-prompt-bg: var(--theme-primary-bg);\n  --theme-cell-prompt-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-prompt-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-prompt-fg: var(--theme-secondary-fg);\n  --theme-cell-prompt-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-prompt-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-cell-toolbar-bg: var(--theme-primary-bg);\n  --theme-cell-toolbar-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-toolbar-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-toolbar-fg: var(--theme-secondary-fg);\n  --theme-cell-toolbar-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-toolbar-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-cell-menu-bg: var(--theme-primary-bg);\n  --theme-cell-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-menu-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-menu-fg: var(--theme-primary-fg);\n  --theme-cell-menu-fg-hover: var(--theme-primary-fg-hover);\n  --theme-cell-menu-fg-focus: var(--theme-primary-fg-focus);\n\n  --theme-cell-input-bg: var(--theme-secondary-bg);\n  --theme-cell-input-fg: var(--theme-app-fg);\n\n  --theme-cell-output-bg: var(--theme-app-bg);\n  --theme-cell-output-fg: var(--theme-primary-fg);\n\n  --theme-cell-creator-bg: var(--theme-app-bg);\n\n  --theme-cell-creator-fg: var(--theme-secondary-fg);\n  --theme-cell-creator-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-creator-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-pager-bg: #fafafa;\n\n  --cm-background: #fafafa;\n  --cm-color: black;\n\n  --cm-gutter-bg: white;\n\n  --cm-comment: #a86;\n  --cm-keyword: blue;\n  --cm-string: #a22;\n  --cm-builtin: #077;\n  --cm-special: #0aa;\n  --cm-variable: black;\n  --cm-number: #3a3;\n  --cm-meta: #555;\n  --cm-link: #3a3;\n  --cm-operator: black;\n  --cm-def: black;\n\n  --cm-activeline-bg: #e8f2ff;\n  --cm-matchingbracket-outline: grey;\n  --cm-matchingbracket-color: black;\n\n  --cm-hint-color: var(--cm-color);\n  --cm-hint-color-active: var(--cm-color);\n  --cm-hint-bg: var(--theme-app-bg);\n  --cm-hint-bg-active: #abd1ff;\n\n  --status-bar: #eeedee;\n";
+
 /*
@@ -15,2 +23,18 @@ * App level declarations that do not have static/hover/focus states.
  */
-exports.default = "\n\n  --theme-app-bg: white;\n  --theme-app-fg: var(--nt-color-midnight);\n  --theme-app-border: var(--nt-color-grey-light);\n\n  --theme-primary-bg: var(--nt-color-grey-lightest);\n  --theme-primary-bg-hover: var(--nt-color-grey-lighter);\n  --theme-primary-bg-focus: var(--nt-color-grey-light);\n\n  --theme-primary-fg: var(--nt-color-midnight-light);\n  --theme-primary-fg-hover: var(--nt-color-midnight);\n  --theme-primary-fg-focus: var(--theme-app-fg);\n\n  --theme-secondary-bg: var(--theme-primary-bg);\n  --theme-secondary-bg-hover: var(--theme-primary-bg-hover);\n  --theme-secondary-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-secondary-fg: var(--nt-color-midnight-lighter);\n  --theme-secondary-fg-hover: var(--nt-color-midnight-light);\n  --theme-secondary-fg-focus: var(--theme-primary-fg);\n\n  --theme-primary-shadow-hover: 1px  1px 3px rgba(0, 0, 0, 0.12), -1px -1px 3px rgba(0, 0, 0, 0.12);\n  --theme-primary-shadow-focus: 3px  3px 9px rgba(0, 0, 0, 0.12), -3px -3px 9px rgba(0, 0, 0, 0.12);\n\n  --theme-title-bar-bg: var(--theme-primary-bg-hover);\n\n  --theme-menu-bg: var(--theme-primary-bg);\n  --theme-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-menu-bg-focus: var(--theme-primary-bg-focus);\n  --theme-menu-shadow: var(--theme-primary-shadow-hover);\n\n  --theme-menu-fg: var(--theme-app-fg);\n  --theme-menu-fg-hover: var(--theme-app-fg);\n  --theme-menu-fg-focus: var(--theme-app-fg);\n\n  --theme-cell-bg: var(--theme-app-bg);\n  --theme-cell-shadow-hover: var(--theme-primary-shadow-hover);\n  --theme-cell-shadow-focus: var(--theme-primary-shadow-focus);\n\n  --theme-cell-prompt-bg: var(--theme-primary-bg);\n  --theme-cell-prompt-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-prompt-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-prompt-fg: var(--theme-secondary-fg);\n  --theme-cell-prompt-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-prompt-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-cell-toolbar-bg: var(--theme-primary-bg);\n  --theme-cell-toolbar-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-toolbar-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-toolbar-fg: var(--theme-secondary-fg);\n  --theme-cell-toolbar-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-toolbar-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-cell-menu-bg: var(--theme-primary-bg);\n  --theme-cell-menu-bg-hover: var(--theme-primary-bg-hover);\n  --theme-cell-menu-bg-focus: var(--theme-primary-bg-focus);\n\n  --theme-cell-menu-fg: var(--theme-primary-fg);\n  --theme-cell-menu-fg-hover: var(--theme-primary-fg-hover);\n  --theme-cell-menu-fg-focus: var(--theme-primary-fg-focus);\n\n  --theme-cell-input-bg: var(--theme-secondary-bg);\n  --theme-cell-input-fg: var(--theme-app-fg);\n\n  --theme-cell-output-bg: var(--theme-app-bg);\n  --theme-cell-output-fg: var(--theme-primary-fg);\n\n  --theme-cell-creator-bg: var(--theme-app-bg);\n\n  --theme-cell-creator-fg: var(--theme-secondary-fg);\n  --theme-cell-creator-fg-hover: var(--theme-secondary-fg-hover);\n  --theme-cell-creator-fg-focus: var(--theme-secondary-fg-focus);\n\n  --theme-pager-bg: #fafafa;\n\n  --cm-background: #fafafa;\n  --cm-color: black;\n\n  --cm-gutter-bg: white;\n\n  --cm-comment: #a86;\n  --cm-keyword: blue;\n  --cm-string: #a22;\n  --cm-builtin: #077;\n  --cm-special: #0aa;\n  --cm-variable: black;\n  --cm-number: #3a3;\n  --cm-meta: #555;\n  --cm-link: #3a3;\n  --cm-operator: black;\n  --cm-def: black;\n\n  --cm-activeline-bg: #e8f2ff;\n  --cm-matchingbracket-outline: grey;\n  --cm-matchingbracket-color: black;\n\n  --cm-hint-color: var(--cm-color);\n  --cm-hint-color-active: var(--cm-color);\n  --cm-hint-bg: var(--theme-app-bg);\n  --cm-hint-bg-active: #abd1ff;\n\n  --status-bar: #eeedee;\n";
+exports.default = _default;
+;
+
+(function () {
+  var reactHotLoader = require('react-hot-loader').default;
+
+  var leaveModule = require('react-hot-loader').leaveModule;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(_default, "default", "src/themes/light.js");
+  leaveModule(module);
+})();
+
+;

package.json

 {
   "name": "@nteract/presentational-components",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "pure presentational components for nteract",
@@ -22,3 +22,3 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "react": "^16.2.0",
+    "react": "^16.3.2",
     "styled-jsx": "^2.2.6"
@@ -25,0 +25,0 @@ },

src/index.js

@@ -5,2 +5,9 @@ // @flow
 import Highlighter from "./syntax-highlighter";
+import { Input } from "./components/input.js";
+import { Outputs } from "./components/outputs.js";
+import { Pagers } from "./components/pagers.js";
+import { Prompt, PromptBuffer } from "./components/prompt.js";
+import { Source } from "./components/source.js";
+import { Cell } from "./components/cell.js";
+import { Cells } from "./components/cells.js";
 
@@ -10,400 +17,12 @@ export * from "./styles";
 import * as themes from "./themes";
-export { themes };
-
-export type PagersProps = {
-  children: React.Node,
-  hidden: boolean
+export {
+  themes,
+  Input,
+  Outputs,
+  Pagers,
+  Prompt,
+  PromptBuffer,
+  Source,
+  Cell,
+  Cells
 };
-
-export class Pagers extends React.Component<PagersProps> {
-  static defaultProps = {
-    children: null,
-    hidden: false
-  };
-
-  render(): React.Node {
-    if (
-      this.props.hidden ||
-      this.props.children === null ||
-      React.Children.count(this.props.children) === 0
-    ) {
-      return null;
-    }
-    return (
-      <div className="pagers">
-        {/*
-          Implementation wise, the CSS _is_ the same as the outputs even
-          if these aren't actually outputs.
-
-          One noted difference is the background color of the pagers though
-         */}
-        <Outputs>{this.props.children}</Outputs>
-        <style jsx>{`
-          .pagers {
-            background-color: var(--theme-pager-bg, #fafafa);
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export type OutputsProps = {
-  children: React.Node,
-  hidden: boolean
-};
-
-export class Outputs extends React.Component<OutputsProps> {
-  static defaultProps = {
-    children: null,
-    hidden: false
-  };
-
-  render() {
-    if (this.props.hidden) {
-      return null;
-    }
-
-    if (this.props.children) {
-      return (
-        <div className="outputs">
-          {this.props.children}
-          <style jsx>{`
-            .outputs {
-              padding: 10px 10px 10px calc(var(--prompt-width, 50px) + 10px);
-              word-wrap: break-word;
-              overflow-y: auto;
-              outline: none;
-            }
-
-            .outputs :global(a) {
-              color: var(--link-color-unvisited, blue);
-            }
-
-            .outputs :global(a:visited) {
-              color: var(--link-color-visited, blue);
-            }
-
-            .outputs > :global(div:empty) {
-              display: none;
-            }
-
-            .outputs :global(code) {
-              font-family: "Source Code Pro";
-              white-space: pre-wrap;
-              font-size: 14px;
-            }
-
-            .outputs :global(pre) {
-              white-space: pre-wrap;
-              font-size: 14px;
-              word-wrap: break-word;
-            }
-
-            .outputs :global(img) {
-              display: block;
-              max-width: 100%;
-            }
-
-            .outputs :global(kbd) {
-              display: inline-block;
-              border: 1px solid #ccc;
-              border-radius: 4px;
-              padding: 0.1em 0.5em;
-              margin: 0 0.2em;
-              box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-              background-color: #f7f7f7;
-            }
-
-            .outputs :global(table) {
-              border-collapse: collapse;
-            }
-
-            .outputs :global(th),
-            .outputs :global(td),
-            .outputs :global(.th),
-            /* for legacy output handling */ .outputs :global(.td) {
-              padding: 0.5em 1em;
-              border: 1px solid var(--theme-app-border, #cbcbcb);
-            }
-
-            .outputs :global(th) {
-              text-align: left;
-            }
-
-            .outputs :global(blockquote) {
-              padding: 0.75em 0.5em 0.75em 1em;
-              background: var(--theme-cell-output-bg, white);
-              border-left: 0.5em solid #ddd;
-            }
-
-            .outputs :global(.blockquote::before) {
-              display: block;
-              height: 0;
-              content: "“";
-              margin-left: -0.95em;
-              font: italic 400%/1 Open Serif, Georgia, "Times New Roman", serif;
-              color: solid var(--theme-app-border, #cbcbcb);
-            }
-
-            /* for nested paragraphs in block quotes */
-            .outputs :global(blockquote) p {
-              display: inline;
-            }
-
-            .outputs :global(dd) {
-              display: block;
-              -webkit-margin-start: 40px;
-            }
-            .outputs :global(dl) {
-              display: block;
-              -webkit-margin-before: 1__qem;
-              -webkit-margin-after: 1em;
-              -webkit-margin-start: 0;
-              -webkit-margin-end: 0;
-            }
-
-            .outputs :global(dt) {
-              display: block;
-            }
-
-            .outputs :global(dl) {
-              width: 100%;
-              overflow: hidden;
-              padding: 0;
-              margin: 0;
-            }
-
-            .outputs :global(dt) {
-              font-weight: bold;
-              float: left;
-              width: 20%;
-              /* adjust the width; make sure the total of both is 100% */
-              padding: 0;
-              margin: 0;
-            }
-
-            .outputs :global(dd) {
-              float: left;
-              width: 80%;
-              /* adjust the width; make sure the total of both is 100% */
-              padding: 0;
-              margin: 0;
-            }
-
-            /** Adaptation for the R kernel's inline lists **/
-            .outputs :global(.list-inline) li {
-              display: inline;
-              padding-right: 20px;
-              text-align: center;
-            }
-
-            /** Note omission of the li:only-child styling **/
-          `}</style>
-        </div>
-      );
-    }
-
-    return null;
-  }
-}
-// Totally fake component for consistency with indents of the editor area
-export class PromptBuffer extends React.Component<*> {
-  render() {
-    return <div className="prompt" />;
-  }
-}
-
-export function promptText(props: PromptProps) {
-  if (props.running) {
-    return "[*]";
-  }
-  if (props.queued) {
-    return "[…]";
-  }
-  if (typeof props.counter === "number") {
-    return `[${props.counter}]`;
-  }
-  return "[ ]";
-}
-
-type PromptProps = {
-  counter: number | null,
-  running: boolean,
-  queued: boolean
-};
-
-export class Prompt extends React.Component<PromptProps> {
-  static defaultProps = {
-    counter: null,
-    running: false,
-    queued: false
-  };
-
-  render() {
-    return <div className="prompt">{promptText(this.props)}</div>;
-  }
-}
-
-export type SourceProps = {
-  language: string,
-  children: React.Node,
-  className?: string,
-  theme: "light" | "dark"
-};
-
-export class Source extends React.Component<SourceProps> {
-  static defaultProps = {
-    children: "",
-    language: "text",
-    className: "input",
-    theme: "light"
-  };
-
-  render() {
-    // Build in a default renderer when they pass a plain string
-    // This is primarily for use with non-editable contexts (notebook-preview)
-    // to make rendering much faster (compared to codemirror)
-    // Ref: https://github.com/nteract/notebook-preview/issues/20
-    if (typeof this.props.children === "string") {
-      return (
-        <Highlighter
-          language={this.props.language}
-          className={this.props.className}
-        >
-          {this.props.children}
-        </Highlighter>
-      );
-    }
-    // Otherwise assume they have their own editor component
-    return <div className="input">{this.props.children}</div>;
-  }
-}
-
-export type InputProps = {
-  children: React.Node,
-  hidden: boolean
-};
-
-export class Input extends React.Component<InputProps> {
-  static defaultProps = {
-    children: null,
-    hidden: false
-  };
-
-  render() {
-    if (this.props.hidden) {
-      return null;
-    }
-
-    return (
-      <div className="input-container">
-        {this.props.children}
-        <style jsx>{`
-          .input-container {
-            display: flex;
-            flex-direction: row;
-          }
-
-          .input-container.invisible {
-            height: 34px;
-          }
-
-          .input-container :global(.prompt) {
-            font-family: monospace;
-            font-size: 12px;
-            line-height: 22px;
-
-            width: var(--prompt-width, 50px);
-            padding: 9px 0;
-
-            text-align: center;
-
-            color: var(--theme-cell-prompt-fg, black);
-            background-color: var(--theme-cell-prompt-bg, #fafafa);
-
-            flex: 0 0 auto;
-          }
-
-          .input-container :global(.input) {
-            flex: 1 1 auto;
-            overflow: auto;
-            background-color: var(--theme-cell-input-bg, #fafafa);
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export const Cell = (props: { isSelected: boolean, children?: React.Node }) => {
-  const children = props.children;
-  return (
-    <div className={`cell ${props.isSelected ? "focused" : ""}`}>
-      <style jsx>{`
-        .cell {
-          position: relative;
-          background: var(--theme-cell-bg, white);
-          transition: all 0.1s ease-in-out;
-        }
-
-        .cell:hover {
-          box-shadow: var(--theme-cell-shadow-hover);
-        }
-
-        .cell.focused {
-          box-shadow: var(--theme-cell-shadow-focus);
-        }
-
-        .cell:hover :global(.prompt),
-        .cell:active :global(.prompt) {
-          background-color: var(--theme-cell-prompt-bg-hover);
-          color: var(--theme-cell-prompt-fg-hover);
-        }
-
-        .cell:focus :global(.prompt),
-        .cell.focused :global(.prompt) {
-          background-color: var(--theme-cell-prompt-bg-focus);
-          color: var(--theme-cell-prompt-fg-focus);
-        }
-      `}</style>
-      {children}
-    </div>
-  );
-};
-
-Cell.defaultProps = {
-  isSelected: false,
-  children: null
-};
-
-export const Cells = (props: {
-  children: React.ChildrenArray<any>,
-  selected: string | null
-}) => {
-  return (
-    <div className="cells">
-      <style jsx>{`
-        .cells > :global(*) {
-          margin: 20px;
-        }
-
-        .cells {
-          font-family: "Source Sans Pro", Helvetica Neue, Helvetica, Arial,
-            sans-serif;
-          font-size: 16px;
-          background-color: var(--theme-app-bg);
-          color: var(--theme-app-fg);
-
-          padding-bottom: 10px;
-        }
-      `}</style>
-      {props.children}
-    </div>
-  );
-};
-
-Cells.defaultProps = {
-  children: [],
-  selected: null
-};

src/syntax-highlighter/index.js

@@ -23,2 +23,8 @@ // @flow
     language = "python";
+  } else if (language === "text/x-scala") {
+    // Adjust for the scala codemirror type
+    language = "scala";
+  } else if (language.startsWith("text/x-")) {
+    // Strip off the language from the mimetype
+    language = language.slice("text/x-".length);
   }
@@ -25,0 +31,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

101619

increased by43.5%

Number of package files

50

increased by127.27%

Lines of code

1630

increased by41.49%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

Number of medium supply chain risk alerts

7

increased byInfinity%

No dependency changes