rearrange structure

README.md

@@ -6,12 +6,16 @@
 
 > Colorful Sublime Text 2/3 color scheme optimized for [babel-sublime](https://github.com/babel/babel-sublime) JavaScript syntax highlighter.
 
-[<img src="https://cloud.githubusercontent.com/assets/15828926/24619500/5ace50f2-18c4-11e7-9c40-7a247528f99d.png" width="500" />](https://dribbble.com/shots/1921103-Oceanic-Next-Theme)
+[<img src="https://cloud.githubusercontent.com/assets/15828926/24619500/5ace50f2-18c4-11e7-9c40-7a247528f99d.png" width="300" />](https://dribbble.com/shots/1921103-Oceanic-Next-Theme)
 
 ## Install
 
 Use [Package Control](https://packagecontrol.io/packages/Oceanic%20Next%20Color%20Scheme) or just manually copy `Oceanic Next.tmTheme` file into `/Packages/User` directory (path to it depends on your OS). Then select it from `Preferences` `->` `Color Scheme` `->` `User`.
 
+## Screenshot
+
+[<img src="https://raw.githubusercontent.com/voronianski/oceanic-next-theme/master/screenshot.png" width="600" />](https://raw.githubusercontent.com/voronianski/oceanic-next-theme/master/screenshot.png)
+
 ### Other Editors
 
 _Oceanic Next_ was also ported to:
@@ -80,14 +84,6 @@ base 0E: #C594C5
 base 0F: #AB7967
 ```
 
-## Screenshots
-
-[<img src="https://raw.githubusercontent.com/voronianski/oceanic-next-theme/master/screenshots/extended-class.png" width="600" />](https://raw.githubusercontent.com/voronianski/oceanic-next-theme/master/screenshots/extended-class.png)
-
-**JSX Components:**
-
-[<img src="https://raw.githubusercontent.com/voronianski/oceanic-next-theme/master/screenshots/jsx-component.png" width="600" />](https://raw.githubusercontent.com/voronianski/oceanic-next-theme/master/screenshots/jsx-component.png)
-
 ## Companion Sublime UI Themes
 
 - [Broceanic](https://github.com/kenwheeler/broceanic-theme) by [Ken Wheeler](https://github.com/kenwheeler)

test.js → test/all-constructs.js

@@ -1,21 +1,26 @@
 import a from 'b';
 
+const dep = require('dep');
 const URL = 'https://example.org';
-const mod = require('mod');
 
 let foo = 'bar';
 foo = 2;
 foo = `simple literal with ${mod}`;
-
-var dodo = true;
-dodo = false;
-dodo = `more
+foo = `more
 complicated literal
 with ${mod}
 `;
 
+var bool = true;
+bool = false;
+
+let undef = undefined;
+undef = void 0;
+undef = void(0);
+undef = null;
+
 const obj = {
-  simple: 'test',
+  str: 'test',
   simpleVar: foo,
   'str': 'value',
   [dynamic]: true,
@@ -35,54 +40,7 @@ const obj = {
 
 console.log(obj.simple, obj['another-str'], obj.fn());
 
-let undef = undefined;
-undef = void 0;
-undef = void(0);
-
-const n = null;
-
-console.log(String, Boolean, Number, Object, Array);
-
-class App extends React.Component {
-  static defaultProps = {
-    auto: true
-  };
-
-  static propTypes = {
-    auto: PropTypes.bool.isRequired,
-    obj: PropTypes.shape({
-      foo: PropTypes.string.isRequired
-    })
-  }
-
-  render() {
-    return (
-      <div className="wrap">
-        <TestChild
-          propNum={2}
-          propVar={foo}
-          propObj={{a: 1, b: 'c', d: false}}
-          propStr="value"
-          propArr={[1, 'a', true]}
-        />
-      </div>
-    );
-  }
-
-  otherMethod() {
-    function innerFn(argument) {
-      // body...
-    }
-
-    innerFn();
-  }
-}
-
 function doSmth (a, b, c, ...more) {
-  if (isNaN(b)) {
-    return;
-  }
-
   for (let i = 0; i < more.length; i++) {
     console.log(i);
   }
@@ -93,7 +51,9 @@ function doSmth (a, b, c, ...more) {
 }
 
 const doSmthAsyncBefore = async () => {
-  return [].reduce(memo => memo.push(Array.isArray(memo)), []);
+  setTimeout(() => {
+    console.log('async fn')
+  }, 1000) ;
 }
 
 async function doSmthAsync(a = 1, b = '2', c = false, d = {}) {
@@ -127,7 +87,6 @@ export function annotation(target) {
   target.annotated = true;
 }
 
-
 function OldSchoolClass (opts = {}) {
   return this;
 }

test/react-component.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+// This is comment...
+class MyComponent extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      title: 'World'
+    };
+  }
+
+  componentDidMount() {
+    console.log('MyComponent is mounted!');
+  }
+
+  clickHandler(title) {
+    this.setState({ title });
+  }
+
+  render() {
+    const { title } = this.state;
+
+    return (
+      <div>
+        <h1>Hello, {title}!</h1>
+        <button onClick={() => this.clickHandler('React')}>
+          Change title
+        </button>
+      </div>
+    );
+  }
+}
+
+export default MyComponent;