Skip to content

Using Lit & TypeScript guide #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
May 7, 2025
6 changes: 5 additions & 1 deletion gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -838,7 +838,11 @@ module.exports = {
{
title: "Frameworks, Libraries and Bundling",
path: "guides/develop/frameworks-libraries-bundling.md",
},
},
{
title: "Using Lit & TypeScript",
path: "guides/develop/using-lit-typescript.md",
},
{
title: "Performance Tips",
path: "guides/develop/performance.md",
Expand Down
25 changes: 22 additions & 3 deletions src/pages/guides/develop/frameworks-libraries-bundling.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>

Check out the [Using Lit & Typescript Guide](./using-lit-typescript.md) for a more detailed explanation of using TypeScript with the Add-on SDK.

## Webpack & JavaScript bundler

When using Node libraries or other frameworks, you'll often need to use a JavaScript bundler. All of the templates the CLI provides (other than the basic `javascript` template) are pre-configured for webpack via the `--use` option set on the `ccweb-add-on-scripts` commands. If you create a new add-on project based on a react or typescript based template for instance, you will see the following `scripts` block generated in your `package.json`, and the existence of a `webpack.config.js` in the root of your project:
Expand Down Expand Up @@ -63,10 +67,25 @@ The CLI supports two different [react-based templates](../getting_started/dev_to

## 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.
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 JavaScript
- `swc-typescript`: For building with Lit and TypeScript
- `swc-typescript-with-document-sandbox`: For building with Lit and TypeScript with the Document Sandbox
- `swc-javascript-with-document-sandbox`: For building with Lit and JavaScript with the Document Sandbox

All templates come pre-configured with the necessary setup and dependencies.

<!-- To learn more about developing with [Lit](https://lit.dev/), be sure to check out the [Using Lit & TypeScript Guide](./using-lit-typescript.md). -->
For detailed guidance on using Lit with TypeScript, you can check out our [Using Lit & TypeScript Guide](./using-lit-typescript.md).

## Other JavaScript and CSS libraries

You should be able to use any other JavaScript or CSS libraries you might want to include in your add-ons (ie: jQuery, Bootstrap) without any issues. Just make sure you include the necessary scripts and stylesheets in your project, and ensure they are bundled correctly by your chosen bundler.
You can enhance your add-ons with additional JavaScript and CSS libraries like jQuery or Bootstrap. Follow these steps to integrate them:

1. Add the library's scripts and stylesheets to your project.
2. Configure your bundler to process these files.
3. Import the libraries where needed in your code.

<InlineAlert slots="text" variant="info"/>

Make sure your chosen bundler is properly configured to handle any additional libraries you include.
Loading