open-index/open-npm huggingface dataset:
npm package: @kengotoda/actions-setup-docker-compose
Description: the GitHub Action setting up docker-compose command
Author: Kengo TODA
Latest version: 1.2.4

# GitHub action to setup `docker-compose` command

<a href="https://github.com/KengoTODA/actions-setup-docker-compose/actions"><img alt="actions-setup-docker-compose status" src="https://github.com/KengoTODA/actions-setup-docker-compose/workflows/build-test/badge.svg"></a>

This action downloads the `docker-compose` command and add it to the `PATH` for following executions. It supports the Linux environment only.

> [!IMPORTANT]
> The `docker-compose` command is now deprecated, consider to use the `docker compose` sub command instead. Refer to [Docker official blog](https://www.docker.com/blog/announcing-compose-v2-general-availability/) for detail.

## How to use

Add a step to your workflow like below:

```yml
  steps:
  - uses: KengoTODA/actions-setup-docker-compose@v1
    with:
      version: '2.14.2' # the full version of `docker-compose` command
```

Or set a `GITHUB_TOKEN` environment variable, to use the latest released version:

```yml
  steps:
  - uses: KengoTODA/actions-setup-docker-compose@main
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

The 'latest release' here means [the most recent non-prerelease, non-draft release, sorted by the created_at attribute](https://docs.github.com/en/rest/releases/releases#get-the-latest-release).

Note that the `GITHUB_TOKEN` should have [`contents: read` permission](https://docs.github.com/en/rest/overview/permissions-required-for-github-apps?apiVersion=2022-11-28#contents) to fetch data from the GitHub.com.
npm package: @kenh24/solid-virtual-list
Description: a simple virtual list for solid js
Author: kenh24
Latest version: 0.0.1-alpha3

# Solid Virtual List

- A simple virtual list built for Solid-js.
- Inspired by https://github.com/tangbc/vue-virtual-scroll-list

## Props

| prop         | type                   | description                                    | defaultValue |
| ------------ | ---------------------- | ---------------------------------------------- | ------------ |
| dataSource\* | Array                  | your data for rendering                        |
| dataId\*     | ()=> string \| string  | unique id for every data item                  |
| itemRender\* | () => JSX.Element      | the function to render item in virtual list    |
| estimateSize | number                 | the estimateSize of every item in virtual list | 50           |
| keeps        | number                 | the count for rendering in the virtual list    | 30           |
| direction    | vertical \| horizental | the scroll direction of virtual list           | vertical     |


## Fixed Size example

- Pass data, render Function and estimateSize to the component.

```tsx
import SolidVirtualList from "solid-virtual-list";

const FixedSizeComponent = () => {
  const dataSource = new Array(1000).fill(0).map((_, index) => ({ id: index }));

  return (
    <div style={{ overflow: "auto", height: "600px", width: "100%" }}>
      <SolidVirtualList
        estimateSize={60}
        dataSource={dataSource}
        dataId={"id"}
        itemRender={(index) => <div># {index}</div>}
      />
    </div>
  );
};

export default FixedSizePage;
```

## Dynamic Size example

- The virtual list use ResizeObserver to detect every item's size.
- You don't need to pass extra attribute to the component when every item has different size.

```tsx
import { createSignal } from "solid-js";
import SolidVirtualList from "solid-virtual-list";

interface Data {
  id: string;
  height: string;
}

const generateDataSource = (count: number) => {
  return new Array<Data>(count).fill({} as Data).map((_, index) => ({
    id: `${index}-${Math.random()}`,
    height: `${Math.floor(Math.random() * 60 + 60)}px`,
  }));
};

const DynamicSizePage = () => {
  const [dataSource] = createSignal<Data[]>(generateDataSource(1000000));

  return (
    <div style={{ overflow: "auto", height: "600px", width: "100%" }}>
      <SolidVirtualList<Data>
        estimateSize={80}
        dataSource={dataSource()}
        dataId={"id"}
        itemRender={(index, data) => {
          const height = data.height;

          return (
            <div style={{ height }}>
              <span># {index}</span>
              <span>height = {height}</span>
            </div>
          );
        }}
      />
    </div>
  );
};

export default DynamicSizePage;
```

## Roadmap
- [ ] header and footer slot
- [ ] calculateSize prop
- [ ] demo website
- [ ] page mode