Awesome lit

Awesome Lit ¶

> 精选的 Lit 资源列表.

Lit — 一个用于构建快速、轻量级 Web 组件的简单库.

Lit 的核心是一个消除样板的组件基类，它提供反应状态、作用域样式和一个小巧、快速且富有表现力的声明性模板系统.

General resources¶

Community¶

Overview¶

Starter Templates¶

LitElement JavaScript starter - 使用 LitElement 和 JavaScript 的示例组件.
LitElement TypeScript starter - 使用 LitElement 和 TypeScript 的示例组件.
hello-web-components - 使用 Lit 以 TypeScript 编写的简单入门 Web 组件.
Lit Sass JavaScript Starter - 使用 Rollup 对 SASS + JS + Lit 进行简单设置的项目.
Lit Sass TypeScript Starter - 使用 Rollup 对 SASS + TS + Lit 进行简单设置的项目.
Lit Webpack Starter - 使用 Webpack 的 Lit 和 Typescript 多页应用程序的启动器.
Open Web Components Generator - 基于 Open Web Components Recommendations 的入门应用程序.
pwa-starter - PWABuilder pwa-starter 的 LitElement 版本.
pwa-lit-template - 按照现代网络标准构建渐进式网络应用程序.
Vite Lit Element TS SASS - 使用 Lit 2、Typescript 和 SASS 的示例 Vite 项目.
Vite Lit Starter - Vite 的基于 Lit 的模板预设.
Vite Lit TS Starter - Vite 的基于 Lit 和 TypeScript 的模板预设.

Codelabs¶

Tutorials¶

Examples¶

Lit Native - 在原生平台上重用 Lit Web 组件.
Lit Node Editor - 使用画布 API 和简单的图形数据结构构建的节点编辑器.
Lit 3D Piano - 使用 Lit、Three.js 和 Tone.js 构建的 3D 钢琴.
Open Web Components Examples - 使用 Lit 的常见模式的代码示例.
Polymer → Lit Migration Guide - 显示从 Polymer 到 Lit 的迁移指南的代码示例.
Vite + RxDB + Lit - 使 RxDB 与 Vite 一起运行的最小示例.

Lit Labs¶

@lit/localize - 用于本地化使用 Lit 构建的 Web 应用程序的库和命令行工具.
@lit-labs/ssr - 用于服务器端渲染 Lit 模板和组件的包.
@lit-labs/motion - 让事物移动的点燃指令.
@lit-labs/react - 用于 Web 组件和反应式 Lit 控制器的 React 集成.
@lit-labs/scoped-registry-mixin - LitElement 的 Mixin，它与推测性 Scoped CustomElementRegistry polyfill 集成，以评估提案并促进反馈.
@lit-labs/task - 呈现异步任务的 Lit 控制器.
@lit-labs/virtualizer - 为 Lit 提供虚拟滚动的包.

Extensions¶

@adobe/lit-mobx - 用于将 mobx 与 Lit 结合使用的 Mixin 和基类.
@apollo-elements/lit-apollo - LitElement 与 Apollo GraphQL 的集成.
@lit-app/state - Lit 2 的精益和简单的全局状态管理.
@shoelace-style/localize - 用于本地化自定义元素的微型库，为 Lit 提供指令.
@stefanholzapfel/lit-state - Lit 2 的轻量级反应状态管理.
@vaadin/form - 用于使用 TypeScript 和 Lit 构建表单的实用程序集.
dark-theme-utils - 用于使用 Web 组件构建的暗模式的有用实用程序.
exome - 支持 Lit 的深层嵌套状态的状态管理器.
pure-lit - 将您的 Lit 元素注册为纯函数.
lit-element-effect - LitElement 的效果挂钩.
lit-element-state-decoupler - 用于 LitElement 组件外部状态处理的实用程序.
lit-redux-router - 由 pwa-helpers 和 Redux 支持的 Lit 的声明式路由方式.
lit-svelte-stores - Lit 控制器使用 svelte store 作为状态管理.
lit-vaadin-helpers - 将 Vaadin Web 组件与 Lit 2 一起使用的帮助程序.
ullr - 使用 Lit 构建具有函数式编程的 Web 组件.

Design Systems¶

