diff --git a/README.md b/README.md index 0628448..2144cd5 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,10 @@ This repository contains multiple packages which can be used to work with [Custo Any editor/IDE configured as an LSP client using the instance of tsserver which this plugin is installed to _should_ be compatible. +## Quickstart Example + +**A simple setup in your project should take less than five minutes.** Follow along with a video [here](https://www.loom.com/share/3dfdb245cbfc4fc1a166df8b19c123a5?sid=c478ca86-f0ba-4cfe-af9d-7ee6d30e26c6) and look at [this example project](https://github.com/genesiscommunitysuccess/cep-setup-example) and see the [changeset required to enable the LSP](https://github.com/genesiscommunitysuccess/cep-setup-example/pull/2/files). + ## Packages ### Custom Elements LSP Plugin @@ -23,7 +27,14 @@ npm i @genesiscommunitysuccess/custom-elements-lsp --save-dev The [CEP](./packages/core/custom-elements-lsp/README.md) is the primary package of the monorepo, and is a plugin for the TypeScript language server which adds in support for custom elements. -![Autocompletion of custom element tag names](./docs/custom-elements-lsp/base_ce_completion.gif "Custom Element Completion") ![Autocompletion of html in neovim](./docs/custom-elements-lsp/vim_tagname_quicklook.gif "Element Intellisense in NeoVim") ![Autocompletion of custom element attribute](./docs/custom-elements-lsp/base_attr_completion.gif "Attribute Completion") ![Autocompletion of custom element in neovim](./docs/custom-elements-lsp/vim_ce.gif "Custom Element in NeoVim") ![Diagnostics of invalid attributes on a custom element](./docs/custom-elements-lsp/base_invalid_attr.gif "Diagnostics") ![Jumping to definition source file of a custom element](./docs/custom-elements-lsp/base_jump_to_definition.gif "Jump to Definition") +Element Intellisense in NeoVim +
+ Show more examples +
+ Custom Element Completion + Custom Element in NeoVim + Jump to Definition +
### CEP FAST Plugin @@ -35,8 +46,14 @@ npm i @genesiscommunitysuccess/cep-fast-plugin --save-dev The [FAST Plugin](./packages/core/cep-fast-plugin/README.md) 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. - -![Property binding autocompletion](./docs/cep-fast-plugin/fast_property_binding.gif "Property Binding Autocompletion") ![Boolean attribute autocompletion](./docs/cep-fast-plugin/fast_boolean_attr_binding.gif "Boolean Attribute Binding Autocompletion") ![Event binding autocompletion](./docs/cep-fast-plugin/fast_event_binding.gif "Event Binding Autocompletion") ![Extra quickinfo functionality](./docs/cep-fast-plugin/fast_quicklook.gif "Quickinfo Extended Functionality") +Property Binding Autocompletion +
+ Show more examples +
+ Boolean Attribute Binding Autocompletion + Event Binding Autocompletion + Quickinfo Extended Functionality +
### Analyzer Import Alias Plugin diff --git a/packages/core/cep-fast-plugin/README.md b/packages/core/cep-fast-plugin/README.md index 490e2c3..01e3965 100644 --- a/packages/core/cep-fast-plugin/README.md +++ b/packages/core/cep-fast-plugin/README.md @@ -10,7 +10,14 @@ This is a [@genesiscommunitysuccess/custom-elements-lsp](https://www.npmjs.com/p * Support for boolean attribute bindings in templates `?attr`. * Support for event bindings autocompletion and diagnostics for `@events`. Extra info in quickinfo window. -![Property binding autocompletion](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_property_binding.gif "Property Binding Autocompletion") ![Boolean attribute autocompletion](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_boolean_attr_binding.gif "Boolean Attribute Binding Autocompletion") ![Event binding autocompletion](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_event_binding.gif "Event Binding Autocompletion") ![Extra quickinfo functionality](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_quicklook.gif "Quickinfo Extended Functionality") +Property Binding Autocompletion +
+ Show more examples +
+ Boolean Attribute Binding Autocompletion + Event Binding Autocompletion + Quickinfo Extended Functionality +
## Setup diff --git a/packages/core/custom-elements-lsp/README.md b/packages/core/custom-elements-lsp/README.md index 1b886bb..82643db 100644 --- a/packages/core/custom-elements-lsp/README.md +++ b/packages/core/custom-elements-lsp/README.md @@ -14,11 +14,30 @@ Install this TypeScript plugin in your project to enhance your LSP enabled edito Any editor/IDE configured as an LSP client using the instance of tsserver which this plugin is installed to _should_ be compatible. -![Autocompletion of custom element tag names](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_ce_completion.gif "Custom Element Completion") ![Autocompletion of custom element attribute](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_attr_completion.gif "Attribute Completion") ![Diagnostics of invalid attributes on a custom element](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_invalid_attr.gif "Diagnostics") ![Jumping to definition source file of a custom element](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_jump_to_definition.gif "Jump to Definition") +## Quickstart Example + +**A simple setup in your project should take less than five minutes.** Follow along with a video [here](https://www.loom.com/share/3dfdb245cbfc4fc1a166df8b19c123a5?sid=c478ca86-f0ba-4cfe-af9d-7ee6d30e26c6) and look at [this example project](https://github.com/genesiscommunitysuccess/cep-setup-example) and see the [changeset required to enable the LSP](https://github.com/genesiscommunitysuccess/cep-setup-example/pull/2/files). + +## Demos + +Custom Element Completion +
+ Show more examples +
+ Attribute Completion + Diagnostics + Jump to Definition +
Quicklook information is also provided, as well as IntelliSense for standard HTML elements. As previously stated, you can use any LSP enabled editor, such as Vim/NeoVim with LSP plugins for example. -![Autocompletion and quicklook of a standard HTML element in vim editor](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_tagname_quicklook.gif "Element IntelliSense in NeoVim") ![A second example of autocompletion and quicklook of a standard HTML element in vim editor](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_tagname_quicklook_two.gif "Another Example") ![An example of autocompletion and quicklook of a custom element in vim editor](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_ce.gif "Custom Element in NeoVim") +Custom Element in NeoVim +
+ Show more examples +
+ Element IntelliSense in NeoVim + Another Example +
There is an additional [companion plugin](https://www.npmjs.com/package/@genesiscommunitysuccess/cep-fast-plugin) which enables functionality when working with [FAST](https://www.fast.design/).