LIT-Protocol / developer-guides-code

A repository of code examples and reference implementations used for Lit Developer Guides
9 stars 6 forks source link

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

Open Ansonhkg opened 1 week ago

Ansonhkg commented 1 week ago

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

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
Ansonhkg commented 1 week ago

don't merge this yet