Lit Protocol Javascript/Typescript SDK
The Lit JavaScript SDK provides developers with a framework for implementing Lit functionality into their own applications. Get started with the Lit SDK based on your use case.
Packages
Package | Category | Version | Download |
---|---|---|---|
@lit-protocol/lit-node-client | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/access-control-conditions | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/bls-sdk | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/constants | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/crypto | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/ecdsa-sdk | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/encryption | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/misc | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/uint8arrays | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/auth-browser | 0.1.78 | npm Vanilla JS |
|
@lit-protocol/misc-browser | 0.1.78 | npm Vanilla JS |
Docs: http://docs.lit-js-sdk-v2.litprotocol.com/
Demo(HTML): http://test.lit-js-sdk-v2.html.litprotocol.com/
Recommended VSCode Extensions
Nx Console
Download: https://nx.dev/core-features/integrate-with-editorsRestore Terminal
Download: https://marketplace.visualstudio.com/items?itemName=EthanSK.restore-terminals See Video
"restoreTerminals.terminals": [
{See [Video](https://streamable.com/e/5g52m4)
"splitTerminals": [
// {
// "name": "nx graph",
// "commands": ["yarn graph"]
// },
{
"name": "nodejs",
"commands": ["yarn nx run nodejs:serve"]
},
{
"name": "html",
"commands": ["yarn nx run html:serve"]
},
{
"name": "react",
"commands": ["yarn nx run react:serve"]
},
{
"name": "custom",
"commands": ["clear"]
}
]
}
]
Workflow
Creating a new library
By default, NX provides a command to generate a library
nx generate @nrwl/js:library
. However, it doesn't have an esbuild built-in so that we've created a custom tool that modify the build commands.
yarn tool:genLib <package-name>
// NOTE! If you intend to publish this package, you have to add the following to your package.json
publishConfig: {
access: 'public',
directory: '../../dist/packages/<package-name>'
},
Deleting a library
yarn tool:delete (--package OR --app) <project-name>
Building
Building all packages
// 1. run the 'build' command in all projects specified in `project.json`
// 2. map the 'peerDependencies' to 'dependencies' in the dist folders, so that dependencies will be installed when a user 'yarn add'
// 3. generate a package summary inside README.md between the <!-- autogen:package --> tags
// src: tools/scripts/build.mjs
yarn build:packages
Building a specific package
// OPTION 1: (MAIN)
// 1. build tsc & web bundle
// 2. map each dist folder name to package.json name (for publishing)
// 3. generate html, react, and nodejs test apps
yarn nx run <project-name>:build
// OPTION 2: (Building tsc)
// output: dist/packages/<project-name>
yarn nx run <project-name>:_buildTsc
// OPTION 3: (esBuilding vanilla web bundle)
// output: dist/package/<project-name>-vanilla
yarn nx run <project-name>:_buildWeb
Publishing
Publishing everything
// This will publish everything inside the `dist` folder
yarn publish:packages
Publishing vanilla packages only
// It will scans through the dist folder and filter out the folders that contains the word `vanilla`
// cd in there && npm publish --acces public
// src: tools/scripts/pub.mjs
yarn publish:vanilla
Publising HTML Test app to Vercel
yarn tool:buildHtml
Testing
Environments
There are currently three environments can be tested on, each of which can be generated from a custom command, which would automatically import all the libraries in ./packages/*
. The UI of HTML & React are visually identical but they are using different libraries.
Environment | Generate Command | Test Location |
---|---|---|
HTML | yarn tool:genHtml |
http://localhost:4002 |
React | yarn tool:genReact |
http://localhost:4003 |
NodeJs | yarn tool:genNodejs |
yarn nx run nodejs:serve |
Note: Personally I like to use the "Restore Terminal" VSCode plugin to automatically open all these environments. See Video
Unit Tests (for Node)
yarn test:packages
// watch mode
yarn test:watch
E2E Testing with Metamask using Cypress (for Browser)
Since both HTML & React UIs are identical, we can run the same test suite against two different environments of libraries. This is done by setting the PORT
number before Cypress launch.
HTML See Video
// E2E HTML
yarn cy:open:html
React See Video
// E2E React
yarn cy:open:react
Other Commands
Interactive graph dependencies using NX
yarn graph
FAQs & Common Errors
Web bundling using esbuild
It’s currently using a custom plugin @websaam/nx-esbuild which is a fork from @wanews/nx-esbuild
"_buildWeb": {
"executor": "@websaam/nx-esbuild:package",
"options": {
"banner": {
"js": "import { createRequire } from 'module';const require = createRequire(import.meta.url);"
},
"globalName": "LitJsSdk_CoreBrowser",
"outfile":"dist/packages/core-browser-vanilla/core-browser.js",
"entryPoints": ["./packages/core-browser/src/index.ts"],
"define": { "global": "window" },
"plugins":[
{
"package": "esbuild-node-builtins",
"function": "nodeBuiltIns"
}
]
}
}
Reference Error: crypto is not defined
import crypto, { createHash } from 'crypto';
Object.defineProperty((globalThis), 'crypto', {
value: {
getRandomValues: (arr: any) => crypto.randomBytes(arr.length),
subtle: {
digest: (algorithm: string, data: Uint8Array) => {
return new Promise((resolve, reject) =>
resolve(
createHash(algorithm.toLowerCase().replace('-', ''))
.update(data)
.digest()
)
);
},
},
},
});