From ffb2b63a9775dedc1af1f1851cbadcd7b951b556 Mon Sep 17 00:00:00 2001 From: Ben Keen Date: Wed, 4 Dec 2024 22:40:07 -0800 Subject: [PATCH] converting rollup config to TS --- .../rollup-plugin-parse-country-list.ts} | 14 +--- .../config/rollup.config.ts | 64 +++++++++++++++++++ .../package.json | 5 +- .../rollup.config.js | 59 ----------------- .../src/CountryDropdown.tsx | 2 +- .../src/RegionDropdown.tsx | 2 +- .../src/helpers.tsx | 10 +++ .../tsconfig.json | 4 +- 8 files changed, 84 insertions(+), 76 deletions(-) rename packages/react-country-region-selector/{rollup-plugin-parse-country-list.js => config/rollup-plugin-parse-country-list.ts} (73%) create mode 100644 packages/react-country-region-selector/config/rollup.config.ts delete mode 100644 packages/react-country-region-selector/rollup.config.js diff --git a/packages/react-country-region-selector/rollup-plugin-parse-country-list.js b/packages/react-country-region-selector/config/rollup-plugin-parse-country-list.ts similarity index 73% rename from packages/react-country-region-selector/rollup-plugin-parse-country-list.js rename to packages/react-country-region-selector/config/rollup-plugin-parse-country-list.ts index 903b264..f463813 100644 --- a/packages/react-country-region-selector/rollup-plugin-parse-country-list.js +++ b/packages/react-country-region-selector/config/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 new file mode 100644 index 0000000..89a3cc5 --- /dev/null +++ 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 index fdedc1b..0c497ee 100644 --- 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 deleted file mode 100644 index 5c31be4..0000000 --- a/packages/react-country-region-selector/rollup.config.js +++ /dev/null @@ -1,59 +0,0 @@ -const babel = require('@rollup/plugin-babel'); -const resolve = require('@rollup/plugin-node-resolve'); -const url = require('@rollup/plugin-url'); -const json = require('@rollup/plugin-json'); -const terser = require('@rollup/plugin-terser'); -const pkg = require('./package.json'); -const argv = require('minimist')(process.argv.slice(2)); -const parseCountryList = require('./rollup-plugin-parse-country-list'); -const typescript = require('@rollup/plugin-typescript'); -const { dts } = require('rollup-plugin-dts'); - -// e.g. rollup -c --config-countries=GB,CA,US -let countries = []; -if (argv.hasOwnProperty('config-countries')) { - countries = argv['config-countries'].split(','); -} - -module.exports = [ - { - 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/rcrs.types.ts', - // output: [{ file: 'dist/types.d.ts', format: 'es' }], - // plugins: [dts()], - // }, -]; diff --git a/packages/react-country-region-selector/src/CountryDropdown.tsx b/packages/react-country-region-selector/src/CountryDropdown.tsx index 60b64bd..92946d6 100644 --- 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 index 7db5d04..0cf1cf5 100644 --- 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 index cbb0b1d..63f0341 100644 --- 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) => { ); }; + +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 index d2d8979..5a686bf 100644 --- 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"] }