open-index/open-npm huggingface dataset:
npm package: @playkit-js/webpack-common
Description: Common Webpack configuration for Kaltura player
Latest version: 1.0.6

# playkit-js-webpack-common

[![](https://img.shields.io/npm/v/@playkit-js/webpack-common/latest.svg)](https://www.npmjs.com/package/@playkit-js/webpack-common)
[![](https://img.shields.io/npm/v/@playkit-js/webpack-common/canary.svg)](https://www.npmjs.com/package/@playkit-js/webpack-common/v/canary)

> A shared common webpack configuration for [`kaltura-player-js`][kaltura-player-js]
 
 
[kaltura-player-js]: https://github.com/kaltura/kaltura-player-js

## Usage

In your project run:
> `yarn add @playkit-js/webpack-common`

In your `webpack.config.js` file, you can import and use the exported modules from `@playkit-js/webpack-common`.

For example:
```ts
const { insertStylesWithNonce } = require('@playkit-js/webpack-common');

module.exports = () => {
    return {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              {
                loader: 'style-loader',
                options: {
                  insert: insertStylesWithNonce
                }
              }
            ]
          }
        ]
      }
    }
} 
```
npm package: @playkit/playkit-button
Description: Webcomponent playkit-button following open-wc recommendations
Author: playkit-button
Latest version: 0.0.2

# \<playkit-button>

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

## Installation
```bash
npm i playkit-button
```

## Usage
```html
<script type="module">
  import 'playkit-button/playkit-button.js';
</script>

<playkit-button></playkit-button>
```

## 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 <abbr title="test driven development">TDD</abbr>, 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: @playkit/playkit-card
Description: Webcomponent playkit-card following open-wc recommendations
Author: playkit-card
Latest version: 0.0.2

# \<playkit-card>

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

## Installation
```bash
npm i playkit-card
```

## Usage
```html
<script type="module">
  import 'playkit-card/playkit-card.js';
</script>

<playkit-card></playkit-card>
```

## 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 <abbr title="test driven development">TDD</abbr>, 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: @playkit/playkit-registration
Description: Webcomponent find-play-registration following open-wc recommendations
Author: find-play-registration
Latest version: 0.0.2

# \<find-play-registration>

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

## Installation

```bash
npm i find-play-registration
```

## Usage

```html
<script type="module">
  import 'find-play-registration/find-play-registration.js';
</script>

<find-play-registration></find-play-registration>
```

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

To run the suite of karma tests, run

```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, 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 `es-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @playkostudios/jsonc-ast
Description: Experimental JSONC AST parser and encoder
Latest version: 0.2.1

# jsonc-ast

Experimental lossless JSONC AST parser and encoder. Uses `jsonhilo` to tokenize
JSON, and then converts the tokens to easier-to-use objects. A JSONC tokenizer
is also provided to allow for optional JSONC support.

Note that this loses the benefits of using a streaming parser; the entire JSON
document is stored in memory. Using `jsonhilo` may be more appropriate for your
use-case.

Source code: https://github.com/playkostudios/jsonc-ast
NPM package: https://www.npmjs.com/package/@playkostudios/jsonc-ast

# Building

```
pnpm run build
```
npm package: @playkostudios/wle-cleaner
Description: Wonderland Engine project file cleanup utility
Latest version: 0.10.2

# wle-cleaner

Experimental project file cleanup utility for Wonderland Engine.
**This tool is very experimental, use at your own risk. Always verify that the
cleaned project is OK after using the tool. Make sure to use version control**

Source code: https://github.com/playkostudios/wle-cleaner

NPM package: https://www.npmjs.com/package/@playkostudios/wle-cleaner

## Installing

```
npm install --save-dev @playkostudios/wle-cleaner
```

## Running

From the command line:
```
npm exec wle-cleaner -- my-project.wlp
```

From an NPM script (in `package.json`):
```
wle-cleaner my-project.wlp
```

If the project file is `my-project.wlp`, then the cleaned project will be saved
to `cleaned-my-project.wlp`.
npm package: @playkostudios/wle-trace
Description: Debugging tool for Wonderland Engine
Latest version: 0.2.5

# wle-trace

A debugging tool for Wonderland Engine. Features:
- Method and accessor tracing for most WLE classes
- Construction and destruction tracing for most WLE resources
- Use-after-destroy and double-destroy detection (with stack traces showing where the first destroy happened)
- Low-level call tracing (for example, you can trace `_wl_load_scene_bin` calls)
- Method and accessor guarding (check for use-after-destroy in method call parameters)
- All features can be individually toggled

To setup, install `@playkostudios/wle-trace` and import it at the top of your
`index.js`; this will inject debugging code into the engine as soon as it's
possible. A controller for the debug features will be available as a global
`wleTrace` variable, accessible in the F12 console, or it can be imported.

If you want to to enable specific debug features as soon as the code injection
is complete, then call the `waitForInjections` method in the controller.
```js
import wleTrace from '@playkostudios/wle-trace';

wleTrace.waitForInjections(() => {
    wleTrace.enableWithPrefix('guard:');
    wleTrace.enableWithPrefix('trace:destruction:');
    wleTrace.enableWithPrefix('trace:construction:');
});
```
npm package: @playlistwizard/spotify
Description: An Object-Oriented API client for Spotify Web API used in PlaylistWizard.
Author: suzuki3jp
Latest version: 0.2.1

<img src="https://raw.githubusercontent.com/suzuki3jp/PlaylistWizard/28b4a49f92ba217c1ae9db1c87fd83076fab0e75/assets/banner.png"/>

# @playlistwizard/spotify
An Object-Oriented API client for Spotify Web API used in [PlaylistWizard](https://playlistwizard.app).
npm package: @playlistwizard/youtube
Description: An Object-Oriented API client for YouTube Data API v3 used in PlaylistWizard.
Author: suzuki3jp
Latest version: 0.7.2

<img src="https://raw.githubusercontent.com/suzuki3jp/PlaylistWizard/28b4a49f92ba217c1ae9db1c87fd83076fab0e75/assets/banner.png"/>

# @playlistwizard/youtube
An Object-Oriented API client for YouTube Data API v3 used in [PlaylistWizard](https://playlistwizard.app).
npm package: @playlyfe/babel-loader
Description: babel module loader for webpack
Author: Mayank Agarwal
Latest version: 1.0.4

[![npm](https://img.shields.io/npm/v/@playlyfe/babel-loader.svg?style=flat-square)](https://www.npmjs.com/package/@playlyfe/babel-loader)
[![npm](https://img.shields.io/npm/dt/@playlyfe/babel-loader.svg?style=flat-square)](https://www.npmjs.com/package/@playlyfe/babel-loader)
[![Travis](https://img.shields.io/travis/Mayank1791989/babel-loader.svg?style=flat-square)](https://travis-ci.org/Mayank1791989/babel-loader)

<div align="center">
  <a href="https://github.com/babel/babel">
    <img src="https://rawgit.com/babel/logo/master/babel.svg" alt="Babel logo" width="200" height="200">
  </a>
  <a href="https://github.com/webpack/webpack">
    <img src="https://webpack.js.org/assets/icon-square-big.svg" alt="webpack logo" width="200" height="200">
  </a>
</div>

# babel-loader

> This package allows transpiling JavaScript files using [Babel](https://github.com/babel/babel) and [webpack](https://github.com/webpack/webpack).

## Requirements

```javascript
{
  node: '>=8.0.0',
  webpack: '>=4.0.0',
  babel: '>=7.0.0'
}
```

## Install

```sh
$ npm install --save-dev @playlyfe/babel-loader
$ yarn add --dev @playlyfe/babel-loader
```

## Usage

webpack documentation: [Loaders](https://webpack.js.org/loaders/)

Within your webpack configuration object, you'll need to add the babel-loader to the list of modules, like so:

```javascript
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: '@playlyfe/babel-loader',
        options: {
          cacheDirectory: 'cache-dir-path'
        }
      }
    }
  ]
}
```

## Options

* `cacheDirectory`: ```false | string``` (Default `false`). When set, the given directory will be used to cache the results of the loader. Future webpack builds will attempt to read from the cache to avoid needing to run the potentially expensive Babel recompilation process on each run.
npm package: @playlyfe/custom-event-polyfill
Description: A polyfill for creating CustomEvents on IE9+ if the native implementation is missing.
Author: Evan Krambuhl
Latest version: 1.0.4
Deprecated: This package has been superseded by the original custom-event-polyfill@1.0.6 package. Upgrade now.

# custom-event-polyfill

A polyfill for creating CustomEvents on IE9+ if the native implementation is missing.

## Install

```bash
# using yarn
$ yarn add @playlyfe/custom-event-polyfill

# using npm
$ npm install --save @playlyfe/custom-event-polyfill
```

## Usage

Just include this polyfill before using any code which creates a CustomEvent
object, ideally as early as possible.

Refer to the CustomEvent documentation for details on how to use it:
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

## License

MIT
npm package: @playlyfe/gql-language-server
Description: language-server-protocol implementation for @playlyfe/gql
Author: Mayank Agarwal
Latest version: 0.3.1

# GQL Language Server

This is an implementation of the [Language Server Protocol](https://github.com/Microsoft/language-server-protocol/) for the [@playlyfe/gql](https://github.com/Mayank1791989/gql).

## Options
```
Usage: gql-language-server [args]

Options:
  --version            Show version number                             [boolean]

  -h, --help           Show help                                       [boolean]

  --node-ipc           Use node-ipc to communicate with the server. Useful for
                       calling from a node.js client.
                                                                        [string]

  --stdio              Use stdio to communicate with the server
                                                                        [string]

  --socket             Use a socket (with a port number like --socket=5051) to
                       communicate with the server.
                                                                        [number]
  --gql-path           An absolute path to a gql. [default: process.cwd()]
                                                                        [string]

  --config-dir         An absolute path to config dir. [default: process.cwd()]
                       Walks up the directory tree from the provided config
                       directory, until a .gqlconfig file is found or the root
                       directory is reached.
                                                                        [string]
  --auto-download-gql  Automatically download gql package if not found.
                                                       [boolean] [default: true]

  --watchman           use watchman to watch files (if available).
                                                       [boolean] [default: true]

  --loglevel           log level.
                    [choices: "debug", "info", "error", "off"] [default: "info"]

```

## Editor Integrations
### [GraphQL for Visual Studio Code (graphql-for-vscode)](https://github.com/kumarharsh/graphql-for-vscode)
Plugin for vscode using ```gql-language-server```.
npm package: @playmatic/sdk
Description: Environment management and AI helpers for Playwright tests
Author: Playmatic
Latest version: 0.2.2

# Playmatic SDK

Test SDK for creating self-healing E2E tests that combine natural language with cached steps.

**[View Full Documentation](https://docs.playmatic.ai)**

## Installation

```bash
# npm
npm install @playmatic/sdk

# pnpm
pnpm add @playmatic/sdk

# yarn
yarn add @playmatic/sdk
```

## What are Playmatic Tests?

Playmatic tests are **Playwright tests enhanced with AI helpers** for robust, self-healing E2E testing:

```typescript
import { aiClick, aiVerify, env } from '@playmatic/sdk';
import { test, expect } from '@playwright/test';

test('User can login and access dashboard', async ({ page }) => {
  await test.step('Navigate to login', async () => {
    // Use deterministic Playwright for stable navigation
    await page.goto(env.baseUrl + '/login');
  });

  await test.step('Verify login form with AI', async () => {
    // Use AI for visual verification
    await aiVerify('login form with email and password fields is visible', page);
  });

  await test.step('Submit login', async () => {
    // Use AI to click elements that might have brittle selectors
    await aiClick('login button', page);
    await expect(page).toHaveURL(/dashboard/);
  });
});
```

When selectors break or UI changes, AI computer vision automatically figures out how to accomplish the intent using visual understanding.

**[Complete guides, examples, and API reference at docs.playmatic.ai](https://docs.playmatic.ai)**
npm package: @playmint/hardhat-cairo-type-hints
Description: Hardhat plugin for compiling cairo-lang type hints.
Author: Playmint
Latest version: 0.1.0

# hardhat-cairo-type-hints
A plugin for hardhat which compiles your Cairo type hints for you.

## How it Works
Extends [Hardhat StarkNet compile](https://www.npmjs.com/package/@playmint/hardhat-starknet-compile) to use [Cairo type hints](https://pypi.org/project/cairo-type-hints/) during compilation

## Installation

Make sure to install [Cairo type hints](https://pypi.org/project/cairo-type-hints/) to your Python environment.

Install with npm:

`npm i --save-dev @playmint/hardhat-cairo-type-hints`

Then import in your hardhat.config file after Hardhat StarkNet compile:

```ts
import "@playmint/hardhat-starknet-compile";
import "@playmint/hardhat-cairo-type-hints";
```

## How to use
Type hint artifacts are generated whenever a compile task runs, either:
- run the `compile` task (`npx hardhat compile`), or
- run the `starknet-compile` task (`npx hardhat starknet-compile`)

The artifacts created can be used with [Stark-dot-net](https://github.com/playmint/stark-dot-net) and other compatible code generators
npm package: @playmoweb/payline-typescript-sdk
Description: Payline Typescript SDK
Author: Thibaud Giovannetti
Latest version: 1.2.0

# Payline SDK 

*This is an unofficial repository*

## Installation

```shell script
npm i --save @playmoweb/payline-typescript-sdk
```

## Basic usage

```typescript
import {
  Payline,
  PaylineWeb,
  PaylineDoWebPaymentRequest,
  PaylineCurrency,
  PaylineAction,
  PaylineDeliveryMode,
  PaylineMode,
} from "payline-typescript-sdk";

// prepare payline configuration
const isProduction = false;
const isDebug = true;
const paylineConfig = new Payline("YOUR_MERCHANT_ID", "YOUR_KEY_SECRET", "YOUR_CONTRACT_NUMBER", {}, isProduction, isDebug);
const paylineWebService = new PaylineWeb(paylineConfig);

// Create a request to do a web payment
const doWebPaymentRequest = new PaylineDoWebPaymentRequest("YOUR_ORDER_REFERENCE_ID")
    .setClientDetails("client-email@example.com", "First name", "Last name")
    .setCallbackUrls("https://www.your.website.com/returnUrl", "https://www.your.website.com/cancelUrl", "https://your.server.com/hook/payline")
    .setAmount(1000, PaylineCurrency.EUR)
    .setPaymentDetails(PaylineAction.AuthCapture, PaylineMode.FULL)
    .setOrderDetails(PaylineDeliveryMode.Virtual)
    .setWalletId("CUSTOMER_WALLET_ID"); // if needed, attach a walletId

// Execute the payment (will return a promise)
paylineWebService.doWebPayment(doWebPaymentRequest);
```

```typescript
import {PaylineWalletManagement} from "payline-typescript-sdk";

// if you need wallet endpoints you need to instantiate the service with the payline config instance
const paylineWalletService = new PaylineWalletManagement(paylineConfig);
```

## Development

Tested endpoints :

```
// PaylineWeb
doWebPayment()
getWebPaymentDetails()
manageWebWallet()

// PaylineWalletManagement


// PaylinePaymentManagement
doRefundRequest()
```
npm package: @playmoweb/vue-payline-wrapper
Description: VueJS Payline Widget Wrapper.
Author: Playmoweb SAS
Latest version: 1.1.2

# Vue 2.X Payline Widget Wrapper

[![npm version](https://badge.fury.io/js/vue-payline-wrapper.svg)](https://www.npmjs.com/package/@playmoweb/vue-payline-wrapper)
[![npm](https://img.shields.io/npm/l/@playmoweb/vue-payline-wrapper.svg)](https://www.npmjs.com/package/@playmoweb/vue-payline-wrapper)
[![vue2](https://img.shields.io/badge/vue-2.2+-brightgreen.svg)](https://vuejs.org/)

VueJS wrapper component for the web Payline Widget SDK.

_This is an unofficial repository._

## Installation

```shell
npm i --save @playmoweb/vue-payline-wrapper
```

## Usage

```js
import VuePaylineWrapper from '@playmoweb/vue-payline-wrapper';
import Vue from 'vue';
Vue.use(VuePaylineWrapper);
```

```vue
<template>
    <VuePaylineWrapper :noClose="noClose" :token="token" widgetType="lightbox" :isHomologation="isHomologation"
                       @success="(state) => this.logState(state)"
                       @error="(state) => this.logState(state)"
                       @didshowstate="(state) => this.logState(state)"
                       @handleFinalStateReached="(state) => this.logState(state)"
                       @readyToPay="(state) => this.logState(state)"/>
</template>
<script>
    export default {
        name: "samplePayline",
        data(){
            return {
                token: "YOUR-PAYMENT-TOKEN-FROM-DO-WEB-PAYMENT",
                noClose: false,
                isHomologation: false
            }
        },
        methods: {
            logState(state){
                console.log(state);
            }
        }
    }
</script>
```