core README

The project's README from github.com/stenciljs/core. As one markdown file: README.md.

stencil-logo

Stencil

A compiler for generating Web Components using technologies like TypeScript and JSX, built by the Ionic team.

StencilJS is released under the MIT license. StencilJS is released under the MIT license. PRs welcome! Follow @stenciljs Official Ionic Discord

Quick Start · Documentation · Contribute · Blog
Community: Discord · Forums · Twitter

Getting Started

Start a new project by following our quick Getting Started guide. We would love to hear from you! If you have any feedback or run into issues using Stencil, please file an issue on this repository.

Examples

A Stencil component looks a lot like a class-based React component, with the addition of TypeScript decorators:

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',            // the name of the component's custom HTML tag
  styleUrl: 'my-component.css',   // css styles to apply to the component
  shadow: true,                   // this component uses the ShadowDOM
})
export class MyComponent {
  // The component accepts two arguments:
  @Prop() first: string;
  @Prop() last: string;

   //The following HTML is rendered when our component is used
  render() {
    return (
      <div>
        Hello, my name is {this.first} {this.last}
      </div>
    );
  }
}

The component above can be used like any other HTML element:

<my-component first="Stencil" last="JS"></my-component>

Since Stencil generates web components, they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend framework, though using it as such is certainly not required.

Contributing

Thanks for your interest in contributing! Please take a moment to read up on our guidelines for contributing. We've created comprehensive technical documentation for contributors that explains Stencil's internal architecture, including the compiler, runtime, build system, and other core components in the /docs directory. Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

core (stenciljs/core)

Searching Database…

13.1K ·GitHub
Core
Что это такое?Stencil — это компилятор, который генерирует Web Components на основе стандартов с использованием TypeScript и JSX. Он позволяет создать одну библиотеку компонентов, которая работает напрямую в React, Angular, Vue и обычных веб-приложениях.
Stencil — это фреймворк или компилятор?Это скорее компилятор и набор инструментов, а не фреймворк времени выполнения. Он превращает ваши компоненты в стандартные Web Components без привязки к конкретному фреймворку, поэтому результат можно встроить в любое приложение или вообще без него.
Как начать новый проект на Stencil?Следуйте официальному руководству Getting Started: оно создаст за вас новый проект с компонентами Stencil.
Нужна ли определённая версия Node или npm?Да, для сборки и разработки Stencil требуются Node.js 16 или новее и npm 7.10 или новее.
Нужно ли знать декораторы TypeScript и JSX, чтобы писать компоненты?Да. Компонент Stencil пишется как класс TypeScript с декораторами Stencil, а для шаблонов используется JSX. По стилю это похоже на компонент React, написанный в виде класса.
Stencil заменяет такие фреймворки, как React или Angular?Не обязательно. Stencil может стать прямой заменой фронтенд-фреймворка, но так использовать его не обязательно, ведь созданные компоненты работают и вместе с существующими фреймворками.
Можно ли использовать компоненты, созданные на Stencil, без какого-либо JavaScript-фреймворка?Да. Поскольку они компилируются в нативные Web Components, компоненты Stencil работают на обычных HTML/JS-страницах без какого-либо фреймворка.
Поддерживает ли Stencil серверный рендеринг или генерацию статических сайтов?В темах проекта указаны SSR, SSG и static-site-generator, что говорит о возможности предварительной отрисовки компонентов для таких сценариев.
Зачем выбирать Stencil вместо отдельных компонентов для React или Vue?Stencil позволяет написать одну кодовую базу компонентов и нативно передавать её в React, Angular, Vue и обычные веб-приложения, избегая дублирования реализации под каждый фреймворк.
What are similar projects?mitosis, ionic-framework, riot, styled-components, tamagui, next.js, shaders, gatsby
Which topics is it in?ionic, ssg, jsx, static-site-generator, ssr, design-system, web-framework, compiler, component-library, vue, ui-components, ui
Creator
stenciljs
Size
88.3 MB
Stars
13.1K
Updated
CommitOct 12Releasev4.45.2Oct 05
Age
9y
Commits · 90 Days