build: update build to preserve modules and use @rollup/plugin-typesc…

…ript

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

@@ -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",

rollup.config.js

@@ -1,74 +1,74 @@
-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.ts'],
     output: [
       {
-        file: packageJson.main,
+        dir: 'dist',
+        entryFileNames: '[name].js',
+        exports: 'auto',
         format: 'cjs',
-        sourcemap: true
+        preserveModules: true,
+        preserveModulesRoot: 'src'
       },
       {
-        file: packageJson.module,
+        dir: 'dist',
+        entryFileNames: '[name].mjs',
+        exports: 'auto',
         format: 'es',
-        sourcemap: true
+        preserveModules: true,
+        preserveModulesRoot: 'src'
       }
     ],
-    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'
     },
-    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'
       })
     ]
-  })
+  }
 ];

src/Select/Select.tsx

@@ -590,9 +590,14 @@ function SelectInner<T>(
   );
 }
 
+/* eslint-disable no-use-before-define */
 const Select = forwardRef(SelectInner) as <T>(
-  // eslint-disable-next-line no-use-before-define
   props: SelectProps<T> & { ref?: React.ForwardedRef<SelectRef> }
-) => ReturnType<typeof SelectInner>;
+) => ReturnType<typeof SelectInner<T>>;
+/* eslint-enable no-use-before-define */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+Select.displayName = 'Select';
 
 export { Select, SelectProps };

src/Toolbar/Toolbar.tsx

@@ -24,4 +24,6 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
   );
 });
 
+Toolbar.displayName = 'Toolbar';
+
 export { Toolbar };

src/TreeView/TreeView.tsx

@@ -381,13 +381,15 @@ function TreeInner<T>(
   );
 }
 
+/* eslint-disable no-use-before-define */
 const TreeView = forwardRef(TreeInner) as <T>(
   // eslint-disable-next-line no-use-before-define
   props: TreeViewProps<T> & { ref?: React.ForwardedRef<HTMLUListElement> }
-) => ReturnType<typeof TreeInner>;
+) => ReturnType<typeof TreeInner<T>>;
+/* 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 };

src/Window/WindowHeader.tsx

@@ -46,4 +46,6 @@ const WindowHeader = forwardRef<HTMLDivElement, WindowHeaderProps>(
   }
 );
 
+WindowHeader.displayName = 'WindowHeader';
+
 export { WindowHeader, WindowHeaderProps };

src/types.tsx → src/types.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ComponentType } from 'react';
 
 import { Color, Theme, WindowsTheme } from './common/themes/types';
 
@@ -15,7 +15,7 @@ export type CommonStyledProps = {
    * "as" polymorphic prop allows to render a different HTML element or React component
    * @see {@link https://styled-components.com/docs/api#as-polymorphic-prop}
    */
-  as?: string | React.ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  as?: string | ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 };
 
 export type CommonThemeProps = {

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",
+  ]
+}

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"
+  ]
+}

tsconfig.json

@@ -30,7 +30,7 @@
     "resolveJsonModule": true,
     "rootDir": "./",
     "skipLibCheck": true,
-    "sourceMap": true,
+    "sourceMap": false,
     "strict": true,
     "strictFunctionTypes": true,
     "strictNullChecks": true,

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/[email protected]":
+  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"