use jsx spread

Author: ShMcK

lib/components/app.js

@@ -4,6 +4,14 @@ var __extends = (this && this.__extends) || function (d, b) {
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -28,12 +36,11 @@ var App = (function (_super) {
         _super.apply(this, arguments);
     }
     App.prototype.render = function () {
-        var state = this.props.state;
-        return (React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.AppMenu, {route: state.route, position: state.position}), React.createElement(_components_1.Routes, {state: state, ref: 'route'}), React.createElement(_components_1.Alert, {alert: state.alert}))));
+        return (React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.AppMenu, __assign({}, this.props.store)), React.createElement(_components_1.Routes, __assign({}, this.props.store, {ref: 'route'})), React.createElement(_components_1.Alert, __assign({}, this.props.store)))));
     };
     App = __decorate([
-        react_redux_1.connect(function (state) {
-            return { state: state };
+        react_redux_1.connect(function (store) {
+            return { store: store };
         }), 
         __metadata('design:paramtypes', [])
     ], App);

lib/components/page/page.js

@@ -4,6 +4,14 @@ var __extends = (this && this.__extends) || function (d, b) {
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 var React = require('react');
 var ReactDOM = require('react-dom');
 var Paper_1 = require('material-ui/Paper');
@@ -28,9 +36,9 @@ var Page = (function (_super) {
     };
     Page.prototype.render = function () {
         var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
-        var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
+        var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
         var allComplete = taskPosition >= tasks.length;
-        return (React.createElement(Paper_1.default, {style: pageStyle, zDepth: 1, className: 'cr-page', ref: 'page'}, React.createElement(content_1.PageContent, {page: page}), React.createElement(Divider_1.default, null), React.createElement(tasks_1.Tasks, {tasks: tasks, taskPosition: taskPosition, testRun: testRun}), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(hints_1.Hints, {task: currentTask, hintPosition: hintPosition}), React.createElement(toolbar_1.PageToolbar, {tasks: tasks, taskPosition: taskPosition}, React.createElement(progress_bar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}))));
+        return (React.createElement(Paper_1.default, {style: pageStyle, zDepth: 1, className: 'cr-page', ref: 'page'}, React.createElement(content_1.PageContent, __assign({}, this.props)), React.createElement(Divider_1.default, null), React.createElement(tasks_1.Tasks, __assign({}, this.props)), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(toolbar_1.PageToolbar, __assign({}, this.props), React.createElement(progress_bar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}))));
     };
     return Page;
 }(React.Component));

lib/components/routes/routes.js

