What's New in Bit? May 15, 2023

ed
eden-e11 months ago

Weekly release notes v0.1.42

Run bvm upgrade to get the latest stable version of Bit. See Install experimental releases to try out the latest experimental features.

New and improved


Choose your webpack version

The legacy React env and legacy react apps can be configured to use a different instance of webpack and webpack dev server.

This has already been an option for the new envs and will soon be available for new React apps.

For example, the following sets a different version of webpack and webpack dev server for the React env/app:

React env
React env legacy
/* @filename: my-react-env.bit-env.ts */

/* your base env */
import { ReactEnv } from '@teambit/react.react-env';

import { ReactPreview } from '@teambit/preview.react-preview';
import type { EnvHandler } from '@teambit/envs';
import { Preview } from '@teambit/preview';

export class MyReactEnv extends ReactEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      /* use the path to the webpack version this env has as a dependency */
      webpackModulePath: require.resolve('webpack'),
      webpackDevServerModulePath: require.resolve('webpack-dev-server'),
    });
  }
}

export default new MyReactEnv();
CopiedCopy

The specific versions of webpack and webpack dev server are determined by the versions set for the env/app. For example:

$bit
Copiedcopy
See command synopsis

bit deps set is used in this case (to set the dependencies manually) since there are no import/require statements to webpack in the component's files (which means Bit is unable to detect the dependencies automatically).

$bit
Copiedcopy
See command synopsis
#7382 #7385

Changes


Webpack version upgrade

Webpack upgraded from version 5.51.0 to version 5.81.1.

Webpack Dev Server upgraded from version 4.1.1 to version 4.15.0.

The new webpack version might not be fully compatible with custom plugins and loaders you might be using for your envs and apps. If that is the case, either replace them with compatible ones or override the webpack version for your envs and apps (see the previous section).

#7389 #7390

Changes to bit checkout

The deprecated --reset option is now removed. Use the reset argument instead.

$bit
Copiedcopy

The deprecated --skip-npm-install option is now removed. Use the --skip-dependency-installation option instead.

$bit
Copiedcopy
#7396

Performance


Workspace UI is loaded up to 50% faster

Pre-built Workspace UI artifacts are served to boost bit start loading time. This translates to a 50% faster loading time for the Workspace UI, on first cold-start.

#7336

Apps are loaded more efficiently

Workspace components are no longer loaded on bit run APP_NAME. This drives faster loading time for apps.

#7379

Aspects are loaded more efficiently

Aspects that are listed as another aspect dependencies (static dependencies = []) are only loaded if they are listed in the workspace.jsonc.

Note that aspect dependencies should be listed in the workspace.jsonc otherwise, they are not loaded automatically. This improves performance, however, it requires aspect maintainers to handle undefined (when an aspect is not loaded).

#7370

Bug fixes


Internal


Demos, tools and docs

๐Ÿ›  Tool: Bit support for Angular 16

We're happy to announce Bit is fully compatible with Angular 16. To learn more, see our Angular docs.

๐Ÿ›  Tool: New HTML env

A new HTML env is now available. The env is uses the new envs API.

The env is useful for components for the browser, that are not framework-specific. This includes, JavaScript, TypeScript, CSS, SASS, and more.

See this blog post to learn more about using this env


๐Ÿ‘ฉโ€๐Ÿซ Guide: How to create reusable CSS components

See this blog post to learn more about using this env for a step-by-step guide on how to create reusable CSS components with Bit. CSS components are a great way to share CSS/SASS variables and mixins with other components.


โญ๏ธ General: React Native learn section is extended

Checkout the React Native learn section to learn how to create independent React Native components with Bit.


๐Ÿ‘ฉโ€๐Ÿซ Guide: How to componentize your existing apps

This blog uses a full-stack React with Express app as an example. However, the same principles apply to any other app.

See the Github repo for the full code, in three stages:

  1. The original pre-Bit project
  2. The project after componentization
  3. The project after full componentization, including the apps themselves. In this stage, the project's CI/CD was "handed over" to the app components.

See the Bit organization.