https://stenciljs.com

StencilBuild. Customize. Distribute. Adopt.StencilAn OutSystems Company →DocsResourcesCommunityBlog⋮DocsResourcesCommunityBlogEnterpriseStencil 4 is here! Read all about what’s new in latest major release Read the Blog →Build. Customize. Distribute. Adopt.Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.Get started →npm init stencilSimpleWith intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus.PerformantA tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around.Future proofBuild cross-framework component libraries on open web standards, and break free of Framework Churn.Framework-agnosticStencil components are just Web Components, so they will work with any major framework—or no framework at all.Powering cross-functional components at some of the world’s best companies. See how →FeaturesThe magical, reusable web component compiler. Web componentsBuild modern, standards-compliant web components that work in any browser with slots, shadow DOM, and more.Flexible outputWith flexible models for how you want to use your components, Stencil can optimize for treeshaking, loading, and more.TypeScript supportStencil uses TypeScript, providing your components with type safety as your system scales.Asynchronous rendering pipelineEnsure your components render smoothly with Stencil’s built-in asynchronous rendering pipeline.Documentation generationGenerate automatically-updated documentation from JSDoc comments that live close to the codeDependency-freeStencil comes with all the dependencies and preset scripts you need to start building.JSX supportDescribe your components using a well known templating syntax, with all the features of JavaScript available to you.Intuitive developer experienceWith a fully-typed API, built-in hot reloading dev-server, and custom utils, Stencil offers an intuitive DX.Component LibrariesBuild and publish interactive components and features that run on any site, built on any stack.Component LibrariesThe perfect tool for component libraries.Ensure consistent UX and brand experiences at scale with components that run on any platform or device. Build custom UIs that work seamlessly across teams and projects.Documentation →@Component({ tag: 'ds-text', styleUrl: 'ds-text.css', shadow: true,})export class Text { render() { return ( Your Text Rendered Here ); }}Framework IntegrationsA single component library for all of your apps.Stencil components are built to work with any major framework or no framework at all.IntegrationAngularUse Custom Elements in your Angular code baseIntegrationReactUse Custom Elements in your React code baseIntegrationVueUse Custom Elements in your Vue code baseExplore Integrations → Web ComponentsIt’s just Web Components.Develop Web Components using established standard technologies and APIs, including Shadow DOM, custom elements, and slots.Documentation →import { Component, Listen, h } from '@stencil/core'; @Component({ tag: 'huge-text-button', styleUrl: 'huge-text-button.css', shadow: true,})export class HugeTextButton { @Listen('click', { capture: true }) handleClick(ev) { ev.preventDefault(); console.log("I've been clicked!"); } render() { return ( Click Me ) }}Developer ExperienceA great developer experience out of the box.Project goals →SourcemapsGenerate maps from your TypeScript to the generated JavaScript for easy debugging.Zero-configStencil comes with a great out of the box default configuration, while allowing you to change it.Unit TestingUnit testing is built in to Stencil, including custom test matchers and configuration.Code GenerationGenerate the code for a new component, styles, and tests with a single command.Doc GenerationGenerate documentation directly from code comments, ensuring your docs are always up to date.TypesStencil uses TypeScript, providing type safety and syntax highlighting in your favorite code editor.Local Dev-ServerMove faster with a local dev-server with hot module reloading. Make a change, see it instantly.World-Class DocsComprehensive documentation written by the Stencil team and the open source community.CommunityStencil is an open source project by Ionic. Join our growing community—everyone is welcome.XAnnouncements, blog posts, and general Stencil news.DiscordTo get involved, ask questions, and share tips.GitHubFile issues, request features, and contribute to the project.ResourcesArticles, videos, and more from the Stencil community.© 2024 | MIT LicenseA project by IonicOverviewIntroductionGetting StartedComponent APIGuidesFAQDocsFramework IntegrationsStatic Site GenerationConfigOutput TargetsTestingCore Compiler APICommunityBlogGitHubXDiscordenen1727418004https://stenciljs.com

แก้ไขไซต์ของคุณ?

คุณกำลังทำอะไร?