Merge pull request #71 from QueroDelivery/perf-improve-build-size

build: improving build pipeline and reduce bundle size

.github/workflows/pull_request_opened.yml

@@ -12,7 +12,7 @@ jobs:
     continue-on-error: false
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/push.yml

@@ -11,7 +11,7 @@ jobs:
     continue-on-error: false
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -23,3 +23,7 @@ package-lock.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.tool-versions
+
+.stats.html

example/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "private": true,
   "engines": {
-    "node": ">=14.x",
+    "node": "16.x",
     "yarn": "1.22.x"
   },
   "scripts": {

example/src/stories/Button/Button.stories.tsx

@@ -203,9 +203,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<ButtonProps> = args => (
-  <Button {...args}></Button>
-);
+const Template: Story<ButtonProps> = args => <Button {...args}></Button>;
 
 export const Default = Template.bind({});
 Default.args = {

example/src/stories/Card/Card.stories.tsx

@@ -5,7 +5,7 @@ import { Card, CardProps } from '@quero-delivery/quero-components-web';
 import '@quero-delivery/quero-components-web/dist/index.css';
 import { faPhone } from '@fortawesome/free-solid-svg-icons';
 
-const meta: Meta =  {
+const meta: Meta = {
   title: 'Components/Card',
   component: Card,
   argTypes: {

example/src/stories/Checkbox/Checkbox.stories.tsx

@@ -6,7 +6,7 @@ import { Checkbox, CheckboxProps } from '@quero-delivery/quero-components-web';
 
 import '@quero-delivery/quero-components-web/dist/index.css';
 
-const checkboxMeta: Meta =  {
+const checkboxMeta: Meta = {
   title: 'Components/Checkbox',
   component: Checkbox,
   argTypes: {
@@ -26,7 +26,7 @@ const checkboxMeta: Meta =  {
         options: ['xs', 'sm', 'md', 'lg', 'xl'],
       },
       description: 'Tamanho do CheckBox',
-      type: 'string'
+      type: 'string',
     },
     onChange: {
       action: 'clicked',

example/src/stories/Pagination/Pagination.stories.tsx

@@ -58,8 +58,8 @@ export default {
       control: 'boolean',
       table: {
         type: {
-          summary: 'boolean'
-        }
+          summary: 'boolean',
+        },
       },
       defaultValue: false,
       description: 'Desabilita todo o componente',
@@ -68,11 +68,12 @@ export default {
       control: 'boolean',
       table: {
         type: {
-          summary: 'boolean'
-        }
+          summary: 'boolean',
+        },
       },
       defaultValue: false,
-      description: 'Mostra botões nas extremidades, utilizados para ir ao início e fim da paginação.',
+      description:
+        'Mostra botões nas extremidades, utilizados para ir ao início e fim da paginação.',
     },
   },
 } as Meta;

package.json

@@ -10,7 +10,21 @@
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": "16.x",
+    "yarn": "1.22.x"
+  },
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./dist/index.css": {
+      "import": "./dist/esm/index.css",
+      "require": "./dist/cjs/index.css"
+    }
+  },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs",
     "start": "rollup -c --bundleConfigAsCjs --watch",
@@ -24,7 +38,8 @@
     "prepare-publish-docs": "rm -rf example/storybook-static && cd example && yarn --frozen-lockfile && yarn build-storybook && cd .."
   },
   "peerDependencies": {
-    "react": ">16.0.0"
+    "react": "^16.14.0 || ^17.0.0 || ^18.2.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.2.0"
   },
   "dependencies": {
     "date-fns": "^2.29.3",
@@ -38,9 +53,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-runtime": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.12",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -67,6 +84,7 @@
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^17.0.4",
     "@types/react-input-mask": "^3.0.0",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.3",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
@@ -101,6 +119,7 @@
     "rollup-plugin-dts": "^5.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.58.0",
     "semantic-release": "^17.4.7",
     "ts-jest": "^27.0.5",

rollup.config.mjs

@@ -6,8 +6,13 @@ import dts from 'rollup-plugin-dts';
 import postcss from 'rollup-plugin-postcss';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import babel from '@rollup/plugin-babel';
+import { visualizer } from 'rollup-plugin-visualizer';
 
-import packageJson from './package.json' assert { type: 'json' };
+import packageJson from './package.json';
+
+const babelRuntimeVersion = packageJson.devDependencies[
+  '@babel/runtime'
+].replace(/[^0-9]*/, '');
 
 export default [
   {
@@ -17,11 +22,13 @@ export default [
         file: packageJson.main,
         format: 'cjs',
         sourcemap: true,
+        exports: 'named',
       },
       {
         file: packageJson.module,
         format: 'esm',
         sourcemap: true,
+        exports: 'named',
       },
     ],
     plugins: [
@@ -30,16 +37,24 @@ export default [
       commonjs(),
       typescript({
         tsconfig: './tsconfig.json',
-        exclude: ['**.test.tsx', 'setupTests.ts'],
+        exclude: ['**.test.{tsx,ts}', 'setupTests.ts'],
       }),
       terser(),
       postcss({
         extract: true,
       }),
       babel({
-        babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
-        plugins: ['babel-plugin-styled-components'],
+        babelHelpers: 'runtime',
+        exclude: /node_modules/,
+        plugins: [
+          'babel-plugin-styled-components',
+          ['@babel/plugin-transform-runtime', { version: babelRuntimeVersion }],
+        ],
+      }),
+      visualizer({
+        hideDeps: true,
+        limit: 0,
+        summaryOnly: true,
       }),
     ],
   },
@@ -49,9 +64,4 @@ export default [
     plugins: [dts.default()],
     external: [/\.css$/, /\.scss$/],
   },
-  {
-    input: 'dist/esm/index.css',
-    output: [{ file: 'dist/index.css' }],
-    plugins: [postcss({ extract: true })]
-  },
 ];