lint

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "no-unexpected-multiline": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  }
+}

.gitignore

@@ -5,8 +5,6 @@ node_modules/
 
 
 #Exclude tsc generated files
-js/*.map
-js/ts.js
-
 lib/
-lib-esm/
+lib-esm/
+_bundles/

package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "webpack --watch",
-    "prod ": "webpack --config webpack.prod.js",
-    "start": "webpack serve --config webpack.dev.js",
+    "prod ": "webpack --config webpack.prod.js ",
+    "serve": "webpack serve --config webpack.dev.js",
     "export": "tsc && tsc -m es6 --outDir lib-esm"
   },
   "keywords": [
@@ -21,9 +21,14 @@
   "author": "Tripeur",
   "license": "ISC",
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
     "clean-webpack-plugin": "^3.0.0",
     "dayjs": "^1.9.7",
+    "eslint": "^7.22.0",
+    "html-minifier": "^4.0.0",
     "html-webpack-plugin": "^4.5.0",
+    "minify-template-literal-loader": "0.0.3",
     "ts-loader": "^8.0.12",
     "typescript": "^4.1.3",
     "webpack": "^5.10.3",

src/Ressource.ts

@@ -1,4 +1,3 @@
-
 import Selectable from './utils/selectable';
 
 export interface IRessource{
@@ -7,7 +6,7 @@ export interface IRessource{
     children?:Array<IRessource>
     collapseChildren?:boolean
     parent? : IRessource
-    parentId?:String
+    parentId?:string
     height? : number
     eventEditable?:boolean
     eventRessourceEditable?:boolean
@@ -62,7 +61,7 @@ export class Ressource implements IRessource,Selectable{
             parent: parent
         }
     }
-    static toRessource(obj:IRessource){
+    static toRessource(obj:IRessource):Ressource{
         if (obj instanceof Ressource){
             return obj 
         }else{

src/Timeline.ts

@@ -178,9 +178,6 @@ class Timeline extends LitElement {
     .jc-major-slot{
         border-left-style: solid;
     }
-
-
-
     .jc-timeslots{
         position:absolute;
         top:0px;
@@ -305,7 +302,7 @@ class Timeline extends LitElement {
         this.updateLegend();
     }
 
-    private _slotDuration: number = 30; // in minute
+    private _slotDuration = 30; // in minute
     @property({ type: Number })
     public get slotDuration(): number {
         return this._slotDuration;
@@ -315,7 +312,7 @@ class Timeline extends LitElement {
         this.updateLegend();
     }
     
-    private _legendSpan: number = 2; // in slot count
+    private _legendSpan = 2; // in slot count
     @property({ type: Number })
     public get legendSpan(): number {
         return this._legendSpan;
@@ -326,7 +323,7 @@ class Timeline extends LitElement {
     }
 
     @property({ type: Number })
-    private rowHeight: number = 32 // in px
+    private rowHeight = 32 // in px
 
     @property({ type: Number })
     private slotWidth = 20 // in px
@@ -398,7 +395,7 @@ class Timeline extends LitElement {
     removeRessourceById(id: string): TimelineContent {
         return this._removeRessourceById(id);
     }
-    _removeRessourceById(id: string, depth:number = 0){
+    _removeRessourceById(id: string, depth = 0){
         const output: TimelineContent = { ressources: [], items: [] };
 
         for (let i = 0; i < this.rows.length; i) {
@@ -478,7 +475,7 @@ class Timeline extends LitElement {
         const start = this._start.toDate().getTime();
         const end = this._end.toDate().getTime();
         // List potential interval
-        let points = [start, end]
+        const points = [start, end]
         const populateInterval = (d: Date) => {
             const t = d.getTime()
             if (start < t && t < end && !points.includes(t)) {
@@ -491,7 +488,7 @@ class Timeline extends LitElement {
         });
         points.sort(); 
         // Count maximum number of interval intersection
-        let intervals: Array<TimeInterval> = []
+        const intervals: Array<TimeInterval> = []
         for (let i = 0; i < points.length - 1; i++) {
             const startTime = points[i];
             const endTime = points[i+1];
@@ -555,7 +552,7 @@ class Timeline extends LitElement {
 
             if(isLegendPossible){ 
                 const row:Array<legendItem> = [];
-                let i:number = 0;
+                let i = 0;
                 while(currentDate.isBefore(this._end)){
                     i+=this.legendSpan;
                     if(nextColumn.diff(currentDate,legendUnit) > 0  ){                    
@@ -701,7 +698,7 @@ class Timeline extends LitElement {
     }
     private _getEventClickHandler(clickedItem: Selectable) {
         const item = clickedItem;
-        return (e: MouseEvent, wasModified:boolean = false) => {
+        return (e: MouseEvent, wasModified = false) => {
             e.stopPropagation()
             const idx = this.selectedList.indexOf(item)
             if (idx > -1) {
@@ -722,7 +719,7 @@ class Timeline extends LitElement {
                 this.selectedList.push(item)
                 this.updateTimeslotById(item.id)
             }
-            let myEvent = new CustomEvent('item-selected', {
+            const myEvent = new CustomEvent('item-selected', {
                 detail: { items: this.selectedList },
                 bubbles: true,
                 composed: true
@@ -751,7 +748,7 @@ class Timeline extends LitElement {
         if (!slot.isDisplayed) {
             return html``
         }
-        let rowTop: number = 0
+        let rowTop = 0
         let ressource: Ressource;
         let i: number;
         for (i = 0; i < this.rows.length && this.rows[i].id !== slot.ressourceId; i++) {
@@ -783,7 +780,7 @@ class Timeline extends LitElement {
             return html`<div class="jc-timeslot empty" style="${styleMap(style)}"></div>`
         }
 
-        var content: TemplateResult = html`${slot.title}`
+        let content: TemplateResult = html`${slot.title}`
         const resizer = slot.editable === null ? ressource.eventEditable : slot.editable;
         const editableRessource = slot.ressourceEditable === null ? ressource.eventRessourceEditable : slot.ressourceEditable;
         if (resizer) {
@@ -814,7 +811,7 @@ class Timeline extends LitElement {
     }
     _onRessourceDragEnter(event:DragEvent){
         if (event.target instanceof HTMLElement){
-            var tgt = event.target;
+            const tgt = event.target;
             tgt.classList.add("target");
         }else if(event.target instanceof Node){
         }
@@ -879,10 +876,10 @@ class Timeline extends LitElement {
                     </tr>`;
 
     }
-    renderGridRow(columns: Array<Dayjs>, rowId: number = -1, height: number = 30): TemplateResult {
+    renderGridRow(columns: Array<Dayjs>, rowId = -1, height = 30): TemplateResult {
         return html`<tr row-id="${rowId}">${columns.map((d,i) => html`<td style="height:${height}px;" class="jc-slot ${(i % this.legendSpan) === 0 ? "jc-major-slot" :""}" start="${d.toISOString()}">&nbsp;</td>`)}</tr>`
     }
-    render() {
+    render():TemplateResult {
         const nCol = Math.floor(this._end.diff(this._start, 'm') / this.slotDuration) + 1;
         const columns: Array<Dayjs> = []
         for (let i = 0; i < nCol; i++) {

src/components/horizontal-resizer.ts

@@ -1,4 +1,4 @@
-import {LitElement, html, customElement, property, css} from 'lit-element';
+import {LitElement, html, customElement, css, TemplateResult} from 'lit-element';
 
 @customElement('horizontal-resizer')
 export class HorizontalResizer extends LitElement {
@@ -19,7 +19,7 @@ export class HorizontalResizer extends LitElement {
     this.lastPosX = -1
   }
   // Implement `render` to define a template for your element.
-  render(){
+  render():TemplateResult{
     return html`
       <div @mousedown=${(e:MouseEvent)=>this._startResize(e)}></div>
     `;
@@ -32,14 +32,14 @@ export class HorizontalResizer extends LitElement {
   private _emitMove = (e:MouseEvent):void=>{
     const n = e.clientX - this.lastPosX;
     this.lastPosX = e.clientX;
-    let event = new CustomEvent<number>('resize-x', {
+    const event = new CustomEvent<number>('resize-x', {
       detail : n,
       bubbles: true, 
       composed: true 
     });
     this.dispatchEvent(event);
   }
-  private _endResize = (e:MouseEvent):void=>{
+  private _endResize = ():void=>{
     this.lastPosX = -1;
     window.removeEventListener("mousemove", this._emitMove)
     window.removeEventListener("mouseup", this._endResize)

src/index.ts

@@ -6,7 +6,7 @@ import { IEvent } from './Event';
 import dayjs, { Dayjs } from 'dayjs'
 
 const emptyTimeline:TimeLine = document.createElement("jc-timeline") as TimeLine;
-var title = document.createElement("h2");
+let title = document.createElement("h2");
 title.innerText = "Empty Timeline"
 document.body.appendChild(title)
 document.body.appendChild(emptyTimeline);

src/utils/selectable.ts

@@ -1,5 +1,4 @@
 export default interface Selectable {
     selected:boolean
     id:string
-
 }

webpack.common.js

@@ -1,26 +1,20 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: {
-    component:{
-      import:'./src/components/horizontal-resizer.ts',
-    },
-    index:{
-      import:'./src/index.ts',
-      dependOn:"Timeline"
-    },
-    Timeline:'./src/Timeline.ts',
-  },
   plugins: [
     new CleanWebpackPlugin(),
-    new HtmlWebpackPlugin({
-      title: 'Development',
-    }),
   ],
   module: {
     rules: [
+      {
+        test: /\.js$/,
+        loader: 'minify-template-literal-loader',
+        options: {
+          caseSensitive: true,
+          collapseWhitespace: true
+        }
+      },
       {
         test: /\.tsx?$/,
         use: 'ts-loader',

webpack.dev.js

@@ -2,7 +2,21 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 module.exports = merge(common,{
+  entry: {
+    index:{
+      import:'./src/index.ts',
+      dependOn:"Timeline"
+    },
+    Timeline:'./src/Timeline.ts',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Development',
+    }),
+  ],
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {

webpack.prod.js

@@ -1,12 +1,15 @@
- const { merge } = require('webpack-merge');
+const path = require('path');
+const common = require('./webpack.common.js');
+const { merge } = require('webpack-merge');
 
- const common = require('./webpack.common.js');
-
-
- module.exports = merge(common, {
 
+module.exports = merge(common, {
+  entry: {
+    Timeline:'./src/Timeline.ts',
+  },
    mode: 'production',
    output: {
+    path: path.resolve(__dirname, '_bundles'),
     filename: '[name].min.js',
    }
- });
+});