Added entry & output config, TS Support with ts-loader

Author: danielschnetler

index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>ProjectManager</title>
     <link rel="stylesheet" href="app.css" />
-    <script type="module" src="dist/app.js"></script>
+    <script type="module" src="dist/bundle.js"></script>
   </head>
   <body>
     <template id="project-input">

package.json

@@ -5,7 +5,8 @@
   "main": "app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "lite-server"
+    "start": "lite-server",
+    "build": "webpack"
   },
   "author": "DS",
   "license": "ISC",

src/app.ts

@@ -1,5 +1,5 @@
-import { ProjectInput } from "./components/project-input.js";
-import { ProjectList } from "./components/project-list.js";
+import { ProjectInput } from "./components/project-input";
+import { ProjectList } from "./components/project-list";
 
 new ProjectInput();
 new ProjectList("active");

src/components/project-input.ts

@@ -1,7 +1,7 @@
-import Cmp from "./base-components.js";
-import { AutoBind as Autobind } from "../decorators/autobind.js";
-import { Validatable, validate } from "../util/validation.js";
-import { projectState } from "../state/project-state.js";
+import Cmp from "./base-components";
+import { AutoBind as Autobind } from "../decorators/autobind";
+import { Validatable, validate } from "../util/validation";
+import { projectState } from "../state/project-state";
 
 //ProjectInput Class
 export class ProjectInput extends Cmp<HTMLDivElement, HTMLFormElement> {

src/components/project-item.ts

@@ -1,7 +1,7 @@
-import { Draggable } from "../models/drag-drop.js";
-import { Project } from "../models/project.js";
-import Component from "./base-components.js";
-import { AutoBind } from "../decorators/autobind.js";
+import { Draggable } from "../models/drag-drop";
+import { Project } from "../models/project";
+import Component from "./base-components";
+import { AutoBind } from "../decorators/autobind";
 
 //Project Item Class
 export class ProjectItem

src/components/project-list.ts

@@ -1,9 +1,9 @@
-import Component from "./base-components.js";
-import { AutoBind } from "../decorators/autobind.js";
-import { Project, ProjectStatus } from "../models/project.js";
-import { DragTarget } from "../models/drag-drop.js";
-import { projectState } from "../state/project-state.js";
-import { ProjectItem } from "./project-item.js";
+import Component from "./base-components";
+import { AutoBind } from "../decorators/autobind";
+import { Project, ProjectStatus } from "../models/project";
+import { DragTarget } from "../models/drag-drop";
+import { projectState } from "../state/project-state";
+import { ProjectItem } from "./project-item";
 
 //ProjectList Class
 export class ProjectList

src/state/project-state.ts

@@ -1,4 +1,4 @@
-import { Project, ProjectStatus } from "../models/project.js";
+import { Project, ProjectStatus } from "../models/project";
 
 // Project State Management
 type Listener<T> = (items: T[]) => void;

tsconfig.json

@@ -31,7 +31,7 @@
 
     /* Modules */
     "module": "ES2015" /* Specify what module code is generated. */,
-    "rootDir": "./src" /* Specify the root folder within your source files. */,
+    //"rootDir": "./src" /* Specify the root folder within your source files. */,
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */