open-index/open-npm huggingface dataset:
npm package: @isalvaus/web-components
Description: A library of Fluent Web Components
Author: Microsoft
Latest version: 2.5.18

# Fluent UI Web Components

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/%40fluentui%2Fweb-components.svg)](https://badge.fury.io/js/%40fluentui%2Fweb-components)

`@fluentui/web-components` is a library of Web Components that _composes_ `@microsoft/fast-foundation` and supports Microsoft's Fluent design language.

## Installation

### From NPM

To install the `web-components` library, use either `npm` or `yarn` as follows:

```shell
npm install --save @fluentui/web-components
```

```shell
yarn add @fluentui/web-components
```

Within your JavaScript or TypeScript code, you can then import library APIs like this:

```ts
import { FluentAnchor } from '@fluentui/web-components';
```

Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](http://fast.design/docs/integrations/introduction).

### From CDN

A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
  </head>
  <!-- ... -->
</html>
```

The above CDN location points to the latest release of `@fluentui/web-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.

For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.

## Development

To start the component development environment, run `yarn start`.

### Known issue with Storybook site hot-reloading during development

Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`

This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.
npm package: @isameng/lowcode-components
Description: lowcode Components
Author: ameng
Latest version: 1.0.2

# 低代码平台业务组件库

## 特性
* **typescript** 
* Vue3
* 单元测试
* 提交发布前验证
* gitlab-runner 实现自动发布

### 提供一个业务组件库在编辑器和 H5 页面中都可以使用
该组件包导出两种格式的模块，供不同情况下使用

```javascript
  // umd 格式
  "main": "dist/lego-components.umd.js",
  // es modules 格式
  "module": "dist/lego-components.esm.js",
```

## 安装和使用

```bash
// 安装
npm install @isameng/lowcode-components --save
```

```javascript
import LowcodeComponents from '@isameng/lowcode-components'
// 加载样式
import '@isameng/lowcode-components/dist/lowcode-components.css'

const app = createApp(App)
// 全局引入 目前包括 FinalPage, HText, HImage , HShape三个组件
app.use(LowcodeComponents)

app.mount('#app')
```

### 渲染最终页面
```javascript
setup() {
  // 使用 finalPage 组件进行渲染，使用我们预定义好的数据结构
  const testData = {
    // 页面上面一个个组件的属性
    components: [
      {id: '123', name: 'h-text', props: { text: 'hello', top: '0', left: '20px'}},
      {id: '234', name: 'lh-image', props: { imageSrc: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f6338e666336111f73d220c.png', top: '30px', left: '20px'}},
      {id: '235', name: 'h-shape', props: { backgroundColor: 'red', top: '50px', left: '20px', width: '100px', height: '100px'}},
      // 这是一个链接
      {id: '345', name: 'h-text', props: { backgroundColor: "#1890ff", color: "#ffffff", text: "按钮内容",  width: "100px", actionType: "to", url: "http://www.baidu.com", top: '200px', left: '150px',
      }}
    ]
  }
  return {
    testData
  }
}
```

```html
<final-page :components="testData.components"></final-page>
```
npm package: @isamrish/gatsby-plugin-google-adsense
Description: Gatsby plugin to add google adsense onto a site
Author: Amrish Kushwaha
Latest version: 1.2.0

<h1 align="center">
<strong>gatsby-plugin-google-adsense</strong>
</h1>

<p align="center">
Add Google Adsense to your Gatsby site.
</p>

<p align="center">
<img alt="npm (scoped)" src="https://img.shields.io/npm/v/@isamrish/gatsby-plugin-google-adsense">
<img alt="npm" src="https://img.shields.io/npm/dt/@isamrish/gatsby-plugin-google-adsense">
</p>

## Install

```
npm install @isamrish/gatsby-plugin-google-adsense
```

or

```
yarn add @isamrish/gatsby-plugin-google-adsense
```

## Usage in Gatsby website

```javascript
// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@isamrish/gatsby-plugin-google-adsense`,
      options: {
        googleAdClientId: "YOUR_GOOGLE_ADSENSE_TRACKING_ID",
        head: false // Optional
      }
    }
  ]
};
```

## Options

### `googleAdClientId`

Here you place your Google Adsense tracking id.

### `head`

Here you can define where to place the tracking script. With `head:true` it will placed in the header, with `head:false` it will placed in the body. Default is `false`.

Google adsense recommends to put script in [head tag](https://support.google.com/adsense/answer/9274516).
npm package: @isamu/osmd-audio-player
Description: OSMD audio player (fork of osmd-audio-player with modernized build system)
Author: Jimmy Utterström
Latest version: 1.0.0

# @isamu/osmd-audio-player

> **Fork of [osmd-audio-player](https://github.com/jimutt/osmd-audio-player)** by Jimmy Utterström.
> Modernized build system, updated dependencies, and stricter TypeScript typing.

Unofficial audio playback engine for [OpenSheetMusicDisplay](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay).

## Changes from upstream

- Migrated from npm/Babel/Jest to yarn/Vitest
- Upgraded TypeScript 3.7 to 5.x
- Upgraded opensheetmusicdisplay 0.8 to 1.9
- Added ESLint + Prettier
- Removed all `any` types
- GitHub Actions CI (ubuntu/windows/macos)

## Install

```
yarn add @isamu/osmd-audio-player
```

## Usage

```typescript
import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";
import AudioPlayer from "@isamu/osmd-audio-player";

const osmd = new OpenSheetMusicDisplay(document.getElementById("score"));
const audioPlayer = new AudioPlayer();

await osmd.load(scoreXml);
await osmd.render();
await audioPlayer.loadScore(osmd);

audioPlayer.play();
```

## Features

- Framework agnostic (Vanilla JS / React / Vue)
- Multi-instrument support (91 MIDI instruments via Musyngkite soundfont)
- Individual volume controls per instrument
- Automatic tempo detection from score / BPM control
- Staccato articulation / tie handling
- Seek (jump to step)
- Event-driven architecture (STATE_CHANGE / ITERATION)

## API

```typescript
const audioPlayer = new AudioPlayer();

await audioPlayer.loadScore(osmd);   // Load score from OSMD instance
await audioPlayer.play();            // Start playback
audioPlayer.pause();                 // Pause playback
await audioPlayer.stop();            // Stop and reset to beginning
audioPlayer.jumpToStep(step);        // Seek to specific step
audioPlayer.setBpm(120);             // Set tempo

audioPlayer.on("state-change", (state) => { /* INIT | PLAYING | STOPPED | PAUSED */ });
audioPlayer.on("iteration", (notes) => { /* Called for each note group */ });
```

## Development

```bash
yarn install
yarn dev          # TypeScript watch mode
yarn test         # Run tests (Vitest)
yarn build        # Compile to dist/
yarn build-umd    # UMD bundle
yarn lint         # ESLint
yarn format       # Prettier
```

## License

MIT - Original work by [Jimmy Utterström](https://github.com/jimutt/osmd-audio-player)