ES6 module import syntax. Fixes #347 (#351)

ES6 module import syntax. Fixes #347
lektor · Jun 12, 2017 · 7b58f16 · 7b58f16
1 parent 18303f8
commit 7b58f16
Show file tree

Hide file tree

Showing 23 changed files with 137 additions and 123 deletions.
diff --git a/Makefile b/Makefile
@@ -3,7 +3,7 @@ all: build-js
 build-js:
 	@echo "---> building static files"
 	@cd lektor/admin; npm install .
-	@cd lektor/admin/static; ../node_modules/.bin/webpack
+	@cd lektor/admin; npm run webpack
 
 pex:
 	virtualenv pex-build-cache

diff --git a/lektor/admin/package.json b/lektor/admin/package.json
@@ -40,7 +40,8 @@
   },
   "scripts": {
     "test": "nyc mocha static/js/**/*.test.js",
-    "report-coverage": "nyc report --reporter=lcov > coverage.lcov"
+    "report-coverage": "nyc report --reporter=lcov > coverage.lcov",
+    "webpack": "webpack --config ./static/webpack.config.js --context ./static"
   },
   "babel": {
     "presets": [

diff --git a/lektor/admin/static/js/components/BaseComponent.jsx b/lektor/admin/static/js/components/BaseComponent.jsx
@@ -5,7 +5,7 @@
 
 'use strict'
 
-import React from 'react'
+import React from 'react';
 
 
 class BaseComponent extends React.Component {
@@ -21,6 +21,7 @@ class BaseComponent extends React.Component {
 
   componentWillReceiveProps(nextProps) {
   }
+
 }
 
-export default BaseComponent
+export default BaseComponent;
diff --git a/lektor/admin/static/js/components/BreadCrumbs.jsx b/lektor/admin/static/js/components/BreadCrumbs.jsx
@@ -9,7 +9,7 @@ import dialogSystem from '../dialogSystem'
 import FindFiles from '../dialogs/findFiles'
 import Publish from '../dialogs/publish'
 import Refresh from '../dialogs/Refresh'
-
+import makeRichPromise from '../richPromise';
 
 class BreadCrumbs extends RecordComponent {
 
@@ -47,7 +47,7 @@ class BreadCrumbs extends RecordComponent {
       return;
     }
 
-    utils.loadData('/pathinfo', {path: path})
+    utils.loadData('/pathinfo', {path: path}, null, makeRichPromise)
       .then((resp) => {
         this.setState({
           recordPathInfo: {
@@ -70,7 +70,7 @@ class BreadCrumbs extends RecordComponent {
     utils.loadData('/previewinfo', {
       path: this.getRecordPath(),
       alt: this.getRecordAlt()
-    })
+    }, null, makeRichPromise)
     .then((resp) => {
       if (resp.url === null) {
         window.location.href = utils.getCanonicalUrl('/');

diff --git a/lektor/admin/static/js/components/DialogSlot.jsx b/lektor/admin/static/js/components/DialogSlot.jsx
@@ -4,7 +4,7 @@ import React from 'react'
 import Router from "react-router"
 import Component from '../components/Component'
 import dialogSystem from '../dialogSystem'
-import {DialogChangedEvent} from '../events'
+import { DialogChangedEvent } from '../events'
 import hub from '../hub'
 
 
@@ -66,4 +66,4 @@ class DialogSlot extends Component {
   }
 }
 
-export default DialogSlot
+export default DialogSlot;
diff --git a/lektor/admin/static/js/components/Link.jsx b/lektor/admin/static/js/components/Link.jsx
@@ -1,28 +1,28 @@
 'use strict'
 
-import React from 'react'
-import ReactRouter from 'react-router'
-import Component from './Component'
+import React from 'react';
+import { Link } from 'react-router';
+import Component from './Component';
 
 
-class Link extends Component {
+class LektorLink extends Component {
 
   render() {
     let path = this.props.to;
     if (path.substr(0, 1) !== '/') {
       path = $LEKTOR_CONFIG.admin_root + '/' + path;
     }
     return (
-      <ReactRouter.Link to={path} activeClassName="active">
+      <Link to={path} activeClassName="active">
         {this.props.children}
-      </ReactRouter.Link>
+      </Link>
     );
   }
 }
 
-Link.propTypes = {
+LektorLink.propTypes = {
   to: React.PropTypes.string
-}
+};
 
 
-module.exports = Link
+module.exports = LektorLink;
diff --git a/lektor/admin/static/js/components/ServerStatus.jsx b/lektor/admin/static/js/components/ServerStatus.jsx
@@ -5,7 +5,7 @@ import Router from "react-router";
 import Component from '../components/Component';
 import utils from '../utils';
 import i18n from '../i18n';
-
+import makeRichPromise from '../richPromise';
 
 class ServerStatus extends Component {
 
@@ -34,7 +34,7 @@ class ServerStatus extends Component {
   }
 
   onInterval() {
-    utils.loadData('/ping')
+    utils.loadData('/ping', {}, null, makeRichPromise)
       .then((resp) => {
         if (this.state.projectId === null) {
           this.setState({

diff --git a/lektor/admin/static/js/components/Sidebar.jsx b/lektor/admin/static/js/components/Sidebar.jsx
@@ -7,7 +7,7 @@ import hub from '../hub'
 import {AttachmentsChangedEvent} from '../events'
 import RecordComponent from './RecordComponent'
 import Link from '../components/Link'
-
+import makeRichPromise from '../richPromise';
 
 function getBrowseButtonTitle() {
   const platform = utils.getPlatform();
@@ -118,7 +118,7 @@ class Sidebar extends RecordComponent {
     this.setState({
       lastRecordRequest: path,
     }, () => {
-      utils.loadData('/recordinfo', {path: path})
+      utils.loadData('/recordinfo', {path: path}, null, makeRichPromise)
         .then((resp) => {
           // we're already fetching something else.
           if (path !== this.state.lastRecordRequest) {
@@ -151,7 +151,7 @@ class Sidebar extends RecordComponent {
     utils.apiRequest('/browsefs', {data: {
       path: this.getRecordPath(),
       alt: this.getRecordAlt()
-    }, method: 'POST'})
+    }, method: 'POST'}, makeRichPromise)
       .then((resp) => {
         if (!resp.okay) {
           alert(i18n.trans('ERROR_CANNOT_BROWSE_FS'));

diff --git a/lektor/admin/static/js/components/SlideDialog.jsx b/lektor/admin/static/js/components/SlideDialog.jsx
@@ -43,9 +43,16 @@ class SlideDialog extends Component {
     return (
       <div className={className} {...props}>
         <div className="col-md-6 col-md-offset-4">
-          {hasCloseButton}
-            <a href="#" className="close-btn" onClick={
-              this._onCloseClick.bind(this)}>{i18n.trans('CLOSE')}</a> : null}
+          {
+            hasCloseButton &&
+            <a
+                href="#"
+                className="close-btn"
+                onClick={this._onCloseClick.bind(this)}
+            >
+                { i18n.trans('CLOSE') }
+            </a>
+          }
           <h3>{title}</h3>
           {children}
         </div>

diff --git a/lektor/admin/static/js/dialogs/Refresh.jsx b/lektor/admin/static/js/dialogs/Refresh.jsx
@@ -6,6 +6,7 @@ import SlideDialog from '../components/SlideDialog'
 import utils from '../utils'
 import i18n from '../i18n'
 import dialogSystem from '../dialogSystem'
+import makeRichPromise from '../richPromise';
 
 
 class Refresh extends Component {
@@ -37,7 +38,7 @@ class Refresh extends Component {
     });
     utils.apiRequest('/clean', {
       method: 'POST'
-    }).then((resp) => {
+    }, makeRichPromise).then((resp) => {
       this.setState({
         currentState: 'DONE'
       })

diff --git a/lektor/admin/static/js/dialogs/findFiles.jsx b/lektor/admin/static/js/dialogs/findFiles.jsx
@@ -1,14 +1,14 @@
 'use strict'
 
-import React from 'react'
-import Router from 'react-router'
-var {Link, RouteHandler} = Router
+import React from 'react';
+import { Link, RouteHandler } from 'react-router';
 
-import RecordComponent from '../components/RecordComponent'
-import SlideDialog from '../components/SlideDialog'
-import utils from '../utils'
-import i18n from '../i18n'
-import dialogSystem from '../dialogSystem'
+import RecordComponent from '../components/RecordComponent';
+import SlideDialog from '../components/SlideDialog';
+import utils from '../utils';
+import i18n from '../i18n';
+import dialogSystem from '../dialogSystem';
+import makeRichPromise from '../richPromise';
 
 class FindFiles extends RecordComponent {
 
@@ -47,7 +47,7 @@ class FindFiles extends RecordComponent {
           lang: i18n.currentLanguage
         },
         method: 'POST'
-      }).then((resp) => {
+      }, makeRichPromise).then((resp) => {
         this.setState({
           results: resp.results,
           currentSelection: Math.min(this.state.currentSelection,

diff --git a/lektor/admin/static/js/dialogs/publish.jsx b/lektor/admin/static/js/dialogs/publish.jsx
@@ -6,7 +6,7 @@ import SlideDialog from '../components/SlideDialog'
 import utils from '../utils'
 import i18n from '../i18n'
 import dialogSystem from '../dialogSystem'
-
+import makeRichPromise from '../richPromise';
 
 class Publish extends Component {
 
@@ -39,12 +39,14 @@ class Publish extends Component {
   }
 
   syncDialog() {
-    utils.loadData('/servers')
-      .then((resp) => {
+    utils.loadData('/servers', {}, null, makeRichPromise)
+      .then(({ servers }) => {
         this.setState({
-          servers: resp.servers,
-          activeTarget: resp.servers[0].id
-        })
+          servers: servers,
+          activeTarget: servers && servers.length
+                     ?  servers[0].id
+                      : null
+        });
       });
   }
 
@@ -70,7 +72,7 @@ class Publish extends Component {
     });
     utils.apiRequest('/build', {
       method: 'POST'
-    }).then((resp) => {
+    }, makeRichPromise).then((resp) => {
       this._beginPublish();
     });
   }
@@ -106,7 +108,7 @@ class Publish extends Component {
   componentDidUpdate() {
     super.componentDidUpdate();
     const node = this.refs.log;
-    if (node !== null) {
+    if (node) {
       node.scrollTop = node.scrollHeight;
     }
   }
@@ -142,11 +144,16 @@ class Publish extends Component {
         <p>{i18n.trans('PUBLISH_NOTE')}</p>
         <dl>
           <dt>{i18n.trans('PUBLISH_SERVER')}</dt>
-          <dd><div className="input-group">
-            <select value={this.state.activeTarget}
-              onChange={this.onSelectServer.bind(this)}
-              className="form-control">{servers}</select>
-          </div></dd>
+          <dd>
+              <div className="input-group">
+                  <select
+                      value={this.state.activeTarget}
+                      onChange={this.onSelectServer.bind(this)}
+                      className="form-control">
+                      {servers}
+                  </select>
+              </div>
+          </dd>
         </dl>
         <div className="actions">
           <button type="submit" className="btn btn-primary"
@@ -163,4 +170,4 @@ class Publish extends Component {
   }
 }
 
-export default Publish
+export default Publish;
diff --git a/lektor/admin/static/js/events.jsx b/lektor/admin/static/js/events.jsx
@@ -1,7 +1,6 @@
 'use strict'
 
-import React from 'react'
-
+import React from 'react';
 
 class Event {
 
@@ -51,9 +50,9 @@ class DialogChangedEvent extends Event {
 }
 
 
-export default {
-  Event: Event,
-  RecordEvent: RecordEvent,
-  AttachmentsChangedEvent: AttachmentsChangedEvent,
-  DialogChangedEvent: DialogChangedEvent,
-}
+export {
+  Event,
+  RecordEvent,
+  AttachmentsChangedEvent,
+  DialogChangedEvent
+};
diff --git a/lektor/admin/static/js/main.jsx b/lektor/admin/static/js/main.jsx
@@ -1,20 +1,29 @@
 'use strict';
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var {Router, Route, IndexRoute} = require('react-router');
-var Component = require('./components/Component');
-var i18n = require('./i18n');
-var {useBeforeUnload} = require('history');
-var createBrowserHistory = require('history/lib/createBrowserHistory');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Router, Route, IndexRoute} from 'react-router';
+import Component from './components/Component';
+import i18n from './i18n';
+import {useBeforeUnload} from 'history';
+import createBrowserHistory from 'history/lib/createBrowserHistory';
 
-require('bootstrap');
-require('./bootstrap-extras');
-require('font-awesome/css/font-awesome.css');
+import Bootstrap from 'bootstrap';
+import BootstrapExtras from './bootstrap-extras';
+import FACss from 'font-awesome/css/font-awesome.css';
 
 // polyfill for internet explorer
-require('native-promise-only');
-require('event-source-polyfill');
+import PromiseOnly from 'native-promise-only';
+import EventSource from 'event-source-polyfill';
+
+// route targets
+import App from './views/App';
+import Dash from './views/Dash';
+import EditPage from './views/EditPage';
+import DeletePage from './views/DeletePage';
+import PreviewPage from './views/PreviewPage';
+import AddChildPage from './views/AddChildPage';
+import AddAttachmentPage from './views/AddAttachmentPage';
 
 i18n.currentLanguage = $LEKTOR_CONFIG.lang;
 
@@ -35,15 +44,6 @@ BadRoute.contextTypes = {
 };
 
 var routes = (function() {
-  // route targets
-  var App = require('./views/App');
-  var Dash = require('./views/Dash');
-  var EditPage = require('./views/EditPage');
-  var DeletePage = require('./views/DeletePage');
-  var PreviewPage = require('./views/PreviewPage');
-  var AddChildPage = require('./views/AddChildPage');
-  var AddAttachmentPage = require('./views/AddAttachmentPage');
-
   // route setup
   return (
     <Route name="app" path={$LEKTOR_CONFIG.admin_root} component={App}>
@@ -58,7 +58,8 @@ var routes = (function() {
   );
 })();
 
-var dash = document.getElementById('dash')
+var dash = document.getElementById('dash');
+
 if (dash) {
   ReactDOM.render((
     <Router history={useBeforeUnload(createBrowserHistory)()}>