Introducing Stencil Component Development Environment

We are excited to announce the release of the new Bit Environment that supports Web Components development with Stencil.

Alongside our support for Lit, this provides the most extensive eco-system there is for component driven development with Web Components.

Using Bit in combination with Stencil provides a unique advantage for teams creating, and consuming, framework-agnostic design systems with Stencil.

Bit provides an isolated build and versioning pipeline for each component, enabling quick and easy component library creation and management. And the ability to individually manage and version each component means consumers need to consume less or no zombie code, and update their dependencies only when something they're actually using gets updated.

Marry that with the cross-platform compatibility of stencil components and you have a flexible design system that can be easily created, managed and consumed, and which provides a unified and standardised design across all teams in the organisation, regardless of their tech stack.

In addition, with Bit you can have React, Angular, and Stencil components in one project without complex script and infrastructure setup. So it's easy to also provide a seamless integration experience for various technology stacks by creating tech-specific wrapper components (also in bit), side-by-side with the core stencil components, all in the same workspace.

The new Env comes with a range of templates to help you get started. Generate a new Bit + Stencil workspace by running the following command to get started:

$bit new stencil my-stencil-workspace --aspect teambit.web-components/stencil --default-scope my-org.my-scope

Copied

Create a stencil env from the template:

$bit create stencil-env envs/my-stencil-env --aspect teambit.web-components/stencil

Copied

We prioritize flexibility and customization for developers creating components with their preferred tools and configurations. To that end the Stencil Env - like all bit Envs - is fully customizable, enabling you to tailor your tools and configurations to meet your specific needs.

Stencil Env provides easy out-of-the-box access to important tools, including ESLint, Jest, Prettier, and TypeScript, for creating and maintaining components. These integrated resources streamline the setup and configuration process for a smoother development experience, and you can tailor them - or switch them with your preferred tools - via our well-documented env API.

Head over to our documentation to learn more.