From 71da5ab9e4e039bf2927e2da1d509a8e245bd6c3 Mon Sep 17 00:00:00 2001 From: ben Date: Sun, 8 Jan 2023 17:44:11 -0500 Subject: [PATCH 1/3] 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. --- .prettierrc | 3 ++- package-lock.json | 35 +++++++++++++++++++++------ package.json | 5 ++-- scripts/{generate.cjs => generate.js} | 24 +++++++----------- scripts/types-template.d.ts | 9 +++++++ 5 files changed, 51 insertions(+), 25 deletions(-) rename scripts/{generate.cjs => generate.js} (86%) diff --git a/.prettierrc b/.prettierrc index 0b81e39b..484d97d4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "trailingComma": "es5", "tabWidth": 4, "semi": true, - "singleQuote": false + "singleQuote": false, + "plugins": ["prettier-plugin-svelte"] } diff --git a/package-lock.json b/package-lock.json index 3d058fa1..3fa48097 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "license": "MIT", "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" @@ -72,15 +73,28 @@ } }, "node_modules/prettier": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", - "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz", + "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==", "dev": true, "bin": { "prettier": "bin-prettier.js" }, "engines": { "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-plugin-svelte": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.9.0.tgz", + "integrity": "sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==", + "dev": true, + "peerDependencies": { + "prettier": "^1.16.4 || ^2.0.0", + "svelte": "^3.2.0" } }, "node_modules/react": { @@ -172,11 +186,18 @@ "peer": true }, "prettier": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", - "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz", + "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==", "dev": true }, + "prettier-plugin-svelte": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.9.0.tgz", + "integrity": "sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==", + "dev": true, + "requires": {} + }, "react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", diff --git a/package.json b/package.json index 683f5ef7..2a368162 100644 --- a/package.json +++ b/package.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" diff --git a/scripts/generate.cjs b/scripts/generate.js similarity index 86% rename from scripts/generate.cjs rename to scripts/generate.js index 36acd3f1..add58fa7 100644 --- a/scripts/generate.cjs +++ b/scripts/generate.js @@ -1,8 +1,9 @@ -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, @@ -10,6 +11,7 @@ const SOURCE_ICONS_PATH = path.resolve( ); 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( diff --git a/scripts/types-template.d.ts b/scripts/types-template.d.ts index 785df339..32d94e68 100644 --- a/scripts/types-template.d.ts +++ b/scripts/types-template.d.ts @@ -1 +1,10 @@ import { SvelteComponentTyped } from "svelte"; + +type TablerIconProps = { + color?: string; + size?: string | number; + strokeWidth?: string | number; + class?: string; +}; + +class TablerIcon extends SvelteComponentTyped {} From e976bbb329fcd2a58d3186ff0fbb7622e518c365 Mon Sep 17 00:00:00 2001 From: ben Date: Sun, 8 Jan 2023 17:50:41 -0500 Subject: [PATCH 2/3] doc: add changelog for v1.9.1 I am also pumping the version number in the package.json file. --- CHANGELOG.md | 4 ++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 751b0eeb..9c46573f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # tabler-icons-svelte changelog +### 1.9.1 + +- fix missing type declaration for `class` prop + ## 1.9.0 - Support passing down `class` prop ([#10](https://github.com/benflap/tabler-icons-svelte/pull/10)) diff --git a/package-lock.json b/package-lock.json index 3fa48097..eb2cca06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tabler-icons-svelte", - "version": "1.9.0", + "version": "1.9.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tabler-icons-svelte", - "version": "1.9.0", + "version": "1.9.1", "license": "MIT", "devDependencies": { "@tabler/icons": "1.84.0", diff --git a/package.json b/package.json index 2a368162..4900fde5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tabler-icons-svelte", - "version": "1.9.0", + "version": "1.9.1", "description": "Tabler Icons as svelte components.", "license": "MIT", "author": "Ben Lapp ", From cb2a6ecad864c46e9801c15b2ef4691d404a6682 Mon Sep 17 00:00:00 2001 From: ben Date: Sun, 8 Jan 2023 18:03:13 -0500 Subject: [PATCH 3/3] docs: add prop descriptions to README --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 4ce998a5..179d77c1 100644 --- a/README.md +++ b/README.md @@ -59,14 +59,14 @@ If your build times are high, import the components from their svelte files. ## Props -The components each accept 3 props: - -| Prop | Default | -| ----------- | -------------- | -| size | 24 | -| color | `currentColor` | -| strokeWidth | 2 | -| class | `""` | +The components each accept 4 optional props: + +| Prop | Default | Description | +| ----------- | -------------- | ---------------------------------------------------------------------------------------- | +| size | 24 | The size of the Icon. Measured in pixels if no other unit is passed. | +| color | `currentColor` | Any valid CSS [\](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). | +| strokeWidth | 2 | The SVG's stroke width. Measured in pixels if no other unit is passed. | +| class | `undefined` | Classes that are passed down to the SVG. | ## Development Workflow