Skip to content
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

feat: add lit-actions-ts-bundling example #71

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

Ansonhkg
Copy link
Contributor

@Ansonhkg Ansonhkg commented Oct 19, 2024

What

An example to write Lit Action code in Typescript and bundling them using esBuild. You will also get Type definition for the Lit Action global variables, such as Lit.Actions and Lit.Auth.

image

Getting started

npm install

Start writing your Lit Action like a regular TS

  • See demo in ./src/lit-actions/hello-world.ts

To build and bundle the TS Lit Action code

npm run build

This will build and bundle all files in ./src/lit-actions/*.ts, and the output will be in ./src/lit-actions/dist.

Getting the bundled Lit Action Code

In your ./src/index.ts file, you can import the bundled Lit Action code like this:

import { code } from "./lit-actions/dist/hello-world.js";

console.log("litActionCode:", code);

output

npm run build

> lit-actions-ts-bundling@1.0.0 build
> node esbuild.config.js

🗂️  File: src/lit-actions/dist/hello-world.js
   Size: 0.0251 MB (decimal) | 0.0239 MB (binary)
================================================
✅ Lit actions built successfully in 0.02 seconds

lit-actions-ts-bundling/esbuild.config.js Outdated Show resolved Hide resolved
lit-actions-ts-bundling/esbuild.config.js Outdated Show resolved Hide resolved
@Ansonhkg
Copy link
Contributor Author

don't merge this yet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants