Using Lit & TypeScript guide #110
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
undavide
requested changes
Mar 14, 2025
Comment on lines
398
to
404
| Next, you can explore more advanced features of Lit and TypeScript to enhance your components. Some areas to explore include: | ||
|
|
||
| - **Event Handling**: Learn how to handle events in Lit components and communicate between components. | ||
| - **Component Composition**: Explore how to compose multiple components together to create complex UIs. | ||
| - **State Management**: Implement state management solutions like Redux or MobX to manage the state of your components. | ||
| - **Performance Optimization**: Optimize your components for performance by using memoization, lazy loading, and other techniques. | ||
| - **Testing**: Write unit tests for your components using tools like Jest or Mocha to ensure their correctness and reliability. |
There was a problem hiding this comment.
It would be great to have links for all the next steps, like
- [**Event Handling**](https://lit.dev/docs/v1/components/events/): Learn how to handle events in Lit components and communicate between components.
- [**Component Composition**](https://lit.dev/docs/composition/component-composition/): Explore how to compose multiple components together to create complex UIs.
|
I also see that the Linter is complaining... 🙄 |
nimithajalal
requested changes
Mar 20, 2025
| @@ -17,6 +17,10 @@ An example of how this works in Visual Studio Code is shown in this short clip b | |||
| <iframe src="https://drive.google.com/file/d/1FzUaPZMjPD9k0ANQNibqRMiZRrSAIChg/preview" width="800" height="450" allow="autoplay"></iframe> | |||
| </div> | |||
|
|
|||
| <InlineAlert slots="text" variant="info"/> | |||
|
|
|||
| Make sure you check out the [Using Lit & Typescript Guide](./lit-guide.md) for a more detailed explanation of how to use TypeScript with the Add-on SDK. | |||
There was a problem hiding this comment.
Check out the Using Lit & Typescript Guide for a more detailed explanation of using TypeScript with the Add-on SDK.
| @@ -61,6 +65,13 @@ new CopyWebpackPlugin({ | |||
|
|
|||
| The CLI supports two different [react-based templates](../getting_started/dev_tooling.md#templates), and the [code samples](../../samples.md) repository contains various add-ons built with React for you to use as a reference. | |||
|
|
|||
| ## Lit Framework | |||
|
|
|||
| The CLI provides [starter template options](../getting_started/dev_tooling.md#templates) which provide a basic setup to allow you to use the Lit framework, a lightweight library for building fast, lightweight web components. There are currently template options available for either using basic JavaScript (`swc-javascript`) with Lit or TypeScript (`swc-typescript`), preconfigured to help you get started. | |||
There was a problem hiding this comment.
Build fast, lightweight web components using the Lit framework. Our CLI offers [starter templates(../getting_started/dev_tooling.md#templates) to help you get started:
swc-javascript: For building with Lit and JavaScriptswc-typescript: For building with Lit and TypeScript
Both templates come pre-configured with the necessary setup and dependencies.
For detailed guidance on using Lit with TypeScript, you can check out our [Using Lit & TypeScript Guide](./using-lit-typescript.md).There was a problem hiding this comment.
Can we have section headers similar to these?
- What can you do with this guide? And why should you use this?
- Prerequisites
- Getting Started
- Core Concepts - Required for achieving the end result.
- Component Development
- Advanced features- If any
- Integration with Adobe Add-on SDK
- Testing and Debugging
- Deployment
- End-to-end sample code
- Troubleshooting
|
|
||
| When you develop add-ons with a combination of [Lit](https://lit.dev/) and [TypeScript](https://https://www.typescriptlang.org/), you get the benefits of both worlds; a lightweight component library with reactive properties and templating capabilities, which help you build fast and efficient components, and the robust type system provided by TypeScript. | ||
|
|
||
| ## Lit Key Features |
There was a problem hiding this comment.
Are these general features specific to us?
If these are generic, we can put in the pre-req and say, we assume, you know these.
| } | ||
| ``` | ||
|
|
||
| ## Create a new Lit Component |
There was a problem hiding this comment.
I assume this is the end goal of this document. If yes, then, we should call it out in the beginning, mentioning, this is what we are teaching you.
nimithajalal
requested changes
Apr 23, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
New Guide for Developing with Lit & TypeScript
Screenshots (if appropriate):
Types of changes
Checklist: