converting rollup config to TS

country-regions · Dec 5, 2024 · ffb2b63 · ffb2b63
1 parent 87a9ff1
commit ffb2b63
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 76 deletions.
diff --git a/...ector/rollup-plugin-parse-country-list.js → ...onfig/rollup-plugin-parse-country-list.ts b/...ector/rollup-plugin-parse-country-list.js → ...onfig/rollup-plugin-parse-country-list.ts
@@ -6,17 +6,9 @@
  * is used with the rollup build to generate a package with a smaller subset of data. See here for more info:
  * https://github.com/country-regions/react-country-region-selector?tab=readme-ov-file#command-line
  */
-module.exports = (options = {}) => {
-  const convertFormat = (countries) => {
-    return countries.map((countryData) => [
-      countryData.countryName,
-      countryData.countryShortCode,
-      countryData.regions
-        .map((regionData) => `${regionData.name}~${regionData.shortCode}`)
-        .join('|'),
-    ]);
-  };
+import { minifyCountryData } from '../src/helpers';
 
+export default (options = {}) => {
   return {
     name: 'ParseCountryList',
     transform: (source, id) => {
@@ -36,7 +28,7 @@ module.exports = (options = {}) => {
 
       // and return the converted data structure for bundling with the script
       return {
-        code: JSON.stringify(convertFormat(json)),
+        code: JSON.stringify(minifyCountryData(json)),
         map: { mappings: '' },
       };
     },

diff --git a/packages/react-country-region-selector/config/rollup.config.ts b/packages/react-country-region-selector/config/rollup.config.ts
@@ -0,0 +1,64 @@
+import babel from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import url from '@rollup/plugin-url';
+import json from '@rollup/plugin-json';
+import terser from '@rollup/plugin-terser';
+import pkg from '../package.json' with { type: 'json' };
+import argv from 'minimist';
+import parseCountryList from './rollup-plugin-parse-country-list';
+import typescript from '@rollup/plugin-typescript';
+import { dts } from 'rollup-plugin-dts';
+import type { RollupOptions } from 'rollup';
+
+const args = argv(process.argv.slice(2));
+
+// e.g. rollup -c --config-countries=GB,CA,US
+let countries = [];
+if (args.hasOwnProperty('config-countries')) {
+  countries = args['config-countries'].split(',');
+}
+
+const config: RollupOptions[] = [
+  {
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+        sourcemap: true,
+        compact: true,
+      },
+      {
+        file: pkg.module,
+        format: 'es',
+        sourcemap: true,
+        compact: true,
+      },
+    ],
+    plugins: [
+      parseCountryList({ countries }),
+      json(),
+      url(),
+      babel({
+        exclude: 'node_modules/**',
+
+        // TODO check https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
+        babelHelpers: 'bundled',
+      }),
+      resolve({
+        extensions: ['.ts', '.tsx', '.js'],
+      }),
+      terser(),
+      typescript({}),
+    ],
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
+  },
+
+  {
+    input: './src/types.d.ts',
+    output: [{ file: 'dist/types.d.ts', format: 'es' }],
+    plugins: [dts()],
+  },
+];
+
+export default config;
diff --git a/packages/react-country-region-selector/package.json b/packages/react-country-region-selector/package.json
@@ -11,11 +11,10 @@
   "main": "dist/rcrs.js",
   "module": "dist/rcrs.es.js",
   "types": "./dist/types.d.ts",
-  "jsnext:main": "dist/rcrs.es.js",
   "scripts": {
     "test": "jest",
-    "build": "rollup -c",
-    "dev": "rollup -c -w"
+    "build": "rollup --config config/rollup.config.ts --configPlugin typescript",
+    "dev": "rollup -c -w --config config/rollup.config.ts --configPlugin typescript"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

diff --git a/packages/react-country-region-selector/rollup.config.js b/packages/react-country-region-selector/rollup.config.js
diff --git a/packages/react-country-region-selector/src/CountryDropdown.tsx b/packages/react-country-region-selector/src/CountryDropdown.tsx
@@ -1,5 +1,5 @@
 import { FC, useMemo } from 'react';
-import CountryRegionData from 'country-region-data/data.json';
+import CountryRegionData from 'country-region-data/data.json' with { type: 'json' };
 import { filterCountries, defaultRender } from './helpers';
 import type {
   CountryDropdownProps,

diff --git a/packages/react-country-region-selector/src/RegionDropdown.tsx b/packages/react-country-region-selector/src/RegionDropdown.tsx
@@ -1,5 +1,5 @@
 import { FC, useMemo } from 'react';
-import CountryRegionData from '../node_modules/country-region-data/data.json';
+import CountryRegionData from '../node_modules/country-region-data/data.json' with { type: 'json' };
 import { defaultRender, filterRegions, findDuplicates } from './helpers';
 import * as C from './constants';
 import type {

diff --git a/packages/react-country-region-selector/src/helpers.tsx b/packages/react-country-region-selector/src/helpers.tsx
@@ -94,3 +94,13 @@ export const defaultRender = (data: RenderData) => {
     </select>
   );
 };
+
+export const minifyCountryData = (countries) => {
+  return countries.map((countryData) => [
+    countryData.countryName,
+    countryData.countryShortCode,
+    countryData.regions
+      .map((regionData) => `${regionData.name}~${regionData.shortCode}`)
+      .join('|'),
+  ]);
+};
diff --git a/packages/react-country-region-selector/tsconfig.json b/packages/react-country-region-selector/tsconfig.json
@@ -3,8 +3,10 @@
   "compilerOptions": {
     "declaration": true,
     "outDir": "dist",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
     "types": ["@testing-library/jest-dom"]
   },
-  "include": ["src"],
+  "include": ["src", "config"],
   "exclude": ["node_modules", "dist"]
 }