Skip to content

Commit 640ce14

Browse files
Utzel-ButzelUtzel-Butzel
committed
fix(package): using rollup for smaller and faster package
1 parent 6427b30 commit 640ce14

File tree

14 files changed

+917
-701
lines changed

14 files changed

+917
-701
lines changed

‎.npmignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ tests
77
config
88
assets
99
examples
10-
lib
1110
scripts
1211
*.stories.js
1312
*-story.js

‎Staticfile‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
"version": "1.5.0",
44
"description": "WFP UI Kit Next",
55
"license": "Apache-2",
6-
"main": "dist/bundle.js",
7-
"module": "dist/bundle.js",
6+
"main": "lib/index.js",
7+
"module": "es/index.js",
88
"main:scss": "source/globals/styles.scss",
99
"sideEffects": false,
1010
"scripts": {
11-
"build:legacy": "node scripts/build.js && yarn build:css && yarn build:cssmin",
11+
"build": "yarn build:rollup && yarn build:css && yarn build:cssmin",
12+
"build:rollup": "yarn rollup -c",
1213
"build:storybook": "rm -r -f docs && build-storybook -s ./src/assets -o docs",
13-
"build": "webpack --mode development",
1414
"ci-check": "yarn prettier:diff && yarn lint && yarn test --runInBand && yarn test-ssr",
1515
"build:cssmin": "node-sass ./src/globals/scss/styles.scss ./assets/css/styles.min.css --output-style compressed && postcss ./assets/css/styles.min.css --no-map -u autoprefixer -rs",
1616
"build:css": "node-sass ./src/globals/scss -o ./assets/css --output-style compressed --source-map true && postcss ./assets/css/styles.css -d ./assets/css/ --use autoprefixer",
@@ -119,6 +119,13 @@
119119
"lodash.isequal": "^4.5.0",
120120
"lodash.omit": "^4.5.0",
121121
"react-dropzone": "^10.2.2",
122+
"rollup": "^2.23.0",
123+
"rollup-plugin-babel": "^4.4.0",
124+
"rollup-plugin-commonjs": "^10.1.0",
125+
"rollup-plugin-node-resolve": "^5.2.0",
126+
"rollup-plugin-replace": "^2.2.0",
127+
"rollup-plugin-strip-banner": "^2.0.0",
128+
"rollup-plugin-terser": "^6.1.0",
122129
"story-description-loader": "^1.0.0",
123130
"style-loader": "^1.1.4",
124131
"warning": "^4.0.3",
@@ -144,6 +151,7 @@
144151
"add": "^2.0.6",
145152
"all-contributors-cli": "^6.14.1",
146153
"autoprefixer": "^9.7.6",
154+
"browserslist-config-carbon": "^10.4.0",
147155
"chalk": "^4.0.0",
148156
"clean-webpack-plugin": "^3.0.0",
149157
"cli-table": "^0.3.0",

‎rollup.config.js‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
('use strict');
9+
10+
const babel = require('rollup-plugin-babel');
11+
const commonjs = require('rollup-plugin-commonjs');
12+
const resolve = require('rollup-plugin-node-resolve');
13+
const replace = require('rollup-plugin-replace');
14+
const stripBanner = require('rollup-plugin-strip-banner');
15+
const { terser } = require('rollup-plugin-terser');
16+
const packageJson = require('./package.json');
17+
18+
const baseConfig = {
19+
input: './src/index.js',
20+
external: [
21+
...Object.keys(packageJson.peerDependencies),
22+
...Object.keys(packageJson.dependencies),
23+
'prop-types',
24+
],
25+
plugins: [
26+
resolve(),
27+
commonjs({
28+
include: /node_modules/,
29+
namedExports: {
30+
'react/index.js': [
31+
'Children',
32+
'Component',
33+
'PureComponent',
34+
'Fragment',
35+
'PropTypes',
36+
'createElement',
37+
],
38+
'react-dom/index.js': ['render'],
39+
'react-is/index.js': ['isForwardRef'],
40+
},
41+
}),
42+
babel({
43+
babelrc: false,
44+
exclude: ['node_modules/**'],
45+
presets: [
46+
[
47+
'@babel/preset-env',
48+
{
49+
modules: false,
50+
targets: {
51+
browsers: ['extends browserslist-config-carbon'],
52+
},
53+
},
54+
],
55+
'@babel/preset-react',
56+
],
57+
plugins: [
58+
'dev-expression',
59+
'@babel/plugin-syntax-dynamic-import',
60+
'@babel/plugin-syntax-import-meta',
61+
'@babel/plugin-proposal-class-properties',
62+
'@babel/plugin-proposal-export-namespace-from',
63+
'@babel/plugin-proposal-export-default-from',
64+
],
65+
}),
66+
stripBanner(),
67+
],
68+
};
69+
70+
const umdExternalDependencies = Object.keys(
71+
packageJson.peerDependencies
72+
); /*.filter((dependency) => dependency !== 'carbon-components')*/
73+
74+
const umdBundleConfig = {
75+
input: baseConfig.input,
76+
external: [...umdExternalDependencies, 'prop-types'],
77+
output: {
78+
name: 'WfpUiReact',
79+
format: 'umd',
80+
globals: {
81+
classnames: 'classNames',
82+
'prop-types': 'PropTypes',
83+
react: 'React',
84+
'react-dom': 'ReactDOM',
85+
'@wfp/icons': '@wfp/icons',
86+
},
87+
},
88+
};
89+
90+
module.exports = [
91+
// TODO: update configuration to correctly support tree-shaking for React
92+
// components. See:
93+
// https://github.com/carbon-design-system/carbon/issues/5442
94+
// Generates the following bundles:
95+
// ESM: es/index.js
96+
// CommonJS: lib/index.js
97+
{
98+
...baseConfig,
99+
output: [
100+
{
101+
format: 'esm',
102+
file: 'es/index.js',
103+
},
104+
{
105+
format: 'cjs',
106+
file: 'lib/index.js',
107+
},
108+
],
109+
},
110+
111+
// Generate the development UMD bundle:
112+
// UMD: umd/carbon-components-react.js
113+
{
114+
...umdBundleConfig,
115+
plugins: [
116+
...baseConfig.plugins,
117+
replace({
118+
'process.env.NODE_ENV': JSON.stringify('development'),
119+
}),
120+
],
121+
output: {
122+
...umdBundleConfig.output,
123+
file: 'umd/wfp-ui-react.js',
124+
},
125+
},
126+
127+
// Generate the production UMD bundle:
128+
// UMD: umd/carbon-components-react.min.js
129+
{
130+
...umdBundleConfig,
131+
plugins: [
132+
...baseConfig.plugins,
133+
replace({
134+
'process.env.NODE_ENV': JSON.stringify('production'),
135+
}),
136+
terser(),
137+
],
138+
output: {
139+
...umdBundleConfig.output,
140+
file: 'umd/wfp-ui-react.min.js',
141+
},
142+
},
143+
];

‎src/components/Input/_input.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
.#{$prefix}--input-wrapper {
1616
display: flex;
1717
order: 3;
18+
width: 100%;
1819
}
1920
.#{$prefix}--input {
2021
@include reset;
@@ -53,7 +54,8 @@
5354
@include read-only('border');
5455
}
5556
}
56-
.#{$prefix}--input-addon-before, .#{$prefix}--input-addon-after {
57+
.#{$prefix}--input-addon-before,
58+
.#{$prefix}--input-addon-after {
5759
height: $input-height;
5860
line-height: $input-height;
5961
padding: 0 $spacing-xs;

