diff --git a/.build/build-icons.mjs b/.build/build-icons.mjs index b6ec88ae1..61397c556 100644 --- 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/.build/rollup-plugins.mjs b/.build/rollup-plugins.mjs index 4cb1973d6..f222297df 100644 --- a/.build/rollup-plugins.mjs +++ b/.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), diff --git a/package.json b/package.json index 106b1aed5..ea36fd752 100644 --- 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 index 5e33ab526..ac3320d14 100644 --- a/packages/icons-preact/package.json +++ b/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": { diff --git a/packages/icons-preact/test.spec.jsx b/packages/icons-preact/test.spec.tsx similarity index 97% rename from packages/icons-preact/test.spec.jsx rename to packages/icons-preact/test.spec.tsx index b7881559f..4b6014cee 100644 --- a/packages/icons-preact/test.spec.jsx +++ b/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() 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 index 23e3877e3..b59f7ee3a 100644 --- 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 index d71ea5751..2e97181a0 100644 --- a/packages/icons-react/package.json +++ b/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": { diff --git a/packages/icons-react/src/createReactComponent.ts b/packages/icons-react/src/createReactComponent.ts index 4a3947aad..8a28250c8 100644 --- a/packages/icons-react/src/createReactComponent.ts +++ b/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( - ({ color = 'currentColor', size = 24, stroke = 2, className = '', children, ...rest }, ref) => + const Component = forwardRef( + ( + { 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 index 9bec5acc2..7e25359a5 100644 --- 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 index 04f205a44..ee64d636c 100644 --- 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][]; -export type SVGAttributes = Partial>; - export interface IconProps extends Partial, 'stroke'>> { size?: string | number; stroke?: string | number; } -export type Icon = ForwardRefExoticComponent; +export type Icon = FunctionComponent; diff --git a/packages/icons-react/test.spec.jsx b/packages/icons-react/test.spec.tsx similarity index 84% rename from packages/icons-react/test.spec.jsx rename to packages/icons-react/test.spec.tsx index 4c206efd2..8ba094a10 100644 --- a/packages/icons-react/test.spec.jsx +++ b/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() expect(container.innerHTML).toMatchInlineSnapshot(` diff --git a/packages/icons-react/tsconfig.json b/packages/icons-react/tsconfig.json index 23e3877e3..0ef715d5e 100644 --- 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 index b6b287a4d..5b8b869d1 100644 --- 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 index e2b66ba3e..2da04aa58 100644 --- 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 index dade4d5f1..3adec3583 100644 --- a/packages/icons-vue/src/types.ts +++ b/packages/icons-vue/src/types.ts @@ -7,3 +7,8 @@ export interface SVGProps extends Partial { export type IconNode = [elementName: string, attrs: Record][]; export type Icon = FunctionalComponent; + +export interface IconProps extends Partial> { + size?: string | number; + stroke?: string | number; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 12e35ab57..12747418f 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/turbo.json b/turbo.json index d2b91fa90..96fb00413 100644 --- a/turbo.json +++ b/turbo.json @@ -4,8 +4,7 @@ "build": { "outputs": ["dist/**"], "dependsOn": ["^build"], - - "cache": false + "inputs": ["../../icons/**"] }, "lint": {}, "dev": { @@ -16,7 +15,10 @@ "cache": false }, "test": { - "dependsOn": [] + "dependsOn": ["build", "^build"] + }, + "typecheck": { + "dependsOn": ["build", "^build"] } } }