react-lite-coder - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/code-editor.js

 (function() {
-  var CodeMirror, React, T, _, cx, div, textarea;
+  var CodeMirror, React, T, cx, div, textarea;
 
-  _ = require('lodash');
-
   cx = require('classnames');
 
+  React = require('react');
+
   CodeMirror = require('codemirror');
 
-  React = require('react');
+  require('codemirror/addon/display/placeholder');
 
-  T = React.PropTypes;
-
   div = React.createFactory('div');
@@ -18,43 +16,48 @@
 
+  T = React.PropTypes;
+
   module.exports = React.createClass({
     displayName: 'lite-code-editor',
     propTypes: {
-      readOnly: T.bool,
-      option: T.object,
-      defaultValue: T.string,
-      mode: T.string,
+      onChange: T.func.isRequired,
+      codeType: T.string,
       name: T.string,
-      theme: T.string,
-      onChange: T.func.isRequired
+      placeholder: T.string,
+      text: T.string
     },
     getDefaultProps: function() {
       return {
-        mode: 'null',
+        codeType: 'null',
+        placeholder: 'Code goes here...',
         readOnly: false,
-        theme: 'default'
+        text: ''
       };
     },
     componentDidMount: function() {
-      var defaultOption, editor, option;
-      defaultOption = {
+      var editor;
+      this.option = {
         indentUnit: 2,
-        indentWithTabs: true,
+        indentWithTabs: false,
         lineNumbers: true,
         lineWrapping: false,
-        placeholder: 'Code goes here...',
+        mode: this.props.codeType,
+        placeholder: this.props.placeholder,
+        readOnly: this.props.readOnly,
         smartIndent: true,
-        tabSize: 2
+        tabMode: 'spaces',
+        tabSize: 2,
+        theme: 'default',
+        extraKeys: {
+          'Tab': function(cm) {
+            return cm.replaceSelection('  ', 'end');
+          }
+        }
       };
       editor = this.refs.editor.getDOMNode();
-      option = _.assign({}, defaultOption, this.props.option, {
-        mode: this.props.mode,
-        readOnly: this.props.readOnly,
-        theme: this.props.theme
-      });
-      this.editor = CodeMirror.fromTextArea(editor, option);
+      this.editor = CodeMirror.fromTextArea(editor, this.option);
       return this.editor.on('change', this.onEditorChange);
     },
     componentWillReceiveProps: function(nextProps) {
-      if (this.editor.getOption('mode') !== nextProps.mode) {
-        return this.editor.setOption('mode', nextProps.mode);
+      if (this.editor.getOption('mode' !== nextProps.codeType)) {
+        return this.editor.setOption('mode', nextProps.codeType);
       }
@@ -70,6 +73,5 @@ },
         className: 'editor',
+        defaultValue: this.props.text,
+        readOnly: this.props.readOnly,
         ref: 'editor',
-        readOnly: this.props.readOnly,
-        defaultValue: this.props.defaultValue,
-        placeholder: this.props.placeholder,
         onChange: this.props.onChange
@@ -80,4 +82,6 @@ });
       var className, obj;
-      className = cx('lite-code-editor', (
-        obj = {},
+      className = cx((
+        obj = {
+          'lite-code-editor': true
+        },
         obj["is-for-" + this.props.name] = this.props.name != null,
@@ -84,0 +88,0 @@ obj

lib/code-viewer.js

 (function() {
-  var React, T, _, code, cx, div, hljs, pre;
+  var React, T, code, cx, div, hljs, pre;
 
-  _ = require('lodash');
-
   cx = require('classnames');
@@ -12,4 +10,2 @@
 
-  T = React.PropTypes;
-
   code = React.createFactory('code');
@@ -21,11 +17,15 @@
 
+  T = React.PropTypes;
+
   module.exports = React.createClass({
     displayName: 'lite-code-viewer',
     propTypes: {
-      mode: T.string,
-      name: T.string
+      codeType: T.string,
+      name: T.string,
+      text: T.string
     },
     getDefaultProps: function() {
       return {
-        mode: 'nohighlight'
+        codeType: 'nohighlight',
+        text: ''
       };
@@ -40,12 +40,13 @@ },
     highlightCode: function() {
-      var codes, highlighter;
-      if (this.props.mode !== 'nohighlight') {
-        highlighter = this.refs.highlighter.getDOMNode();
-        codes = highlighter.querySelectorAll('pre code');
-        if (codes.length != null) {
-          return _.forEach(codes, function(code) {
-            return hljs.highlightBlock(code);
-          });
-        }
+      var codes, viewer;
+      if (this.props.codeType === 'nohighlight') {
+        return;
       }
+      viewer = this.refs.viewer.getDOMNode();
+      codes = viewer.querySelectorAll('pre code');
+      if (codes != null ? codes.length : void 0) {
+        return [].forEach.call(codes, function(code) {
+          return hljs.highlightBlock(code);
+        });
+      }
     },
@@ -63,8 +64,6 @@ render: function() {
         className: className,
-        ref: 'highlighter'
-      }, pre({
-        className: 'pre'
-      }, code({
-        className: this.props.mode
-      }, this.props.children)));
+        ref: 'viewer'
+      }, pre(null, code({
+        className: this.props.codeType
+      }, this.props.text)));
     }
@@ -71,0 +70,0 @@ });

package.json

 {
   "name": "react-lite-coder",
-  "version": "0.0.1",
-  "description": "Code Editor and Code Viewer for Jianliao.com",
+  "version": "0.0.2",
+  "description": "Code Editor and Code Viewer of Jianliao.com",
   "main": "lib/index.js",
   "dependencies": {
+    "classnames": "^2.1.3",
+    "codemirror": "^5.5.0",
+    "highlight.js": "^8.7.0",
+    "react": "^0.13.3"
   },
   "devDependencies": {
-    "babel-core": "^5.6.20",
-    "babel-loader": "^5.3.1",
+    "autoprefixer-loader": "^2.0.0",
+    "babel-core": "^5.8.20",
+    "babel-loader": "^5.3.2",
     "cirru-script": "^0.2.3",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.9.3",
-    "css-loader": "^0.15.3",
+    "css-loader": "^0.15.6",
     "del": "^1.2.0",
+    "extract-text-webpack-plugin": "^0.8.2",
     "file-loader": "^0.8.4",
@@ -23,26 +29,21 @@ "gulp": "^3.9.0",
     "rsyncwrapper": "^0.4.3",
-    "run-sequence": "^1.1.1",
+    "run-sequence": "^1.1.2",
     "stir-template": "^0.1.4",
     "style-loader": "^0.12.3",
     "url-loader": "^0.5.6",
-    "webpack": "^1.10.1",
+    "volubile-ui": "0.0.10",
+    "webpack": "^1.10.5",
     "webpack-dev-server": "^1.10.1"
   },
-  "peerDependencies": {
-    "classnames": "^2.1.3",
-    "codemirror": "^5.4.0",
-    "highlight.js": "^8.6.0",
-    "lodash": "^3.10.0",
-    "react": "^0.13.3"
-  },
   "scripts": {
-    "build": "gulp build",
-    "dev": "gulp html && webpack-dev-server --hot",
-    "publish": "gulp rsync",
-    "script": "gulp script"
+    "build": "gulp build && gulp script",
+    "dev": "gulp html && webpack-dev-server --hot"
   },
   "keywords": [
+    "code-editor",
+    "code-viewer",
+    "react",
     "react-component",
-    "code-editor",
-    "code-viewer"
+    "react-lite",
+    "teambition"
   ],
@@ -49,0 +50,0 @@ "author": "Teambition",

README.md

@@ -1,2 +0,33 @@
-React Lite Code Editor, Code Viewer
+React Lite Coder
 ----
+
+Code Editor and Code Viewer of jianliao.com
+
+Demo http://ui.talk.ai/react-lite-coder/
+
+### Usage
+
+### Develop
+
+```text
+npm i
+```
+
+You need a static file server for the HTML files. Personally I suggest using Nginx.
+
+Develop:
+
+```bash
+gulp html # regenerate index.html
+webpack-dev-server --hot # enable live-reloading
+```
+
+Build (Pack and optimize js, reivision js and add entry in `index.html`):
+
+```bash
+gulp build
+```
+
+### License
+
+MIT

No alert changes

Improved metrics

Total package byte prevSize

23030

91.14%

Dependency count

4

-20%

Number of package files

21

50%

Lines of code

147

2.8%

Number of lines in readme file

34

1033.33%

Worsened metrics

Dev dependency count

23

15%

Dependency changes

• + Added

  classnames@^2.1.3

• + Added

  codemirror@^5.5.0

• + Added

  highlight.js@^8.7.0

• + Added

  react@^0.13.3

• - Removed

  lodash@3.10.1
  (transitive)