Added type checks in `icons-react` tests and ensured consistent dependency management in test packages. (#1439)

package.json

@@ -70,7 +70,6 @@
     "jsdom": "^24.0.0",
     "lodash.template": "4.5.0",
     "minimist": "1.2.8",
-    "sass": "^1.71.1",
     "openai": "^4.73.1",
     "parse-svg-path": "^0.1.2",
     "prettier": "^3.2.5",
@@ -82,15 +81,16 @@
     "rollup-plugin-license": "^3.2.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.71.1",
     "slash": "^5.1.0",
     "svg-outline-stroke": "1.3.1",
     "svgo": "^3.2.0",
     "svgpath": "^2.6.0",
     "svgson": "^5.3.1",
-    "turbo": "^1.12.5",
+    "turbo": "^2.6.3",
     "typescript": "^5.3.3",
-    "vite": "^5.1.8",
+    "vite": "^7.3.0",
-    "vitest": "^1.3.1"
+    "vitest": "^4.0.16"
   },
   "release-it": {
     "plugins": {
@@ -113,7 +113,7 @@
       "release": true
     }
   },
-  "packageManager": "pnpm@8.15.9",
+  "packageManager": "pnpm@10.26.0",
   "pnpm": {
     "overrides": {
       "sharp": "^0.33.5"

packages/icons-preact/package.json

@@ -42,7 +42,7 @@
     "preact": "^10.5.13"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.8.1",
+    "@preact/preset-vite": "^2.10.2",
     "@testing-library/preact": "^3.2.3",
     "preact": "^10.19.6"
   }

packages/icons-react-native/rollup.config.mjs

@@ -32,6 +32,46 @@ export default [
     ],
     plugins: [dts()],
   },
+  {
+    input: './src/icons/index.ts',
+    output: [
+      {
+        dir: 'dist/icons',
+        format: 'es',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+    ],
+    plugins: [
+      dts({
+        compilerOptions: {
+          declaration: true,
+          emitDeclarationOnly: true,
+        },
+      }),
+    ],
+    external: ['react', 'react-native-svg'],
+  },
+  {
+    input: './src/icons/index.ts',
+    output: [
+      {
+        dir: 'dist/cjs/icons',
+        format: 'es',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+    ],
+    plugins: [
+      dts({
+        compilerOptions: {
+          declaration: true,
+          emitDeclarationOnly: true,
+        },
+      }),
+    ],
+    external: ['react', 'react-native-svg'],
+  },
   ...getRollupConfig(pkg, outputFileName, bundles, {
     react: 'react',
     'react-native-svg': 'react-native-svg',

packages/icons-react/src/types.ts

@@ -12,4 +12,4 @@ export interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'
 
 export type Icon = FunctionComponent<IconProps>;
 
-export type TablerIcon = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;
+export type TablerIcon = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;

packages/icons-react/test.spec.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, afterEach, expectTypeOf } from 'vitest';
 import { render, cleanup } from '@testing-library/react'
 import { IconAccessible, IconAccessibleFilled, createReactComponent } from "./src/tabler-icons-react"
+import type { TablerIcon } from "./src/types"
 
 describe("React Icon component", () => {
   afterEach(() => {
@@ -56,6 +57,11 @@ describe("React Icon component", () => {
     expectTypeOf(IconAccessible).toEqualTypeOf(createReactComponent('outline', 'accessible', 'Accessible', []));
   });
 
+  it('should match TablerIcon type', () => {
+    expectTypeOf(IconAccessible).toMatchTypeOf<TablerIcon>();
+    expectTypeOf(IconAccessibleFilled).toMatchTypeOf<TablerIcon>();
+  });
+
   it('should add title child element to svg when title prop is passed', () => {
     const { container } = render(<IconAccessible title="Accessible Icon"/>);
     const svg = container.getElementsByTagName("svg")[0];

packages/icons-svelte/test.spec.js

@@ -68,7 +68,6 @@ describe("Svelte Icon component", () => {
   it("should match snapshot", () => {
     const { container } = render(IconAccessible);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-      <div>
       <svg xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
@@ -91,7 +90,6 @@ describe("Svelte Icon component", () => {
         >
         </circle>
       </svg>
-      </div>
     `);
   });
 });

packages/icons-vue/package.json

@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@testing-library/vue": "^8.0.2",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^6.0.3",
     "@vue/compiler-sfc": "^3.4.20",
     "@vue/test-utils": "2.4.4",
     "vue": "^3.4.20"

test/test-preact/package.json

@@ -10,10 +10,10 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@tabler/icons-preact": "3.36.0",
+    "@tabler/icons-preact": "workspace:*",
     "preact": "^10.19.6"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.8.1"
+    "@preact/preset-vite": "^2.10.2"
   }
 }

test/test-react-native/package.json

@@ -10,13 +10,13 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@tabler/icons-react-native": "3.36.0",
+    "@tabler/icons-react-native": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
-    "@vitejs/plugin-react": "^4.2.1"
+    "@vitejs/plugin-react": "^5.1.2"
   }
 }

test/test-react-native/src/App.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import './App.css'
-import { IconAd, IconAdOff } from '@tabler/icons-react-native';
+import { IconAd, IconAdOff, IconAdFilled } from '@tabler/icons-react-native';
-import IconAdFilled from '@tabler/icons-react-native/IconAdFilled'
 
 function App() {
   const [active, setActive] = useState(false)

test/test-react-native/vite.config.ts

@@ -3,5 +3,32 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    {
+      name: 'exclude-react-native',
+      resolveId(id) {
+        if (id === 'react-native' || id.startsWith('react-native/')) {
+          return { id: 'react-native', external: true }
+        }
+        if (id === 'react-native-svg') {
+          return { id: 'react-native-svg', external: true }
+        }
+      },
+    },
+  ],
+  optimizeDeps: {
+    exclude: ['react-native', 'react-native-svg'],
+  },
+  build: {
+    rollupOptions: {
+      external: (id) => {
+        return id === 'react-native' || id === 'react-native-svg' || id.startsWith('react-native/')
+      },
+    },
+    commonjsOptions: {
+      exclude: ['react-native', 'react-native-svg'],
+      transformMixedEsModules: true,
+    },
+  },
 })

test/test-react/package.json

@@ -10,13 +10,13 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@tabler/icons-react": "3.36.0",
+    "@tabler/icons-react": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
-    "@vitejs/plugin-react": "^4.2.1"
+    "@vitejs/plugin-react": "^5.1.2"
   }
 }

test/test-svelte/package.json

@@ -11,7 +11,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@tabler/icons-svelte": "3.36.0"
+    "@tabler/icons-svelte": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",

test/test-vue/package.json

@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "vue": "^3.4.20",
-    "@tabler/icons-vue": "3.36.0"
+    "@tabler/icons-vue": "workspace:*"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^6.0.3",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^3.1.8"
   }
 }

turbo.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "pipeline": {
+  "tasks": {
     "build": {
-      "outputs": ["dist/**", "src/icons/**"],
+      "outputs": ["dist/**", "src/icons/**", "icons/**", "icons.json", "tabler-nodes-*.json", "categories/**", "docs/**"],
       "dependsOn": ["^build"],
       "inputs": ["../../icons/**"]
     },