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
2025-12-16 13:07:44 +01:00 · 2024-01-03 11:38:06 +01:00
parent 3fe74beeb0
commit faff6a8269
43 changed files with 3594 additions and 5041 deletions
--- a/packages/lucide-preact/package.json
+++ b/packages/lucide-preact/package.json
@@ -12,7 +12,7 @@
  },
  "keywords": [
    "Lucide",
-    "Angular",
+    "Preact",
    "Feather",
    "Icons",
    "Icon",
@@ -33,11 +33,10 @@
  ],
  "sideEffects": false,
  "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 stats && rm -rf ./src/icons/*.js",
    "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"
@@ -47,12 +46,14 @@
    "@lucide/rollup-plugins": "workspace:*",
    "@preact/preset-vite": "^2.7.0",
    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/preact": "^2.0.1",
+    "@testing-library/preact": "^3.2.3",
+    "jest-serializer-html": "^7.1.0",
    "preact": "^10.19.2",
-    "rollup": "^3.29.4",
-    "typescript": "^4.9.5",
-    "vite": "^4.4.12",
-    "vitest": "^0.32.4"
+    "rollup": "^4.9.2",
+    "rollup-plugin-dts": "^6.1.0",
+    "typescript": "^5.3.3",
+    "vite": "5.0.10",
+    "vitest": "^1.1.1"
  },
  "peerDependencies": {
    "preact": "^10.5.13"
--- a/packages/lucide-preact/rollup.config.mjs
+++ b/packages/lucide-preact/rollup.config.mjs
@@ -1,4 +1,5 @@
 import plugins, { replace } from '@lucide/rollup-plugins';
+import dts from "rollup-plugin-dts";
 import pkg from './package.json' assert { type: "json" };

 const packageName = 'LucidePreact';
@@ -49,7 +50,7 @@ const configs = bundles
        ),
        ...plugins(pkg, minify)
      ],
-      external: ['preact', 'prop-types'],
+      external: ['preact'],
      output: {
        name: packageName,
        ...(preserveModules
@@ -64,11 +65,20 @@ const configs = bundles
        sourcemap: true,
        globals: {
          preact: 'preact',
-          'prop-types': 'PropTypes',
        },
      },
    })),
  )
  .flat();

