open-index/open-npm huggingface dataset:
npm package: @lossendae/vue-table
Description: Simple table component for Vue.js 2.x with pagination and sortable columns
Author: Stéphane Boulard
Latest version: 0.1.8

# VueTable [![CircleCI](https://circleci.com/gh/lossendae/vue-table.svg?style=shield&circle-token=2aa1824b780715141aeaed61168e185a1c1ceb67)](https://circleci.com/gh/lossendae/vue-table)

Simple table component for Vue.js 2.x with pagination and sortable columns

Documentation is available here: https://lossendae.github.io/vue-table

## Installation

```
npm install --save @lossendae/vue-table
```

Then in your component

```js 
import Vue from 'vue'
import VueTable from '@lossendae/vue-table'

// install globally...
Vue.use('vue-table', Vuetable)

// Or in your Vue component

export default {
    components: { Vuetable },
    ...
} 
```

## License

[MIT](https://github.com/lossendae/vue-table/blob/master/LICENSE)
npm package: @lossir/imask
Description: vanilla javascript input mask
Author: Maksim Pakhomov
Latest version: 7.6.3

# imaskjs
vanilla javascript input mask

[![Build Status](https://travis-ci.com/uNmAnNeR/imaskjs.svg?branch=master)](https://travis-ci.com/uNmAnNeR/imaskjs)
[![Coverage Status](https://coveralls.io/repos/github/uNmAnNeR/imaskjs/badge.svg?branch=master)](https://coveralls.io/github/uNmAnNeR/imaskjs?branch=master)
[![npm version](https://badge.fury.io/js/imask.svg)](https://badge.fury.io/js/imask)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

<a href="https://opencollective.com/imask/donate" target="_blank">
  <img src="https://opencollective.com/imask/donate/button.png?color=blue" width=300 />
</a>

## Docs, Examples, Demo
[https://imask.js.org/](https://imask.js.org/)

## Install
`npm install imask` and `import IMask from 'imask';`

or use CDN:

`<script src="https://unpkg.com/imask"></script>`

## Build & Test
`npm run make`
npm package: @lossir/react-imask
Description: React input mask
Author: Maksim Pakhomov
Latest version: 7.6.3

# React IMask Plugin
react-imask

[![npm version](https://badge.fury.io/js/react-imask.svg)](https://badge.fury.io/js/react-imask)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

<a href="https://opencollective.com/imask/donate" target="_blank">
  <img src="https://opencollective.com/imask/donate/button.png?color=blue" width=300 />
</a>

## Install
`npm install react-imask`

## Mask Input Example
```javascript
import { useRef } from 'react';
import { IMaskInput } from 'react-imask';

// use ref to get access to internal "masked = ref.current.maskRef"
const ref = useRef(null);
const inputRef = useRef(null);
<IMaskInput
  mask={Number}
  radix="."
  value="123"
  unmask={true} // true|false|'typed'
  ref={ref}
  inputRef={inputRef}  // access to nested input
  // DO NOT USE onChange TO HANDLE CHANGES!
  // USE onAccept INSTEAD
  onAccept={
    // depending on prop above first argument is
    // `value` if `unmask=false`,
    // `unmaskedValue` if `unmask=true`,
    // `typedValue` if `unmask='typed'`
    (value, mask) => console.log(value)
  }
  // ...and more mask props in a guide

  // input props also available
  placeholder='Enter number here'
/>
```

## Extend Existing Components
```javascript
import { IMaskMixin } from 'react-imask';

// extend style component
const StyledInput = styled.input`
  color: green;
`;

const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => (
  <StyledInput
    {...props}
    innerRef={inputRef}  // bind internal input (if you use styled-components V4, use "ref" instead "innerRef")
  />
));

<MaskedStyledInput
  mask={Number}
  radix="."
  onAccept={(value, mask) => console.log(value)}
  // ...and more mask props in a guide

  // ...other styled props
/>
```
More options see in a [guide](https://imask.js.org/guide.html).

## Using hook
```javascript
import { useState } from 'react';
import { useIMask } from 'react-imask';

function IMaskWithHook () {
  const [ opts, setOpts ] = useState({ mask: Number });
  const {
    ref,
    maskRef,
    value,
    setValue,
    unmaskedValue,
    setUnmaskedValue,
    typedValue,
    setTypedValue,
  } = useIMask(opts, /* optional {
    onAccept,
    onComplete,
    ref,
    defaultValue,
    defaultUnmaskedValue,
    defaultTypedValue,
  } */);
  
  return (
    <input ref={ref} />
  );
}
```
npm package: @losslesscash/lerc20
Description: A package for the LERC20 smart contract
Author: Lossless
Latest version: 1.0.6

# LERC20

This package allows to simply import, use and add extra functionality to LERC20 tokens. 

You can read more about [LERC20 tokens here](https://lossless-cash.gitbook.io/lossless/technical-reference/lerc20).


## Usage
  
```solidity
// SPDX-License-Identifier: MIT
pragma  solidity  ^0.8.0;

import  "@losslesscash/lerc20/contracts/LERC20.sol";

contract ScoobyToken is LERC20 {
	constructor() LERC20(
		100  *  10**18,  // total supply
		"Scooby",  // name
		"SCB",  // symbol
		0x192E176367C3Ae93f94643a53BC73345073df503,  // admin account address
		0x192E176367C3Ae93f94643a53BC73345073df503,  // recovery admin account address
		86400,  // timelock period
		0x27fce20D62f1DE73B0Ae1Dc7572F881061692de9  // lossless controller address (ropsten)
	)  {}
}
npm package: @losslessproject/api-runner
Description: Executes heavy-lifting API code in a regular node enviroment (ie. not `wrangler`) for better debugging, etc
Author: Harmony zkDAO
Latest version: 0.1.0

# `Pooltogether API - Runner`

This library allows you to run the API locally for debugging via the node.js `node` enviroment, as well as be included in other packages (such as the Cloudflare Worker `api-entrypoint`).

## Development

1. `setInfuraId(INFURA_ID)` or `setQuicknodeId(QUICKNODE_ID)`
2. `setFetch(fetch)`
3. `getPools(1)`

## Local Testing

1. `node`
2. `const { getPools, setInfuraId } = require( './dist/index')`
3. `setInfuraId(YOUR_INFURA_ID)`
4. `getPools(chainId)`
npm package: @losslessproject/bnc-onboard-hooks
Description: Hooks for adding Onboard.js to Lossless dapps
Author: Lossless Project
Latest version: 0.1.2

# PoolTogether bnc-onboard-hooks

Hooks for adding Onboard.js to PoolTogether dapps.

## NOTE

Make sure you keep `peerDependencies` and `devDependencies` versions in sync!

## How to use

1. `yarn add @losslessproject/utilities`
2. `import { hookYouWantToUse } from '@pooltogether/bnc-onboard-hooks'`
3. Ensure you call any required init functions early

## Local development

Local development works best with yalc
`yarn global add yalc`

In pooltogether-hooks:
`yarn start`

In the app you're importing pooltogether-hooks:
`yalc link @pooltogether/bnc-onboard-hooks`

When you save changes inside the hooks `src` folder, the package will rebuild and be pushed to all other projects that have run `yalc link @pooltogether/bnc-onboard-hooks`.

## TODO:

- jest tests
npm package: @losslessproject/evm-chains-extended
Description: Package to get chain data from ethereum-lists/chains with extra data such as blockExplorerUrls
Author: Harmony zkDAO
Latest version: 0.1.0

# evm-chains-extended

Package to query chain data from [ethereum-lists/chains](https://github.com/ethereum-lists/chains) with extended data necessary for EIP3085.

Makes use of Pedro Gomes' [evm-chains](https://github.com/pedrouid/evm-chains) package for the initial data, then merges in the extended data.

Includes Block Explorer URLs and network logos for certain networks.

This package is meant as a holdover and may be deprecated in the future in favor of simply using `evm-chains`. That is dependent on EIPs such as: https://github.com/ethereum/EIPs/pull/3091

NOTE: This also makes use of a silent interface pattern where missing networks will be returned undefined instead of throwing.

## Install

```sh
npm install --save evm-chains-extended

#or

yarn add evm-chains-extended
```

## API

```typescript
function getAllChains(): IChainDataExtended[] | undefined;
function getChain(chainId: number): IChainDataExtended | undefined;
function getChainByChainId(chainId: number): IChainDataExtended | undefined;
function formatNetworkForAddEthereumChain(network: IChainDataExtended): IAddEthereumChainParameter;
```

## Types

```typescript
interface IChainDataExtended {
  name: string;
  chainId: number;
  shortName: string;
  chain: string;
  network: string;
  networkId: number;
  nativeCurrency: {
    name: string;
    symbol: string;
    decimals: number;
  };
  rpc: string[];
  faucets: string[];
  infoURL: string;
  blockExplorerUrls: string[]
}

// format for EIP3085 wallet_addEthereumChain
interface IAddEthereumChainParameter {
  chainId: string; // A 0x-prefixed hexadecimal string
  chainName: string;
  nativeCurrency: {
    name: string;
    symbol: string; // 2-6 characters long
    decimals: number;
  };
  rpcUrls: string[];
  blockExplorerUrls?: string[];
  iconUrls?: string[]; // Currently ignored.
}
```

## Data Source

[https://github.com/ethereum-lists/chains](https://github.com/ethereum-lists/chains)
npm package: @losslessproject/hooks
Description: Useful hooks for Lossless Project applications
Author: Harmony zkDAO
Latest version: 0.1.11

# PoolTogether hooks

A collection of various useful hooks used across the PoolTogether applications.

## NOTE

Make sure you keep `peerDependencies` and `devDependencies` versions in sync!

## How to use

1. `yarn add @losslessproject/utilities`
2. `import * as Hooks from '@pooltogether/hooks'` OR `import { hookYouWantToUse } from '@pooltogether/hooks'`
3. Ensure you call any required init functions early

## Local development

Local development works best with yalc
`yarn global add yalc`

In pooltogether-hooks:
`yarn start`

In the app you're importing pooltogether-hooks:
`yalc link @pooltogether/hooks`

When you save changes inside the hooks `src` folder, the package will rebuild and be pushed to all other projects that have run `yalc link @pooltogether/hooks`.

## TODO:

- jest tests
npm package: @losslessproject/pool-data
Description: A [Contract List](https://github.com/losslessproject/contract-list-schema) of the latest Lossless deployments on mainnets and testnets.
Author: Harmony zkDAO.
Latest version: 0.1.3

![CI](https://github.com/pooltogether/v4-pool-data/actions/workflows/main.yml/badge.svg)

# Pool data

A [Contract List](https://github.com/losslessproject/contract-list-schema) of the latest Lossless deployments on mainnets and testnets.

# Installation

```bash
yarn add @losslessproject/pool-data
```

# Use

```js
import { mainnet, testnet } from '@losslessproject/pool-data'
```

`mainnet` consists of all of the deployments on mainnets (ex. Ethereum, Polygon, etc.)
`testnet` consists of all of the deployments on testnets (ex. Harmony, Rinkeby, etc.)
npm package: @losslessproject/testnet
Description: The V4 testnet deployed contracts and essential hardhat tasks.
Author: zkDAO
Latest version: 0.1.3

# PoolTogether V4 Testnet
The V4 testnet deployed contracts and essential hardhat tasks.

# Getting Started
Install `direnv` module.

We use [direnv](https://direnv.net/) to manage environment variables.  You'll likely need to install it.

```sh
cp .envrc.example .envrc
```

To run fork scripts, deploy or perform any operation with a mainnet/testnet node you will need an Infura API key.

### Disbursement Address
To `disburse` and `deposit` you will need to add a list of address(es) to DISBURSE_ADDRESSES.


**Example**
```.sh
export DISBURSE_ADDRESSES='0x0000000000000000000000000000000000000000,0x0000000000000000000000000000000000000001'
```

# Setup
```.sh
yarn
```

## New Deployments
```.sh
yarn deploy:rinkeby
```

```.sh
yarn deploy:mumbai
```

```.sh
yarn deploy:fuji
```

## Acquire Tokens & Tickets

```.sh
yarn disburse rinkeby
```

```sh
yarn disburse mumbai
```

```sh
yarn disburse fuji
```

```sh
yarn deposit rinkeby
```

```sh
yarn deposit mumbai
```

```sh
yarn deposit fuji
```

## Test Deployment Scripts

```.sh
yarn node:rinkeby
```

```.sh
yarn node:mumbai
```


```.sh
yarn node:fuji
```
npm package: @losslessproject/utilities
Description: Shared utility functions across Lossless Project
Author: Harmony zkDAO
Latest version: 0.1.8

# PoolTogether utilities

A collection of various utility functions used across the PoolTogether applications.

## NOTE

Make sure you keep `peerDependencies` and `devDependencies` versions in sync!

## How to use

1. `yarn add @pooltogether/utilities`
2. `import * as Utils from '@pooltogether/utilities'` OR `import { functionYouWantToUse } from '@pooltogether/utilities'`

## Local development

Local development works best with yalc
`yarn global add yalc`

In pooltogether-utilities:
`yarn start`

In the app you're importing pooltogether-utilities:
`yalc link @pooltogether/utilities`

When you save changes inside the utilities `src` folder, the package will rebuild and be pushed to all other projects that have run `yalc link @pooltogether/utilities`.

## TODO:

- moooooore tests
npm package: @lost-in-code-au/timer-input
Description: React Timer Input Component for npm
Latest version: 1.0.5

https://img.shields.io/badge/npm-v1.0.0-blue

# timer-input
React component package that allows a numeric input to handle an allotted amount of time in [mm:ss] (minutes and seconds)

# Install

```sh
  npm i @lost-in-code-au/timer-input

//or

  yarn add @lost-in-code-au/timer-input
```

# Runing in react
```js
  import TimerInputComponent from '@lost-in-code-au/timer-input'
```


Props:
```js
  label: string, // Add label if you wish a label in component, and takes in the given string.
  onChange: func.isRequired, // Returns time in seconds for parent component.
  styles: object, // Takes in styles jsx object for styling, only applies to the HTML input element, example object: {{label:{color: "Red", backgroundColor: "gray"}, input:{color: "green", backgroundColor: "black"}}}.

  defaultTime: number, // 180sec = 3mins, Takes in number of time converted in seconds(it's important to keep them as seconds so the function runs easily)
  counterRunning: PropTypes.bool.isRequired, // Take bool value to start and stop the counter, the counter will not run unless the parent component tells it to.
  onTimerFinish: PropTypes.func, // Optional callback for when the timer finishes.
```

Example:
```jsx
import React from 'react';
import TimerInputComponent from '@lost-in-code-au/timer-input' //Import component

class App extends React.Component {

  callBack = () => {
    console.log('counter fin!')
  }

  render() {
    return (
      <div>
          <TimerInputComponent
          label="what dah" //Default hide label element if no prop
          styles={{label:{color: "Red", backgroundColor: "gray"}, input:{ fontSize: "18px", color: "green", backgroundColor: "black"}}} //Default {}
          defaultTime={190} //Default 0
          counterRunning={false} //Default false
          onTimerFinish={this.callBack} //Default ()=> console.log('counter fin!')
          />
      </div>
    );
  }
}

export default App;
```

Understanding:

This is a minutes and seconds count down timer input, much like a egg time that allows for input of 00:00 or mm:ss and will update.

The defaultTime only takes seconds in the data format of number to maintain the counter increments, so when giving in you defaultTime please calculate your time into a whole number of seconds.
example: 3min = 180sec which is put in as defaultTime={180}

Any issue or requested updates please add them as a issue on the (repo github page)[https://github.com/lost-in-Code-au/timer-input]

❤️ Enjoy ❤️

-Rj
npm package: @lost-types/publisher
Description: Publisher class provides essential pub-sub capabilities for its instances
Author: snigo
Latest version: 1.2.1

# Publisher class

Provides essential pub-sub capabilities for its instances.

## Usage

In the terminal:
```

% npm install @lost-types/publisher

```

Then in the module:
```js

// JavaScript modules
import Publisher from '@lost-types/publisher';

// CommonJS
const Publisher = require('@lost-types/publisher');

// Implement "Hello world" of reactive programming:
class Counter extends Publisher {
  constructor() {
    super();
    this.count = 0;
  }

  increment() {
    this.setState('count', this.count + 1);
  }
}

const myCounter = new Counter();

// If you ever tried rxjs, this will be familiar:
const subscription = myCounter.subscribe({
  count: (value) => {
    console.log(`The count is: ${value}`);
  }
});

myCounter.increment(); // Logs: "The count is: 1"
myCounter.increment(); // Logs: "The count is: 2"

subscription.unsubscribe('count');

myCounter.increment(); // Logs nothing

console.log(myCounter.count); // 3

```

## Motivation

The idea of Publisher class came to me after one of the talks at one of the JS conferences about micro frontends. The whole idea behind this talk was that it's incredibly hard for a large code base to keep up with rapidly evolving frontend libraries and frameworks. "We've spent two years and huge budget to go from jQuery to React and once finished we had to start new transition from class-based components to functional components with hooks...". How can we fight this? The most naive idea that came to my mind - completely strip React or Vue out of logic and use them excusively as view engines - the thing they always had to be in my opinion. "Ok, I'll have an interface written in vanilla JavaScript, that will hold its own state and all the logic, and I'll have some component in the view that will be subscribed to that state", I thought!

```js

// React

function useCalculator() {
  // Singleton Calculator class extends Publisher
  const calculator = new Calculator();
  const [value, __setValue] = useState(calculator.value);

  useEffect(() => {
    const subscription = calculator.subscribe({
      value: (newValue) {
        __setValue(newValue);
      }
    });
  });

  return () => {
    subscription.unsubscribe('value');
  };

  return [value, calculator];
}

// Interactive component
const [value, calculator] = useCalculator();

return <button type="button" onClick={() => calculator.eval('2 + 2 * 20')}>=</button>;

// Display component

const [value] = useCalculator();

return <div>{value}</div>;

```

On the surface this might seem like still a lot of coupling inside `useCalculator()` function, but for larger interfaces this function will always stay the same and will act as a "driver" for the interface and at the moment when frontend library will change it's API or you will decide to switch to another library, you will only need change this "driver" function without worrying about anything else.
npm package: @lost-worlds/chain-sdk
Description: Utility used in the creation and validation of on-chain lost worlds assets (i.e. `LostWorlds` and `LostAchievements`).
Author: adam@lostworlds.io
Latest version: 1.1.35
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# chain-sdk

Utility used in the creation and validation of on-chain lost worlds assets (i.e. `LostWorlds` and `LostAchievements`).

Uses `type-generator` to handle json -> typescript typings.
npm package: @lostb1t/monaco-yaml-prebuilt
Description: Compiled monaco-yaml for direct in-browser use
Author: lostb1t
Latest version: 1.0.2

# Monaco Editor - Prebuilt YAML support
A prebuilt version of [monaco-yaml](https://github.com/remcohaszing/monaco-yaml) available straight out in the browser.

# Usage
You can use it straight out of the box, just load the precompiled `monaco-editor.js` in your browser.

```
npm install monaco-yaml-prebuilt
```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Monaco YAML prebuilt</title>
  </head>
  <body>
    <div style="display: flex;">
      <div id="yaml-editor" style="width: 95vw; height: 95vh;"></div>
    </div>
    <script src="./node_modules/monaco-yaml-prebuilt/dist/monaco-editor.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

```

Then two objects will be available in your global `window` scope, `monaco` for [monaco-editor](https://github.com/microsoft/monaco-editor) and `monacoYaml` for [monaco-yaml](https://github.com/remcohaszing/monaco-yaml) specific APIs:
```javascript
const yamlModelUri = monaco.Uri.parse('a://b/foo.yaml');

const diagnosticsOptions = {
  enableSchemaRequest: true,
  hover: true,
  completion: true,
  validate: true,
  format: true,
  schemas: [
    {
      uri: 'http://myserver/foo-schema.json',
      fileMatch: ['*'],
      schema: {
        type: 'object',
        properties: {
          p1: {
            enum: ['v1', 'v2'],
          },
          p2: {
            $ref: 'http://myserver/bar-schema.json',
          },
        },
      },
    },
    {
      uri: 'http://myserver/bar-schema.json',
      schema: {
        type: 'object',
        properties: {
          q1: {
            enum: ['x1', 'x2'],
          },
        },
      },
    },
  ],
};

// YAML specific API
monacoYaml.setDiagnosticsOptions(diagnosticsOptions);

const yaml = 'p1: \np2: \n';

monaco.editor.create(document.getElementById('yaml-editor'), {
  automaticLayout: true,
  model: monaco.editor.createModel(yaml, 'yaml', yamlModelUri),
});
```

# Changing languages support
By default, only `yaml` and `json` are supported. If you want to add more, you can edit `webpack.config.js` and rebuild the package:

```
git clone https://github.com/neuroglia-io/monaco-yaml-prebuilt.git
cd monaco-yaml-prebuilt
... edit webpack.config.js
npm run build
```

See [Integrating the ESM version of the Monaco Editor - Option 1: Using the Monaco Editor WebPack Plugin](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#option-1-using-the-monaco-editor-webpack-plugin) for more info.
npm package: @lostcityrs/runescript
Description: Compiler for a community-derived RuneScript implementation, written in TypeScript
Author: LostCityRS
Latest version: 0.9.6

<div align="center">
<h1>RuneScriptTS</h1>
</div>

This is a **RuneScript Compiler**, written in TypeScript. Our focus is to preserve RS2 history as accurately and authentically as we can.

### Installation and Usage

`npm i @lostcityrs/runescript`  
(or yarn, bun, pnpm...)

```ts
import { CompileServerScript, CompilerTypeInfo } from '@lostcityrs/runescript';

// opcode->command lookup + pointer info
const commandInfo: CompilerTypeInfo = ...;

// script id->name lookup
const runescriptInfo: CompilerTypeInfo = ...;

// config id->name lookup
const npcInfo: CompilerTypeInfo = ...;

CompileServerScript({
    symbols: {
        'command': commandInfo,
        'runescript': runescriptInfo,

        'npc': npcInfo,
        ...
    }
});
```

The compiler expects a couple things to be in place.

1. A source folder that contains `.rs2` scripts.
2. Symbol information provided for the types you plan on referencing.

By default it will read scripts from `../content/scripts`.
After it runs, compiled output will be placed in `./data/pack/server`.  
If that doesn't work for your use case, please see the config object you pass to CompileServerScript.

See [LostCityRS/Server](https://github.com/LostCityRS/Server) for a working example.

### Building RuneScriptTS

After cloning:
```sh
bun i
bun run antlr
```

Testing:  
You can test changes without publishing by copying `dist/runescript.js` into your consumer's node_modules folder
```sh
bun run build
cp dist/runescript.* ../node_modules/@lostcityrs/runescript/dist/
```

### History

Originally a fork of [Neptune](https://github.com/neptune-ps/neptune)'s script compiler.  
Our initial compiler fork (2023-2026) focused instead on making a complete server script compiler, along with a script runtime and world simulation:  
https://github.com/LostCityRS/RuneScriptKt  
https://github.com/LostCityRS/Engine-TS

As of February 2026 we have transitioned from the "legacy" Kotlin codebase to this TypeScript codebase (clean port).  
Consumers should use this. It is production-ready and produces compatible output along with some bug fixes.

### Credits

Polar: For your years of work on Neptune and many days brainstorming together.  
Flenarn: For your effort porting so much Kotlin code to TypeScript. There were only a few lines to fix afterwards - great job.  
Contributions in RuneScriptKt: Henke96 [PR #1](https://github.com/LostCityRS/RuneScriptKt/pull/1) and Bea5 [PR #2](https://github.com/LostCityRS/RuneScriptKt/pull/2).
npm package: @lostelk/lost-ui
Description: A component library for Vue 3.
Author: LostElk
Latest version: 1.1.0-alpha.1

<div align="center">
  <h1>Lost UI</h1>
</div>

<p align="center">
  <a href="https://www.npmjs.com/package/@lostelk/lost-ui">
    <img src="https://img.shields.io/npm/v/@lostelk/lost-ui?color=blue" />
  </a>
  <a href="https://github.com/LostElkByte/lost-ui/issues">
    <img src="https://img.shields.io/github/issues/LostElkByte/lost-ui" />
  </a>
  <a href="https://www.npmjs.com/package/@lostelk/lost-ui">
    <img src="https://img.shields.io/npm/dt/@lostelk/lost-ui" />
  </a>
  <img src="https://img.shields.io/bundlejs/size/@lostelk/lost-ui" />
  <a href="http://opensource.org/licenses/MIT">
    <img src="https://img.shields.io/npm/l/@lostelk/lost-ui" />
  </a>
</p>

<div align="center">
  <h2>Lost UI - Vue 3 UI 库 🦌</h2>
</div>


🐳 Vue 3 Composition API

🔥 用 TypeScript 编写

⚠️ Lost UI 仍在实验阶段

## 入门

Hi，如果您想更好的使用 Lost UI，您来对地方了。对于希望使用 Lost UI 开发网站的开发人员，请访问我们的[入门指南](https://lostelkbyte.github.io/lost-ui/)。
npm package: @lostinbrittany/-api-watcher
Description: Webcomponent gophers-api-watcher following open-wc recommendations
Author: gophers-api-watcher
Latest version: 0.0.1

![Gophers API Watcher](./gophers-api-watcher.png)
# Gophers API Watcher

A frontend for [Gopher API](https://github.com/scraly/gophers-api).

![Gophers API Watcher](./img/screenshot.jpg)

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


## Gitpod integration

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/lostinbrittany/gophers-api-watcher.git)



## Installation

```bash
npm i gophers-api-watcher
```

## Usage

```html
<script type="module">
  import 'gophers-api-watcher/gophers-api-watcher.js';
</script>

<gophers-api-watcher></gophers-api-watcher>
```



## 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`