Merge branch 'main' of https://github.com/tabler/tabler-icons into de…

…v-import-fixes
tabler · Mar 11, 2024 · 6ec9fe9 · 6ec9fe9
2 parents 50d5ee3 + 14b334f
commit 6ec9fe9
Show file tree

Hide file tree

Showing 16 changed files with 42 additions and 54 deletions.
diff --git a/.build/build-icons.mjs b/.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,

diff --git a/package.json b/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",

diff --git a/packages/icons-preact/package.json b/packages/icons-preact/package.json
@@ -43,7 +43,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",
     "imports-check": "attw $(npm pack)"
   },

diff --git a/packages/icons-preact/test.spec.jsx → packages/icons-preact/test.spec.tsx b/packages/icons-preact/test.spec.jsx → 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")

diff --git a/packages/icons-preact/tsconfig.json b/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"]
 }
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
@@ -43,7 +43,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",
     "imports-check": "attw $(npm pack)"
   },

diff --git a/packages/icons-react/src/createReactComponent.ts b/packages/icons-react/src/createReactComponent.ts
@@ -1,15 +1,18 @@
 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',
   iconName: string,
   iconNamePascal: string,
   iconNode: IconNode,
 ) => {
-  const Component = forwardRef<SVGSVGElement, IconProps>(
-    ({ color = 'currentColor', size = 24, stroke = 2, className = '', children, ...rest }, ref) =>
+  const Component = forwardRef<Icon, IconProps>(
+    (
+      { color = 'currentColor', size = 24, stroke = 2, className, children, ...rest }: IconProps,
+      ref,
+    ) =>
       createElement(
         'svg',
         {

diff --git a/packages/icons-react/src/tabler-icons-react.ts b/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';
diff --git a/packages/icons-react/src/types.ts b/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>;
diff --git a/packages/icons-react/test.spec.jsx → packages/icons-react/test.spec.tsx b/packages/icons-react/test.spec.jsx → 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(`

diff --git a/packages/icons-react/tsconfig.json b/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"],
 }
diff --git a/packages/icons-svelte/build.mjs b/packages/icons-svelte/build.mjs
@@ -36,7 +36,6 @@ buildJsIcons({
   indexItemTemplate,
   aliasTemplate,
   extension: 'svelte',
-  pretty: false,
   key: false,
   indexFile: 'index.ts',
   pascalName: false,

diff --git a/packages/icons-vue/src/createVueComponent.ts b/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',
       {

diff --git a/packages/icons-vue/src/types.ts b/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;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/turbo.json b/turbo.json
@@ -4,8 +4,7 @@
     "build": {
       "outputs": ["dist/**"],
       "dependsOn": ["^build"],
-
-      "cache": false
+      "inputs": ["../../icons/**"]
     },
     "lint": {},
     "dev": {
@@ -16,10 +15,13 @@
       "cache": false
     },
     "test": {
-      "dependsOn": []
+      "dependsOn": ["build", "^build"]
+    },
+    "typecheck": {
+      "dependsOn": ["build", "^build"]
     },
     "imports-check": {
-      "dependsOn": ["^build"]
+      "dependsOn": ["build", "^build"]
     }
   }
 }