improve TS checks

.github/workflows/publish.yml

@@ -12,11 +12,11 @@ jobs:
             packages: write
         steps:
             - name: Checkout
-              uses: actions/checkout@v2
+              uses: actions/checkout@v4
             - name: Setup Node and NPM
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v4
               with:
-                  node-version: "20.x"
+                  node-version: 20
                   registry-url: "https://registry.npmjs.org"
             - name: Install and Build
               run: npm ci

.github/workflows/test.yml

@@ -8,16 +8,18 @@ jobs:
 
         steps:
             - name: Checkout
-              uses: actions/checkout@v2
+              uses: actions/checkout@v4
             - name: Setup Node and NPM
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v4
               with:
-                  node-version: "20.x"
+                  node-version: 20
                   cache: "npm"
             - name: Install and Build
               run: npm ci
             - name: Test
               run: npm test
+            - name: Prettier
+              run: npm run prettier
             - name: Generate Changelog
               run: git log --oneline $(git describe --tags --abbrev=0)..HEAD >> CHANGELOG.txt
             - name: Release
@@ -26,6 +28,3 @@ jobs:
               with:
                   body_path: CHANGELOG.txt
                   draft: true
-                  files: |
-                      lib/index.js
-                      LICENSE

README.md

@@ -19,6 +19,7 @@ Then add the package to your `.mjmlconfig` file:
 Or import it and manually register the plugin.
 
 with **ESM**:
+
 ```ecmascript 6
 import { registerComponent } from "mjml-core";
 import MjBarChart from "@freezystem/mjml-bar-chart";
@@ -27,6 +28,7 @@ registerComponent(MjBarChart);
 ```
 
 with **CJS**:
+
 ```ecmascript 6
 const { registerComponent } = require("mjml-core");
 const MjBarChart = require("@freezystem/mjml-bar-chart");
@@ -38,18 +40,19 @@ You can now use the `mjml-bar-chart` component in your MJML templates:
 
 ```mjml
 <mjml>
-  <mj-body>
-    <mj-section>
-      <mj-column>
-        <mj-bar-chart
-          title="Sum of Requests by Department"
-          dataset-labels="January,February,March"
-          datasets="[[33,14,27],[18,66,42],[7,15,21]]"
-          groups="support,sales,tech"
-          colors="#d8f3dc,#95d5b2,#52b788"/>
-      </mj-column>
-    </mj-section>
-  </mj-body>
+	<mj-body>
+		<mj-section>
+			<mj-column>
+				<mj-bar-chart
+					title="Sum of Requests by Department"
+					dataset-labels="January,February,March"
+					datasets="[[33,14,27],[18,66,42],[7,15,21]]"
+					groups="support,sales,tech"
+					colors="#d8f3dc,#95d5b2,#52b788"
+				/>
+			</mj-column>
+		</mj-section>
+	</mj-body>
 </mjml>
 ```
 

package.json

@@ -7,9 +7,9 @@
 	},
 	"version": "1.1.1",
 	"description": "A simple MJML component to make static bar charts",
-	"main":  "./build/index.js",
-	"module":  "./build/esm/index.js",
-	"types":  "./build/types/index.d.ts",
+	"main": "./build/index.js",
+	"module": "./build/esm/index.js",
+	"types": "./build/types/index.d.ts",
 	"exports": {
 		".": {
 			"types": "./build/types/index.d.ts",
@@ -41,7 +41,7 @@
 		"@types/mjml": "^4.7.4",
 		"@types/mjml-core": "^4.7.4",
 		"@types/mjml-validator": "^4.13.4",
-		"@types/node": "^20.10.2",
+		"@types/node": "^20.10.3",
 		"jest": "^29.7.0",
 		"npm-check": "^6.0.1",
 		"prettier": "^3.1.0",

src/index.ts

@@ -1,10 +1,10 @@
 import { BodyComponent } from "mjml-core";
 import { registerDependencies } from "mjml-validator";
 
-type dataset = {
+interface dataset {
 	label: string;
 	data: number[];
-};
+}
 
 export default class MjBarChart extends BodyComponent {
 	readonly #title: string;
@@ -59,7 +59,7 @@ export default class MjBarChart extends BodyComponent {
 
 	static endingTag = true;
 
-	static dependencies = {
+	static dependencies: Record<string, string[]> = {
 		"mj-column": ["mj-bar-chart"],
 		"mj-bar-chart": [],
 	};
@@ -78,7 +78,7 @@ export default class MjBarChart extends BodyComponent {
 		"show-values": "boolean",
 	};
 
-	static defaultAttributes = {
+	static override defaultAttributes = {
 		"axis-color": "d4d4d4",
 		height: "200",
 		"bar-width": "30",
@@ -263,7 +263,7 @@ export default class MjBarChart extends BodyComponent {
         `;
 	}
 
-	getStyles(): object {
+	override getStyles(): object {
 		return {
 			chartTitleWrapper: {
 				width: "100%",
@@ -346,4 +346,4 @@ export default class MjBarChart extends BodyComponent {
 	}
 }
 
-registerDependencies(MjBarChart.dependencies);
+registerDependencies(MjBarChart.dependencies);

tsconfig.esm.json

@@ -1,7 +1,7 @@
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "build/esm",
-    "module": "ESNext"
-  }
-}
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "build/esm",
+		"module": "ESNext"
+	}
+}

tsconfig.json

@@ -9,10 +9,17 @@
 		"moduleResolution": "node",
 		"esModuleInterop": true,
 		"inlineSourceMap": true,
-		"alwaysStrict": true,
+		"strict": true,
 		"skipLibCheck": true,
 		"forceConsistentCasingInFileNames": true,
+		"allowUnreachableCode": false,
+		"allowUnusedLabels": false,
+		"noImplicitAny": true,
+		"noImplicitOverride": true,
+		"noImplicitReturns": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true
 	},
 	"include": ["src/**/*.ts"],
-	"exclude": ["node_modules", "dist", "build", "coverage", "src/**/*.spec.ts"]
+	"exclude": ["node_modules", "build", "coverage", "src/**/*.spec.ts"],
 }

tsconfig.types.json

@@ -1,8 +1,9 @@
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "build/types",
-    "declaration": true,
-    "emitDeclarationOnly": true
-  }
-}
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "build/types",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"declarationMap": true,
+	}
+}