Types fixes (#1037)

* tests update

* type fixes

* build fix

* type fixes

.build/build-icons.mjs

@@ -2,7 +2,6 @@ import fs from 'fs-extra'
 import path from 'path'
 import { PACKAGES_DIR, getAliases, toPascalCase, getAllIcons } from './helpers.mjs'
 import { stringify } from 'svgson'
-import prettier from "@prettier/sync"
 
 /**
  * Build icons
@@ -20,7 +19,6 @@ export const buildJsIcons = ({
   indexItemTemplate,
   aliasTemplate,
   extension = 'js',
-  pretty = true,
   key = true,
   pascalCase = false,
   pascalName = true,
@@ -68,15 +66,8 @@ export const buildJsIcons = ({
         svg: icon.content
       })
 
-      // Format component
-      const output = pretty ? prettier.format(component, {
-        singleQuote: true,
-        trailingComma: 'all',
-        parser: 'babel'
-      }) : component
-
       let filePath = path.resolve(DIST_DIR, 'src/icons', `${pascalName ? iconNamePascal : iconName}.${extension}`)
-      fs.writeFileSync(filePath, output, 'utf-8')
+      fs.writeFileSync(filePath, component, 'utf-8')
 
       index.push(indexItemTemplate({
         type,

.build/rollup-plugins.mjs

@@ -23,8 +23,6 @@ See the LICENSE file in the root directory of this source tree.`
 export const getRollupConfig = (pkg, outputFileName, bundles, globals) => {
   return bundles
     .map(({ inputs, format, minify, preserveModules, outputDir = 'dist', extension = 'js' }) => {
-      console.log(format, extension)
-
       return inputs.map(input => ({
         input,
         plugins: getRollupPlugins(pkg, minify),

package.json

@@ -51,7 +51,6 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "@prettier/sync": "^0.5.1",
     "@release-it-plugins/workspaces": "^4.2.0",
     "@testing-library/jest-dom": "^6.4.2",
     "adm-zip": "^0.5.10",

packages/icons-preact/package.json

@@ -33,7 +33,7 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
-    "test": "vitest run",
+    "test": "vitest run --typecheck",
     "typecheck": "tsc"
   },
   "dependencies": {

packages/icons-preact/test.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, afterEach } from 'vitest';
 import { render, cleanup } from '@testing-library/preact'
 import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-preact"
 
@@ -16,8 +16,6 @@ describe("Preact Icon component", () => {
     const { container } = render(<IconAccessible size={48} color={"red"} stroke={4}/>)
     const svg = container.getElementsByTagName("svg")[0]
 
-    console.log(svg.outerHTML)
-
     expect(svg.getAttribute("width")).toBe("48")
     expect(svg.getAttribute("fill")).toBe("none")
     expect(svg.getAttribute("stroke")).toBe("red")

packages/icons-preact/tsconfig.json

@@ -17,7 +17,9 @@
     "downlevelIteration": true,
     "sourceMap": true,
     "outDir": "./dist",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "types": ["@testing-library/jest-dom"],
   },
   "exclude": ["**/node_modules"]
 }

packages/icons-react/package.json

