Bundling

Caution

We are in the process of moving, reviewing, and rewriting our development guidelines.

Semver

Use semantic versioning to manage the versioning of your packages.

1. MAJOR: Represents significant changes that may introduce breaking changes to the existing API or functionality. An increment in the MAJOR version indicates backward-incompatible changes.

2. MINOR: Indicates the addition of new features or enhancements to the software while maintaining backward compatibility with previous versions. Incrementing the MINOR version means that new functionality has been added.

3. PATCH: Indicates bug fixes or minor improvements without introducing new features or breaking changes. A PATCH version increment implies backward compatibility has been maintained.

Webpack / Vite

Use Webpack / Vite to bundle and optimize your component library. It enables efficient code splitting, hot module replacement during development, and easy configuration for various environments.

1. for browser usage - bundle to UMD and/or ESM module type
2. in case of UMD bundling: keep in mind the TME websites have an AMD-loader on board
3. for backend usage - bundle to ESM and/or CJS module type
4. build bundles per TME brand: Toyota / Lexus / Kinto
5. setup code-chunking for dynamic imports and/or react-lazy

Browserslist Config

DXP provides a browserslist config which you can use to automatically transpile to a widely supported output. This can be used to configure various tooling.

Note

For our internal teams: If your code is build with DXP Build you are already using our browserslist config.

• babel-preset-env: support all features up to ES2024.
• postcss-preset-env: support all features up to stage 2.

Browser support

Can I use (CIU) is a popular online resource that provides up-to-date information on the support of web technologies (HTML, CSS, JavaScript, …) by various web browsers. It offers a comprehensive browser compatibility table, displaying the support status of features across different browsers and versions.

CIU allows developers to check if a specific feature or property is supported in the browsers they need to target. It also provides data on the percentage of global users who have a browser that supports the feature, which can help inform decisions about whether to use certain web technologies.

If a feature’s support within a single browser family is below 1% global, it is advisable not to utilize that feature.