open-index/open-npm huggingface dataset:
npm package: @huntabyte/bits-ui
Description: Headless Svelte components built with [Melt UI](https://melt-ui.com) builders.
Latest version: 0.0.37

# Bits

Headless Svelte components built with [Melt UI](https://melt-ui.com) builders.

[Read the docs](https://bits-ui.com) (still a work in progress)
npm package: @huntabyte/mdsvex-v2
Description: Markdown preprocessor for Svelte
Author: pngwn
Latest version: 0.11.0

# MDsveX

_do ya think I'm svexy?_

A markdown preprocessor for Svelte components. Basically [MDX](https://github.com/mdx-js/mdx) for Svelte.

This preprocessor allows you use Svelte components in your markdown, or markdown in your svelte components.

[Try it](https://mdsvex.com/)

You can do this:

```jsx
<script>
  import { Chart } from '../components/Chart.svelte';
</script>

# Here’s a chart

The chart is rendered inside our MDsveX document.

<Chart />
```

https://mdsvex.com/
npm package: @huntabyte/svelte-get-component-info
Description: Extract information about the props, actions, slots and css variables from a Svelte file. Designed to simplify the creation of documentation.
Author: Samuele C. De Tomasi & Hunter Johnston
Latest version: 0.0.3

# Svelte - Get Component Info

Fork of [el3um4s/svelte-get-component-info](https://github.com/el3um4s/svelte-get-component-info)

Credit to the original author [el3um4s](https://github.com/el3um4s). They did all the hard work, I just added some features for use with another project of mine.

_A function to extract information about the props, actions, slots and css variables from a Svelte file. Designed to simplify the creation of documentation_

NPM link: [@huntabyte/svelte-get-component-info](https://www.npmjs.com/package/@huntabyte/svelte-get-component-info)

### Install and use the package

To use the package in a project:

```bash
npm i @huntabyte/svelte-get-component-info
```

and then in a file:

```ts
import type { SvelteInformation } from "@huntabyte/svelte-get-component-info"
import { getInfo } from "@huntabyte/svelte-get-component-info"

const info: SvelteInformation = getInfo("./src/lib/hello.svelte")
console.log(info.props) //  [{ name: "message", type: "string", defaultValue: "Hello World" }]
console.log(info.actions) /// [ { name: "notify" }]
```

`info` looks like this:

```json
{
    "props": [
        { "name": "color", "type":"string", "defaultValue":"red" },
        { "name": "steps", "type":"number", "defaultValue":"8" }
        { "name": "title", "type":"string" },
        { "name": "description"}
    ],
    "actions": [
        { "name": "click" },
        { "name": "hover" },
        { "name": "customAction" }
    ],
    "slots": [
        { "anonymous": true },
        { "name": "header", "anonymous": false },
        { "name": "footer", "anonymous": false }
    ],
    "css": [
      { "name": "--color-primary" },
      { "name": "--color-secondary" }
    ]
}
```
npm package: @hunter.tran/tlightbox
Description: Native Vue.js lightbox
Author: Hunter Tran
Latest version: 3.1.2

![Build Status](https://github.com/huntertran/tlightbox/workflows/Node%20CI/badge.svg)
![Publish Status](https://github.com/huntertran/tlightbox/workflows/Node.js%20Package/badge.svg)

<!-- TOC -->

- [1. Demo](#1-demo)
- [2. Install](#2-install)
    - [2.1. Vue Compatibility](#21-vue-compatibility)
    - [2.2. NPM](#22-npm)
- [3. Usage](#3-usage)
    - [3.1. Register the component](#31-register-the-component)
    - [3.2. Image settings](#32-image-settings)
    - [3.3. Other options](#33-other-options)

<!-- /TOC -->


Simple native Vue.js lightbox

# 1. Demo
<a id="markdown-1-demo" name="1-demo"></a>
https://huntertran.github.io/tlightbox/

# 2. Install
<a id="markdown-2-install" name="2-install"></a>

## 2.1. Vue Compatibility
<a id="markdown-21-vue-compatibility" name="21-vue-compatibility"></a>
> Compatible with Vue 2.0

## 2.2. NPM
<a id="markdown-22-npm" name="22-npm"></a>
```bash
$ npm install tlightbox
```

# 3. Usage
<a id="markdown-3-usage" name="3-usage"></a>

## 3.1. Register the component
<a id="markdown-31-register-the-component" name="31-register-the-component"></a>

```js
import lightbox from 'tlightbox';
Vue.use(lightbox);
```

Basic markup should look like this

```html
<lightbox :images="images"></lightbox>
```

## 3.2. Image settings
<a id="markdown-32-image-settings" name="32-image-settings"></a>

Accepts array containing image objects, properties accepted are caption and src.

```js
images: [
    {
        src: 'https://unsplash.it/500',
        thumbnail: 'https://unsplash.it/500'
        caption: 'Image 1',
    },
    {
        src: 'https://unsplash.it/501',
    },
],
```

## 3.3. Other options
<a id="markdown-33-other-options" name="33-other-options"></a>

Remove all styles to the image gallery, overlay not included
- Default: `false`

```js
:resetstyles="false" 
```

Add h1 with title above gallery
- Default: null

```js
:title="Demo Gallery" 
```

Show loading when image is not downloaded
- Default: `true`

Setup loading styles: Normal or Heart Icon
- Default: `normal`

```html
<lightbox :isShowLoading='true' :loadingStyle='heart'></lightbox>
```

Loop back to the first image when at the end of the gallery
- Default: `true`

```js
:loop="true" 
```

Show next, back and close buttons on overlay
- Default: `true`
```js
:nav="true" 
```

Show captions on images with the caption property
- Default: `true`
```js
:caption="true"
```
npm package: @hunter3533/mytest-cli
Description: mytest-cli
Author: mxdneu
Latest version: 0.0.5


# mytest-cli

一个CLI工具，快速创建基于Webpack的可配置React开发环境

## 安装

```bash
$ npm install -g @hunter3533/mytest-cli
```

## 使用

#### 创建一个项目
```bash
$ mytest init <project-name>
```

例子:

#### 创建项目
```bash
$ mytest init my-project
$ cd my-project
$ npm start
```
然后打开[http://localhost:3000/](http://localhost:3000/)查看您的应用。


项目结构:

```bash
.
├── build                   # webpack配置
├── config                  # 公共配置
├── src                     # 开发目录
│   ├── actions             # redux/action
│   ├── assets              # 静态资源，会被webpack编译
│   ├── common              # 公共样式、通用工具
│   ├── components          # UI组件/木偶组件
│   ├── reducers            # redux/reducer
│   ├── store               # redux/store
│   ├── views               # 容器组件/智能组件
│   ├── App.jsx             # 根组件
│   ├── index.js            # 入口文件
│   └── index.tpl.html      # html模板文件
├── static                  # 静态资源，不会被webpack编译
├── .babelrc
├── .gitignore
├── package.json
├── postcss.config.js
└── README.md
```
npm package: @hunterdoesdata/scratch-ticket
Description: Skinnable WebAssembly-powered scratch-off ticket for TypeScript and Node web apps
Latest version: 0.1.0

# ScratchNWin

`@scratchnwin/scratch-ticket` is a plug-and-play browser package for scratch-off games powered by Rust/WebAssembly.

## Install

```bash
npm install @scratchnwin/scratch-ticket
```

## Quick Start

Use the unified factory:

```ts
import { createScratchGame } from "@scratchnwin/scratch-ticket";

const host = document.getElementById("scratch-zone");

if (host instanceof HTMLElement) {
  await createScratchGame(host, {
    prizeHtml: "<strong>$500</strong>"
  });
}
```

## Matrix Example

```ts
import { createScratchGame } from "@scratchnwin/scratch-ticket";

const host = document.getElementById("scratch-zone");

if (host instanceof HTMLElement) {
  await createScratchGame(host, {
    mode: "matrix",
    variant: "match",
    symbols: ["🍒", "🍋", "⭐", "💎"],
    matchCount: 3,
    maxScratches: 3,
    playId: "play_123",
    singleUse: true,
    callbackUrl: "/api/scratch-result"
  });
}
```

## Why It’s Simple

- built JavaScript is included
- the wasm asset is included
- base styles auto-inject by default
- `@scratchnwin/scratch-ticket/style.css` is available if an app wants explicit CSS ownership
- no consumer Rust build step
- no manual wasm copying

## Main API

```ts
createScratchGame(host, options)
createScratchTicket(host, options)
createMatrixScratchGame(host, options)
```

Most apps should start with `createScratchGame()`.

## Replay-Safe Integration

If the integrating app wants replay protection, pass a backend-issued `playId` and post results to a server endpoint with `callbackUrl`. `singleUse: true` blocks local resets after completion, but the backend is what actually enforces single-use play records.

## More

For full options, React and Next.js examples, matrix variants, callback payloads, and packaging notes, see [docs/INTEGRATION.md](/Users/edward/Documents/GitHub/ScratchNWin/docs/INTEGRATION.md).

## Development

```bash
npm install
npm run build
npm run demo
```