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-editors

Restore 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()
          )
        );
      },
    },
  },
});