open-index/open-npm huggingface dataset:
npm package: @juganu/jsos-api
Description: README.md
Author: omarv@juganu.com
Latest version: 0.1.9

####  [<img src="https://juganu.com/wp-content/uploads/2020/01/Juganu-Logo-with-Sun-SVG.png" alt="Juganu" width="110"/>](https://juganu.com)
##  JSOS Javascript/Typescript library

### Library Usage

Remember that in order to start using JSOS API, you will need a valid tenant account in any JSOS deployment.

### Installation
```bash
npm install jsos-api
```
npm package: @jugar/date-formatter
Description: Date Formatting Toolkit.
Author: Maquia
Latest version: 0.0.2

# date-formatter

将 Date 转化为指定格式的 string:

- 月(M)、日(d)、小时(h)、分(m)、秒(s) 可以用 1-2 个占位符
- 年(y)可以用 1-4 个占位符
- 毫秒(S)只能用 1 个占位符(是 1-3 位的数字)

例：

- format(new Date(), 'yyyy-MM-dd hh:mm:ss.S')

> 2006-07-02 08:09:04.423

- format(new Date(), 'yyyy-M-d h:m:s.S')

> 2006-7-2 8:9:4.18

# NPM Install

```cmd
npm install @jugar/date-formatter@latest
```

# Usage

```ts
import { formatDate } from '~/utils/format'

formatDate(datetime, 'yyyy-MM-dd hh:mm:ss')
```
npm package: @jugar/debounce-throttle
Description: Debouncing and throttling toolkits.
Author: Maquia
Latest version: 0.0.1

# debounce-throttle

- NPM Install

```cmd
npm install @jugar/json-beautify@latest
```

- Usage

```ts
import { debounce } from '@jugar/debounce-throttle'

export const greeting = debounce((...params: unknown[]) => {
  const [str1, str2] = params as (string | undefined)[]
  console.log(str1, str2)
}

greeting('hello', 'world')
```
npm package: @jugar/html-shot
Description: Make Image By HTML Element.
Author: Maquia
Latest version: 0.0.2

# html-shot

Make Image By HTML Element

# 安装

```cmd
npm install @jugar/html-shot
```

# 截图返回URL

```ts
import { videoShot } from '@jugar/html-shot'

const url = videoShot('streamingVideo')
```

# 截图返回URL（图片压缩）

```ts
import { videoShot } from '@jugar/html-shot'

// 缩小五倍
const url = videoShot('streamingVideo'， 0.2)
```

# 截图下载

```ts
import { downloadImage, videoShot } from '@jugar/html-shot'

const url = videoShot('streamingVideo')
downloadImage(url)
```
npm package: @jugar/jsx-runtime
Description: Custom JSX runtime tool.
Author: Maquia
Latest version: 0.1.4

# How to use jsx-runtime

- CMD

```cmd
npm install @jugar/jsx-runtime
```

- tsconfig.json

```json
{
  "compilerOptions": {
    /** JSX */
    "jsx": "preserve",
    "jsxFactory": "html5",
    "jsxFragmentFactory": "fragment",
    "jsxImportSource": "@jugar"
  }
}
```

- vite-env.d.ts

```ts
/// <reference types="@jugar/jsx-runtime" />
```

- vite.config.ts

```ts
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    jsx: 'transform',
    jsxFactory: 'html5',
    jsxFragment: 'fragment',
    jsxInject: `import { html5, fragment } from '@jugar/jsx-runtime'\n\n`,
  },
})

```

# How to use signal

```ts
import { createSignal } from '@jugar/jsx-runtime'

export function HelloWorld() {
  const count = createSignal(0)

  return (
    <div className="jsx-runtime-demo">
      <button
        onclick={() => {
          count.set(count.get() + 1)
        }}
        ref={(elm) => {
          count.relay(elm, 'title')
        }}
        type="button"
      >
        Increase
      </button>
      <input
        id="count"
        name="count"
        ref={(elm) => {
          count.sync(elm)
        }}
        type="number"
        value={count.get()}
      />
      <span
        ref={(elm) => {
          count.relay(elm, 'text', 'Current: ${self}')
        }}
      >
        {count.get()}
      </span>
    </div>
  )
}

```