‎src/components/Link/Link.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4-
import styles from './link.module.scss';
4+
5+
import settings from '../../globals/js/settings';
6+
const { prefix } = settings;
57

68
/**
79
Links are typically used as a means of navigation either within the application, to a place outside, or to a resource. For anything else, especially things that change data and actions, you should be using a `button`.
@@ -16,7 +18,12 @@ Links can have the same properties as a regular `<a>`-element.
1618
*/
1719

1820
export const Link = ({ children, className, href, ...other }) => {
19-
const classNames = classnames(styles.link, className);
21+
const classNames = classnames(
22+
{
23+
[`${prefix}--link`]: true,
24+
},
25+
className
26+
);
2027
return (
2128
<a href={href} className={classNames} {...other}>
2229
{children}

src/components/Link/link.module.scss renamed to src/components/Link/_link.scss

File renamed without changes.

‎src/components/Select/Select.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ function Select(props) {
3434
...other
3535
} = props;
3636

37+
const usedId = id ? id : name;
38+
3739
const selectClasses = classNames({
3840
[`${prefix}--select`]: true,
3941
[`${prefix}--select--inline`]: inline,
@@ -54,7 +56,7 @@ function Select(props) {
5456
<select
5557
{...other}
5658
{...ariaProps}
57-
id={id}
59+
id={usedId}
5860
className={`${prefix}--select-input`}
5961
disabled={disabled || undefined}
6062
data-invalid={invalid || undefined}
@@ -88,7 +90,7 @@ Select.propTypes = {
8890
/**
8991
* Specify a custom `id` for the `<select>`
9092
*/
91-
id: PropTypes.string.isRequired,
93+
id: PropTypes.string,
9294

9395
/**
9496
* Specify whether you want the inline version of this control
@@ -154,7 +156,6 @@ Select.propTypes = {
154156

155157
Select.defaultProps = {
156158
disabled: false,
157-
labelText: 'Select',
158159
inline: false,
159160
iconDescription: 'open list of options',
160161
invalid: false,

‎src/components/Table/table.module.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
@import '../../globals/scss/typography';
99
@import '../../globals/scss/helper-mixins';
1010
@import '../../globals/scss/import-once';
11-
@import '../../globals/scss/css--reset';
1211

1312
@include exports('table') {
1413
.table {

‎src/components/TextInput/TextInput.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const TextInput = (props) => {
4141
};
4242

4343
return (
44-
<Input {...props} formItemClassName={textInputClasses}>
44+
<Input {...props} formItemClassName={formItemClassName}>
4545
{(e) => {
4646
return (
4747
<input

0 commit comments

Comments
 (0)