feat: replace coffeescript with javascript at all files

kelp404 · Apr 5, 2020 · 3b79e22 · 3b79e22
1 parent 744d653
commit 3b79e22
Show file tree

Hide file tree

Showing 33 changed files with 327 additions and 947 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -9,7 +9,7 @@ end_of_line = lf
 insert_final_newline = true
 
 # 2 space indentation
-[*.{coffee,html,yml,json,md}]
+[*.{html,js,json,yml,md}]
 indent_style = space
 indent_size = 2
 

diff --git a/config/default.coffee b/config/default.coffee
diff --git a/config/default.js b/config/default.js
@@ -0,0 +1,6 @@
+module.exports = {
+  server: {
+    host: '0.0.0.0',
+    port: 8000
+  }
+};
diff --git a/example/app.coffee b/example/app.coffee
diff --git a/example/app.js b/example/app.js
diff --git a/example/index.html b/example/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
@@ -19,11 +19,13 @@
 </head>
 <body>
 <div id="root">
-  <p class="text-center text-muted h3" style="padding: 20px 0">
-    <i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...
-  </p>
+  <div className="text-center text-muted py-5">
+    <div className="spinner-border">
+      <span className="sr-only">Loading...</span>
+    </div>
+  </div>
 </div>
 <a href="https://github.com/kelp404/capybara-router"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-<script type="text/javascript" src="//localhost:8001/app.js"></script>
+<script type="text/javascript" src="//localhost:8001/web.js"></script>
 </body>
 </html>
diff --git a/example/pages/base.coffee b/example/pages/base.coffee
diff --git a/example/pages/base.js b/example/pages/base.js
@@ -0,0 +1,64 @@
+const classNames = require('classnames');
+const React = require('react');
+const {RouterView, Link, getRouter} = require('../../');
+
+module.exports = class Base extends React.Component {
+  state = {currentRouteName: null};
+
+  constructor(props) {
+    super(props);
+    const router = getRouter();
+    this.listens = [
+      router.listen('ChangeSuccess', (action, toState) => {
+        this.setState({currentRouteName: toState.name});
+      })
+    ];
+  }
+
+  componentWillUnmount() {
+    this.listens.map(x => x());
+  }
+
+  render() {
+    const {currentRouteName} = this.state;
+
+    return (
+      <>
+        <nav className="navbar navbar-default">
+          <div className="container">
+            <div className="navbar-header">
+              <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                <span className="sr-only">Toggle navigation</span>
+                <span className="icon-bar"/>
+                <span className="icon-bar"/>
+                <span className="icon-bar"/>
+              </button>
+              <Link className="navbar-brand" to="/capybara-router/">capybara-router</Link>
+            </div>
+
+            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+              <ul className="nav navbar-nav">
+                <li className={classNames({active: currentRouteName === 'web.home'})}>
+                  <Link to="/capybara-router/">Home</Link>
+                </li>
+                <li className={classNames({active: ['web.users', 'web.user'].indexOf(currentRouteName) >= 0})}>
+                  <Link to="/capybara-router/users">Users</Link>
+                </li>
+                <li><Link to="/capybara-router/404">404</Link></li>
+                <li><Link to="/capybara-router/error">Error</Link></li>
+              </ul>
+            </div>
+          </div>
+        </nav>
+
+        <div className="container">
+          <div className="row">
+            <div className="col-sm-12">
+              <RouterView/>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+};
diff --git a/example/pages/error-page.coffee b/example/pages/error-page.coffee
diff --git a/example/pages/error-page.js b/example/pages/error-page.js
@@ -0,0 +1,20 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+module.exports = class ErrorPage extends React.Component {
+  static get propTypes() {
+    return {error: PropTypes.any.isRequired};
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const {error} = this.props;
+
+    return (
+      <h2 className="text-center">{`${error}`}</h2>
+    );
+  }
+};
diff --git a/example/pages/home.coffee b/example/pages/home.coffee
diff --git a/example/pages/home.js b/example/pages/home.js
@@ -0,0 +1,11 @@
+const React = require('react');
+
+module.exports = class Home extends React.Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    return <h2>Home</h2>;
+  }
+};
diff --git a/example/pages/not-found.coffee b/example/pages/not-found.coffee
diff --git a/example/pages/not-found.js b/example/pages/not-found.js
@@ -0,0 +1,11 @@
+const React = require('react');
+
+module.exports = class NotFound extends React.Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    return <h2 className="text-center">Not Found</h2>;
+  }
+};
diff --git a/example/pages/user.coffee b/example/pages/user.coffee
diff --git a/example/pages/user.js b/example/pages/user.js
@@ -0,0 +1,35 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+module.exports = class Users extends React.PureComponent {
+  static get propTypes() {
+    return {
+      user: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        email: PropTypes.string.isRequired
+      }).isRequired
+    };
+  }
+
+  render() {
+    const {user} = this.props;
+
+    return (
+      <>
+        <div className="form-group">
+          <label className="control-label">ID</label>
+          <p className="form-control-static">{user.id}</p>
+        </div>
+        <div className="form-group">
+          <label className="control-label">Name</label>
+          <p className="form-control-static">{user.name}</p>
+        </div>
+        <div className="form-group">
+          <label className="control-label">Email</label>
+          <p className="form-control-static">{user.email}</p>
+        </div>
+      </>
+    );
+  }
+};
diff --git a/example/pages/users.coffee b/example/pages/users.coffee