Eject from preact-cli

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 Project from "../routes/project";
-import NotFoundPage from '../routes/notfound';
-import Header from "./header";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-if ((module as any).hot) {
-    // tslint:disable-next-line:no-var-requires
-    require("preact/debug");
-}
+import Home from "../routes/home/index";
+import Project from "../routes/project/index";
+import NotFoundPage from '../routes/notfound/index';
+import Header from "./header/index";
 
 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.css";
+import * as style from "./style.module.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 sd = roundUp ? Math.ceil(estimation.sd * sdFactor) : (estimation.sd * sdFactor);
+    let e: number|string = roundUp ? Math.ceil(estimation.e) : estimation.e;
+    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 * as style from "./style.css";
+import style from "./style.module.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 TimePreview from "./time-preview";
-import FinancialPreview from "./financial-preview";
-import { addTask, updateTaskEstimation, removeTask, updateProjectLabel, updateTaskLabel, ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
+import { 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;