@@ -33,7 +33,7 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
-    "test": "vitest run",
+    "test": "vitest run --typecheck",
     "typecheck": "tsc"
   },
   "dependencies": {

packages/icons-react/src/createReactComponent.ts

@@ -1,6 +1,6 @@
 import { forwardRef, createElement } from 'react';
 import defaultAttributes from './defaultAttributes';
-import type { IconNode, IconProps } from './types';
+import type { IconNode, IconProps, Icon } from './types';
 
 const createReactComponent = (
   type: 'outline' | 'filled',
@@ -8,8 +8,11 @@ const createReactComponent = (
   iconNamePascal: string,
   iconNode: IconNode,
 ) => {
-  const Component = forwardRef<SVGSVGElement, IconProps>(
+  const Component = forwardRef<Icon, IconProps>(
-    ({ color = 'currentColor', size = 24, stroke = 2, className = '', children, ...rest }, ref) =>
+    (
+      { color = 'currentColor', size = 24, stroke = 2, className, children, ...rest }: IconProps,
+      ref,
+    ) =>
       createElement(
         'svg',
         {

packages/icons-react/src/tabler-icons-react.ts

@@ -3,6 +3,4 @@ export * as icons from './icons/index';
 export * from './aliases';
 export { default as createReactComponent } from './createReactComponent';
 
-export type { IconNode, IconProps, Icon } from './types';
+export type { IconNode, IconProps } from './types';
-
-

packages/icons-react/src/types.ts

@@ -1,13 +1,12 @@
 
-import { ForwardRefExoticComponent, ReactSVG, SVGProps } from 'react';
+import { FunctionComponent, ReactSVG } from 'react';
+export type { ReactNode } from 'react';
 
 export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
 
-export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
-
 export interface IconProps extends Partial<Omit<React.SVGProps<SVGSVGElement>, 'stroke'>> {
   size?: string | number;
   stroke?: string | number;
 }
 
-export type Icon = ForwardRefExoticComponent<IconProps>;
+export type Icon = FunctionComponent<IconProps>;

packages/icons-react/test.spec.tsx

@@ -1,6 +1,8 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, afterEach, assertType, expectTypeOf } from 'vitest';
 import { render, cleanup } from '@testing-library/react'
-import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-react"
+import { IconAccessible, IconAccessibleFilled, createReactComponent } from "./src/tabler-icons-react"
+import type { IconNode } from './src/tabler-icons-react';
+import { ReactNode } from 'react';
 
 describe("React Icon component", () => {
   afterEach(() => {
@@ -51,6 +53,11 @@ describe("React Icon component", () => {
     expect(svg).toHaveStyle('color: rgb(255, 0, 0)')
   })
 
+  it('should have proper type', () => {
+    expectTypeOf(IconAccessible).toBeFunction();
+    expectTypeOf(IconAccessible).toEqualTypeOf(createReactComponent('outline', 'accessible', 'Accessible', []));
+  });
+
   it("should match snapshot", () => {
     const { container } = render(<IconAccessible/>)
     expect(container.innerHTML).toMatchInlineSnapshot(`

packages/icons-react/tsconfig.json

@@ -17,7 +17,8 @@
     "downlevelIteration": true,
     "sourceMap": true,
     "outDir": "./dist",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["@testing-library/jest-dom"]
   },
-  "exclude": ["**/node_modules"]
+  "exclude": ["**/node_modules"],
 }

packages/icons-svelte/build.mjs

@@ -36,7 +36,6 @@ buildJsIcons({
   indexItemTemplate,
   aliasTemplate,
   extension: 'svelte',
-  pretty: false,
   key: false,
   indexFile: 'index.ts',
   pascalName: false,

packages/icons-vue/src/createVueComponent.ts

@@ -1,6 +1,6 @@
 import { h } from 'vue';
 import defaultAttributes from './defaultAttributes';
-import type { Icon, IconNode } from './types';
+import type { Icon, IconNode, IconProps } from './types';
 
 const createVueComponent =
   (
@@ -9,7 +9,7 @@ const createVueComponent =
     iconNamePascal: string,
     iconNode: IconNode,
   ): Icon =>
-  ({ size, color, class: classes, stroke, ...rest }, { attrs, slots }) => {
+  ({ size, color, class: classes, stroke, ...rest }: IconProps, { attrs, slots }) => {
     return h(
       'svg',
       {

packages/icons-vue/src/types.ts

@@ -7,3 +7,8 @@ export interface SVGProps extends Partial<SVGAttributes> {
 
 export type IconNode = [elementName: string, attrs: Record<string, string>][];
 export type Icon = FunctionalComponent<SVGProps>;
+
+export interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
+  size?: string | number;
+  stroke?: string | number;
+}

pnpm-lock.yaml

@@ -15,9 +15,6 @@ importers:
       '@11ty/eleventy':
         specifier: ^2.0.1
         version: 2.0.1
-      '@prettier/sync':
-        specifier: ^0.5.1
-        version: 0.5.1(prettier@3.2.5)
       '@release-it-plugins/workspaces':
         specifier: ^4.2.0
         version: 4.2.0(release-it@17.1.1)
@@ -3166,15 +3163,6 @@ packages:
       - supports-color
     dev: true
 
-  /@prettier/sync@0.5.1(prettier@3.2.5):
-    resolution: {integrity: sha512-tpF+A1e4ynO2U4fTH21Sjgm9EYENmqg4zmJCMLrmLVfzIzuDc1cKGXyxrxbFgcH8qQRfowyDCZFAUukwhiZlsw==}
-    peerDependencies:
-      prettier: '*'
-    dependencies:
-      make-synchronized: 0.2.8
-      prettier: 3.2.5
-    dev: true
-
   /@react-native-community/cli-clean@12.3.6:
     resolution: {integrity: sha512-gUU29ep8xM0BbnZjwz9MyID74KKwutq9x5iv4BCr2im6nly4UMf1B1D+V225wR7VcDGzbgWjaezsJShLLhC5ig==}
     dependencies:
@@ -8798,10 +8786,6 @@ packages:
       - supports-color
     dev: true
 
-  /make-synchronized@0.2.8:
-    resolution: {integrity: sha512-jtXnKYCxjmGaXiZhXbDbGPbh4YyTvIIbOgcQjtAboc4RSm9k3nyhTFvFQB0cfs7QFKuZXKe2D2RvOkv1c+vpxg==}
-    dev: true
-
   /makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
     dependencies:

turbo.json

@@ -4,8 +4,7 @@
     "build": {
       "outputs": ["dist/**"],
       "dependsOn": ["^build"],
-      
+      "inputs": ["../../icons/**"]
-      "cache": false
     },
     "lint": {},
     "dev": {
@@ -16,7 +15,10 @@
       "cache": false
     },
     "test": {
-      "dependsOn": []
+      "dependsOn": ["build", "^build"]
+    },
+    "typecheck": {
+      "dependsOn": ["build", "^build"]
     }
   }
 }