diff --git a/packages/icons-preact/build.mjs b/packages/icons-preact/build.mjs index 7dc82a451..23ed988e1 100644 --- a/packages/icons-preact/build.mjs +++ b/packages/icons-preact/build.mjs @@ -13,30 +13,18 @@ export default createPreactComponent('${name}', '${namePascal}', ${JSON.stringif const indexItemTemplate = ({ name, namePascal -}) => `export { default as ${namePascal} } from './icons/${namePascal}';` - -const typeDefinitionsTemplate = () => `/// -import { JSX, RefObject } from 'preact' - -interface TablerIconsProps extends Partial> { - key?: string | number; - ref?: string | ((component: any) => any) | RefObject; - color?: string - size?: string | number -} - -// Generated icons` - -const indexTypeTemplate = ({ - namePascal -}) => `export declare const ${namePascal}: (props: TablerIconsProps) => JSX.Element;` +}) => `export { default as ${namePascal} } from './${namePascal}';` +const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n` buildIcons({ name: 'icons-preact', componentTemplate, indexItemTemplate, - typeDefinitionsTemplate, - indexTypeTemplate, - pascalCase: true + // typeDefinitionsTemplate, + // indexTypeTemplate, + aliasTemplate, + pascalCase: true, + indexFile: 'icons/index.ts', + extension: 'ts' }) diff --git a/packages/icons-preact/package.json b/packages/icons-preact/package.json index 599f709d6..0428126ca 100644 --- a/packages/icons-preact/package.json +++ b/packages/icons-preact/package.json @@ -17,22 +17,24 @@ "url": "git+https://github.com/tabler/tabler-icons.git", "directory": "packages/icons-preact" }, + "amdName": "tabler-icons-preact", "main": "dist/cjs/tabler-icons-preact.js", "main:umd": "dist/umd/tabler-icons-preact.js", "module": "dist/esm/tabler-icons-preact.js", "unpkg": "dist/umd/tabler-icons-preact.min.js", "typings": "dist/tabler-icons-preact.d.ts", - "sideEffects": false, "files": [ "dist" ], + "sideEffects": false, "scripts": { - "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm run build:bundles", + "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm typecheck && pnpm run build:bundles", "build:icons": "node build.mjs", "build:bundles": "rollup -c ./rollup.config.mjs", "copy:license": "cp ../../LICENSE ./LICENSE", - "clean": "rm -rf dist && rm -rf ./src/icons/*.js", - "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom" + "clean": "rm -rf dist && rm -rf ./src/icons/*.js && rm -rf ./src/icons/*.ts", + "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom", + "typecheck": "tsc" }, "dependencies": { "@tabler/icons": "2.45.0" @@ -49,7 +51,8 @@ "babel-jest": "^29.4.1", "jest": "^29.3.1", "jest-environment-jsdom": "^29.4.1", - "preact": "^10.11.3" + "preact": "^10.5.13", + "typescript": "^5.3.3" }, "jest": { "testEnvironmentOptions": { diff --git a/packages/icons-preact/rollup.config.mjs b/packages/icons-preact/rollup.config.mjs index 60f3360f0..42a61e9f2 100644 --- a/packages/icons-preact/rollup.config.mjs +++ b/packages/icons-preact/rollup.config.mjs @@ -1,12 +1,13 @@ import fs from 'fs' import { getRollupPlugins } from '../../.build/build-icons.mjs' +import dts from "rollup-plugin-dts"; const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8')) const packageName = '@tabler/icons-preact'; const outputFileName = 'tabler-icons-preact'; const outputDir = 'dist'; -const inputs = ['./src/tabler-icons-preact.js']; +const inputs = ['./src/tabler-icons-preact.ts']; const bundles = [ { format: 'umd', @@ -24,11 +25,6 @@ const bundles = [ inputs, outputDir, }, - { - format: 'es', - inputs, - outputDir, - }, { format: 'esm', inputs, @@ -38,30 +34,39 @@ const bundles = [ ]; const configs = bundles - .map(({ inputs, outputDir, format, minify, preserveModules }) => - inputs.map(input => ({ - input, - plugins: getRollupPlugins(pkg, minify), - external: ['preact', 'prop-types'], - output: { - name: packageName, - ...(preserveModules - ? { - dir: `${outputDir}/${format}`, - } - : { - file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`, - }), - preserveModules, - format, - sourcemap: true, - globals: { - preact: 'preact', - 'prop-types': 'PropTypes', - }, - }, - })), - ) - .flat(); + .map(({ inputs, outputDir, format, minify, preserveModules }) => + inputs.map(input => ({ + input, + plugins: getRollupPlugins(pkg, minify), + external: ['preact', 'prop-types'], + output: { + name: packageName, + ...(preserveModules + ? { + dir: `${outputDir}/${format}`, + } + : { + file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`, + }), + preserveModules, + format, + 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 +]; diff --git a/packages/icons-preact/src/aliases.ts b/packages/icons-preact/src/aliases.ts new file mode 100644 index 000000000..e62d20b61 --- /dev/null +++ b/packages/icons-preact/src/aliases.ts @@ -0,0 +1,3 @@ +export { default as IconAaa } from './icons/IconCircle'; +export { default as IconBbb } from './icons/IconSquare'; +export { default as IconCcc } from './icons/IconSquare'; diff --git a/packages/icons-preact/src/createPreactComponent.js b/packages/icons-preact/src/createPreactComponent.js deleted file mode 100644 index 78f76f156..000000000 --- a/packages/icons-preact/src/createPreactComponent.js +++ /dev/null @@ -1,23 +0,0 @@ -import { h, toChildArray } from 'preact'; -import defaultAttributes from './defaultAttributes'; - -export default (iconName, iconNamePascal, iconNode) => { - const Component = ({ color = 'currentColor', size = 24, stroke = 2, children, ...rest }) => - h( - 'svg', - { - ...defaultAttributes, - width: size, - height: size, - stroke: color, - 'stroke-width': stroke, - class: `tabler-icon tabler-icon-${iconName}`, - ...rest, - }, - [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)], - ); - - Component.displayName = `${iconNamePascal}`; - - return Component; -}; diff --git a/packages/icons-preact/src/createPreactComponent.ts b/packages/icons-preact/src/createPreactComponent.ts new file mode 100644 index 000000000..ed60a15f4 --- /dev/null +++ b/packages/icons-preact/src/createPreactComponent.ts @@ -0,0 +1,36 @@ +import { h, toChildArray } from 'preact'; +import defaultAttributes from './defaultAttributes'; +import type { Icon, IconNode, IconProps } from './types'; + +const createPreactComponent = ( + iconName: string, + iconNamePascal: string, + iconNode: IconNode +): Icon => { + const Component = ({ + color = 'currentColor', + size = 24, + strokeWidth = 2, + children, + class: classes = '', + ...rest + }: IconProps) => + h( + 'svg', + { + ...defaultAttributes, + width: String(size), + height: size, + stroke: color, + strokeWidth: strokeWidth, + class: [`tabler-icon`, `tabler-icon-${iconName}`, classes].join(' '), + }, + [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)] + ); + + Component.displayName = `${iconNamePascal}`; + + return Component; +}; + +export default createPreactComponent; diff --git a/packages/icons-preact/src/defaultAttributes.js b/packages/icons-preact/src/defaultAttributes.ts similarity index 50% rename from packages/icons-preact/src/defaultAttributes.js rename to packages/icons-preact/src/defaultAttributes.ts index 8ae7d46ea..550697042 100644 --- a/packages/icons-preact/src/defaultAttributes.js +++ b/packages/icons-preact/src/defaultAttributes.ts @@ -1,3 +1,5 @@ +import type { JSX } from 'preact'; + export default { xmlns: 'http://www.w3.org/2000/svg', width: 24, @@ -5,7 +7,7 @@ export default { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', - 'stroke-width': 2, - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', -}; + 'strokeWidth': 2, + 'strokeLinecap': 'round', + 'strokeLinejoin': 'round', +} satisfies JSX.SVGAttributes; diff --git a/packages/icons-preact/src/tabler-icons-preact.js b/packages/icons-preact/src/tabler-icons-preact.js deleted file mode 100644 index 70f99d97d..000000000 --- a/packages/icons-preact/src/tabler-icons-preact.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from './icons'; -export { default as createReactComponent } from './createPreactComponent'; diff --git a/packages/icons-preact/src/tabler-icons-preact.ts b/packages/icons-preact/src/tabler-icons-preact.ts new file mode 100644 index 000000000..4db406fd6 --- /dev/null +++ b/packages/icons-preact/src/tabler-icons-preact.ts @@ -0,0 +1,7 @@ +export * from './icons/index'; +export * as icons from './icons/index'; +export * from './aliases'; + +export { default as createReactComponent } from './createPreactComponent'; + +export type { IconNode, IconProps, Icon } from './types'; diff --git a/packages/icons-preact/src/types.ts b/packages/icons-preact/src/types.ts new file mode 100644 index 000000000..39e9b7e7e --- /dev/null +++ b/packages/icons-preact/src/types.ts @@ -0,0 +1,12 @@ +import type { FunctionComponent, JSX } from 'preact'; + +export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record][]; + +export interface IconProps + extends Partial> { + color?: string; + size?: string | number; + stroke?: string | number; +} + +export type Icon = FunctionComponent; diff --git a/packages/icons-preact/tsconfig.json b/packages/icons-preact/tsconfig.json new file mode 100644 index 000000000..23e3877e3 --- /dev/null +++ b/packages/icons-preact/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "strict": true, + "declaration": false, + "noEmitOnError": true, + "noEmit": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "node", + "module": "ESNext", + "target": "ESNext", + "esModuleInterop": true, + "isolatedModules": true, + "lib": ["esnext", "dom"], + "skipLibCheck": true, + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "downlevelIteration": true, + "sourceMap": true, + "outDir": "./dist", + "jsx": "react-jsx" + }, + "exclude": ["**/node_modules"] +} diff --git a/packages/icons-react/rollup.config.mjs b/packages/icons-react/rollup.config.mjs index c84cee9e0..21e501718 100644 --- a/packages/icons-react/rollup.config.mjs +++ b/packages/icons-react/rollup.config.mjs @@ -68,4 +68,5 @@ export default [ }], plugins: [dts()], }, - ...configs]; + ...configs +]; diff --git a/packages/icons-react/src/createReactComponent.ts b/packages/icons-react/src/createReactComponent.ts index b20eb496c..f7c79a074 100644 --- a/packages/icons-react/src/createReactComponent.ts +++ b/packages/icons-react/src/createReactComponent.ts @@ -3,7 +3,7 @@ import { createElement, } from 'react'; import defaultAttributes from './defaultAttributes'; -import { IconNode, IconProps } from './types'; +import type { IconNode, IconProps } from './types'; const createReactComponent = (iconName: string, iconNamePascal: string, iconNode: IconNode) => { const Component = forwardRef( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 593849632..bba799f0d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -190,8 +190,11 @@ importers: specifier: ^29.4.1 version: 29.4.2 preact: - specifier: ^10.11.3 + specifier: ^10.5.13 version: 10.11.3 + typescript: + specifier: ^5.3.3 + version: 5.3.3 packages/icons-react: dependencies: