From f2499fd2192af01eb2bbe959fd547ff40e74a144 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Thu, 28 Jul 2022 16:59:28 -0400 Subject: [PATCH] build: update build to preserve modules and use @rollup/plugin-typescript This changes the main output to also preserve modules, allowing tree shaking when users build their projects. This also replaces rollup-plugin-dts with the more traditional @rollup/plugin-typescript, which exports type declarations for individual files fixing issues with themes imports. --- package.json | 2 +- rollup.config.js | 89 +++++++++++++++++++------------------ src/Select/Select.tsx | 9 +++- src/Toolbar/Toolbar.tsx | 2 + src/TreeView/TreeView.tsx | 6 ++- src/Window/WindowHeader.tsx | 2 + tsconfig.build.index.json | 20 +++++++++ tsconfig.build.themes.json | 12 +++++ yarn.lock | 47 ++++++++++++-------- 9 files changed, 123 insertions(+), 66 deletions(-) create mode 100644 tsconfig.build.index.json create mode 100644 tsconfig.build.themes.json diff --git a/package.json b/package.json index 540a717d..f530d16a 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "@babel/plugin-transform-spread": "^7.18.9", "@babel/preset-env": "^7.18.10", "@babel/preset-typescript": "^7.18.6", + "@rollup/plugin-typescript": "^8.3.4", "@storybook/addon-docs": "6.5.10", "@storybook/addon-storysource": "6.5.10", "@storybook/builder-webpack5": "^6.5.10", @@ -115,7 +116,6 @@ "rimraf": "^3.0.2", "rollup": "^2.77.2", "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-dts": "^4.2.2", "rollup-plugin-esbuild": "^4.9.1", "rollup-plugin-replace": "^2.2.0", "semantic-release": "^19.0.3", diff --git a/rollup.config.js b/rollup.config.js index 7c55ed1e..48ad9b52 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,74 +1,77 @@ -import esbuild from 'rollup-plugin-esbuild'; +import typescript from '@rollup/plugin-typescript'; import copy from 'rollup-plugin-copy'; -import dts from 'rollup-plugin-dts'; +import esbuild from 'rollup-plugin-esbuild'; import replace from 'rollup-plugin-replace'; -import packageJson from './package.json'; const NODE_ENV = process.env.NODE_ENV || 'development'; -const bundle = config => [ - { - ...config, - external: id => !/^[./]/.test(id), - plugins: [ - ...config.plugins, - replace({ - 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) - }), - esbuild({ loaders: { '.js': 'jsx' } }) - ] - }, - { - ...config, - output: config.output.dir - ? config.output - : { - file: packageJson.types, - format: 'es' - }, - external: id => !/^[./]/.test(id), - plugins: [ - ...config.plugins, - replace({ - 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) - }), - dts() - ] - } -]; +const baseBundle = { + external: id => !/^[./]/.test(id), + plugins: [ + replace({ + 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) + }), + esbuild() + ] +}; export default [ - ...bundle({ - input: './src/index.ts', + { + ...baseBundle, + input: ['./src/index.ts', './src/types.tsx'], output: [ { - file: packageJson.main, + dir: 'dist', + entryFileNames: '[name].js', + exports: 'auto', format: 'cjs', + preserveModules: true, + preserveModulesRoot: 'src', sourcemap: true }, { - file: packageJson.module, + dir: 'dist', + entryFileNames: '[name].mjs', + exports: 'auto', format: 'es', + preserveModules: true, + preserveModulesRoot: 'src', sourcemap: true } ], - plugins: [] - }), - ...bundle({ + plugins: [ + ...baseBundle.plugins, + typescript({ + tsconfig: './tsconfig.build.index.json', + declaration: true, + declarationDir: 'dist' + }) + ] + }, + { + ...baseBundle, input: './src/common/themes/index.ts', output: { dir: 'dist/themes', exports: 'default', - format: 'cjs' + format: 'cjs', + preserveModules: true, + preserveModulesRoot: 'src/common/themes', + sourcemap: true }, - preserveModules: true, plugins: [ + ...baseBundle.plugins, copy({ targets: [ { src: './src/assets/fonts/dist/*', dest: './dist/fonts' }, { src: './src/assets/images/*', dest: './dist/images' } ] + }), + typescript({ + tsconfig: './tsconfig.build.themes.json', + declaration: true, + declarationDir: 'dist/themes' }) ] - }) + } ]; diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx index fae7c642..e953246e 100644 --- a/src/Select/Select.tsx +++ b/src/Select/Select.tsx @@ -590,9 +590,14 @@ function SelectInner( ); } +/* eslint-disable no-use-before-define */ const Select = forwardRef(SelectInner) as ( - // eslint-disable-next-line no-use-before-define props: SelectProps & { ref?: React.ForwardedRef } -) => ReturnType; +) => ReturnType>; +/* eslint-enable no-use-before-define */ + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +Select.displayName = 'Select'; export { Select, SelectProps }; diff --git a/src/Toolbar/Toolbar.tsx b/src/Toolbar/Toolbar.tsx index 1991bafe..032897cd 100644 --- a/src/Toolbar/Toolbar.tsx +++ b/src/Toolbar/Toolbar.tsx @@ -24,4 +24,6 @@ const Toolbar = forwardRef(function Toolbar( ); }); +Toolbar.displayName = 'Toolbar'; + export { Toolbar }; diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index 60d3f43d..f8a85492 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -381,13 +381,15 @@ function TreeInner( ); } +/* eslint-disable no-use-before-define */ const TreeView = forwardRef(TreeInner) as ( // eslint-disable-next-line no-use-before-define props: TreeViewProps & { ref?: React.ForwardedRef } -) => ReturnType; +) => ReturnType>; +/* eslint-enable no-use-before-define */ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore -TreeView.displayProps = 'TreeView'; +TreeView.displayName = 'TreeView'; export { TreeView, TreeViewProps, TreeLeaf }; diff --git a/src/Window/WindowHeader.tsx b/src/Window/WindowHeader.tsx index 3cac885d..8c1bdd71 100644 --- a/src/Window/WindowHeader.tsx +++ b/src/Window/WindowHeader.tsx @@ -46,4 +46,6 @@ const WindowHeader = forwardRef( } ); +WindowHeader.displayName = 'WindowHeader'; + export { WindowHeader, WindowHeaderProps }; diff --git a/tsconfig.build.index.json b/tsconfig.build.index.json new file mode 100644 index 00000000..e175132d --- /dev/null +++ b/tsconfig.build.index.json @@ -0,0 +1,20 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDeclarationOnly": true, + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "types/global.d.ts", + "types/themes.d.ts", + "src/**/*.ts", + "src/*/*.tsx" + ], + "exclude": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.stories.ts", + "**/*.stories.tsx", + ] +} diff --git a/tsconfig.build.themes.json b/tsconfig.build.themes.json new file mode 100644 index 00000000..f97f6412 --- /dev/null +++ b/tsconfig.build.themes.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDeclarationOnly": true, + "outDir": "./dist/themes", + "rootDir": "./src/common/themes", + }, + "include": [ + "src/common/themes/*.ts", + "src/common/themes/*.tsx" + ] +} diff --git a/yarn.lock b/yarn.lock index b48cb1c3..c9ee511b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20,7 +20,7 @@ call-me-maybe "^1.0.1" js-yaml "^4.1.0" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3": +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== @@ -2112,6 +2112,23 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== +"@rollup/plugin-typescript@^8.3.4": + version "8.3.4" + resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.3.4.tgz#45cdc0787b658b37d0362c705d8de86bc8bc040e" + integrity sha512-wt7JnYE9antX6BOXtsxGoeVSu4dZfw0dU3xykfOQ4hC3EddxRbVG/K0xiY1Wup7QOHJcjLYXWAn0Kx9Z1SBHHg== + dependencies: + "@rollup/pluginutils" "^3.1.0" + resolve "^1.17.0" + +"@rollup/pluginutils@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b" + integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg== + dependencies: + "@types/estree" "0.0.39" + estree-walker "^1.0.1" + picomatch "^2.2.2" + "@rollup/pluginutils@^4.1.1": version "4.2.1" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d" @@ -3118,6 +3135,11 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2" integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ== +"@types/estree@0.0.39": + version "0.0.39" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" + integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== + "@types/estree@^0.0.51": version "0.0.51" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40" @@ -7440,6 +7462,11 @@ estree-walker@^0.6.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== +estree-walker@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" + integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== + estree-walker@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" @@ -11415,13 +11442,6 @@ magic-string@^0.25.2: dependencies: sourcemap-codec "^1.4.8" -magic-string@^0.26.1: - version "0.26.2" - resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432" - integrity sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A== - dependencies: - sourcemap-codec "^1.4.8" - make-dir@^2.0.0, make-dir@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" @@ -14293,7 +14313,7 @@ resolve.exports@^1.1.0: resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9" integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ== -resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2: +resolve@^1.10.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2: version "1.22.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== @@ -14392,15 +14412,6 @@ rollup-plugin-copy@^3.4.0: globby "10.0.1" is-plain-object "^3.0.0" -rollup-plugin-dts@^4.2.2: - version "4.2.2" - resolved "https://registry.yarnpkg.com/rollup-plugin-dts/-/rollup-plugin-dts-4.2.2.tgz#82876b8784213af29b02cf260b45e404ff835ce1" - integrity sha512-A3g6Rogyko/PXeKoUlkjxkP++8UDVpgA7C+Tdl77Xj4fgEaIjPSnxRmR53EzvoYy97VMVwLAOcWJudaVAuxneQ== - dependencies: - magic-string "^0.26.1" - optionalDependencies: - "@babel/code-frame" "^7.16.7" - rollup-plugin-esbuild@^4.9.1: version "4.9.1" resolved "https://registry.yarnpkg.com/rollup-plugin-esbuild/-/rollup-plugin-esbuild-4.9.1.tgz#369d137e2b1542c8ee459495fd4f10de812666aa"