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

Updated imports, structure and webpack config stuff

update-deps
Alex Mikhalev 7 years ago
parent
18dbefbdb7
commit
cef5fb3ad5
17 changed files with 54 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      app/components/App.tsx
  2. 4
      app/components/DeviceView.tsx
  3. 2
      app/components/DurationInput.tsx
  4. 2
      app/components/MessagesView.tsx
  5. 2
      app/components/ProgramTable.tsx
  6. 20
      app/components/RunSectionForm.tsx
  7. 6
      app/components/SectionRunnerView.tsx
  8. 2
      app/components/SectionTable.tsx
  9. 0
      app/components/index.ts
  10. 10
      app/index.tsx
  11. 4
      app/mqtt.ts
  12. 0
      app/styles/app.css
  13. 10
      app/tsconfig.json
  14. 2
      app/ui.ts
  15. 23
      webpack/base.config.js
  16. 11
      webpack/dev.config.js
  17. 9
      webpack/prod.config.js

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

@ -3,11 +3,11 @@ import DevTools from "mobx-react-devtools";
import * as React from "react"; import * as React from "react";
import { Item } from "semantic-ui-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 { DeviceView, MessagesView } from ".";
import "app/style/app.css"; import "@app/styles/app.css";
import "font-awesome/css/font-awesome.css"; import "font-awesome/css/font-awesome.css";
import "semantic-ui-css/semantic.css"; import "semantic-ui-css/semantic.css";

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

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

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

@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import { Input, InputOnChangeData } from "semantic-ui-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<{ export default class DurationInput extends React.Component<{
duration: Duration, duration: Duration,

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

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

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

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

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

@ -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 * 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 @observer
export default class RunSectionForm extends React.Component<{ export default class RunSectionForm extends React.Component<{
@ -22,14 +22,14 @@ export default class RunSectionForm extends React.Component<{
} }
render() { render() {
const {section, duration} = this.state; const { section, duration } = this.state;
return <Segment> return <Segment>
<Header>Run Section</Header> <Header>Run Section</Header>
<Form> <Form>
<Form.Group> <Form.Group>
<Form.Select label="Section" placeholder="Section" options={this.sectionOptions} value={section} <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*/} {/*Label must be &nbsp; to align it properly*/}
<Form.Button label="&nbsp;" primary onClick={this.run} disabled={!this.isValid}>Run</Form.Button> <Form.Button label="&nbsp;" primary onClick={this.run} disabled={!this.isValid}>Run</Form.Button>
</Form.Group> </Form.Group>
@ -38,11 +38,11 @@ export default class RunSectionForm extends React.Component<{
} }
private onSectionChange = (e: React.SyntheticEvent<HTMLElement>, v: DropdownProps) => { 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) => { private onDurationChange = (newDuration: Duration) => {
this.setState({duration: newDuration}); this.setState({ duration: newDuration });
} }
private run = (e: React.SyntheticEvent<HTMLElement>) => { private run = (e: React.SyntheticEvent<HTMLElement>) => {

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

@ -1,8 +1,8 @@
import {observer} from "mobx-react"; import { observer } from "mobx-react";
import * as React from "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 @observer
export default class SectionRunnerView extends React.Component<{ sectionRunner: SectionRunner }, {}> { export default class SectionRunnerView extends React.Component<{ sectionRunner: SectionRunner }, {}> {

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

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

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

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

@ -2,9 +2,9 @@ import * as React from "react";
import * as ReactDOM from "react-dom"; import * as ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader"; 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(); const client = new MqttApiClient();
client.start(); client.start();
@ -25,8 +25,8 @@ const doRender = (Component: typeof App) => {
doRender(App); doRender(App);
if (module.hot) { 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); doRender(NextApp);
}); });
} }

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

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

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

10
app/tsconfig.json
Unescape View File

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

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

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

23
webpack/base.config.js
Unescape View File

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

11
webpack/dev.config.js
Unescape View File

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

9
webpack/prod.config.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save