@@ -4,6 +4,14 @@ var __extends = (this && this.__extends) || function (d, b) {
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 var React = require('react');
 var _components_1 = require('../_components');
 var Routes = (function (_super) {
@@ -12,16 +20,15 @@ var Routes = (function (_super) {
         _super.apply(this, arguments);
     }
     Routes.prototype.render = function () {
-        var _a = this.props.state, page = _a.page, tasks = _a.tasks, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, editorActions = _a.editorActions, testRun = _a.testRun, log = _a.log, progress = _a.progress, position = _a.position, checks = _a.checks, tutorials = _a.tutorials, route = _a.route;
-        switch (route) {
+        switch (this.props.route) {
             case 'page':
-                return React.createElement(_components_1.Page, {page: page, tasks: tasks, taskPosition: taskPosition, hintPosition: hintPosition, editorActions: editorActions, testRun: testRun});
+                return React.createElement(_components_1.Page, __assign({}, this.props));
             case 'progress':
-                return React.createElement(_components_1.Progress, {progress: progress, position: position});
+                return React.createElement(_components_1.Progress, __assign({}, this.props));
             case 'start':
-                return React.createElement(_components_1.Start, {checks: checks});
+                return React.createElement(_components_1.Start, __assign({}, this.props));
             case 'tutorials':
-                return React.createElement(_components_1.Tutorials, {tutorials: tutorials});
+                return React.createElement(_components_1.Tutorials, __assign({}, this.props));
             case 'final':
                 return React.createElement(_components_1.FinalPage, null);
             default:

src/components/app.tsx

@@ -9,18 +9,17 @@ window.onresize = function() {
   height = atom.getSize().height;
 };
 
-@connect((state: CR.State) => {
-  return { state };
+@connect((store: CR.State) => {
+  return { store };
 })
-export class App extends React.Component<{state?: CR.State}, {}> {
+export class App extends React.Component<{store?: CR.State}, {}> {
   render(): React.ReactElement<{}> {
-    const state = this.props.state;
     return (
       <MuiThemeProvider muiTheme={muiTheme}>
       <section className='cr' key='main' style={{height}}>
-        <AppMenu route={state.route} position={state.position} />
-        <Routes state={state} ref='route' />
-        <Alert alert={state.alert} />
+        <AppMenu {...this.props.store} />
+        <Routes {...this.props.store} ref='route' />
+        <Alert {...this.props.store} />
       </section>
       </MuiThemeProvider>
 

src/components/page/page.tsx

@@ -15,8 +15,7 @@ const pageStyle = {
 };
 
 export class Page extends React.Component<{
-  page: CR.Page, tasks: CR.Task[], taskPosition: number,
-  editorActions: string[], log: any, hintPosition: number,
+  page: CR.Page, tasks: CR.Task[], taskPosition: number, hintPosition: number,
   testRun: boolean, callNextPage?: any, callRunTests?: any, callNextTask?: any, hintShow?: any
 }, {hintPos: number, taskPos: number}> {
 
@@ -29,20 +28,20 @@ componentDidUpdate() {
 }
 render() {
   const {page, taskPosition, hintPosition, tasks, testRun} = this.props;
-  const currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
+  const task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
   const allComplete = taskPosition >= tasks.length;
 
   return (
   <Paper style={pageStyle} zDepth={1} className='cr-page' ref='page'>
-    <PageContent page={page} />
+    <PageContent {...this.props} />
     <Divider />
 
-    <Tasks tasks={tasks} taskPosition={taskPosition} testRun={testRun} />
+    <Tasks {...this.props} />
     <div className='listEnd' ref='listEnd'></div>
 
     <PageCompleteMessage page={page} />
-    <Hints task={currentTask} hintPosition={hintPosition} />
-    <PageToolbar tasks={tasks} taskPosition={taskPosition}>
+    <Hints task={task} hintPosition={hintPosition} />
+    <PageToolbar {...this.props}>
       <ProgressBar taskPosition={taskPosition} taskCount={tasks.length}/>
     </PageToolbar>
   </Paper>

src/components/routes/routes.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react';
 import {Page, Progress, Tutorials, Start, FinalPage} from '../_components';
 
-export class Routes extends React.Component<{state: CR.State}, {}> {
+export class Routes extends React.Component<{
+  route: string, progress: CR.Progress, page: CR.Page, tutorials: CR.Tutorial[],
+  testRun: boolean, checks: CR.Checks, position: CR.Position, tasks: CR.Task[],
+  taskPosition: number, hintPosition: number
+}, {}> {
   render() {
-    const {page, tasks, taskPosition, hintPosition, editorActions, testRun,
-      log, progress, position, checks, tutorials, route} = this.props.state;
-    switch (route) {
+    switch (this.props.route) {
       case 'page':
-        return <Page page={page}
-                    tasks={tasks}
-                    taskPosition={taskPosition}
-                    hintPosition={hintPosition}
-                    editorActions={editorActions}
-                    testRun={testRun} />;
+        return <Page {...this.props} />;
       case 'progress':
-        return <Progress progress={progress}
-                        position={position} />;
+        return <Progress {...this.props} />;
       case 'start':
-        return <Start checks={checks} />;
+        return <Start {...this.props} />;
       case 'tutorials':
-        return <Tutorials tutorials={tutorials} />;
+        return <Tutorials {...this.props} />;
       case 'final':
         return <FinalPage />;
       default:

src/services/polyfills.ts

@@ -1,5 +1,6 @@
 export default function loadPolyfills(): void {
 
+  // Object.values (ES7)
   if (typeof Object.values !== 'function') {
     Object.values = function(obj) {
       var vals = [];
@@ -10,7 +11,7 @@ export default function loadPolyfills(): void {
     };
   }
 
-  // Object.assign temporary polyfill
+  // Object.assign (ES7)
   if (typeof Object.assign !== 'function') {
     (function() {
       Object.assign = function(target) {
@@ -34,4 +35,5 @@ export default function loadPolyfills(): void {
       };
     })();
   }
+
 };