add CDN dedicated folder and make karma ES module compliant

apinet · Feb 24, 2024 · 33e155b · 33e155b
1 parent 17c8262
commit 33e155b
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 135 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 build
 dist
+cdn
 node_modules
 
 # Logs

diff --git 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
@@ -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 → karma.conf.cjs b/karma.conf.js → 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
@@ -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:/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
@@ -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
@@ -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
@@ -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
@@ -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}`);
  });
  });
  });