Skip to content

Commit 7efe96c

Browse files
WesSouzaarturbien
WesSouza
authored and
arturbien
committed
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.
1 parent f7103b9 commit 7efe96c

File tree

11 files changed

+125
-71
lines changed

11 files changed

+125
-71
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
"@babel/plugin-transform-spread": "^7.18.9",
7575
"@babel/preset-env": "^7.18.10",
7676
"@babel/preset-typescript": "^7.18.6",
77+
"@rollup/plugin-typescript": "^8.3.4",
7778
"@storybook/addon-docs": "6.5.10",
7879
"@storybook/addon-storysource": "6.5.10",
7980
"@storybook/builder-webpack5": "^6.5.10",
@@ -115,7 +116,6 @@
115116
"rimraf": "^3.0.2",
116117
"rollup": "^2.77.2",
117118
"rollup-plugin-copy": "^3.4.0",
118-
"rollup-plugin-dts": "^4.2.2",
119119
"rollup-plugin-esbuild": "^4.9.1",
120120
"rollup-plugin-replace": "^2.2.0",
121121
"semantic-release": "^19.0.3",

‎rollup.config.js‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,74 @@
1-
import esbuild from 'rollup-plugin-esbuild';
1+
import typescript from '@rollup/plugin-typescript';
22
import copy from 'rollup-plugin-copy';
3-
import dts from 'rollup-plugin-dts';
3+
import esbuild from 'rollup-plugin-esbuild';
44
import replace from 'rollup-plugin-replace';
5-
import packageJson from './package.json';
65

76
const NODE_ENV = process.env.NODE_ENV || 'development';
87

9-
const bundle = config => [
10-
{
11-
...config,
12-
external: id => !/^[./]/.test(id),
13-
plugins: [
14-
...config.plugins,
15-
replace({
16-
'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
17-
}),
18-
esbuild({ loaders: { '.js': 'jsx' } })
19-
]
20-
},
21-
{
22-
...config,
23-
output: config.output.dir
24-
? config.output
25-
: {
26-
file: packageJson.types,
27-
format: 'es'
28-
},
29-
external: id => !/^[./]/.test(id),
30-
plugins: [
31-
...config.plugins,
32-
replace({
33-
'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
34-
}),
35-
dts()
36-
]
37-
}
38-
];
8+
const baseBundle = {
9+
external: id => !/^[./]/.test(id),
10+
plugins: [
11+
replace({
12+
'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
13+
}),
14+
esbuild()
15+
]
16+
};
3917

4018
export default [
41-
...bundle({
42-
input: './src/index.ts',
19+
{
20+
...baseBundle,
21+
input: ['./src/index.ts', './src/types.ts'],
4322
output: [
4423
{
45-
file: packageJson.main,
24+
dir: 'dist',
25+
entryFileNames: '[name].js',
26+
exports: 'auto',
4627
format: 'cjs',
47-
sourcemap: true
28+
preserveModules: true,
29+
preserveModulesRoot: 'src'
4830
},
4931
{
50-
file: packageJson.module,
32+
dir: 'dist',
33+
entryFileNames: '[name].mjs',
34+
exports: 'auto',
5135
format: 'es',
52-
sourcemap: true
36+
preserveModules: true,
37+
preserveModulesRoot: 'src'
5338
}
5439
],
55-
plugins: []
56-
}),
57-
...bundle({
40+
plugins: [
41+
...baseBundle.plugins,
42+
typescript({
43+
tsconfig: './tsconfig.build.index.json',
44+
declaration: true,
45+
declarationDir: 'dist'
46+
})
47+
]
48+
},
49+
{
50+
...baseBundle,
5851
input: './src/common/themes/index.ts',
5952
output: {
6053
dir: 'dist/themes',
6154
exports: 'default',
62-
format: 'cjs'
55+
format: 'cjs',
56+
preserveModules: true,
57+
preserveModulesRoot: 'src/common/themes'
6358
},
64-
preserveModules: true,
6559
plugins: [
60+
...baseBundle.plugins,
6661
copy({
6762
targets: [
6863
{ src: './src/assets/fonts/dist/*', dest: './dist/fonts' },
6964
{ src: './src/assets/images/*', dest: './dist/images' }
7065
]
66+
}),
67+
typescript({
68+
tsconfig: './tsconfig.build.themes.json',
69+
declaration: true,
70+
declarationDir: 'dist/themes'
7171
})
7272
]
73-
})
73+
}
7474
];

