From 33e155b7c33baea6bdff8591e20368bcd4f73558 Mon Sep 17 00:00:00 2001
From: Adrien Pinet <apinet@users.noreply.github.com>
Date: Sat, 24 Feb 2024 17:55:38 +0100
Subject: [PATCH] add CDN dedicated folder and make karma ES module compliant

---
 .gitignore                      |  1 +
 README.md                       | 26 +++++++++++++--------
 build.cdn.js                    | 16 +++++++++++++
 karma.conf.js => karma.conf.cjs |  4 ++--
 package.json                    | 22 +++++++++---------
 src/lit-line.ts                 |  6 ++---
 src/timeshift.ts                | 32 ++++++--------------------
 test/dom-helper.ts              | 30 +++++++------------------
 test/lit-line.spec.ts           | 32 ++++++++------------------
 test/timeshift.spec.ts          | 21 +++--------------
 tsconfig.json                   | 40 +++++++++++++++------------------
 11 files changed, 95 insertions(+), 135 deletions(-)
 create mode 100644 build.cdn.js
 rename karma.conf.js => karma.conf.cjs (82%)

diff --git a/.gitignore b/.gitignore
index 63c7efb..f62f79c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 build
 dist
+cdn
 node_modules
 
 # Logs
diff --git a/README.md b/README.md
index f36196c..2487dac 100644
--- a/README.md
+++ b/README.md
@@ -17,26 +17,34 @@ why?
 
 ## Installation
 
-```bash
-$ npm install lit-line
+You can load our `lit-line` components via CDN:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/lit-line@latest/cdn/lit-line.js"></script>
 ```
 
-or
+or by installing it locally using package manager such as NPM:
 
-```html
-<script
-  type="module"
-  src="https://unpkg.com/lit-line@{version}/dist/lit-line.js"
-></script>
+```sh
+npm i lit-line@latest
 ```
 
+Once installed, you only have to import the desired component and you are good to go.
+
+```js
+import "lit-line";
+```
+
+:::tip[About version management]
+It is not recommended to use the `@latest` suffix, as a major release could break your application. Instead, use a fixed version such as `0.3.0`.
+:::
+
 ## quick start
 
 ```javascript
 <lit-line id="chart"></lit-line>
 
 <script>
-  await customElements.whenDefined('lit-line');
   const chart = document.getElementById('chart');
 
   chart.data = [
diff --git a/build.cdn.js b/build.cdn.js
new file mode 100644
index 0000000..7fb7b2e
--- /dev/null
+++ b/build.cdn.js
@@ -0,0 +1,16 @@
+import  esbuild from  "esbuild"
+//import info from "./package.json" assert { type: "json" };
+//const externals = Object.keys(info.peerDependencies);
+
+esbuild.build({
+    entryNames: "[dir]/[name]",
+    bundle: true,
+    minify: true,
+    splitting: true,
+    format: "esm",
+    entryPoints: [
+        "./src/lit-line.ts",
+    ],
+    outdir: "cdn",
+    external: [], // empty to ensure deps are bundled
+});
diff --git a/karma.conf.js b/karma.conf.cjs
similarity index 82%
rename from karma.conf.js
rename to karma.conf.cjs
index a496da8..409ae5f 100644
--- a/karma.conf.js
+++ b/karma.conf.cjs
@@ -3,12 +3,12 @@ module.exports = function(config) {
     basePath: "./",
     frameworks: ["jasmine"],
     files: [
-      { pattern: "dist/**/*.spec.js" }
+      { pattern: "dist/**/*.spec.js", type: "module" }
   ],
 preprocessors: {
     },
     reporters: ["spec"],
-    port: 10002,
+    port: 4321,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
diff --git a/package.json b/package.json
index 63dd5ba..09df401 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "lit-line",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "license": "MIT",
   "contributors": [
     "Adrien Pinet"
   ],
-  "description": "SVG line chart web component based on lit-html. fast, small, reactive, responsive.",
+  "description": "SVG line chart web component based on lit-html. Fast, small, reactive, responsive.",
   "keywords": [
     "svg",
     "chart",
@@ -23,19 +23,18 @@
     "url": "https://github.com/apinet/lit-line/issues"
   },
   "files": [
-    "dist/lit-line.js",
-    "dist/lit-line.js.map",
-    "dist/lit-line.d.ts"
+    "dist",
+    "cdn"
   ],
   "main": "dist/lit-line.js",
   "module": "dist/lit-line.js",
   "types": "dist/lit-line.d.ts",
   "scripts": {
-    "clean": "rm -fr dist",
-    "test": "npm run clean && esbuild test/*.spec.ts --outdir=dist --bundle && karma start",
-    "build:src": "esbuild src/lit-line.ts --outdir=dist --bundle --minify --sourcemap",
-    "build:type": "tsc src/lit-line.ts --target es5 --outFile dist/lit-line.d.ts --declaration --emitDeclarationOnly",
-    "build": "npm run clean && npm run build:src && npm run build:type"
+    "clean": "rm -fr dist cdn",
+    "test": "npm run clean && esbuild test/*.spec.ts --outdir=dist --bundle && karma start karma.conf.cjs",
+    "build:cdn": "node ./build.cdn.js",
+    "build:dist": "tsc",
+    "build": "npm run clean && npm run build:cdn && npm run build:dist"
   },
   "peerDependencies": {
     "lit-html": "^3.1.2"
@@ -51,5 +50,6 @@
     "karma-typescript": "^5.5.4",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
-  }
+  },
+  "type": "module"
 }
