stenciljs/core
Core
This project is a web component tooling system used to compile TypeScript and JSX into standard-compliant custom elements. It enables the development of framework-agnostic components that function across different browsers and frontend environments.
The toolset focuses on cross-framework UI distribution, allowing a single library of components to be used in React, Angular, Vue, or plain HTML. It includes capabilities for enterprise design system engineering and generates specific wrapper code to ensure components behave as native elements within various frameworks.
The system covers server-side rendering with client-side hydration, virtual DOM reconciliation, and scoped CSS encapsulation via Shadow DOM. It also provides a development environment with a local server, hot module reloading, and automated testing utilities including headless unit testing and shadow DOM verification.
The project includes a command-line interface for orchestrating build, test, and serve operations.
Features
- Component Compilers - Compiles TypeScript and JSX into standard-compliant web components for cross-framework distribution.
- Cross-Framework Component Distribution - Provides a unified set of UI components that can be used across React, Angular, Vue, and plain HTML.
- State Synchronization Decorators - Uses TypeScript decorators to track property changes and automatically synchronize the UI when data is updated.
- Component Property Systems - Defines input attributes using decorators to pass external data into web components.
- Component Slot Systems - Assigns content to specific slots and monitors changes to assigned nodes within components.
- Component State Managers - Manages component properties and internal state with automated synchronization using decorators.
- Framework-Agnostic UI Development - Facilitates the creation of a single library of Web Components that operate independently of any specific JavaScript framework.
- Component Lifecycle Management - Triggers specific logic at defined stages of a component's existence, from creation to removal.
- Style Encapsulations - Isolates component styling using the browser's native shadow root to prevent CSS leaks.
- Custom Element Registries - Defines how compiled components register with the browser's custom element registry.
- Framework Integration Wrappers - Generates glue code that allows standard Web Components to be used as native components in React, Angular, or Vue.
- Web Components - Provides a full toolset for compiling TypeScript and JSX into standard-compliant, optimized custom elements.
- Client-Side Hydration - Restores interactive behavior to server-rendered static content by transferring state and styles to the client.
- Server-Side Rendering - Generates static HTML on the server to improve SEO and initial page load speeds for web components.
- Enterprise Component Systems - Enables the engineering of scalable, maintainable component libraries using TypeScript for large-scale corporate design systems.
- Virtual DOM Reconciliation - Implements virtual DOM reconciliation to update the browser interface efficiently by minimizing direct DOM manipulations.
- Lifecycle Mappings - Maps internal class methods to native browser lifecycle events like connection and disconnection from the DOM.
- Build Task Runners - Provides a command-line interface to orchestrate build, test, and serve operations.
- Web Component Testing Suites - Includes a test suite specifically designed to validate custom element behavior, lifecycle hooks, and rendering.
- Hot-Reloading Servers - Pushes real-time code updates from a development server to the browser via WebSockets.
- Hot-Reloading Systems - Provides real-time browser updates via WebSockets to reflect code changes without requiring a full page refresh.
- Browser Compatibility Targets - Supports targeting older browsers by generating builds for ES5 and SystemJS to ensure maximum compatibility.
- Shadow DOM Assertions - Provides utilities to serialize shadow-root content into mock elements for precise assertions against internal DOM structures.
- Frontend Unit Testing - Provides the ability to render and verify component HTML output in a Node environment without a browser.
- Virtual DOM Reconciliation - Updates the browser interface by comparing state changes against a virtual DOM representation to minimize manipulations.
- Development Servers - Ships a local development server with hot reloading and configurable ports for rapid prototyping.
- Web Component Distribution - Packages components into a distributable format with automated dependency loading and export behaviors.