**Methods**

| Name  | Description                                                 | Parameters                  |
| ----- | ----------------------------------------------------------- | --------------------------- |
| get   | Get Currrent State With Optional Template                   | template                    |
| refer | Refer Element Event Data Into State                         | element, eventName          |
| relay | Relay State Into Element's Property With Optional Template | element, propName, template |
| set   | Set State                                                   | next                        |
| sync  | Bind State With `<input>` by `value` Property           | element                     |
npm package: @jugar/svg-icon
Description: A SVG Symbol Manager Tool
Author: Maquia
Latest version: 0.0.4

# How to use svg-icon

- Installation

```cmd
npm install @jugar/svg-icon
```

- Local

- Register SVG Icon by Name

```ts
import { defineLoader, registerSymbol } from '@jugar/svg-icon'
defineLoader((fullname: string) => {
  const [dir, name] = fullname.split(':')
  // relative to the current directory
  return new URL(`../../svg/${dir}/${name}.svg?url`, import.meta.url).href
})
registerSymbol('dir:name')
```

- Use SVG Icon by Name

```html
<svg class="svg-icon">
  <use xlink:href="#dir:name" />
</svg>
```
npm package: @jugar/web-component
Description: Web Component Code Generator.
Author: Maquia
Latest version: 0.0.1

# web-component

Web Component Code Generator.

- tsconfig.json

```json
{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}
```

- web-component.ts

```ts
import { component, listen, attr, format } from '../core/decorator'

@component('web-component')
export class WebComponent {
  @attr('demo-bool')
  @format('boolean')
  demoBool = false

  @attr('demo-str')
  demoStr = 'hello,world'

  @attr('demo-num')
  @format('number')
  demoNum = 1.52

  @listen('click')
  onclick?: Function

  ready = false

  declare elm: HTMLElement

  onconnect() {
    console.log('connected')
  }

  oncreate() {
    console.log('created')
  }

  ondisconnect() {
    console.log('disconnected')
  }

  onupdate(key: string, from: unknown, to: unknown) {
    console.log('update ===> ', key, from, to)
  }
}

```

- main.ts

```ts
import './web-component'
```

- index.html

```html
<web-component demo-src="hhhh"></web-component>
```
npm package: @jugdx/discord-bot
Description: Discord Bot is a simple projects based on **[discord.js](https://github.com/discordjs/discord.js)** API. It helps you creating a Client (aka a Bot) and generating **events** or **commands** using **Typescript**.
Author: Julien Goudeaux
Latest version: 0.2.0

# Discord Bot API

Discord Bot is a simple projects based on **[discord.js](https://github.com/discordjs/discord.js)** API.
It helps you creating a Client (aka a Bot) and generating **events** or **commands** using **Typescript**.

# WARNING

Work In Progress (still in development)!
npm package: @jugen/dependency-status
Description: Check whether your public npm dependencies (or private github dependencies) are up-to-date
Author: Jugen Bernt
Latest version: 1.0.2

# dependency-status

Check whether your public npm dependencies (or private github dependencies) are up-to-date

	npm install @jugen/dependency-status

## Usage

Simply call `dependency-status` with module or github repository name

``` js
var check = require('dependency-status');

check('dependency-status', function(err, report) {
	console.log(report);
});
```

The above result will look like this

``` js
{
	name: 'dependency-status',
	version: '0.1.0',
	dependencies: [{
		name: 'request',
		latest: '2.34.0',
		used: '^2.34.0',
		status: 'latest'
	}, {
		...
	}]
}
```

The status of each dependency can be `up-to-date` or `outdated`.

You can also use `dependency-status` if your node project is not on npm but only on github (like an app).
Simply pass `username/repository` to the function

``` js
check('my-github-username/my-repo', callback);
```

If your repository is private you need to pass credentials as well as the second parameter

``` js
check('my-user/my-private-repo', {
	username: 'this-user-has-read-access-to-the-repo',
	password: 'this-is-his-password'
}, callback);
```

If you pass a credentials map you can also check the status of your modules private github dependencies

## License

MIT