Eject from preact-cli

.editorconfig

@@ -0,0 +1,4 @@
+[*.{js,ts,tsx,json}]
+charset = utf-8
+indent_size = 2
+indent_style = space

.eslintrc.js

@@ -1,36 +0,0 @@
-module.exports = {
-    env: {
-        browser: true
-    },
-    extends: [
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "prettier/@typescript-eslint",
-        "plugin:prettier/recommended"
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true
-        },
-        ecmaVersion:  2018,
-        sourceType: "module",
-    },
-    rules: {
-        "react/no-unknown-property": ["error", { ignore: ["class"] }],
-    },
-    settings: {
-        react: {
-            pragma: "h",
-            version: "detect"
-        },
-    },
-    overrides: [
-        {
-            files: ["*.js"],
-            rules: {
-                "@typescript-eslint/explicit-function-return-type": "off",
-            }
-        }
-    ]
-};

.gitignore

@@ -1,4 +1,4 @@
 node_modules
-/build
+/dist
 /*.log
-/size-plugin.json
+/.vscode

.prettierignore

@@ -1,4 +0,0 @@
-package.json
-package-lock.json
-yarn.lock
-build

.prettierrc

@@ -1 +0,0 @@
-tabWidth: 2

Dockerfile

@@ -1,14 +1,15 @@
 FROM alpine:3.11 AS build
 
+RUN apk add --no-cache nodejs npm git make
+
 COPY . /src
 WORKDIR /src
 
-RUN apk add --no-cache nodejs npm git
+RUN npm install && make build
-RUN npm install && npm run build
 
 FROM alpine:3.11
 
-COPY --from=build /src/build /app
+COPY --from=build /src/dist /app
 
 WORKDIR /app
 

Makefile

@@ -3,9 +3,12 @@ DOKKU_URL := dokku@dev.lookingfora.name:guesstimate
 watch:
 	npm run dev
 
-build:
+build: clean
 	npm run build
 
+clean:
+	rm -rf dist
+
 dokku-build:
 	docker build \
 		-t guesstimate-dokku:latest \

README.md

@@ -1,19 +1 @@
 # guesstimate
-
-## CLI Commands
-*   `npm install`: Installs dependencies
-
-*   `npm run start`: Runs `serve` or `dev`, depending on `NODE_ENV` value. Defaults to `dev server`
-
-*   `npm run dev`: Run a development, HMR server
-
-*   `npm run serve`: Run a production-like server
-
-*   `npm run build`: Production-ready build
-
-*   `npm run lint`: Pass TypeScript files using TSLint
-
-*   `npm run test`: Run Jest and [`preact-render-spy`](https://github.com/mzgoddard/preact-render-spy) for your tests
-
-
-For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).

jest.config.js

@@ -1,33 +0,0 @@
-module.exports = {
-    transform: {
-        "^.+\\.tsx?$": "ts-jest"
-    },
-    verbose: true,
-    setupFiles: [
-        "<rootDir>/src/tests/__mocks__/browserMocks.js"
-    ],
-    testURL: "http://localhost:8080",
-    moduleFileExtensions: [
-        "js",
-        "jsx",
-        "ts",
-        "tsx"
-    ],
-    moduleDirectories: [
-        "node_modules"
-    ],
-    testMatch: [
-        "**/__tests__/**/*.[jt]s?(x)",
-        "**/?(*.)(spec|test).[jt]s?(x)"
-    ],
-    moduleNameMapper: {
-        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
-        "\\.(css|less|scss)$": "identity-obj-proxy",
-        "^./style$": "identity-obj-proxy",
-        "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
-        "^react$": "preact-compat",
-        "^react-dom$": "preact-compat",
-        "^create-react-class$": "preact-compat/lib/create-react-class",
-        "^react-addons-css-transition-group$": "preact-css-transition-group"
-    }
-}

misc/dokku/CHECKS

@@ -1 +1 @@
-/ guesstimate
+/ Guesstimate

package.json

