feat: add script to generate d.ts files

.eslintignore

@@ -8,3 +8,4 @@
 /packages/doc/.cache/**
 /packages/yoga/node_modules/**
 dist
+*.d.ts

package.json

@@ -46,6 +46,7 @@
     "@testing-library/react-native": "^12.1.3",
     "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-module-resolver": "^3.2.0",
+    "commander": "^11.0.0",
     "commitizen": "^4.0.3",
     "core-js": "^2.6.5",
     "cz-conventional-changelog": "^3.0.2",
@@ -56,8 +57,9 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "fs-extra": "^8.1.0",
+    "fs-extra": "^11.2.0",
     "git-last-commit": "^1.0.0",
+    "glob": "^10.3.12",
     "husky": "3.0.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",

packages/icons/package.json

@@ -20,12 +20,14 @@
     "url": "git+https://github.com/Gympass/yoga.git"
   },
   "scripts": {
-    "prebuild": "rm -rf ./dist",
-    "build": "yarn build:types && yarn build:cjs && yarn build:esm && yarn build:web && yarn build:native",
-    "build:types": "tsup --outDir dist/typings --dts-only",
+    "prebuild": "rm -rf ./dist && tsc -p ./tsconfig.json",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:native",
+    "postbuild": "yarn build:types && yarn build:types:native",
     "build:cjs": "tsup --outDir dist/cjs --format=cjs",
     "build:esm": "tsup --format=esm --legacy-output",
-    "build:native": "yarn prebuild && tsup --outDir dist/cjs/svg --format=cjs --define.target=native",
+    "build:native": "tsup src/**/*.svg --outDir dist/cjs/svg --format=cjs -- native",
+    "build:types": "node scripts/generate-d-ts.js src/**/*.ts",
+    "build:types:native": "yarn build:types --native",
     "prepublishOnly": "node ../../scripts/prepublish.js"
   },
   "peerDependencies": {

packages/icons/scripts/generate-d-ts.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-restricted-syntax */
+const fs = require('fs-extra');
+const { Command } = require('commander');
+const { globSync } = require('glob');
+
+const CONTENT_WEB = `import type { JSX, SVGProps } from 'react';
+type SVGWebComponent = (props: SVGProps<SVGSVGElement>) => JSX.Element;\n
+`;
+const CONTENT_NATIVE = `import type { JSX } from 'react';
+import type { SvgProps } from 'react-native-svg';
+type SVGNativeComponent = (props: SvgProps) => JSX.Element;\n
+`;
+
+const program = new Command();
+
+program
+  .argument('<entries...>', 'specify the entries', value => value.split(','))
+  .option('-n, --native', 'generate types for react-native', false)
+  .action((entries, options) => {
+    let content = options.native ? CONTENT_NATIVE : CONTENT_WEB;
+    const files = globSync(entries);
+
+    for (let i = 0; i < files.length; i++) {
+      const file = fs.readFileSync(`./${files[i]}`, {
+        encoding: 'utf8',
+      });
+      const matches = file.matchAll(/import\s+([A-Za-z]+?[0-9]*?)\s+from/g);
+
+      for (const match of matches) {
+        content += options.native
+          ? `export declare const ${match[1]}: SVGNativeComponent; \n`
+          : `export declare const ${match[1]}: SVGWebComponent; \n`;
+      }
+    }
+    const dir = options.native ? 'native' : 'web';
+
+    fs.outputFileSync(`./dist/typings/${dir}/index.d.ts`, content);
+  });
+
+program.parse(process.argv);

packages/icons/src/flags.ts

@@ -186,7 +186,7 @@ import FlagYemen from './svg/flag_yemen.svg';
 import FlagZambia from './svg/flag_zambia.svg';
 import FlagZimbabwe from './svg/flag_zimbabwe.svg';
 
-export default {
+export {
   FlagAfghanistan,
   FlagAlbania,
   FlagAlgeria,

packages/icons/src/ui.ts

@@ -179,7 +179,7 @@ import YogaMat from './svg/yoga-mat.svg';
 import Youtube from './svg/youtube.svg';
 import Zen from './svg/zen.svg';
 
-export default {
+export {
   Accessibility,
   Accessible,
   AddBooking,

packages/icons/svgr-plugin.js

@@ -2,7 +2,7 @@ import { transform } from '@svgr/core';
 import { readFileSync } from 'fs';
 
 const plugin = (options = {}) => {
-  const { target, typescript } = options;
+  const { native } = options;
 
   return {
     name: 'svgr',
@@ -18,15 +18,14 @@ const plugin = (options = {}) => {
           svg,
           {
             plugins: ['@svgr/plugin-jsx'],
-            native: target === 'native',
-            typescript,
+            native,
           },
           { filePath: args.path },
         );
 
         return {
           contents,
-          loader: 'tsx',
+          loader: 'jsx',
         };
       });
     },

packages/icons/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "files": ["svg.d.ts"],
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}

packages/icons/tsup.config.ts

@@ -1,32 +1,27 @@
-import { defineConfig } from 'tsup'
-import svgr from './svgr-plugin'
+import { defineConfig } from 'tsup';
 import { replace } from 'esbuild-plugin-replace';
+import svgr from './svgr-plugin';
 
-export default defineConfig( opts => {
-  const { target } = opts.define || {};
-  const ext = target === 'native' ? '.native.js' : '.js';
-  const entry = target === 'native' ? ["src/**/*.svg"] : [
-    "src/index.ts",
-    "src/**/*.ts",
-    "src/**/*.svg"
-    ];
+export default defineConfig(options => {
+  const native = options['--'].includes('native');
 
   return {
-    name: "tsup",
-    entry,
+    entry: ['src/index.ts', 'src/**/*.ts', 'src/**/*.svg'],
     splitting: false,
     bundle: false,
+    treeshake: true,
+    minify: true,
     esbuildPlugins: [
-      svgr({ target, typescript: true }),
+      svgr({ native }),
       replace({
         include: /\.ts$/,
         values: {
-          '.svg': ''
+          '.svg': '',
         },
-       }),
+      }),
     ],
     outExtension: () => ({
-      js: ext,
+      js: native ? '.native.js' : '.js',
     }),
-   }
+  };
 });