AXA Pattern Library - 使用 LitElement 构建的 AXA CH UI 组件库.
Brightspace UI core - 用于构建 Brightspace 应用程序的 Web 组件集合.
Carbon Web Components - Web 组件之上的 Carbon Design System 变体.
Clarity Core Web Components - 用于 Clarity Design System 的 Web 组件套件.
Kor - 开源设计系统和轻量级 UI 组件库.
Lion - 高性能、可访问且灵活的 Web 组件.
Material Web Components - 作为 Web 组件实现的 Material Design.
Momentum UI Web Components - 一组基于 Momentum Design 的 UI 组件.
Outline Design System - 基于网络组件的设计系统入门工具包.
Pharos Design System - JSTOR 的设计系统可创造有凝聚力、支持性和美好体验.
Red Hat Design System - 用于构建 Red Hat 品牌统一体验的 Web 组件.
Shoelace - 基于框架不可知技术构建的专业设计的 UI 组件集合.
Spectrum Web Components - 使用 LitElement 构建的 Adobe Spectrum 设计语言实现.
UI5 Web Components - 在本机 API 之上的企业风味糖！

Component Libraries¶

Apollo Elements - 自定义元素符合 Apollo GraphQL.
Blackstone UI - 用于创建使用 lit-html 和 LitElement 构建的界面的 Web 组件.
Chartjs Web Components - chartjs 的 Web 组件.
Clever components - 由 Clever Cloud 制作的 Web 组件集合.
Curvenote - 用于创建交互式科学文章的 Web 组件.
Dile Components - 一般用于网站和应用程序的 Web 组件.
ESP Web Tools - 允许通过浏览器刷新 ESPHome 或其他基于 ESP 的固件.
Furo Webcomponents - 企业就绪的 Web 组件集，最适合与 Eclipse Furo 配合使用.
Fusion Web Components - Equinor Fusion 使用的一系列 Web 组件.
Ignite UI Web Components - 来自 Infragistics 的完整 UI 组件库.
LRNWebComponents - ELMS:LN 为任何项目制作了网络组件.
Medblocks UI - 用于快速开发 openEHR 和 FHIR 系统的 Web 组件.
Microsoft Graph Toolkit - Microsoft Graph 的 Web 组件集合.
Mutation testing elements - 用于变异测试结果的模式，使用 Web 组件将其可视化.
One Platform Components - 一套用于 Red Hat One Platform 的网络组件.
Playground Elements - 使用 Web 组件的无服务器代码体验.
Stripe Elements - Stripe.js v3 元素的自定义元素包装器.
Titanium Elements - Leavitt Group Enterprises 使用的轻量级 Web 组件集合.
Umbraco UI Components - Umbraco CMS 的用户界面 Web 组件集合.
Vidstack Elements - 符合规范的可定制、可扩展、可访问和通用的媒体元素.
VSCode Webview Elements - 用于创建使用 Webview API 的 VSCode 扩展的组件.
Web Components for TEI Publisher - TEI Publisher 使用的 Web 组件及其生成的应用程序.
Webmarkets web components - Set of Webmarkets' public web components.
Wired Elements - 出现手绘元素的集合.
Wokwi Elements - Arduino 和各种电子部件的 Web 组件.

Standalone Components¶

<api-viewer> - Web 组件的 API 文档和实时游乐场.
<app-datepicker> - 使用 LitElement 和 Material Design 2 构建的日期选择器元素.
<burgton-button> - 简单易用、可定制且易于访问的汉堡按钮元素.
<code-block> - 使用 Prism.js 和 LitElement 显示彩色格式代码的 Web 组件.
<codesandbox-button> - 单击它时显示 CodeSandbox 演示的自定义元素.
<granite-qrcode-generator> - 使用 qr.js 库生成和呈现 QR 码的自定义元素.
<helium-animated-pages> - 用于创建使用 Lit 构建的 CSS 动画的 Web 组件.
<json-viewer> - 用于在树视图中可视化 JSON 数据的 Web 组件.
<light-gallery> - Lit 的全功能 JavaScript 图像和视频库.
<lit-datatable> - 数据表的 Material Design 实现，由 LitElement 提供支持.
<lottie-player> - 用于轻松嵌入和播放 Lottie 动画的 Web 组件.
<model-viewer> - 用于呈现交互式 3D 模型的 Web 组件.
<rapi-doc> - 用于查看 OpenAPI 3.0 和 Swagger 2.0 规范的 Web 组件.
<round-slider> - 使用 Lit 构建的简单圆形滑块 Web 组件.
<stl-part-viewer> - 利用 Three.js 显示 STL 模型文件的 LitElement Web 组件.

Tools¶

Building¶

