The Genesis Global Community Success initiative is committed to open-sourcing select technologies that we believe the open-source community would benefit from.

Custom Elements Monorepo

This repository contains multiple packages which can be used to work with Custom Elements.

Editor	Completions	Diagnostics	Quickinfo	Info
VSCode	✅	✅	✅	Requires configuration to use local tsserver instance. Setup
Vim/NeoVim	✅	✅	✅	Requires configuration as an LSP client for TypeScript. Setup
JetBrains (IntelliJ/Webstorm/etc...)	➖	✅	❌	JetBrains IDEs currently only have partial support as an LSP client. Setup

Any editor/IDE configured as an LSP client using the instance of tsserver which this plugin is installed to should be compatible.

Quickstart Example

Adding the LSP to your project takes less than 5 minutes. Follow along with our Setup Walkthrough Video, try our pre-setup Example Project, and see the Changeset required to enable the LSP in the example project.

Packages

Custom Elements LSP Plugin

npm i @genesiscommunitysuccess/custom-elements-lsp --save-dev

The CEP is the primary package of the monorepo, and is a plugin for the TypeScript language server which adds in support for custom elements.

Show more examples

CEP FAST Plugin

npm i @genesiscommunitysuccess/cep-fast-plugin --save-dev

The FAST Plugin for the CEP enables https://www.fast.design/ enhancements. Examples of this is using the :prop syntax for property bindings, and ?attr syntax for boolean attributes.

Show more examples

Analyzer Import Alias Plugin

npm i @genesiscommunitysuccess/analyzer-import-alias-plugin --save-dev

The Analyzer Plugin is a plugin for the custom elements analyzer which enhances its support for import aliases.

Showcase Example

The private showcase example application is a test harness application built with TypeScript and MS Fast and is used to test out the Custom Elements Plugin (CEP) locally inside the monorepo.

Showcase Example Library

The private showcase example library is an example library of web components. It can be used as a test harness for testing the Custom Elements Plugin (CEP) to demonstrate that it works with library code, and it is imported into the showcase example app to demonstrate that the CEP works with imported code.

Contributing

Thanks for taking interest in contributing to the Custom Elements Plugin. See the contributing guidelines.

License

See here.