amikhalev/sprinklers3
1
1
Fork 0
Code Issues 9 Pull Requests 1 Releases Wiki Activity

Updated imports, structure and webpack config stuff

Browse Source
This commit is contained in:
Alex Mikhalev 2017-09-07 10:14:10 -06:00
parent 18dbefbdb7
commit cef5fb3ad5
17 changed files with 54 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/script/components/App.tsx → app/components/App.tsx
View File

@ -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";

4
app/script/components/DeviceView.tsx → app/components/DeviceView.tsx
View File

@ -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>

2
app/script/components/DurationInput.tsx → app/components/DurationInput.tsx
View File

@ -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,

2
app/script/components/MessagesView.tsx → app/components/MessagesView.tsx
View File

@ -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,

2
app/script/components/ProgramTable.tsx → app/components/ProgramTable.tsx
View File

@ -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 }> {

20
app/script/components/RunSectionForm.tsx → app/components/RunSectionForm.tsx
View File

@ -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 <Segment>
<Header>Run Section</Header>
<Form>
<Form.Group>
<Form.Select label="Section" placeholder="Section" options={this.sectionOptions} value={section}
onChange={this.onSectionChange}/>
<DurationInput duration={duration} onDurationChange={this.onDurationChange}/>
onChange={this.onSectionChange} />
<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>) => {

6
app/script/components/SectionRunnerView.tsx → app/components/SectionRunnerView.tsx
View File

@ -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 }, {}> {

2
app/script/components/SectionTable.tsx → app/components/SectionTable.tsx
View File

@ -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 */

0
app/script/components/index.ts → app/components/index.ts
View File

10
app/script/index.tsx → app/index.tsx
View File

@ -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<any>("app/components/App").default as typeof App;
module.hot.accept("@app/components/App", () => {
const NextApp = require<any>("@app/components/App").default as typeof App;
doRender(NextApp);
});
}

4
app/script/mqtt.ts → app/mqtt.ts
View File

@ -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;

0
app/style/app.css → app/styles/app.css
View File

10
app/tsconfig.json
View File

@ -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"
]
}

2
app/script/ui.ts → app/ui.ts
View File

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

23
webpack/base.config.js
View File

@ -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
}
};

11
webpack/dev.config.js
View File

@ -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

9
webpack/prod.config.js
View File

@ -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: []
});