babel-plugin-lit-property-types-from-ts - 用于根据 TypeScript 类型注释为 Lit 组件中声明的反应属性设置“类型”的 Babel 插件.
babel-plugin-template-html-minifier - 用于缩小标记模板字符串中 HTML 的 Babel 插件.
esbuild-plugin-lit - ESBuild 插件，用于将 CSS、SVG、HTML、XLIFF 文件导入为 JavaScript 标记模板文字对象.
esbuild-plugin-lit-css - ESBuild 插件，用于将 css 文件导入为 JavaScript 标记模板文字对象.
lit-css-loader - Webpack 加载器将 css 文件导入为 JavaScript 标记模板文字对象.
lit-scss-loader - 用于将 CSS/SCSS 导入 Lit 组件的 Webpack 加载器.
rollup-plugin-lit-css - 用于将 css 文件导入为 JavaScript 标记模板文字对象的 Rollup 插件.
rollup-plugin-minify-html-literals - 用于缩小标记模板字符串中 HTML 的 Rollup 插件.
rollup-plugin-postcss-lit - 用于在 Lit 组件中加载 PostCSS 处理样式表的 Rollup 插件.

Linting¶

eslint-plugin-lit - Lit 模板字符串的 ESLint 插件.
eslint-plugin-lit-a11y - Lit 模板的辅助功能检查插件.
lit-analyzer - 类型检查 Lit 模板中的绑定的 CLI.

IDE Plugins¶

vscode-lit-html - 用于 lit-html 模板字符串的语法突出显示和 IntelliSense.
vscode-lit-plugin - lit-html 的语法突出显示、类型检查和代码完成.
es6-string-html - VSCode 扩展，为 ES6 多行字符串中的 HTML 提供语法高亮显示.
vim-html-template-literals - 标记模板文字中 HTML 的语法突出显示和缩进.

TypeScript Plugins¶

ts-lit-plugin - 为 Lit 模板添加类型检查和代码完成的插件.
typescript-lit-html-plugin - 为 Lit 模板添加 IntelliSense 的 TypeScript 服务器插件.

Other Tools¶

@custom-elements-manifest/analyzer - 用于为 Web 组件生成 API 文档的 CLI 工具.
Storybook for web-components - 用于纯 Web 组件片段的 UI 开发环境.
web-components-codemods - 与 lit-html 模板文字兼容的 Web 组件代码模型.
Web Component DevTools - 用于使用 Web 组件的开发人员的浏览器扩展.
Web Component Factory - 用于生成、构建、测试和发布 Web 组件的 CLI 工具.

CDN¶

以下内容分发网络提供 Lit 的 ES 模块版本：

See lit.dev documentation 用于使用捆绑包.

Integrations¶

Bridgetown Lit Renderer - SSR + 布里奇敦 Lit 组件的水合作用.
Fable.Lit - Collection of tools to embed HTML code into F# code with the power of Lit.
Ruby2JS - 最小但可扩展的 Ruby 到 JavaScript 的转换.

Videos¶

Podcasts¶

The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals - lit-html 创作者 Justin Fagnani 的一集.
ShopTalk Show 348: Getting lit-html with Justin Fagnani - 贾斯汀·法格纳尼 (Justin Fagnani) 客串的另一集.

Archive¶

以下文章引用旧版本的 lit-html 和 LitElement.

Similar libraries¶

这些库与 Lit 无关，但使用类似的概念构建. 他们使用 html 标记模板文字，并利用相同的好处 IDE Plugins 用于语法高亮.

haunted - React 的 Hooks API，但用于标准 Web 组件和 hyperHTML 或 lit-html.
htm - Hyperscript 标记标记：使用标准标记模板的 JSX 替代方案，具有编译器支持.
hybrids - 用于使用简单实用的 API 创建 Web 组件的 UI 库.
lit-ntml - 受 lit-html 启发，Node.js 中 SSR 的轻量级现代模板.

Other awesome resources¶

如果你想要更多精彩资源，请查看 awesome 列表！

Awesome lit

Awesome lit

Awesome Lit ¶

General resources¶

Community¶

Overview¶

Starter Templates¶

Codelabs¶

Tutorials¶

Examples¶

Lit Labs¶

Extensions¶

Design Systems¶

Component Libraries¶

Standalone Components¶

Tools¶

Building¶

Linting¶

IDE Plugins¶

TypeScript Plugins¶

Other Tools¶

CDN¶

Integrations¶

Videos¶

Podcasts¶

Archive¶

Similar libraries¶

Other awesome resources¶

License¶

相关项目

Android UI

Angular

Ant Design

Aurelia

Awesome blazor

Awesome css frameworks