open-index/open-npm huggingface dataset:
npm package: @lifebrand/eslint-config-lifebrand
Description: Shared eslint configuration files for LifeBrand projects
Author: LifeBrand
Latest version: 1.0.4

# About
A centralized place for ESLint Configuration for LifeBrand Projects

## Contribute

❗️Speak with the team first and agree on changes

Feel free to add more configuration if needed, or update existing after some team consensus

### Publish
Prerequisite: Invited to LifeBrand NPM organization, ask your LE for access
1. `npm login`
2. `npm run publish-package`
npm package: @lifebyspot/ts-transform-inject-environment-variables
Description: Injects hardcodede environment variables at compile time
Author: Pablo Dorado
Latest version: 1.0.3

# Transformer Plugin: Inject Environment Variables

This `ttsc` compliant transformer allows you to inject environment variables on your code at compile time.

This is done by replacing the initializers of variable declarations. You can [learn how to](https://blogs.u2u.be/diedrik/post/typescript-transformers-transform-and-rise-up) do that, too!


## Setup

Run `npm install` to save the package in your project.

```sh
npm install -D @lifebyspot/ts-transform-inject-environment-variables 
```

## Usage

Basically, there's two main scenarios you can use to inject variables using this plugin.

First, the variables defined using `process.env` as initializer.

```ts
export const API_BASE_URL = process.env.API_BASE_URL;
export let ASDASDASDASD = process.env.ASDASDASDASD;
```

or 

```ts
export const API_BASE_URL = process.env['API_BASE_URL'];
```

Will be converted into:

```js
export const API_BASE_URL = 'https://api.example.com';
export let ASDASDASDASD;
```

Second, the variables defined using a destructuring syntax.

```ts
export const { API_BASE_URL } = process.env;
```

Will be converted into:

```js
export const { API_BASE_URL = 'https://api.example.com' } = {};
```

**Bonus:** If no environment variable is found, the variable will be uninitialized. However, it's possible to use the [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) operator or [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) default values to define a default value to assign when this happens.

```ts
const { HOME = '/root' } = process.env;
const PATH = process.env.PATH ?? '/bin:/usr/bin';
```

Will be converted to:

```js
const { HOME = '/root' } = {};
const PATH = '/bin:/usr/bin';
```

> **Note:** Do not define variables that might be undefined as `const`.
> 
> ```ts
> export const ASDASDASDASD = process.env.ASDASDASDASD;
> ```
> 
> This is because, when running the compiled version, would end up with an uninitialized `const` variable, which is basically a violation of Javascript's rules.
> 
> ```js
> export const ASDASDASDASD; // Not valid
> ```

### Prerequisites

- [`ttsc`](https://github.com/cevek/ttypescript)

### Configuration

Add the plugin to the `plugins` list on `tsconfig.json`.

```json
{
    // ...
    "compilerOptions": {
        "plugins": [
            {
                "transform": "@lifebyspot/ts-transform-inject-environment-variables",
                "type": "config"
            }
        ]
    }
    // ...
}
```

### Running

Just run `ttsc` against your project working directory. That it.


## Contributing

Just send an issue or a PR! ;)
npm package: @lifechurch/facebook-pixel
Description: ## Usage ```javascript yarn add @lifechurch/facebook-pixel@latest ```
Author: Michael Haglund
Latest version: 0.2.0

# @lifechurch/facebook-pixel

## Usage
```javascript
yarn add @lifechurch/facebook-pixel@latest
```

```javascript
import FacebookPixel from '@lifechurch/facebook-pixel';

FacebookPixel.init('PIXEL_ID');
FacebookPixel.pageView();
```

## Commands

TSDX scaffolds your new library inside `/src`.

To run TSDX, use:

```bash
npm start # or yarn start
```

This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.

To do a one-off build, use `npm run build` or `yarn build`.

To run tests, use `npm test` or `yarn test`.

## Configuration

Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.

### Jest

Jest tests are set up to run with `npm test` or `yarn test`.

### Bundle Analysis

[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.

#### Setup Files

This is the folder structure we set up for you:

```txt
/src
  index.tsx       # EDIT THIS
/test
  blah.test.tsx   # EDIT THIS
.gitignore
package.json
README.md         # EDIT THIS
tsconfig.json
```

### Rollup

TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.

### TypeScript

`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.

## Continuous Integration

### GitHub Actions

Two actions are added by default:

- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)

## Optimizations

Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:

```js
// ./types/index.d.ts
declare var __DEV__: boolean;

// inside your code...
if (__DEV__) {
  console.log('foo');
}
```

You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.

## Module Formats

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.

## Publishing to NPM

1. Open an MR and assign the appropriate label for semantic versioning bump (major/minor/patch) as well as the `release` label.
2. A canary release will be made on any branches not `master`.
3. When merged into `master` the latest tag on NPM will be updated.
npm package: @lifechurch/react-draftable
Description: A simple, customizable rich text editor built on Draft.js
Author: Michael Haglund
Latest version: 2.1.0

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)[![pipeline status](https://in.thewardro.be/io/opennetwork/react-draftable/badges/master/pipeline.svg)](https://in.thewardro.be/io/opennetwork/react-draftable/commits/master)

Documentation is coming soon.
npm package: @lifechurch/react-ion
Description: Styled Components for use with the ION Design System
Author: Michael Haglund
Latest version: 12.24.6

# React ION

[![Netlify Status](https://api.netlify.com/api/v1/badges/5d03df6a-65cb-46a0-8297-7adb477fe191/deploy-status)](https://app.netlify.com/sites/iondesign/deploys) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![pipeline status](https://in.thewardro.be/io/react-ion/badges/master/pipeline.svg)](https://in.thewardro.be/io/react-ion/commits/master)

A collection of [Styled Components](https://styled-components.com) for use with the [ION Design System](https://www.figma.com/file/gn7aPLCKjWz8KkVkjJM6kXxW/ion-Design-Language?node-id=277%3A243).
For consistency in our components this library utilizes Styled System to add utility props to alter styling that falls in line with our design system.

This design system utilizes [Storybook](https://storybook.js.org/) to preview and interact with different components.

View our [Production Storybook](https://iondesign.netlify.com)

## Getting Started

### Prerequisites

- nvm: https://github.com/creationix/nvm#installation
- yarn: https://yarnpkg.com/lang/en/docs/install

NOTE: We use yarn because of the added security benefits as well as other features. Because yarn using yarn.lock and npm using package.lock we need to be consistent about using the same package tool within a project.

### Installing

`yarn install`

## Local Development

This project uses semantic-release and git-cz to manage our NPM releases. Make sure to install `commitizen`:

```bash
npm install -g commitizen
```

When running `git commit` you will be prompted with a CLI. The CLI will generate a formatted commit message that will determine the release of the next version.

`git commit`

To run the tests:

`yarn test`

To check TypeScript types:

`yarn types:check`

To check Linting (this will lint with JS and CSS):

`yarn lint`

To run all tests required to pass CI use:

`yarn validate`

To start the development Storybook:

`yarn storybook`

To update storyshots use:

`yarn test -u`

## Production Build

To build code ready for production use:

`yarn build`

To start the production application use:

`yarn start`

## Deployment

Changes merged into `master` are automatically deployed and released by our CI/CD pipeline. This done with Gitlab CI.

## Components

COMING SOON - Look in our Storybook stories for examples

## Contributing

Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## License

This project is licensed under the MIT License -- see the [LICENSE](LICENSE.md) for details.
npm package: @lifechurch/subserver
Description: Subserver is a background server process for processing messages from Google Pub/Sub.
Author: Michael Haglund
Latest version: 2.0.0

# @lifechurch/subserver

Subserver is a background server process for processing messages from Google Pub/Sub.

## Usage
### Install
`yarn add @lifechurch/subserver @google-cloud/pubsub`

### Start
```
import Subserver from '@lifechurch/subserver';
import { handlers } from './handlers';

const handler = message => {
  // perform some action
  message.ack();
};

const config = {
  subscribers: [
    {
      name: 'subscription',
      queue: 'default',
      handler: handler,
    }
  ],
  queue: 'default', // optional
  keepAliveInterval: 1000 * 60 * 60 //optional
};

Subserver.start(config);
```

### Configuration
Property | Type | Description
-------- | ---- | -------
`subscribers` | Array | `name`: Name of the Subscription<br/>`queue`: Queue to process the Subscription on<br/>`handler`: Listener function to execute when a message is received
`queue` | String | Name of the queue to process the subscription on
`livenessPort` | Number | The port in which to run the liveness server (Default: 4000)


## Local Development

Below is a list of commands you will probably find useful.

### `yarn build`

Bundles the package to the `dist` folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

### `yarn test`

Runs the test watcher (Jest) in an interactive mode.
By default, runs tests related to files changed since the last commit.
npm package: @lifecycle-auto/node
Description: Node.js SDK for Lifecycle — AI-Powered Customer Lifecycle Automation for SaaS
Latest version: 1.0.1

# @lifecycle-auto/node

Node.js SDK for [Lifecycle](https://lifecycle.io) — AI-Powered Customer Lifecycle Automation for SaaS.

Connect your backend in 15 minutes. Our AI detects every meaningful user action, generates perfectly branded emails, and sends them at exactly the right moment — automatically.

## Install

```bash
npm install @lifecycle-auto/node
```

## Quick Start

```javascript
import Lifecycle from '@lifecycle-auto/node'

const lifecycle = new Lifecycle('YOUR_API_KEY')

// Identify a user (call on signup or profile update)
lifecycle.identify('user_123', {
  email: 'jane@example.com',
  name: 'Jane Smith',
  plan: 'trial'
})

// Track events (call when meaningful actions happen)
lifecycle.track('user_123', 'project_created', {
  projectName: 'My First Project'
})

lifecycle.track('user_123', 'teammate_invited', {
  inviteeEmail: 'bob@example.com'
})
```

## API

### `new Lifecycle(apiKey, options?)`

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `apiUrl` | string | `https://api.lifecycle.io` | API endpoint |
| `timeout` | number | `10000` | Request timeout (ms) |
| `debug` | boolean | `false` | Log debug info |

### `lifecycle.identify(userId, traits)`

Identify a user. Call this on signup and whenever their profile changes.

| Param | Type | Description |
|-------|------|-------------|
| `userId` | string | Your internal user ID |
| `traits.email` | string | User's email (required for emails to send) |
| `traits.name` | string | User's display name |
| `traits.plan` | string | Current plan (free, trial, pro, etc.) |
| `traits.*` | any | Any additional properties |

### `lifecycle.track(userId, event, properties?)`

Track an event. Our AI decides what triggers to create and what emails to send.

| Param | Type | Description |
|-------|------|-------------|
| `userId` | string | Your internal user ID |
| `event` | string | Event name (e.g. 'project_created') |
| `properties` | object | Event metadata |

## Design Principles

- **Non-blocking** — all calls are fire-and-forget, never slows your app
- **Silent failure** — network errors are swallowed, never crashes your app
- **Zero dependencies** — uses native `fetch`, no bloat
- **Lightweight** — under 2KB minified

## License

MIT
npm package: @lifeeric/react-localstroage
Description: Synchronous localStorage package for NodeJs apps.
Author: @lifeeric
Latest version: 1.0.3

# @lifeeric/react-localstroage

Synchronous localStorage package for NodeJs apps.

## Install

```bash
yarn add @lifeeric/react-localstroage
```

Or with npm

```bash
npm install --save @lifeeric/react-localstroage
```

## Usage

#### Set Item

set item in localStorage for later usage

```jsx
import { getLocalStorage } from "@lifeeric/react-localstroage";

function login({ payload }) {
  try {
    const results = apiCall("/auth", payload, null, "POST");
    const token = results.data.access_token;

    setLocalStorage("acccess_token_appname", token);
    setLocalStorage("login_obj", JSON.stringify(results.data));
  } catch (error) {
    console.log("login", error);
  }
}
```

---

#### Get Item

now get the item from the localStorage

```jsx
import { getLocalStorage } from "@lifeeric/react-localstroage";

function getUser({ userId }) {
  try {
    // get the token from the localStorage
    const token = getLocalStorage("acccess_token_appname");
    const login_obj = getLocalStorage("login_obj");

    const results = apiCall("/user", userId, null, "GET");

    console.log(results);
    console.log(JSON.parse(login_obj));
  } catch (error) {
    console.log("GetUser", error);
  }
}
```

---

#### Remove Item

removing the item from the localStorage

```jsx
import { rmLocalStorage } from "@lifeeric/react-localstroage";

function logOut({ userId }) {
  try {
    // remove the token from the localStorage
    const token = rmLocalStorage("acccess_token_appname");
  } catch (error) {
    console.log("LogOut", error);
  }
}
```

## License

- [ ] MIT ©
npm package: @lifeiscontent/backoff
Description: decrease the rate of some process, in order to gradually find an acceptable rate.
Author: Aaron Reisman
Latest version: 1.0.2

# Backoff

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![Greenkeeper badge](https://badges.greenkeeper.io/lifeiscontent/backoff.svg)](https://greenkeeper.io/)
[![Travis](https://travis-ci.org/lifeiscontent/backoff.svg)](https://travis-ci.org/lifeiscontent/backoff)
[![Coveralls](https://img.shields.io/coveralls/lifeiscontent/backoff.svg)](https://coveralls.io/github/lifeiscontent/backoff)
[![Dev Dependencies](https://david-dm.org/lifeiscontent/backoff/dev-status.svg)](https://david-dm.org/lifeiscontent/backoff?type=dev)
[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg)](https://paypal.me/lifeiscontent)

A Reimplementation of https://github.com/MathieuTurcotte/node-backoff with a more sensible API
npm package: @lifeiscontent/postcss-rem-function
Description: PostCSS plugin to add rem function to easily calculate rem values
Author: Aaron Reisman
Latest version: 1.0.0

# PostCSS Rem Function

[PostCSS] plugin to add rem function to easily calculate rem values.

## Example

### Input

```scss
.demo {
  font-size: rem(24); /* using default 16 */
  padding: rem(5, 10); /* Explict base */
}
```

### Output

```css
.demo {
  font-size: 1.5rem; /* Simple */
  padding: 0.5rem; /* Explict base */
}
```

## Options

With `baseline` to `10`:

```css
.demo {
  font-size: 2.4rem; /* Simple */
  padding: 0.5rem; /* Multiple values */
}
```

## Usage

Install with `npm i postcss-rem-function` and use with [PostCSS]:

```js
postcss([require("@lifeiscontent/postcss-rem-function")]);
```

Example with custom options:

```js
postcss([
  require("@lifeiscontent/postcss-rem-function")({
    baseline: 10, // Default to 16
    precision: 6, // Default to 8
  }),
]);
```

See [PostCSS] docs for examples for your environment.

[postcss]: https://github.com/postcss/postcss
npm package: @lifeiscontent/to-mocked
Description: A TypeScript utility for simplifying mocked data creation. It creates proxy objects of any non-primitive type, throwing an error when an undefined property is accessed. Ideal for streamlining testing workflows and ensuring test data is accurately represen
Author: Aaron Reisman
Latest version: 1.0.0

# @lifeiscontent/to-mocked

## Overview

This repository contains a TypeScript utility function `toMocked`, a tool designed to streamline the creation of mocked data for testing. The main motivation for this package is to address the challenges of creating complicated mock data structures that represent specific types. Instead of manually building an entire object for testing, this function allows you to specify the object type and provide only the necessary data used in the test.

If application code changes and breaks the tests, `toMocked` provides immediate feedback about how those expectations have changed, making it easier to maintain and update your test suite. This function is particularly helpful when used with testing frameworks like [Vitest](https://vitest.dev/).

## Function Overview

```ts
function toMocked<T extends object>(value: any): T;
```

## Function Explanation

The function `toMocked` takes one type argument:

1. `T`: The expected return type which extends an object. It's worth noting that in TypeScript, `object` is a type that represents non-primitive types, thus you can use not only plain objects, but also other complex types like arrays, etc.

And one parameter:

1. `value`: The object that you want to create a proxy for.

The function uses the JavaScript `Proxy` object to define custom behavior for property lookups. In the `get` trap provided to the `Proxy`, we first check if the accessed `property` exists on the `target` object. If it doesn't, an Error is thrown. If it does, the `property` is retrieved from the `target`. If this `property` is an object itself, it's wrapped in another level of proxy by recursively calling `toMocked`.

## Usage

Here's an example of how you could use the `toMocked` function:

```ts
let obj = toMocked({
  prop1: "Hello",
  prop2: {
    nestedProp: "World"
  }
});

console.log(obj.prop1); // "Hello"
console.log(obj.prop2.nestedProp); // "World"
console.log(obj.nonExistentProp); // Throws Error: Property "nonExistentProp" does not exist on...
```

This approach ensures that your test data is as close to the real thing as possible, and that your tests fail fast when expectations change.

Please ensure you have TypeScript installed in your project and the file containing the `toMocked` function is properly imported.

---

Remember, a Proxy object is a very powerful tool. When used wisely, it can streamline your testing process by creating more realistic and maintainable mock data.
npm package: @lifejs/lifejs
Description: A simple package to create "living" things in JavaScript.
Author: TheCommieAxolotl
Latest version: 1.0.3

# life.js
A simple package to create "living" things in JavaScript.

## Usage
```js
import { Human } from '@lifejs/lifejs'; // commonjs: const lifejs = require('@lifejs/lifejs');

const human = new Human();
human.birth();

console.log(human) // Human {health: 100, age: 0, sex: "male", name: "Nathan Chandler", alive: true ...}
```

## But... why?
cause.
npm package: @lifelongdev/dwane-timer
Description: Webcomponent dwane-timer following open-wc recommendations
Author: dwane-timer
Latest version: 0.0.9

# \<dwane-timer>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i @lifelongdev/dwane-timer
```

## Usage
```html
<script type="module">
  import '@lifelongdev/dwane-timer/dwane-timer.js';
</script>

<dwane-timer></dwane-timer>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @lifelongdev/ha-co
Description: Webcomponent ha-co following open-wc recommendations
Author: ha-co
Latest version: 0.0.42

# \<ha-co>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i @lifelongdev/ha-co
```

## Usage
```html
<script type="module">
  import '@lifelongdev/ha-co/ha-co.js';
</script>

<ha-co></ha-co>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @lifelongdev/throw-moji
Description: Webcomponent throw-moji following open-wc recommendations
Author: Dwane Hemmings
Latest version: 0.0.3

# \<throw-moji>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i throw-moji
```

## Usage

```html
<script type="module">
  import 'throw-moji/throw-moji.js';
</script>

<throw-moji></throw-moji>
```



## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @lifelongdev/twilio-vonage-bridge
Description: Library to help developers to transition from Twilio Video to Vonage Video
Author: Dwane Hemmings
Latest version: 0.0.3

# Twilio to Vonage Bridge

Since Twilio announced sunsetting their [Programmable Video](https://www.twilio.com/en-us/changelog/programmable-video-eol-notice), I wanted to create something that would help the transition of developers moving over to Vonage Video easier.

This library aims to allow developers to keep their Twilio code intact while using the Vonage [Video API](https://developer.vonage.com/en/video/overview).

It tries to cover the following functionalities:

- stream user's camera
- stream user's microphone
- mute/unmute user's camera
- mute/unmute user's microphone
- load remote user when they join
- unload remote user when they leave

## Installation

```bash
npm i @lifelongdev/twilio-vonage-bridge
```

## Usage

### import from node modules

```html
<script type="module">
  import '@lifelongdev/twilio-vonage-bridge/index.js';
</script>
```

### OR using a CDN

```html
<script type="module" src="https://unpkg.com/@lifelongdev/twilio-vonage-bridge@latest/index.js?module"></script>

```

You'll need a Vonage [account](https://dashboard.nexmo.com/) and the Video API library:

```html
<script src="https://unpkg.com/@vonage/client-sdk-video@2/dist/js/opentok.js "></script>
```

The `token` will now be a the token generated from the server using a Vonage SDK.

In the `connectOptions` Object, you will need to add `applicationId` and `sessionId` values.

That's it!

## Sample Application

I created a sample application that can be quickly deployed to StackBlitz to test out the bridge library.

Set `TWILIO_TOKEN`, `VONAGE_APPLICATION_ID`, `VONAGE_SESSION_ID`, `VONAGE_TOKEN` with their values in `script.js`.

To generate the Vonage variables, you can use the [Video API Playground](https://tools.vonage.com/video/playground).

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/twilio-vonage-bridge-sample?file=script.js,styles.css,index.html&terminalHeight=10)
npm package: @lifelongdev/vc-custom-event
Description: Webcomponent vc-custom-event following open-wc recommendations
Author: vc-custom-event
Latest version: 0.0.5

# \<vc-custom-event>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @lifelongdev/vc-custom-event
```

## Usage

```html
<script type="module">
  import '@lifelongdev/vc-custom-event/vc-custom-event.js';
</script>

<vc-custom-event></vc-custom-event>
```



## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`