fix: missing type declaration for class prop

I've also optimized `createTypesFile()` and type-template.d.ts to reduce
the size of the generated file.

Author: benflap

.prettierrc

@@ -2,5 +2,6 @@
     "trailingComma": "es5",
     "tabWidth": 4,
     "semi": true,
-    "singleQuote": false
+    "singleQuote": false,
+    "plugins": ["prettier-plugin-svelte"]
 }

package-lock.json

@@ -13,11 +13,12 @@
     "main": "index.js",
     "types": "index.d.ts",
     "scripts": {
-        "build": "node ./scripts/generate.cjs"
+        "build": "node ./scripts/generate.js"
     },
     "devDependencies": {
         "@tabler/icons": "1.84.0",
-        "prettier": "^2.2.1"
+        "prettier": "^2.8.2",
+        "prettier-plugin-svelte": "^2.9.0"
     },
     "peerDependencies": {
         "svelte": ">=3.31.0 <=4"

package.json

@@ -1,15 +1,17 @@
-const fs = require("fs");
-const path = require("path");
-const prettier = require("prettier");
+import fs from "node:fs";
+import path, { dirname } from "node:path";
+import prettier, { format } from "prettier";
+import { fileURLToPath } from "node:url";
 
-const { format } = prettier;
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const SOURCE_ICONS_PATH = path.resolve(
     __dirname,
     "../node_modules/@tabler/icons/icons/"
 );
 const DIST_PATH = path.resolve(__dirname, "../");
 const DESTINATION_ICONS_PATH = path.resolve(__dirname, "../icons");
+const TYPES_PATH = path.resolve(DIST_PATH, "types");
 
 const prettierOptions = prettier.resolveConfig(__dirname);
 
@@ -62,9 +64,7 @@ function createComponentName(originalName) {
 }
 
 function removeOldComponents() {
-    const components = fs
-        .readdirSync(DESTINATION_ICONS_PATH)
-        .filter((file) => file.endsWith(".svelte"));
+    const components = fs.readdirSync(DESTINATION_ICONS_PATH);
     for (const file of components) {
         fs.unlinkSync(path.join(DESTINATION_ICONS_PATH, file));
     }
@@ -92,7 +92,7 @@ async function generateNewComponents() {
 
         fs.writeFileSync(
             path.resolve(DESTINATION_ICONS_PATH, `${componentName}.svelte`),
-            format(source, { parser: "html", ...(await prettierOptions) })
+            format(source, { parser: "svelte", ...(await prettierOptions) })
         );
     }
 }
@@ -119,13 +119,7 @@ async function createTypesFile() {
         const [originalName] = file.split(".");
         const componentName = createComponentName(originalName);
 
-        return `\
-            export class ${componentName} extends SvelteComponentTyped<{
-                color?: string;
-                size?: string | number;
-                strokeWidth?: string | number;
-            }> {}\
-        `;
+        return `export class ${componentName} extends TablerIcon {}`;
     });
 
     fs.writeFileSync(

scripts/generate.cjs scripts/generate.js

@@ -1 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+
+type TablerIconProps = {
+    color?: string;
+    size?: string | number;
+    strokeWidth?: string | number;
+    class?: string;
+};
+
+class TablerIcon extends SvelteComponentTyped<TablerIconProps> {}