Update dependencies and general improvements in packages (#1773)

* update deps and vitest

* dedupe packages

* update package.json files

* Update to latest vite and vites

* Fix build

* Update lockfile

packages/lucide-vue-next/package.json

@@ -13,7 +13,7 @@
   },
   "keywords": [
     "Lucide",
-    "Angular",
+    "Vue",
     "Feather",
     "Icons",
     "Icon",
@@ -35,28 +35,26 @@
     "nuxt.js"
   ],
   "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
-    "build:types": "node ./scripts/buildTypes.mjs",
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "vitest run",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@lucide/rollup-plugins": "workspace:*",
     "@lucide/build-icons": "workspace:*",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/vue": "^6.6.1",
-    "@vue/compiler-sfc": "3.2.45",
-    "@vue/test-utils": "2.2.4",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "rollup": "^3.5.1",
-    "vite": "^4.4.12",
-    "vitest": "^0.32.2",
-    "vue": "3.2.45",
-    "jsdom": "^20.0.3"
+    "@lucide/rollup-plugins": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/vue": "^8.0.1",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "@vue/test-utils": "2.4.3",
+    "rollup": "^4.9.2",
+    "rollup-plugin-dts": "^6.1.0",
+    "vite": "5.0.10",
+    "vitest": "^1.1.1",
+    "vue": "^3.0.1"
   },
   "peerDependencies": {
     "vue": ">=3.0.1"

packages/lucide-vue-next/rollup.config.mjs

@@ -1,5 +1,6 @@
 import plugins, { replace } from '@lucide/rollup-plugins';
 import pkg from './package.json' assert { type: 'json' };
+import dts from "rollup-plugin-dts";
 
 const packageName = 'LucideVueNext';
 const outputFileName = 'lucide-vue-next';
@@ -71,4 +72,20 @@ const configs = bundles
   )
   .flat();
 
-export default configs;
+  export default [
+    {
+      input: inputs[0],
+      output: [{
+        file: `dist/${outputFileName}.d.ts`, format: "es"
+      }],
+      plugins: [
+        dts({
+          compilerOptions: {
+            preserveSymlinks: false
+          }
+        })
+      ],
+    },
+    ...configs
+  ];
+

packages/lucide-vue-next/scripts/buildTypes.mjs

@@ -1,89 +0,0 @@
-import path from 'path';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { getAliases } from '@lucide/build-icons';
-import {
-  readSvgDirectory,
-  resetFile,
-  writeFile,
-  toPascalCase,
-  getCurrentDirPath,
-} from '../../../scripts/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const targetDirectory = path.join(currentDir, '../dist');
-
-const writeDeclarationFile = (typesFile, directory, content) => {
-  resetFile(typesFile, directory);
-  writeFile(content, typesFile, directory);
-};
-
-const getComponentImport = (componentName) => `export declare const ${componentName}: Icon;\n`;
-
-const ICONS_DIR = path.resolve(currentDir, '../../../icons');
-const TYPES_FILE = 'lucide-vue-next.d.ts';
-
-// Generates header of d.ts file include some types and functions
-let declarationFileContent = `\
-import { SVGAttributes, DefineComponent } from 'vue';
-declare module 'lucide-vue-next'
-
-// Create interface extending SVGAttributes
-export interface SVGProps extends Partial<SVGAttributes> {
-  size?: 24 | number
-  strokeWidth?: number | string
-  absoluteStrokeWidth?: boolean
-}
-
-export type Icon = DefineComponent<SVGProps>
-
-// Generated icons
-`;
-
-const svgFiles = readSvgDirectory(ICONS_DIR);
-
-svgFiles.forEach((svgFile) => {
-  const nameSvg = path.basename(svgFile, '.svg');
-  const componentName = toPascalCase(nameSvg);
-
-  declarationFileContent += getComponentImport(componentName);
-});
-
-const aliases = await getAliases(ICONS_DIR);
-
-declarationFileContent += `\n
-
-// Generated icon aliases
-`;
-
-let aliasesCount = 0;
-
-svgFiles.forEach((svgFile) => {
-  const iconName = path.basename(svgFile, '.svg');
-  const componentName = toPascalCase(iconName);
-  const iconAliases = aliases[iconName]?.aliases;
-
-  declarationFileContent += `// ${componentName} aliases\n`;
-  declarationFileContent += getComponentImport(`${componentName}Icon`);
-  declarationFileContent += getComponentImport(`Lucide${componentName}`);
-
-  aliasesCount += 1;
-  if (iconAliases != null && Array.isArray(iconAliases)) {
-    iconAliases.forEach((alias) => {
-      const componentNameAlias = toPascalCase(alias);
-      declarationFileContent += getComponentImport(componentNameAlias);
-
-      aliasesCount += 1;
-    });
-  }
-
-  declarationFileContent += '\n';
-});
-
-writeDeclarationFile(TYPES_FILE, targetDirectory, declarationFileContent);
-console.log(
-  `Generated ${TYPES_FILE} file with`,
-  svgFiles.length,
-  'icons and with',
-  aliasesCount,
-  'aliases',
-);

packages/lucide-vue-next/src/createLucideIcon.ts

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import type { SVGAttributes, FunctionalComponent } from 'vue';
+import type { SVGAttributes, FunctionalComponent, DefineComponent } from 'vue';
 import defaultAttributes from './defaultAttributes';
 
 // Create interface extending SVGAttributes
@@ -10,8 +10,8 @@ export interface SVGProps extends Partial<SVGAttributes> {
 }
 
 
-type IconNode = [elementName: string, attrs: Record<string, string>][]
-
+export type IconNode = [elementName: string, attrs: Record<string, string>][]
+export type Icon = FunctionalComponent<SVGProps>
 /**
  * Converts string to KebabCase
  * Copied from scripts/helper. If anyone knows how to properly import it here
@@ -22,7 +22,7 @@ type IconNode = [elementName: string, attrs: Record<string, string>][]
  */
 export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionalComponent<SVGProps> => (
+const createLucideIcon = (iconName: string, iconNode: IconNode): Icon => (
   { size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
   { attrs, slots } // context
   ) => {

packages/lucide-vue-next/tests/lucide-vue-next.spec.ts

@@ -113,8 +113,6 @@ describe('Using lucide icon components', () => {
       }
     })
 
-    console.log(PenIconRenderedHTML, Edit2Container.innerHTML)
-
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
   })
 

packages/lucide-vue-next/tsconfig.json

@@ -12,7 +12,5 @@
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true,
-    "types": ["vitest/globals"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  }
 }