diff --git a/src/lit-line.ts b/src/lit-line.ts
index ddd2fe0..be37cc5 100644
--- a/src/lit-line.ts
+++ b/src/lit-line.ts
@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022, Adrien Pinet
+ * Copyright (c) 2024, Adrien Pinet
  * Released under the MIT license
  */
 
@@ -20,7 +20,7 @@ import {
   getValueOverTime,
   SelectedValue,
   scale,
-} from "./timeshift";
+} from "./timeshift.js";
 
 const MARGIN = 4;
 const MIN_GAP = 4;
@@ -258,7 +258,7 @@ export class LitLine extends HTMLElement {
   }
 
   private dispatch(name: string, detail: any) {
-    const event = new CustomEvent(`lit-line:${name}`, {
+    const event = new CustomEvent(`ll:${name}`, {
       composed: true,
       detail,
     });
diff --git a/src/timeshift.ts b/src/timeshift.ts
index 42a4046..9f9399d 100644
--- a/src/timeshift.ts
+++ b/src/timeshift.ts
@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022, Adrien Pinet
+ * Copyright (c) 2024, Adrien Pinet
  * Released under the MIT license
  */
 
@@ -121,9 +121,7 @@ export const pointsToSvgPath = function (points: Point[]) {
 
   points.forEach((point, index) => {
     path =
-      index === 0
-        ? `M ${point.time},${point.value}`
-        : `${path} L ${point.time},${point.value}`;
+      index === 0 ? `M ${point.time},${point.value}` : `${path} L ${point.time},${point.value}`;
   });
 
   return path;
@@ -140,22 +138,10 @@ export const getValueOverTime = function (slots: Slot[], time: number) {
   const p2 = interval[1];
 
   return {
-    value: scale(
-      time,
-      { min: p1.time, max: p2.time },
-      { min: p1.value, max: p2.value }
-    ),
+    value: scale(time, { min: p1.time, max: p2.time }, { min: p1.value, max: p2.value }),
     range: {
-      min: scale(
-        time,
-        { min: p1.time, max: p2.time },
-        { min: p1.range.min, max: p2.range.min }
-      ),
-      max: scale(
-        time,
-        { min: p1.time, max: p2.time },
-        { min: p1.range.max, max: p2.range.max }
-      ),
+      min: scale(time, { min: p1.time, max: p2.time }, { min: p1.range.min, max: p2.range.min }),
+      max: scale(time, { min: p1.time, max: p2.time }, { min: p1.range.max, max: p2.range.max }),
     },
   };
 };
@@ -202,12 +188,8 @@ const pointToSlot = function (point: Point) {
 
 const mergeSlots = function (first: Slot, second: Slot) {
   return {
-    time:
-      (first.time * first.hits + second.time * second.hits) /
-      (first.hits + second.hits),
-    value:
-      (first.value * first.hits + second.value * second.hits) /
-      (first.hits + second.hits),
+    time: (first.time * first.hits + second.time * second.hits) / (first.hits + second.hits),
+    value: (first.value * first.hits + second.value * second.hits) / (first.hits + second.hits),
     range: {
       min: Math.min(first.range.min, second.range.min),
       max: Math.max(first.range.max, second.range.max),
diff --git a/test/dom-helper.ts b/test/dom-helper.ts
index 9b500f9..29cfb0d 100644
--- a/test/dom-helper.ts
+++ b/test/dom-helper.ts
@@ -1,12 +1,13 @@
 /**
  * @license
- * Copyright (c) 2022, Adrien Pinet
+ * Copyright (c) 2024, Adrien Pinet
  * Released under the MIT license
  */
 
-import "../src/lit-line";
 import { render, html } from "lit-html";
-import { LitLine, SelectionEventDetail, Serie } from "../src/element";
+
+import "../src/lit-line.js";
+import { LitLine, SelectionEventDetail, Serie } from "../src/lit-line.js";
 
 export const CHART_MARGIN = 4;
 export const CHART_WIDTH = 500;
@@ -42,10 +43,7 @@ export interface MouseEvent {
   y: number;
 }
 
-export const fireMouseEvent = function (
-  litLine: LitLine,
-  mouseEvent: MouseEvent
-) {
+export const fireMouseEvent = function (litLine: LitLine, mouseEvent: MouseEvent) {
   const event = new MouseEvent("mousemove", {
     bubbles: true,
     clientX: mouseEvent.x,
@@ -107,11 +105,7 @@ export const getSerieBars = function (litLine: LitLine, serieId: number) {
   return getSerie(litLine, serieId)?.querySelectorAll(".serie__point__bar");
 };
 
-export const getSerieBar = function (
-  litLine: LitLine,
-  serieId: number,
-  barId: number
-) {
+export const getSerieBar = function (litLine: LitLine, serieId: number, barId: number) {
   const bars = getSerieBars(litLine, serieId);
   return !bars || barId >= bars.length ? undefined : bars[barId];
 };
@@ -120,11 +114,7 @@ export const getSeriePoints = function (litLine: LitLine, serieId: number) {
   return getSerie(litLine, serieId)?.querySelectorAll(".serie__point__value");
 };
 
-export const getSeriePoint = function (
-  litLine: LitLine,
-  serieId: number,
-  pointId: number
-) {
+export const getSeriePoint = function (litLine: LitLine, serieId: number, pointId: number) {
   const points = getSeriePoints(litLine, serieId);
   return !points || pointId >= points.length ? undefined : points[pointId];
 };
@@ -133,11 +123,7 @@ export const getSerieRanges = function (litLine: LitLine, serieId: number) {
   return getSerie(litLine, serieId)?.querySelectorAll(".serie__point__range");
 };
 
-export const getSerieRange = function (
-  litLine: LitLine,
-  serieId: number,
-  rangeId: number
-) {
+export const getSerieRange = function (litLine: LitLine, serieId: number, rangeId: number) {
   const ranges = getSerieRanges(litLine, serieId);
   return !ranges || rangeId >= ranges.length ? undefined : ranges[rangeId];
 };
diff --git a/test/lit-line.spec.ts b/test/lit-line.spec.ts
index 4748887..2126249 100644
--- a/test/lit-line.spec.ts
+++ b/test/lit-line.spec.ts
@@ -4,8 +4,8 @@
  * Released under the MIT license
  */
 
-import { Serie } from "../src/element";
-import { Range } from "../src/timeshift";
+import { Serie } from "../src/lit-line.js";
+import { Range } from "../src/timeshift.js";
 
 import {
   CHART_WIDTH,
@@ -101,23 +101,17 @@ const creationTests: CreationTest[] = [
           { time: CHART_MARGIN, value: CHART_HEIGHT - CHART_MARGIN },
           {
             time: CHART_MARGIN + (CHART_WIDTH - 2 * CHART_MARGIN) / 3,
-            value:
-              CHART_HEIGHT -
-              (CHART_MARGIN + (CHART_HEIGHT - 2 * CHART_MARGIN) / 3),
+            value: CHART_HEIGHT - (CHART_MARGIN + (CHART_HEIGHT - 2 * CHART_MARGIN) / 3),
           },
         ],
         [
           {
             time: CHART_MARGIN + (2 * (CHART_WIDTH - 2 * CHART_MARGIN)) / 3,
-            value:
-              CHART_HEIGHT -
-              (CHART_MARGIN + (2 * (CHART_HEIGHT - 2 * CHART_MARGIN)) / 3),
+            value: CHART_HEIGHT - (CHART_MARGIN + (2 * (CHART_HEIGHT - 2 * CHART_MARGIN)) / 3),
           },
           {
             time: CHART_MARGIN + (3 * (CHART_WIDTH - 2 * CHART_MARGIN)) / 3,
-            value:
-              CHART_HEIGHT -
-              (CHART_MARGIN + (3 * (CHART_HEIGHT - 2 * CHART_MARGIN)) / 3),
+            value: CHART_HEIGHT - (CHART_MARGIN + (3 * (CHART_HEIGHT - 2 * CHART_MARGIN)) / 3),
           },
         ],
       ],
@@ -172,9 +166,7 @@ creationTests.forEach((test) => {
       it("creates a svg viewBox with the right dimensions", async () => {
         const litLine = await litLineAsync;
         const svg = getSvg(litLine);
-        expect(svg?.getAttribute("viewBox")).toEqual(
-          `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`
-        );
+        expect(svg?.getAttribute("viewBox")).toEqual(`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`);
       });
 
       it(`renders ${test.it.renders.length} serie(s)`, async () => {
@@ -222,12 +214,8 @@ creationTests.forEach((test) => {
             serie.forEach((slot, slotId) => {
               const rangeElement = getSerieRange(litLine, serieId, slotId);
 
-              expect(rangeElement?.getAttribute("x")).toEqual(
-                `${slot.time - 2}`
-              );
-              expect(rangeElement?.getAttribute("y")).toEqual(
-                `${slot.range?.min || slot.value}`
-              );
+              expect(rangeElement?.getAttribute("x")).toEqual(`${slot.time - 2}`);
+              expect(rangeElement?.getAttribute("y")).toEqual(`${slot.range?.min || slot.value}`);
               expect(rangeElement?.getAttribute("width")).toEqual(`${4}`);
               expect(rangeElement?.getAttribute("height")).toEqual(
                 `${slot.range ? slot.range.max - slot.range.min : 0}`
@@ -246,9 +234,7 @@ creationTests.forEach((test) => {
               expect(barElement?.getAttribute("x1")).toEqual(`${slot.time}`);
               expect(barElement?.getAttribute("y1")).toEqual(`${slot.value}`);
               expect(barElement?.getAttribute("x2")).toEqual(`${slot.time}`);
-              expect(barElement?.getAttribute("y2")).toEqual(
-                `${CHART_HEIGHT - CHART_MARGIN}`
-              );
+              expect(barElement?.getAttribute("y2")).toEqual(`${CHART_HEIGHT - CHART_MARGIN}`);
             });
           });
         });
diff --git a/test/timeshift.spec.ts b/test/timeshift.spec.ts
index 14d6db8..fb63e72 100644
--- a/test/timeshift.spec.ts
+++ b/test/timeshift.spec.ts
@@ -4,13 +4,7 @@
  * Released under the MIT license
  */
 
-import {
-  Point,
-  sortPoints,
-  getTimeRange,
-  getValueRange,
-  scalePoints,
-} from "../src/timeshift";
+import { Point, sortPoints, getTimeRange, getValueRange, scalePoints } from "../src/timeshift.js";
 
 describe("[timeshift] sortPoints", () => {
   describe("when empty list", () => {
@@ -39,9 +33,7 @@ describe("[timeshift] sortPoints", () => {
 describe("[timeshift] getTimeRange", () => {
   describe("when empty list", () => {
     it("throws an exception", () => {
-      expect(() => getTimeRange([])).toThrowError(
-        /sortedPoints must not be empty/
-      );
+      expect(() => getTimeRange([])).toThrowError(/sortedPoints must not be empty/);
     });
   });
 
@@ -80,14 +72,7 @@ describe("timeshift.getValueRange", () => {
 describe("timeshift.scalePoints", () => {
   describe("when empty list", () => {
     it("returns an empty list", () => {
-      const output = scalePoints(
-        [],
-        { min: 0, max: 10 },
-        { min: 0, max: 100 },
-        100,
-        50,
-        4
-      );
+      const output = scalePoints([], { min: 0, max: 10 }, { min: 0, max: 100 }, 100, 50, 4);
       expect(output.length).toEqual(0);
     });
   });
diff --git a/tsconfig.json b/tsconfig.json
index b139eba..9f4e8c7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,28 +1,24 @@
 {
+  "include": ["src"],
+  "exclude": ["test"],
   "compilerOptions": {
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noFallthroughCasesInSwitch": true,
-    "strictNullChecks": true,
+    "target": "ES6",
+    "outDir": "dist",
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "module": "ES6",
+    "moduleResolution": "Node",
     "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true,
     "experimentalDecorators": true,
-
-    "target": "es2019",
-    "lib": [
-      "DOM",
-      "es2020"
-    ],
-
-    "module": "es2020",
-    "moduleResolution": "node",
-    
-    "pretty": true,
-    "newLine": "lf",
-    "stripInternal": false,
-    "sourceMap": true
+    "useDefineForClassFields": false,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true,
+      }
+    ]
   }
 }
\ No newline at end of file