@@ -1,59 +1,42 @@
 {
-  "private": true,
   "name": "guesstimate",
   "version": "0.0.0",
-  "license": "MIT",
+  "description": "",
-  "scripts": {
+  "main": "src/index.js",
-    "build": "preact build --no-prerender",
-    "serve": "sirv build --port 8080 --cors --single",
-    "dev": "preact watch",
-    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
-    "test": "jest ./tests"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{css,md,scss}": "prettier --write",
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
-  },
-  "eslintIgnore": [
-    "build/*"
-  ],
   "dependencies": {
     "@types/bs58": "^4.0.1",
     "bs58": "^4.0.1",
     "bulma": "^0.8.2",
     "bulma-switch": "^2.0.0",
-    "preact": "^10.3.1",
+    "preact": "^10.4.1",
-    "preact-jsx-chai": "^3.0.0",
+    "preact-markup": "^1.6.0",
-    "preact-markup": "^2.0.0",
+    "preact-render-to-string": "^5.1.6",
-    "preact-render-to-string": "^5.1.4",
+    "preact-router": "^3.2.1",
-    "preact-router": "^3.2.1"
+    "style-loader": "^1.1.4",
+    "typescript": "^3.8.3"
   },
   "devDependencies": {
-    "@types/jest": "^25.1.2",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.1.1",
-    "@types/webpack-env": "^1.15.1",
+    "@types/react": "^16.9.34",
-    "@typescript-eslint/eslint-plugin": "^2.19.0",
+    "css-loader": "^3.5.2",
-    "@typescript-eslint/parser": "^2.19.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.3",
-    "css-loader": "^1.0.1",
+    "html-webpack-plugin": "^4.2.0",
-    "eslint": "^6.8.0",
+    "mini-css-extract-plugin": "^0.9.0",
-    "eslint-config-prettier": "^6.10.0",
+    "resolve-url-loader": "^3.1.1",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "husky": "^4.2.1",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.4.0",
-    "lint-staged": "^10.0.7",
-    "preact-cli": "^3.0.0-next.19",
-    "preact-render-spy": "^1.3.0",
-    "prettier": "^1.19.1",
-    "sirv-cli": "^1.0.0-next.3",
-    "ts-jest": "^25.2.0",
     "ts-loader": "^7.0.1",
-    "typescript": "^3.7.5",
+    "webpack": "^4.43.0",
-    "typings-for-css-modules-loader": "^1.7.0"
+    "webpack-cli": "^3.3.11",
-  }
+    "webpack-dev-server": "^3.10.3"
+  },
+  "scripts": {
+    "dev": "NODE_ENV=development webpack-dev-server --watch",
+    "build": "webpack --progress --profile",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@forge.cadoles.com:4242/wpetit/guesstimate.git"
+  },
+  "author": "William Petit <wpetit@cadoles.com>",
+  "license": "AGPL-3.0"
 }

preact.config.js

@@ -1,34 +0,0 @@
-import { resolve } from "path";
-
-export default {
-    /**
-     * Function that mutates the original webpack config.
-     * Supports asynchronous changes when a promise is returned (or it's an async function).
-     *
-     * @param {object} config - original webpack config.
-     * @param {object} env - options passed to the CLI.
-     * @param {WebpackConfigHelpers} helpers - object with useful helpers for working with the webpack config.
-     * @param {object} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
-     **/
-    webpack(config, env, helpers, options) {
-        // Switch css-loader for typings-for-css-modules-loader, which is a wrapper
-        // that automatically generates .d.ts files for loaded CSS
-        helpers.getLoadersByName(config, "css-loader").forEach(({ loader }) => {
-            loader.loader = "typings-for-css-modules-loader";
-            loader.options = Object.assign(loader.options, {
-                camelCase: true,
-                banner:
-                    "// This file is automatically generated from your CSS. Any edits will be overwritten.",
-                namedExport: true,
-                silent: true
-            });
-        });
-
-        // Use any `index` file, not just index.js
-        config.resolve.alias["preact-cli-entrypoint"] = resolve(
-            process.cwd(),
-            "src",
-            "index"
-        );
-    }
-};

src/.babelrc

@@ -1,5 +0,0 @@
-{
-    "presets": [ 
-        ["preact-cli/babel", { "modules": "commonjs" }]
-    ]
-}

src/components/app.tsx

@@ -1,16 +1,10 @@
 import { FunctionalComponent, h } from "preact";
 import { Route, Router, RouterOnChangeArgs } from "preact-router";
 
