open-index/open-npm huggingface dataset:
npm package: @lucas-labs/vue3-vsl
Description: Vuejs 3 virtual Scroll List Component
Author: Lucas Colombo
Latest version: 0.0.2

<p align="center"><img src="./logo.svg" height="120"></p>

<p align="center">
<strong>
🔎 <code>@lucas-labs/vue3-vsl</code> (virtual-scroll-list) is a Vuejs 3 component plugin. Heavily based on <a href="https://github.com/tangbc/vue-virtual-scroll-list">tangbc/vue-virtual-scroll-list</a>. Basically the same but ported to Vuejs 3 + typescript + Composition API.
</strong>
</p>

## Install

### npm
```bash
npm i @lucas-labs/vue3-vsl
```

### pnpm
```bash
pnpm i @lucas-labs/vue3-vsl
```

### yarn
```bash
yarn add @lucas-labs/vue3-vsl
```

## Usage

```vue
<template>
    <header>hello!</header>

    <virtual-scroller :data-key="'id'" :data-sources="users" @tobottom="bottom">
        <template #header>
            <div class="list-header">...</div>
        </template>

        <template v-slot="{ item, index }">
            <div class="list-item">
                <div>#{{ index }}</div>
                <div>{{ item.id }} | {{ item.username }}</div>
            </div>
        </template>

        <template #footer>
            <div class="list-footer">...</div>
        </template>
    </virtual-scroller>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { VirtualScroller } from '@lucas-labs/vue3-vsl';

    const users = ref<{ id: number | string; username: string }[]>([]);

    const fetchUsers = () => {
        users.value = ...
    };

    const bottom = () => {
        // we reached the bottom of the list...
        // fetch more users maybe?
        ...
    };

    fetchUsers();
</script>
```

### Use globally

```typescript
// main.ts/main.js
import { createApp } from 'vue'
import App from './App.vue'

// import the plugin
import VirtualScrollerPlugin from '@lucas-labs/vue3-vsl';

const app = createApp(App);

// use the plugin to make it 
// available in all your components
app.use(VirtualScrollerPlugin);
app.mount('#app');
```

# TODO

- [ ] Add tests!
npm package: @lucas54neves/logflare
Description: My logflare npm package
Author: Lucas Neves
Latest version: 0.0.26

# Logflare npm package

Pacote do npm para padronização do registro dos logs usando o Logflare.

## Como usar

### Importação

```
import { registerLogs, buildMetadataFromHeaders } from '@lucas54neves/logflare'
```

### Parâmetros

Ao se chamar a função registerLogs, deve-se passar por parâmetro um objeto com o seguinte formato:

```
{
  credentials: {
    sourceKey: string
    apiKey: string
  }
  request?: {
    method: string
    url: string
    userAgent: string | null
    host: string | null
    cfRay: string | null
    cfConnnectingIp: string | null
    cf: IncomingRequestCfProperties
    metadata: object
    body?: any
  }
  response?: {
    metadata: object
    statusCode: number
    responseTime?: number
    body: any
  }
  message: string
}
```

No atributo credentials do objeto parâmetro da função, são armazenadas informações relativa à chave do source e a chave da API do Logflare, onde os logs serão armazenados. No atributo request (opcional), são armazenadas informações relativas à requisição que deseja realizar. No atributo response (opcional), informações relativas à resposta da requisição que foi realizadasão armazenadas. No atributo message, a mensagem que aparecerá no log é armazenada.

Para criar o request.metadata, deve-se utilizar a função buildMetadataFromHeaders, passando por parâmetro o headers da Request. O mesmo deve ser feito para criar o response.metadata.

```
const someRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'})

const metadata = buildMetadataFromHeaders(someRequest.headers)
```

```
const someResponse = new Response('http://localhost/api', {body: '{"foo":"bar"}'})

const metadata = buildMetadataFromHeaders(someResponse.headers)
```

### Exemplo de uso

```
import { registerLogs, buildMetadataFromHeaders } from '@lucas54neves/logflare'

const request = await someFunctionThatReturnsARequest()

const requestBody = await request.json()

const requestData = {
  method: request.method,
  url: request.url,
  userAgent: request.headers.get("user-agent"),
  host: request.headers.get("host"),
  cfRay: request.headers.get("cf-ray"),
  cfConnnectingIp: request.headers.get("cf-connecting-ip"),
  cf: request.cf,
  metadata: buildMetadataFromHeaders(request.headers),
  body: requestBody
}

const begin = Date.now()

const response = await someFunctionThatReturnsAResponse()

const responseTime = Date.now() - begin

const responseData = {
  statusCode: response.status,
  metadata: buildMetadataFromHeaders(response.headers),
  body: data,
  responseTime
}

await registerLogs({
  credentials: {
    sourceKey: "123456789"
    apiKey: "456
  },
  request: requestData,
  response: responseData,
  message: 'This is a log'
})
```