‎src/Select/Select.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -590,9 +590,14 @@ function SelectInner<T>(
590590
);
591591
}
592592

593+
/* eslint-disable no-use-before-define */
593594
const Select = forwardRef(SelectInner) as <T>(
594-
// eslint-disable-next-line no-use-before-define
595595
props: SelectProps<T> & { ref?: React.ForwardedRef<SelectRef> }
596-
) => ReturnType<typeof SelectInner>;
596+
) => ReturnType<typeof SelectInner<T>>;
597+
/* eslint-enable no-use-before-define */
598+
599+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
600+
// @ts-ignore
601+
Select.displayName = 'Select';
597602

598603
export { Select, SelectProps };

‎src/Toolbar/Toolbar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,6 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
2424
);
2525
});
2626

27+
Toolbar.displayName = 'Toolbar';
28+
2729
export { Toolbar };

‎src/TreeView/TreeView.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -381,13 +381,15 @@ function TreeInner<T>(
381381
);
382382
}
383383

384+
/* eslint-disable no-use-before-define */
384385
const TreeView = forwardRef(TreeInner) as <T>(
385386
// eslint-disable-next-line no-use-before-define
386387
props: TreeViewProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
387-
) => ReturnType<typeof TreeInner>;
388+
) => ReturnType<typeof TreeInner<T>>;
389+
/* eslint-enable no-use-before-define */
388390

389391
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
390392
// @ts-ignore
391-
TreeView.displayProps = 'TreeView';
393+
TreeView.displayName = 'TreeView';
392394

393395
export { TreeView, TreeViewProps, TreeLeaf };

‎src/Window/WindowHeader.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,6 @@ const WindowHeader = forwardRef<HTMLDivElement, WindowHeaderProps>(
4646
}
4747
);
4848

49+
WindowHeader.displayName = 'WindowHeader';
50+
4951
export { WindowHeader, WindowHeaderProps };

‎src/types.tsx‎ renamed to ‎src/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import { ComponentType } from 'react';
22

33
import { Color, Theme, WindowsTheme } from './common/themes/types';
44

@@ -15,7 +15,7 @@ export type CommonStyledProps = {
1515
* "as" polymorphic prop allows to render a different HTML element or React component
1616
* @see {@link https://styled-components.com/docs/api#as-polymorphic-prop}
1717
*/
18-
as?: string | React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
18+
as?: string | ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
1919
};
2020

2121
export type CommonThemeProps = {

‎tsconfig.build.index.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"emitDeclarationOnly": true,
5+
"outDir": "./dist",
6+
"rootDir": "./src"
7+
},
8+
"include": [
9+
"types/global.d.ts",
10+
"types/themes.d.ts",
11+
"src/**/*.ts",
12+
"src/*/*.tsx"
13+
],
14+
"exclude": [
15+
"**/*.spec.ts",
16+
"**/*.spec.tsx",
17+
"**/*.stories.ts",
18+
"**/*.stories.tsx",
19+
]
20+
}

‎tsconfig.build.themes.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"emitDeclarationOnly": true,
5+
"outDir": "./dist/themes",
6+
"rootDir": "./src/common/themes",
7+
},
8+
"include": [
9+
"src/common/themes/*.ts",
10+
"src/common/themes/*.tsx"
11+
]
12+
}

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"resolveJsonModule": true,
3131
"rootDir": "./",
3232
"skipLibCheck": true,
33-
"sourceMap": true,
33+
"sourceMap": false,
3434
"strict": true,
3535
"strictFunctionTypes": true,
3636
"strictNullChecks": true,

0 commit comments

Comments
 (0)