-import Home from "../routes/home";
+import Home from "../routes/home/index";
-import Project from "../routes/project";
+import Project from "../routes/project/index";
-import NotFoundPage from '../routes/notfound';
+import NotFoundPage from '../routes/notfound/index';
-import Header from "./header";
+import Header from "./header/index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-if ((module as any).hot) {
-    // tslint:disable-next-line:no-var-requires
-    require("preact/debug");
-}
 
 const App: FunctionalComponent = () => {
     let currentUrl: string;

src/components/editable-text/index.tsx

@@ -1,6 +1,5 @@
 import { FunctionalComponent, h, Component, ComponentChild, Fragment } from "preact";
-import { Link } from "preact-router/match";
+import * as style from "./style.module.css";
-import * as style from "./style.css";
 import { useState, useEffect } from "preact/hooks";
 
 export interface EditableTextProps {

src/components/editable-text/style.css.d.ts

@@ -1,3 +0,0 @@
-// This file is automatically generated from your CSS. Any edits will be overwritten.
-export const editableText: string;
-export const editIcon: string;

src/components/editable-text/style.module.css.d.ts

@@ -0,0 +1,13 @@
+declare namespace StyleModuleCssModule {
+  export interface IStyleModuleCss {
+    editIcon: string;
+    editableText: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssModule.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

src/components/estimation-range.tsx

@@ -1,5 +1,8 @@
 import ProjectTimeUnit from "./project-time-unit";
 import { defaults, getRoundUpEstimations } from "../models/params";
+import { Project } from "../models/project";
+import { FunctionalComponent, Fragment, h } from "preact";
+import { Estimation } from "../hooks/use-project-estimations";
 
 export interface EstimationRangeProps {
     project: Project,
@@ -9,8 +12,8 @@ export interface EstimationRangeProps {
 
 export const EstimationRange: FunctionalComponent<EstimationRangeProps> = ({ project, estimation, sdFactor }) => {
     const roundUp = getRoundUpEstimations(project);
-    let e = roundUp ? Math.ceil(estimation.e) : estimation.e;
+    let e: number|string = roundUp ? Math.ceil(estimation.e) : estimation.e;
-    let sd = roundUp ? Math.ceil(estimation.sd * sdFactor) : (estimation.sd * sdFactor);
+    let sd: number|string = roundUp ? Math.ceil(estimation.sd * sdFactor) : (estimation.sd * sdFactor);
     const max = e+sd;
     const min = Math.max(e-sd, 0);
     if (!roundUp) {

src/components/header/index.tsx

@@ -1,6 +1,5 @@
 import { FunctionalComponent, h } from "preact";
-import { Link } from "preact-router/match";
+import style from "./style.module.css";
-import * as style from "./style.css";
 
 export interface HeaderProps {
     class?: string
@@ -8,7 +7,7 @@ export interface HeaderProps {
 
 const Header: FunctionalComponent<HeaderProps> = ({ ...props}) => {
     return (
-        <div class={`container ${props.class ? props.class : ''}`}>
+        <div class={`container ${style.header} ${props.class ? props.class : ''}`}>
             <div class="columns">
                 <div class="column">
                     <nav class="navbar" role="navigation" aria-label="main navigation">

src/components/header/style.css.d.ts

@@ -1,3 +0,0 @@
-// This file is automatically generated from your CSS. Any edits will be overwritten.
-export const header: string;
-export const active: string;

src/components/header/style.module.css

@@ -0,0 +1,3 @@
+.header {
+    display: inherit;
+}

src/components/header/style.module.css.d.ts

@@ -0,0 +1,12 @@
+declare namespace StyleModuleCssModule {
+  export interface IStyleModuleCss {
+    header: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssModule.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

src/components/tabs/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionalComponent, h, ComponentChild } from "preact";
-import * as style from "./style.css";
+import style from "./style.module.css";
 import { useState } from "preact/hooks";
 
 export interface TabItem {

src/components/tabs/style.css.d.ts

@@ -1,3 +0,0 @@
-// This file is automatically generated from your CSS. Any edits will be overwritten.
-export const tabs: string;
-export const tabContent: string;

src/components/tabs/style.module.css.d.ts

@@ -0,0 +1,13 @@
+declare namespace StyleModuleCssModule {
+  export interface IStyleModuleCss {
+    tabContent: string;
+    tabs: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssModule.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

src/declaration.d.ts

@@ -1,4 +0,0 @@
-import { JSX } from "preact";
-
-export = JSX;
-export as namespace JSX;

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+    <% } %>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/index.js

@@ -2,6 +2,13 @@ import "./style/index.css";
 import "bulma/css/bulma.css";
 import "bulma-switch/dist/css/bulma-switch.min.css";
 
-import App from "./components/app.tsx";
+import { h, render } from 'preact'
+import App from "./components/app";
 
-export default App;
+render(h(App, {}), document.getElementById('app'));
+
+// Hot Module Replacement
+if (module.hot) {
+  require("preact/debug");
+  module.hot.accept();
+}

src/manifest.json

@@ -1,21 +0,0 @@
-{
-  "name": "Guesstimate",
-  "short_name": "Guesstimate",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait",
-  "background_color": "#fff",
-  "theme_color": "#673ab8",
-  "icons": [
-    {
-      "src": "/assets/icons/android-chrome-192x192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "/assets/icons/android-chrome-512x512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ]
-}

src/routes/home/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionalComponent, h } from "preact";
-import * as style from "./style.css";
+import style from "./style.module.css";
 import { route } from 'preact-router';
 import { base58UUID } from '../../util/uuid';
 import { useStoredProjectList } from "../../hooks/use-stored-project-list";

src/routes/home/style.css.d.ts

@@ -1,3 +0,0 @@
-// This file is automatically generated from your CSS. Any edits will be overwritten.
-export const home: string;
-export const noProjects: string;

src/routes/home/style.module.css.d.ts

@@ -0,0 +1,13 @@
+declare namespace StyleModuleCssModule {
+  export interface IStyleModuleCss {
+    home: string;
+    noProjects: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssModule.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

src/routes/notfound/index.tsx

@@ -1,6 +1,6 @@
 import { FunctionalComponent, h } from "preact";
 import { Link } from 'preact-router/match';
-import * as style from "./style.css";
+import style from "./style.module.css";
 
 const Notfound: FunctionalComponent = () => {
     return (

src/routes/notfound/style.css.d.ts

@@ -1,2 +0,0 @@
-// This file is automatically generated from your CSS. Any edits will be overwritten.
-export const notFound: string;

src/routes/notfound/style.module.css.d.ts

@@ -0,0 +1,12 @@
+declare namespace StyleModuleCssModule {
+  export interface IStyleModuleCss {
+    notFound: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssModule.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

src/routes/project/financial-preview.tsx

@@ -1,5 +1,4 @@
 import { FunctionalComponent, h } from "preact";
-import * as style from "./style.css";
 import { Project } from "../../models/project";
 import { useProjectEstimations } from "../../hooks/use-project-estimations";
 import { getCurrency } from "../../models/params";

src/routes/project/index.tsx

@@ -1,6 +1,6 @@
 import { FunctionalComponent, h } from "preact";
 import { useEffect } from "preact/hooks";
-import * as style from "./style.css";
+import style from "./style.module.css";
 import { newProject } from "../../models/project";
 import { useProjectReducer, updateProjectLabel } from "../../hooks/use-project-reducer";
 import { getProjectStorageKey } from "../../util/storage";

src/routes/project/params-tab.tsx

@@ -1,9 +1,6 @@
 import { FunctionalComponent, h, Fragment } from "preact";
 import { Project } from "../../models/project";
-import TaskTable from "./tasks-table";
+import { ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
-import TimePreview from "./time-preview";
-import FinancialPreview from "./financial-preview";
-import { addTask, updateTaskEstimation, removeTask, updateProjectLabel, updateTaskLabel, ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
 import { getRoundUpEstimations, getCurrency, getTimeUnit } from "../../models/params";
 import TaskCategoriesTable from "./task-categories-table";
 

src/routes/project/style.css.d.ts

@@ -1,7 +0,0 @@
-// This file is automatically generated from your CSS. Any edits will be overwritten.
-export const estimation: string;
-export const noTasks: string;
-export const noBorder: string;
-export const mainColumn: string;
-export const middleTable: string;
-export const tabContainer: string;

src/routes/project/style.module.css.d.ts

@@ -0,0 +1,17 @@
+declare namespace StyleModuleCssModule {
+  export interface IStyleModuleCss {
+    estimation: string;
+    mainColumn: string;
+    middleTable: string;
+    noBorder: string;
+    noTasks: string;
+    tabContainer: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssModule.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

src/routes/project/task-categories-table.tsx

@@ -1,6 +1,6 @@
 import { FunctionalComponent, h } from "preact";
 import { Project } from "../../models/project";
-import * as style from './style.css';
+import style from './style.module.css';
 import { projectReducer, ProjectReducerActions, updateTaskCategoryCost, updateTaskCategoryLabel, removeTaskCategory } from "../../hooks/use-project-reducer";
 import EditableText from "../../components/editable-text";
 import { TaskCategoryID } from "../../models/task";

src/routes/project/tasks-table.tsx

@@ -1,6 +1,6 @@
 import { FunctionalComponent, h } from "preact";
 import { useState, useEffect } from "preact/hooks";
-import * as style from "./style.css";
+import style from "./style.module.css";
 import { Project } from "../../models/project";
 import { newTask, Task, TaskID, EstimationConfidence } from "../../models/task";
 import EditableText from "../../components/editable-text";

src/style/index.css.d.ts

@@ -1 +1,13 @@
-export const app: string;
+declare namespace IndexCssModule {
+  export interface IIndexCss {
+    app: string;
+    noPrint: string;
+  }
+}
+
+declare const IndexCssModule: IndexCssModule.IIndexCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: IndexCssModule.IIndexCss;
+};
+
+export = IndexCssModule;

tsconfig.json

@@ -1,57 +1,15 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        /* Basic Options */
+    "target": "es5",
-        "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+    "module": "es6",
-        "module": "ESNext",                       /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": ["dom", "es6"],
-        // "lib": [],                             /* Specify library files to be included in the compilation:  */
+    "moduleResolution": "node",
-        "allowJs": true,                          /* Allow javascript files to be compiled. */
-        // "checkJs": true,                       /* Report errors in .js files. */
-        "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-        "jsxFactory": "h",                        /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
-        // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-        // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-        // "outFile": "./",                       /* Concatenate and emit output to single file. */
-        // "outDir": "./",                        /* Redirect output structure to the directory. */
-        // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-        // "removeComments": true,                /* Do not emit comments to output. */
-        // "noEmit": true,                        /* Do not emit outputs. */
-        // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-        // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-        // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
-        /* Strict Type-Checking Options */
+    "jsx": "react",
-        "strict": true,                           /* Enable all strict type-checking options. */
+    "jsxFactory": "h",
-        // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-        // "strictNullChecks": true,              /* Enable strict null checks. */
-        // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-        // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
 
-        /* Additional Checks */
+    "strict": true,
-        // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    "allowSyntheticDefaultImports": true
-        // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+  },
-        // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
-        // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-        /* Module Resolution Options */
-        "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-        // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-        // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-        // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-        // "typeRoots": [],                       /* List of folders to include type definitions from. */
-        "types": [],                           /* Type declaration files to be included in compilation. */
-        // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-        // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-
-        /* Source Map Options */
-        // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-        // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
-        // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-        // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-        /* Experimental Options */
-        // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-        // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-        "esModuleInterop": true
-    },
-    "include": ["src/**/*.tsx", "src/**/*.ts"]
 }

webpack.config.js

@@ -0,0 +1,72 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
+const path = require('path');
+const env = process.env;
+
+module.exports = {
+  mode: `${env.NODE_ENV ? env.NODE_ENV : 'production'}`,
+  entry: [
+    path.join(__dirname, './src/index.js')
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].[hash].js',
+    publicPath: '/'
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx"]
+  },
+  devServer: {
+    compress: true,
+    port: 8080,
+    historyApiFallback: true,
+    hot: env.NODE_ENV === 'development',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loaders: ['ts-loader']
+      },
+      {
+        test: /\.module\.css$/,
+        use: [
+          {
+            loader: '@teamsupercell/typings-for-css-modules-loader',
+          },
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          { loader: "css-loader", options: { modules: true } }
+        ]
+      },
+      {
+        test: /^((?!\.module).)*css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          { loader: "css-loader" },
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      title: 'Guesstimate',
+      scriptLoading: 'defer',
+
+      template: path.join(__dirname, 'src/index.html')    
+    }),
+    new webpack.WatchIgnorePlugin([
+      /css\.d\.ts$/
+    ]),
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css'
+    }),
+  ]
+};