Updated imports, structure and webpack config stuff

app/components/App.tsx

@@ -3,11 +3,11 @@ import DevTools from "mobx-react-devtools";
 import * as React from "react";
 import { Item } from "semantic-ui-react";
 
-import { UiStore } from "app/ui";
+import { UiStore } from "@app/ui";
-import { SprinklersDevice } from "common/sprinklers";
+import { SprinklersDevice } from "@common/sprinklers";
 import { DeviceView, MessagesView } from ".";
 
-import "app/style/app.css";
+import "@app/styles/app.css";
 import "font-awesome/css/font-awesome.css";
 import "semantic-ui-css/semantic.css";
 

app/components/DeviceView.tsx

@@ -5,7 +5,7 @@ import FontAwesome = require("react-fontawesome");
 import { Header, Item } from "semantic-ui-react";
 import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
 
-import { SprinklersDevice } from "common/sprinklers";
+import { SprinklersDevice } from "@common/sprinklers";
 
 const ConnectionState = ({ connected }: { connected: boolean }) => {
     const classes = classNames({
@@ -27,7 +27,7 @@ export default class DeviceView extends React.Component<{ device: SprinklersDevi
         const { id, connected, sections, programs, sectionRunner } = this.props.device;
         return (
             <Item>
-                <Item.Image src={require<string>("app/images/raspberry_pi.png")} />
+                <Item.Image src={require<string>("@app/images/raspberry_pi.png")} />
                 <Item.Content>
                     <Header as="h1">
                         <span>Device </span><kbd>{id}</kbd>

app/components/DurationInput.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Input, InputOnChangeData } from "semantic-ui-react";
 
-import { Duration } from "common/sprinklers";
+import { Duration } from "@common/sprinklers";
 
 export default class DurationInput extends React.Component<{
     duration: Duration,

app/components/MessagesView.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Message, MessageList, TransitionGroup } from "semantic-ui-react";
 
-import { Message as UiMessage, UiStore } from "app/ui";
+import { Message as UiMessage, UiStore } from "@app/ui";
 
 class MessageView extends React.Component<{
     uiStore: UiStore,

app/components/ProgramTable.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Table } from "semantic-ui-react";
 
-import { Program, Schedule } from "common/sprinklers";
+import { Program, Schedule } from "@common/sprinklers";
 
 @observer
 export class ScheduleView extends React.Component<{ schedule: Schedule }> {

app/components/RunSectionForm.tsx

@@ -1,10 +1,10 @@
-import {computed} from "mobx";
+import { computed } from "mobx";
-import {observer} from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import {DropdownItemProps, DropdownProps, Form, Header, Segment} from "semantic-ui-react";
+import { DropdownItemProps, DropdownProps, Form, Header, Segment } from "semantic-ui-react";
 
-import {Duration, Section} from "common/sprinklers";
+import { Duration, Section } from "@common/sprinklers";
-import {DurationInput} from ".";
+import DurationInput from "./DurationInput";
 
 @observer
 export default class RunSectionForm extends React.Component<{
@@ -22,14 +22,14 @@ export default class RunSectionForm extends React.Component<{
     }
 
     render() {
-        const {section, duration} = this.state;
+        const { section, duration } = this.state;
         return <Segment>
             <Header>Run Section</Header>
             <Form>
                 <Form.Group>
                     <Form.Select label="Section" placeholder="Section" options={this.sectionOptions} value={section}
-                                 onChange={this.onSectionChange}/>
+                        onChange={this.onSectionChange} />
-                    <DurationInput duration={duration} onDurationChange={this.onDurationChange}/>
+                    <DurationInput duration={duration} onDurationChange={this.onDurationChange} />
                     {/*Label must be &nbsp; to align it properly*/}
                     <Form.Button label="&nbsp;" primary onClick={this.run} disabled={!this.isValid}>Run</Form.Button>
                 </Form.Group>
@@ -38,11 +38,11 @@ export default class RunSectionForm extends React.Component<{
     }
 
     private onSectionChange = (e: React.SyntheticEvent<HTMLElement>, v: DropdownProps) => {
-        this.setState({section: v.value as number});
+        this.setState({ section: v.value as number });
     }
 
     private onDurationChange = (newDuration: Duration) => {
-        this.setState({duration: newDuration});
+        this.setState({ duration: newDuration });
     }
 
     private run = (e: React.SyntheticEvent<HTMLElement>) => {

app/components/SectionRunnerView.tsx

@@ -1,8 +1,8 @@
-import {observer} from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import {Segment} from "semantic-ui-react";
+import { Segment } from "semantic-ui-react";
 
-import {SectionRunner} from "common/sprinklers";
+import { SectionRunner } from "@common/sprinklers";
 
 @observer
 export default class SectionRunnerView extends React.Component<{ sectionRunner: SectionRunner }, {}> {

app/components/SectionTable.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import FontAwesome = require("react-fontawesome");
 import { Table } from "semantic-ui-react";
 
-import { Section } from "common/sprinklers";
+import { Section } from "@common/sprinklers";
 
 /* tslint:disable:object-literal-sort-keys */
 

app/index.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { AppContainer } from "react-hot-loader";
 
-import App from "./components/App";
+import App from "@app/components/App";
-import { MqttApiClient } from "./mqtt";
+import { MqttApiClient } from "@app/mqtt";
-import { Message, UiStore } from "./ui";
+import { Message, UiStore } from "@app/ui";
 
 const client = new MqttApiClient();
 client.start();
@@ -25,8 +25,8 @@ const doRender = (Component: typeof App) => {
 doRender(App);
 
 if (module.hot) {
-    module.hot.accept("app/components/App", () => {
+    module.hot.accept("@app/components/App", () => {
-        const NextApp = require<any>("app/components/App").default as typeof App;
+        const NextApp = require<any>("@app/components/App").default as typeof App;
         doRender(NextApp);
     });
 }

app/mqtt.ts

@@ -13,8 +13,8 @@ import {
     SectionRunner,
     SprinklersDevice,
     TimeOfDay,
-} from "common/sprinklers";
+} from "@common/sprinklers";
-import { checkedIndexOf, getRandomId } from "common/utils";
+import { checkedIndexOf, getRandomId } from "@common/utils";
 
 export class MqttApiClient implements ISprinklersApi {
     client: MQTT.Client;

app/tsconfig.json

@@ -5,16 +5,16 @@
         "experimentalDecorators": true,
         "target": "es5",
         "lib": ["es6", "dom"],
-        "typeRoots": ["node_modules/@types"],
+        // "typeRoots": ["node_modules/@types"],
         "strict": true,
-        "baseUrl": "..",
+        "baseUrl": ".",
         "paths": {
-            "common/*": [ "../common/*" ],
+            "@common/*": [ "../common/*" ],
-            "app/*": [ "./*" ]
+            "@app/*": [ "./*" ]
         }
     },
     "files": [
-        "./node_modules/@types/webpack-env/index.d.ts",
+        "../node_modules/@types/webpack-env/index.d.ts",
         "./app/script/index.tsx"
     ]
 }

app/ui.ts

@@ -1,6 +1,6 @@
 import {observable} from "mobx";
 
-import { getRandomId } from "common/utils";
+import { getRandomId } from "@common/utils";
 
 export class Message {
     id: string;

webpack/base.config.js

@@ -2,27 +2,32 @@ const path = require("path");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
+const rootDir = path.resolve(__dirname, "..");
+
 module.exports = {
-    devtool: "eval-source-map",
+    entry: [
+        "core-js",
+        "./app/index.tsx"
+    ],
     output: {
-        path: path.resolve(__dirname, "..", "build"),
+        path: path.resolve(rootDir, "build"),
         filename: "bundle.js"
     },
     resolve: {
-        extensions: [".ts", ".tsx", ".js"],
+        extensions: [".ts", ".tsx", ".js", ".json"],
         alias: {
-            app: path.resolve(__dirname, "..", "app"),
+            "@app": path.resolve(rootDir, "app"),
-            common: path.resolve(__dirname, "..", "common"),
+            "@common": path.resolve(rootDir, "common"),
         }
     },
     module: {
         rules: [
-            { test: /\.css$/, use: "style-loader!css-loader" },
+            { test: /\.css$/, use: ["style-loader", "css-loader"] },
             { test: /\.(ttf|eot|svg|woff(2)?|png|jpg)(\?[a-z0-9=&.]+)?$/, use: "file-loader" },
             {
                 test: /\.tsx?$/, use: {
                     loader: "awesome-typescript-loader",
-                    options: { configFileName: path.resolve(__dirname, "..", "app", "tsconfig.json") }
+                    options: { configFileName: path.resolve(rootDir, "app", "tsconfig.json") }
                 },
             },
         ]
@@ -32,9 +37,5 @@ module.exports = {
             template: "./app/index.html"
         }),
         new webpack.NamedModulesPlugin(),
-        new webpack.HotModuleReplacementPlugin()
     ],
-    devServer: {
-        hot: true
-    }
 };

webpack/dev.config.js

@@ -2,18 +2,17 @@ const webpack = require("webpack");
 const webpackMerge = require("webpack-merge");
 const base = require("./base.config");
 
-module.exports = webpackMerge.smart(base, {
+module.exports = webpackMerge.strategy({
+    entry: "prepend",
+})(base, {
+    devtool: "eval-source-map",
     entry: [
         "react-hot-loader/patch",
         "webpack-dev-server/client?http://localhost:8080",
         "webpack/hot/only-dev-server",
-        "core-js",
-        "./app/script/index.tsx"
     ],
-    devtool: "eval-source-map",
     plugins: [
-        new webpack.NamedModulesPlugin(),
+        new webpack.HotModuleReplacementPlugin(),
-        // new webpack.HotModuleReplacementPlugin(),
     ],
     devServer: {
         hot: true

webpack/prod.config.js

@@ -1,12 +1,7 @@
 const webpackMerge = require("webpack-merge");
 const base = require("./base.config");
 
-module.exports = webpackMerge.smart(base, {
+module.exports = webpackMerge.strategy({})(base, {
-    entry: [
-        "core-js",
-        "./app/script/index.tsx"
-    ],
     devtool: "none",
-    plugins: [
+    plugins: []
-    ]
 });