-export default configs;
+  export default [
+    {
+      input: inputs[0],
+      output: [{
+        file: `dist/${outputFileName}.d.ts`, format: "es"
+      }],
+      plugins: [dts()],
+    },
+    ...configs
+  ];
+
--- a/packages/lucide-preact/scripts/buildTypes.mjs
+++ b/packages/lucide-preact/scripts/buildTypes.mjs
@@ -1,92 +0,0 @@
-import path from 'path';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { getAliases } from '@lucide/build-icons';
-import {
-  writeFile,
-  readSvgDirectory,
-  resetFile,
-  toPascalCase,
-  getCurrentDirPath,
-} from '../../../scripts/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const srcDirectory = path.join(currentDir, '../dist');
-
-const writeDeclarationFile = (typesFile, directory, content) => {
-  resetFile(typesFile, directory);
-  writeFile(content, typesFile, directory);
-};
-
-const ICONS_DIR = path.resolve(currentDir, '../../../icons');
-const TYPES_FILE = 'lucide-preact.d.ts';
-
-// Declare type definitions
-let declarationFileContent = `\
-/// <reference types="preact" />
-import { JSX, RefObject } from 'preact'
-
-interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
-  key?: string | number;
-  ref?: string | ((component: any) => any) | RefObject<any>;
-  color?: string
-  size?: string | number
-  strokeWidth?: string | number
-  absoluteStrokeWidth?: boolean
-}
-
-export type LucideIcon = (props: LucideProps) => JSX.Element;
-
-export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
-
-export declare const createLucideIcon: (iconName: string, iconNode: IconNode) => LucideIcon;
-
-// Generated icons
-`;
-
-const svgFiles = readSvgDirectory(ICONS_DIR);
-
-svgFiles.forEach((svgFile) => {
-  const iconName = path.basename(svgFile, '.svg');
-  const componentName = toPascalCase(iconName);
-
-  declarationFileContent += `export declare const ${componentName}: LucideIcon;\n`;
-});
-
-const aliases = await getAliases(ICONS_DIR);
-
-declarationFileContent += `
-// 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 += `export declare const ${componentName}Icon: LucideIcon;\n`;
-  declarationFileContent += `export declare const Lucide${componentName}: LucideIcon;\n`;
-  aliasesCount += 1;
-  if (iconAliases != null && Array.isArray(iconAliases)) {
-    iconAliases.forEach((alias) => {
-      const componentNameAlias = toPascalCase(alias);
-      declarationFileContent += `export declare const ${componentNameAlias}: LucideIcon;\n`;
-
-      aliasesCount += 1;
-    });
-  }
-
-  declarationFileContent += '\n';
-});
-
-writeDeclarationFile(TYPES_FILE, srcDirectory, declarationFileContent);
-console.log(
-  `Generated ${TYPES_FILE} file with`,
-  svgFiles.length,
-  'icons and with',
-  aliasesCount,
-  'aliases',
-);
--- a/packages/lucide-preact/src/createLucideIcon.ts
+++ b/packages/lucide-preact/src/createLucideIcon.ts
@@ -1,15 +1,17 @@
-import { ComponentType, FunctionComponent, h, JSX, RefObject, toChildArray } from 'preact';
+import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
 import defaultAttributes from './defaultAttributes';

-type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]
+export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]

-interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
+export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
  color?: string
  size?: string | number
  strokeWidth?: string | number
  absoluteStrokeWidth?: boolean
 }

+export type LucideIcon = FunctionComponent<LucideProps>
+
 /**
 * Converts string to KebabCase
 * Copied from scripts/helper. If anyone knows how to properly import it here
@@ -20,7 +22,7 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
 */
 export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

-const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionComponent<LucideProps> => {
+const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
  const Component = (
    { color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, class: classes = '', ...rest }: LucideProps
  ) =>
--- a/packages/lucide-preact/tests/snapshots/lucide-preact.spec.tsx.snap
+++ b/packages/lucide-preact/tests/snapshots/lucide-preact.spec.tsx.snap
@@ -1,7 +1,93 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

-exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="48"
+     height="48"
+     viewbox="0 0 24 24"
+     fill="none"
+     stroke="red"
+     stroke-width="4"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     class="lucide lucide-grid3x3 "
+     data-testid="grid-icon"
+>
+  <rect width="18"
+        height="18"
+        x="3"
+        y="3"
+        rx="2"
+  >
+  </rect>
+  <path d="M3 9h18">
+  </path>
+  <path d="M3 15h18">
+  </path>
+  <path d="M9 3v18">
+  </path>
+  <path d="M15 3v18">
+  </path>
+</svg>
+`;

-exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="48"
+     height="48"
+     viewbox="0 0 24 24"
+     fill="none"
+     stroke="red"
+     stroke-width="1"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     class="lucide lucide-grid3x3 "
+     data-testid="grid-icon"
+>
+  <rect width="18"
+        height="18"
+        x="3"
+        y="3"
+        rx="2"
+  >
+  </rect>
+  <path d="M3 9h18">
+  </path>
+  <path d="M3 15h18">
+  </path>
+  <path d="M9 3v18">
+  </path>
+  <path d="M15 3v18">
+  </path>
+</svg>
+`;

-exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
+exports[`Using lucide icon components > should render an component 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="24"
+     height="24"
+     viewbox="0 0 24 24"
+     fill="none"
+     stroke="currentColor"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     class="lucide lucide-grid3x3 "
+>
+  <rect width="18"
+        height="18"
+        x="3"
+        y="3"
+        rx="2"
+  >
+  </rect>
+  <path d="M3 9h18">
+  </path>
+  <path d="M3 15h18">
+  </path>
+  <path d="M9 3v18">
+  </path>
+  <path d="M15 3v18">
+  </path>
+</svg>
+`;
--- a/packages/lucide-preact/tests/setupVitest.js
+++ b/packages/lucide-preact/tests/setupVitest.js
@@ -1 +1,5 @@
+import { expect } from 'vitest'
 import '@testing-library/jest-dom';
+import htmlSerializer from 'jest-serializer-html'
+
+expect.addSnapshotSerializer(htmlSerializer)
--- a/packages/lucide-preact/vitest.config.mts
+++ b/packages/lucide-preact/vitest.config.mts
@@ -6,12 +6,7 @@ export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
-    transformMode: {
-      web: [/\.jsx?$/],
-    },
    setupFiles: './tests/setupVitest.js',
-    threads: false,
-    isolate: false,
  },
  resolve: {
    mainFields: ['module'],