diff --git a/app/script/components/App.tsx b/app/components/App.tsx similarity index 84% rename from app/script/components/App.tsx rename to app/components/App.tsx index b420d33..0017f84 100644 --- a/app/script/components/App.tsx +++ b/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 { SprinklersDevice } from "common/sprinklers"; +import { UiStore } from "@app/ui"; +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"; diff --git a/app/script/components/DeviceView.tsx b/app/components/DeviceView.tsx similarity index 92% rename from app/script/components/DeviceView.tsx rename to app/components/DeviceView.tsx index 6b77335..76510d2 100644 --- a/app/script/components/DeviceView.tsx +++ b/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 ( - ("app/images/raspberry_pi.png")} /> + ("@app/images/raspberry_pi.png")} />
Device {id} diff --git a/app/script/components/DurationInput.tsx b/app/components/DurationInput.tsx similarity index 97% rename from app/script/components/DurationInput.tsx rename to app/components/DurationInput.tsx index 0050e06..eb5995a 100644 --- a/app/script/components/DurationInput.tsx +++ b/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, diff --git a/app/script/components/MessagesView.tsx b/app/components/MessagesView.tsx similarity index 96% rename from app/script/components/MessagesView.tsx rename to app/components/MessagesView.tsx index 26cff6c..b3ea1d5 100644 --- a/app/script/components/MessagesView.tsx +++ b/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, diff --git a/app/script/components/ProgramTable.tsx b/app/components/ProgramTable.tsx similarity index 97% rename from app/script/components/ProgramTable.tsx rename to app/components/ProgramTable.tsx index 1754653..8571bb7 100644 --- a/app/script/components/ProgramTable.tsx +++ b/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 }> { diff --git a/app/script/components/RunSectionForm.tsx b/app/components/RunSectionForm.tsx similarity index 78% rename from app/script/components/RunSectionForm.tsx rename to app/components/RunSectionForm.tsx index 5b10d0e..2a82fae 100644 --- a/app/script/components/RunSectionForm.tsx +++ b/app/components/RunSectionForm.tsx @@ -1,10 +1,10 @@ -import {computed} from "mobx"; -import {observer} from "mobx-react"; +import { computed } from "mobx"; +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 {DurationInput} from "."; +import { Duration, Section } from "@common/sprinklers"; +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
Run Section
- + onChange={this.onSectionChange} /> + {/*Label must be   to align it properly*/} Run @@ -38,11 +38,11 @@ export default class RunSectionForm extends React.Component<{ } private onSectionChange = (e: React.SyntheticEvent, 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) => { diff --git a/app/script/components/SectionRunnerView.tsx b/app/components/SectionRunnerView.tsx similarity index 65% rename from app/script/components/SectionRunnerView.tsx rename to app/components/SectionRunnerView.tsx index 96a0b78..9fdfc76 100644 --- a/app/script/components/SectionRunnerView.tsx +++ b/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 }, {}> { diff --git a/app/script/components/SectionTable.tsx b/app/components/SectionTable.tsx similarity index 97% rename from app/script/components/SectionTable.tsx rename to app/components/SectionTable.tsx index 4bb4a06..1a69ca8 100644 --- a/app/script/components/SectionTable.tsx +++ b/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 */ diff --git a/app/script/components/index.ts b/app/components/index.ts similarity index 100% rename from app/script/components/index.ts rename to app/components/index.ts diff --git a/app/script/index.tsx b/app/index.tsx similarity index 70% rename from app/script/index.tsx rename to app/index.tsx index ae8dfed..d74fbc0 100644 --- a/app/script/index.tsx +++ b/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 { MqttApiClient } from "./mqtt"; -import { Message, UiStore } from "./ui"; +import App from "@app/components/App"; +import { MqttApiClient } from "@app/mqtt"; +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", () => { - const NextApp = require("app/components/App").default as typeof App; + module.hot.accept("@app/components/App", () => { + const NextApp = require("@app/components/App").default as typeof App; doRender(NextApp); }); } diff --git a/app/script/mqtt.ts b/app/mqtt.ts similarity index 99% rename from app/script/mqtt.ts rename to app/mqtt.ts index e9e37c8..9f30cb7 100644 --- a/app/script/mqtt.ts +++ b/app/mqtt.ts @@ -13,8 +13,8 @@ import { SectionRunner, SprinklersDevice, TimeOfDay, -} from "common/sprinklers"; -import { checkedIndexOf, getRandomId } from "common/utils"; +} from "@common/sprinklers"; +import { checkedIndexOf, getRandomId } from "@common/utils"; export class MqttApiClient implements ISprinklersApi { client: MQTT.Client; diff --git a/app/style/app.css b/app/styles/app.css similarity index 100% rename from app/style/app.css rename to app/styles/app.css diff --git a/app/tsconfig.json b/app/tsconfig.json index ce60fe8..c9af835 100644 --- a/app/tsconfig.json +++ b/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/*" ], - "app/*": [ "./*" ] + "@common/*": [ "../common/*" ], + "@app/*": [ "./*" ] } }, "files": [ - "./node_modules/@types/webpack-env/index.d.ts", + "../node_modules/@types/webpack-env/index.d.ts", "./app/script/index.tsx" ] } diff --git a/app/script/ui.ts b/app/ui.ts similarity index 93% rename from app/script/ui.ts rename to app/ui.ts index 1dc096f..9c17438 100644 --- a/app/script/ui.ts +++ b/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; diff --git a/webpack/base.config.js b/webpack/base.config.js index 5da84c9..4fc8ce4 100644 --- a/webpack/base.config.js +++ b/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"), - common: path.resolve(__dirname, "..", "common"), + "@app": path.resolve(rootDir, "app"), + "@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 - } }; diff --git a/webpack/dev.config.js b/webpack/dev.config.js index 922d107..5a2158d 100644 --- a/webpack/dev.config.js +++ b/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 diff --git a/webpack/prod.config.js b/webpack/prod.config.js index 15df8ee..b07bf04 100644 --- a/webpack/prod.config.js +++ b/webpack/prod.config.js @@ -1,12 +1,7 @@ const webpackMerge = require("webpack-merge"); const base = require("./base.config"); -module.exports = webpackMerge.smart(base, { - entry: [ - "core-js", - "./app/script/index.tsx" - ], +module.exports = webpackMerge.strategy({})(base, { devtool: "none", - plugins: [ - ] + plugins: [] });