chore: upgrade rollup and plugins, change typescript compiler to `tsc…

…` and add tree shaking (#882)

Co-authored-by: Michael Marszalek <[email protected]>

.eslintignore

@@ -4,3 +4,4 @@ dist/
 coverage/
 storybook-static/
 packages/tokens/brand/**/*
+tsc-build/

.gitignore

@@ -1,6 +1,7 @@
 # Built files
 dist
 ignore
+tsc-build
 
 # Yarn stuff; we're not using PnP/Zero installs
 .pnp.*

package.json

@@ -43,11 +43,10 @@
     "@digdir/design-system-tokens": "*",
     "@etchteam/storybook-addon-css-variables-theme": "^1.5.1",
     "@next/eslint-plugin-next": "^13.2.4",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-image": "^3.0.1",
-    "@rollup/plugin-json": "^5.0.2",
-    "@rollup/plugin-node-resolve": "^14.0.0",
-    "@rollup/plugin-typescript": "^11.1.4",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@storybook/addon-a11y": "^7.4.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
@@ -59,7 +58,7 @@
     "@storybook/theming": "^7.4.0",
     "@svgr/cli": "^6.5.1",
     "@svgr/core": "^6.5.1",
-    "@svgr/rollup": "^6.5.1",
+    "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -74,6 +73,7 @@
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "classnames": "^2.3.1",
+    "copyfiles": "^2.4.1",
     "eslint": "8.50.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-import-resolver-typescript": "3.6.1",
@@ -94,19 +94,16 @@
     "react-markdown": "^8.0.5",
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.0",
-    "rollup": "^2.79.0",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup": "^3.29.4",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
     "storybook": "^7.4.0",
     "storybook-css-modules": "^1.0.8",
     "stylelint": "^15.3.0",
     "stylelint-config-css-modules": "^4.2.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^31.0.0",
     "stylelint-prettier": "^3.0.0",
-    "terser": "^5.16.0",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",

packages/react/package.json

@@ -3,16 +3,17 @@
   "version": "0.27.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "author": "Digdir Designsystem Team",
   "files": [
     "dist/**"
   ],
   "scripts": {
-    "build": "yarn run clean && tsc -p tsconfig.build.json && rollup -c",
-    "clean": "rimraf dist"
+    "build": "yarn run clean && tsc -p tsconfig.build.json && yarn run copy-files && rollup -c --bundleConfigAsCjs",
+    "clean": "rimraf dist && rimraf tsc-build",
+    "copy-files": "copyfiles -u 1 ./src/**/*.css ./tsc-build/"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
@@ -27,5 +28,8 @@
     "@floating-ui/react": "0.25.2",
     "@navikt/aksel-icons": "^3.2.4",
     "react-number-format": "5.2.2"
+  },
+  "devDependencies": {
+    "copyfiles": "^2.4.1"
   }
 }

packages/react/rollup.config.js

@@ -1,36 +1,36 @@
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
 import image from '@rollup/plugin-image';
-import dts from 'rollup-plugin-dts';
 import postcss from 'rollup-plugin-postcss';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import svgr from '@svgr/rollup';
 
-import terser from './rollup-terser.mjs';
-import packageJson from './package.json';
-
-// css files needs to be bundled
-const altinnFigmaTokensExceptCss = /@altinn\/figma-design-tokens.*(?<!css)$/;
+const input = './tsc-build/index.js';
 
 export default [
   {
-    input: 'src/index.ts',
+    input,
     output: [
       {
-        file: packageJson.main,
+        input,
+        dir: './dist/cjs',
         format: 'cjs',
         banner: "'use client';",
+        preserveModules: true,
+        preserveModulesRoot: 'tsc-build',
       },
       {
-        file: packageJson.module,
-        format: 'esm',
+        input,
+        dir: './dist/esm',
+        format: 'es',
         banner: "'use client';",
+        preserveModules: true,
+        preserveModulesRoot: 'tsc-build',
       },
     ],
     external: [
-      altinnFigmaTokensExceptCss,
+      /@altinn\/figma-design-tokens.*(?<!css)$/,
       /@react-hookz\/web/,
       /@radix-ui\/react-popover$/,
       /react-number-format/,
@@ -43,23 +43,9 @@ export default [
       resolve(),
       commonjs(),
       json(),
-      typescript({ tsconfig: './tsconfig.build.json' }),
       svgr({ exportType: 'named' }),
       postcss(),
-      terser({
-        compress: {
-          // Needed until https://github.com/terser/terser/issues/1320 is fixed
-          directives: false,
-        },
-      }),
       image(),
     ],
   },
-  {
-    input: 'dist/types/index.d.ts',
-    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
-
-    plugins: [dts()],
-    external: [/@altinn\/figma-design-tokens/, /\.css$/],
-  },
 ];

packages/react/tsconfig.json

@@ -1,10 +1,11 @@
 {
-    "extends": "../../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "declarationDir": "dist/types",
-        "emitDeclarationOnly": true
-    },
-    "include": ["./src", "declarations.d.ts"],
-    "rootDir": "./src",
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./tsc-build",
+    "declarationDir": "./dist/types",
+    "emitDeclarationOnly": false,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./src", "declarations.d.ts"],
+  "rootDir": "./src"
 }

tsconfig.json

@@ -2,6 +2,7 @@
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
   //  "exclude": ["src/components/*.test.tsx", "src/components/*.stories.tsx"],
   "compilerOptions": {
+    "target": "es2020",
     "module": "es2020",
     "lib": ["dom", "esnext"],
     "importHelpers": true,
@@ -23,7 +24,7 @@
     // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "target": "es2016",
+
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "ts-node": {