open-index/open-npm huggingface dataset:
npm package: @kkmb/logger
Description: A simple logging for server side js
Author: Maximilien KENGNE KONGNE
Latest version: 1.0.6

# Logger Documentation

## Overview
The `Logger` class is a flexible logging utility designed to work in both frontend (browser) and backend (Node.js) environments. 

---

## Features

1. **Logging Levels**: Supports various log levels:
   - `info`
   - `warn`
   - `error`
   - `debug`
   - `trace`

2. **Environment Detection**:
   - Automatically adjusts behavior for frontend (browser) or backend (Node.js).


3. **Colorized Output**:
   - Uses ANSI escape codes in Node.js.
   - Applies CSS styles in the browser.

---

## Installation
```bash
npm install @kkmb/logger
```

---

## Usage

- Commonjs

```js
const {Logger} = require( '@kkmb/logger');
const log = new Logger();

```

- ESM

```js
import {Logger} from '@kkmb/logger';
const log = new Logger();
```

---

## API Reference


#### `info(...message: any[]): void`
Logs an informational message.

#### `warn(...message: any[]): void`
Logs a warning message.

#### `error(...message: any[]): void`
Logs an error message.

#### `debug(...message: any[]): void`
Logs a debug message.

#### `trace(...message: any[]): void`
Logs a trace message.

---

## Examples

### Example 1: Basic Logging
```javascript
logger.info("This is info log !");
logger.error("This is error log !");
logger.warn("This is warning log !");
logger.debug("This is debug log !");
logger.trace("This is trace log !");
```


---

## Compatibility

### Frontend (Browser)
- Colorized output using CSS styles.
- Dynamic message formatting.

### Backend (Node.js)
- Colorized output using ANSI escape codes.
- Dynamic message formatting.

---

## Future Enhancements
- Add support for additional dynamic placeholders.
- Enable log rotation for file-based logging.
- Integrate with external logging services.

---

## License
MIT License
npm package: @kkna/component-material
Description: <!-- automd:badges color="gray" license -->
Author: 藍+85CD
Latest version: 0.0.4

# @kkna/component-material

<!-- automd:badges color="gray" license -->

[![npm version](https://img.shields.io/npm/v/@kkna/component-material?color=gray)](https://npmjs.com/package/@kkna/component-material)
[![npm downloads](https://img.shields.io/npm/dm/@kkna/component-material?color=gray)](https://npmjs.com/package/@kkna/component-material)
[![license](https://img.shields.io/github/license/importantimport/kkna?color=gray)](https://github.com/importantimport/kkna/blob/main/LICENSE)

<!-- /automd -->

## Usage

### NPM

###### install

<!-- automd:pm-install auto=false -->

```sh
# npm
npm install @kkna/component-material

# yarn
yarn add @kkna/component-material

# pnpm
pnpm install @kkna/component-material

# bun
bun install @kkna/component-material
```

<!-- /automd -->

###### use

```jsx
import '@kkna/component-material'

export default () => (
  <kkna-material></kkna-material>
)
```

### CDN

```html
<script type="module" src="https://esm.sh/@kkna/component-material"></script>
<kkna-material></kkna-material>
```

## License

MIT
npm package: @kkna/context
Description: <!-- automd:badges color="gray" license -->
Author: 藍+85CD
Latest version: 0.0.4

# @kkna/context

<!-- automd:badges color="gray" license -->

[![npm version](https://img.shields.io/npm/v/@kkna/context?color=gray)](https://npmjs.com/package/@kkna/context)
[![npm downloads](https://img.shields.io/npm/dm/@kkna/context?color=gray)](https://npmjs.com/package/@kkna/context)
[![license](https://img.shields.io/github/license/importantimport/kkna?color=gray)](https://github.com/importantimport/kkna/blob/main/LICENSE)

<!-- /automd -->

## Usage

### NPM

###### install

<!-- automd:pm-install auto=false -->

```sh
# npm
npm install @kkna/context

# yarn
yarn add @kkna/context

# pnpm
pnpm install @kkna/context

# bun
bun install @kkna/context
```

<!-- /automd -->

###### context

```ts
import { context } from '@kkna/context'
import { consume } from '@lit/context'
import { LitElement, html } from 'lit'

class MyElement extends LitElement {
  @consume({ context, subscribe: true })
  public processOptions?: ProcessOptions

  render() {
    return html`<pre><code>
      ${JSON.stringify(this.processOptions, null, 2)}
    </code></pre>`
  }
}
```

###### consumer

```ts
import { consumer } from '@kkna/context'
import { LitElement, html } from 'lit'

class MyElement extends LitElement {
  public processOptions = consumer(this, { subscribe: true })

  render() {
    return html`<pre><code>
      ${JSON.stringify(this.processOptions.value, null, 2)}
    </code></pre>`
  }
}
```

###### provider

```ts
import { provider } from '@kkna/context'

const provide = provider(document.body, {
  initialValue: {
    data: { ...data },
    presets: [...presets],
  },
})
```

###### defineConfig (experimental)

```ts
import { defineConfig } from '@kkna/context'

defineConfig({
  data: { ...data },
  presets: [...presets],
})
```

<!-- ### CDN -->

## License

MIT
npm package: @kkna/core
Description: <!-- automd:badges color="gray" license -->
Author: 藍+85CD
Latest version: 0.0.4

# @kkna/core

<!-- automd:badges color="gray" license -->

[![npm version](https://img.shields.io/npm/v/@kkna/core?color=gray)](https://npmjs.com/package/@kkna/core)
[![npm downloads](https://img.shields.io/npm/dm/@kkna/core?color=gray)](https://npmjs.com/package/@kkna/core)
[![license](https://img.shields.io/github/license/importantimport/kkna?color=gray)](https://github.com/importantimport/kkna/blob/main/LICENSE)

<!-- /automd -->

The core engine of [KKna](https://github.com/importantimport/kkna) without any presets.

## Usage

###### process

```ts
import { process } from '@kkna/core'
import { mastodon } from '@kkna/preset-mastodon'

const result = await process({
  data: { ...data },
  presets: [
    mastodon({
      // https://fosstodon.org/@importantimport/111211120931974745
      id: '111211120931974745',
      instance: 'https://fosstodon.org',
    }),
    ...presets,
  ],
})

/** @type {import('@kkna/core').ProcessResult} */
console.log(result)
```

###### definePreset

```ts
import { definePreset, definePresetTask } from '@kkna/core'

export interface Options {
  /* your options here */
}

export const example = definePreset<Options>(options => ({
  name: 'example', // kkna-preset-example => example
  options,
  task: definePresetTask(async data => ({
    comments: { ...comments },
    reactions: { ...reactions },
  }))
}))
```

## License

MIT
npm package: @kkna/preset-hatsu
Description: Hatsu Preset for [KKna](https://github.com/importantimport/kkna).
Author: 藍+85CD
Latest version: 0.0.4

# @kkna/preset-hatsu

Hatsu Preset for [KKna](https://github.com/importantimport/kkna).

<!-- automd:badges color="gray" license -->

[![npm version](https://img.shields.io/npm/v/@kkna/preset-hatsu?color=gray)](https://npmjs.com/package/@kkna/preset-hatsu)
[![npm downloads](https://img.shields.io/npm/dm/@kkna/preset-hatsu?color=gray)](https://npmjs.com/package/@kkna/preset-hatsu)
[![license](https://img.shields.io/github/license/importantimport/kkna?color=gray)](https://github.com/importantimport/kkna/blob/main/LICENSE)

<!-- /automd -->

## Usage

### NPM

###### install

<!-- automd:pm-install auto=false -->

```sh
# npm
npm install @kkna/preset-hatsu

# yarn
yarn add @kkna/preset-hatsu

# pnpm
pnpm install @kkna/preset-hatsu

# bun
bun install @kkna/preset-hatsu
```

<!-- /automd -->

###### use

<!-- automd:file src="test/fixture/provide.ts" code -->

```ts [provide.ts]
import { provider } from '@kkna/context'
import { hatsu } from '@kkna/preset-hatsu'

const provide = provider(document.body, {
  initialValue: {
    presets: [
      hatsu({ instance: 'https://hatsu.local' }),
    ],
  },
})

provide.hostConnected()
```

<!-- /automd -->

## License

MIT
npm package: @kkna/preset-mastodon
Description: Mastodon Preset for [KKna](https://github.com/importantimport/kkna).
Author: 藍+85CD
Latest version: 0.0.4

# @kkna/preset-mastodon

Mastodon Preset for [KKna](https://github.com/importantimport/kkna).

<!-- automd:badges color="gray" license -->

[![npm version](https://img.shields.io/npm/v/@kkna/preset-mastodon?color=gray)](https://npmjs.com/package/@kkna/preset-mastodon)
[![npm downloads](https://img.shields.io/npm/dm/@kkna/preset-mastodon?color=gray)](https://npmjs.com/package/@kkna/preset-mastodon)
[![license](https://img.shields.io/github/license/importantimport/kkna?color=gray)](https://github.com/importantimport/kkna/blob/main/LICENSE)

<!-- /automd -->

## Usage

### NPM

###### install

<!-- automd:pm-install auto=false -->

```sh
# npm
npm install @kkna/preset-mastodon

# yarn
yarn add @kkna/preset-mastodon

# pnpm
pnpm install @kkna/preset-mastodon

# bun
bun install @kkna/preset-mastodon
```

<!-- /automd -->

###### use

<!-- automd:file src="test/fixture/provide.ts" code -->

```ts [provide.ts]
import { provider } from '@kkna/context'
import { mastodon } from '@kkna/preset-mastodon'

const provide = provider(document.body, {
  initialValue: {
    presets: [
      /** @see {@link https://mastodon.social/@Mastodon/112343541328038890} */
      mastodon({
        id: '112343541328038890',
        instance: 'https://mastodon.social',
      }),
    ],
  },
})

provide.hostConnected()
```

<!-- /automd -->

## License

MIT
npm package: @kkna/preset-openheart
Description: OpenHeart Preset for [KKna](https://github.com/importantimport/kkna).
Author: 藍+85CD
Latest version: 0.0.4

# @kkna/preset-openheart

OpenHeart Preset for [KKna](https://github.com/importantimport/kkna).

<!-- automd:badges color="gray" license -->

[![npm version](https://img.shields.io/npm/v/@kkna/preset-openheart?color=gray)](https://npmjs.com/package/@kkna/preset-openheart)
[![npm downloads](https://img.shields.io/npm/dm/@kkna/preset-openheart?color=gray)](https://npmjs.com/package/@kkna/preset-openheart)
[![license](https://img.shields.io/github/license/importantimport/kkna?color=gray)](https://github.com/importantimport/kkna/blob/main/LICENSE)

<!-- /automd -->

## Usage

### NPM

###### install

<!-- automd:pm-install auto=false -->

```sh
# npm
npm install @kkna/preset-openheart

# yarn
yarn add @kkna/preset-openheart

# pnpm
pnpm install @kkna/preset-openheart

# bun
bun install @kkna/preset-openheart
```

<!-- /automd -->

###### use

<!-- automd:file src="test/fixture/provide.ts" code -->

```ts [provide.ts]
import { provider } from '@kkna/context'
import { openheart } from '@kkna/preset-openheart'

const provide = provider(document.body, {
  initialValue: {
    presets: [
      openheart({ endpoint: 'https://api.openheart.fyi' }),
    ],
  },
})

provide.hostConnected()
```

<!-- /automd -->

## License

MIT
npm package: @kkoehn/ngx-resource-handler-ngx-http
Description: Resource handler for angular
Author: Roman Rosluk
Latest version: 14.0.1

# @ngx-resource/handler-ngx-http

It's implementation of `ResourceHandler` which uses Angular `HttpClient`

# If you are using Angular 5, please use @ngx-resource/handler-ngx-http 5.x

## How to install and setup it
```bash
& npm i --save @ngx-resource/core @ngx-resource/handler-ngx-http
```

In you app module
```typescript

// AoT requires an exported function for factories
export function myHandlerFactory(http: HttpClient) {
    return new MyResourceHandler(http);
}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,

    // Default ResourceHandler uses class `ResourceHandlerHttpClient`
    ResourceModule.forRoot()
    
    // Or set you own handler
    //ResourceModule.forRoot({
    //  handler: { provide: ResourceHandler, useFactory: (myHandlerFactory), deps: [HttpClient] }
    //})
  ],
  declarations: [...],
  bootstrap: [...],
  entryComponents: [...],
  providers: [...]
})
export class AppModule {
}
```

## [Docs about @ngx-resource/core](https://github.com/troyanskiy/ngx-resource-core/blob/master/README.md)
npm package: @kkoms/pxtorem
Description: `@kkoms/pxtorem` is a typescript library for calculating px value to rem. rootPx is calculated based on `getComputedStyle(document.documentElement).fontsize`. Update its value when visibility changes.
Latest version: 0.1.14

# @kkoms/pxtorem

`@kkoms/pxtorem` is a typescript library for calculating px value to rem.
rootPx is calculated based on `getComputedStyle(document.documentElement).fontsize`.
Update its value when visibility changes.

## Installation

```shell
yarn add @kkoms/pxtorem
# or
npm install @kkoms/pxtorem --save
# or
pnpm add @kkoms/pxtorem
```

## Example Usage

```typescript
function Example() {
  // when root px is 16.
  const remValue = pxToRem(16);
  const remValueString = pxToRemString(16);

  // result
  console.log(remValue); // 1
  console.log(remValueString); // '1rem'

  const pxValue = remToPx(1);
  const pxValueString = remToPxString(1);

  // result
  console.log(pxValue); // 16
  console.log(pxValueString); // '16px'

  // update base px
  // please invoke this function when your app is using SSR in somewhere like useEffect or window event listener.
  useEffect(() => {
    updateBasePx();
  }, []);

  // by default it adds window event listener to update base px when visibility change.
  // if you want to remove it, you can use removeHandleWindowVisibilityChange.
  removeHandleWindowVisibilityChange();
}
```
npm package: @kkoms/react-simple-input
Description: declarative simplified input/checkbox handlers for react.
Author: jwp
Latest version: 0.2.8

`@kkoms/react-simple-input` is a typescript library for easily implementing input handlers.

It's declarative and intended to be simple and type-safe when using typescript in react.

Only available on React `18.0.0` or higher

## Installation

```shell
yarn add @kkoms/react-simple-input
# or
npm install @kkoms/react-simple-input --save
# or
pnpm add @kkoms/react-simple-input
```

## Example usage

```typescript


import useInputHandle from "./dist";

function Example() {
  const { values, setValues, handlers, matching, checks, keys } =
    useInputHandle({
      // use strings, booleans, numbers to set type of input value. Keys can be omitted.
      strings: ["email", "password"],
      booleans: ["checked"],
      numbers: ["age"],
      // [optional] you can set default value.
      // If you do not give defaults, string - '', boolean - false, number - 0.
      defaults: {
        string: "",
        // boolean: false,
        // number: 0,
      },
    });

  // stringKeys - ["email", "password"]
  // boolKeys - ["checked"]
  // numberKeys - ["age"]
  const { stringKeys, boolKeys, numberKeys } = keys;

  // put these at 'onChange'.
  // give true if you want to use id.
  const { handleString, handleCheck, handleNumber } = handlers;
 
  // checks functions
  { isStrKey, isBoolKey, isNumKey } = checks;

  // making your own custom handler
  const customHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.name === matching.email) {
      console.log("email changed");

      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });

      return;
    }

    if (checks.isStrKey(e.target.name)) {
      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });
    }
  };

  console.log(values.email);
  console.log(values.password);
  console.log(values.checked);
  console.log(values.age);

  return (
    <div style={{ backgroundColor: "red" }}>
      <input
        id={matching.password}
        onChange={handlers.handleString(true)}
        value={values.password}
      />
      <input
        name={matching.password}
        onChange={handlers.handleString()}
        value={values.password}
      />
      <input
        name={matching.email}
        onChange={handlers.handleString()}
        value={values.email}
      />
      <input
        type="checkbox"
        name={matching.checked}
        onChange={handlers.handleCheck()}
      />
      <input
        type="number"
        name={matching.age}
        onChange={handlers.handleNumber()}
      />
    </div>
  );
}

export default Example;

```
npm package: @kkopite/cce
Description: 软著源代码文件doc生成
Author: kkopite
Latest version: 0.2.1

# @kkopite/cce 

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]

软著源代码文件doc生成

## 安装

```bash
npm i -g @kkopite/cce
```

## 使用

```bash
cd path/to/project

cce
```
## 配置

在你的项目根目录下，创建文件`cce.config.js`:

```js
export default {
  // 每一个文档有几页
  page: 30,
  // 每一页有50行代码
  preLine: 50,
  // 输出的docx文件，软著都是要求前三十页和后三十页
  output: [
    './前30页代码.docx',
    './后30页代码.docx',
  ],
  // 可以添加的代码文件
  include: '**/*.{ts,tsx,js,jsx,vue}',
  // 要忽略的文件
  ignore: [
    '**/{node_modules,dist,build,test,.git,public,mock}/**',
    '**.config.*',
  ],
}
```

> 以上各个配置为默认值，可以自行修改，如只需要默认文件则可以不添加配置文件

## License

[MIT](./LICENSE) License © 2023-PRESENT [kkopite](https://github.com/action-hong)

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@kkopite/cce?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/@kkopite/cce
[npm-downloads-src]: https://img.shields.io/npm/dm/@kkopite/cce?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/@kkopite/cce
[bundle-src]: https://img.shields.io/bundlephobia/minzip/@kkopite/cce?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=@kkopite/cce
[license-src]: https://img.shields.io/github/license/action-hong/copyright-code-extract.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/action-hong/copyright-code-extract/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/@kkopite/cce
npm package: @kks-web/module-template
Description: 🚀 Your module start template.
Author: KKSWeb
Latest version: 0.0.3

# Module Template

[![npm version](https://img.shields.io/npm/v/@kks-web/module-template?style=flat-square)](https://www.npmjs.com/package/@kks-web/module-template)
[![npm downloads](https://img.shields.io/npm/dm/@kks-web/module-template?style=flat-square)](https://www.npmtrends.com/@kks-web/module-template)
[![npm downloads](https://img.shields.io/npm/dt/@kks-web/module-template?style=flat-square)](https://www.npmtrends.com/@kks-web/module-template)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@kks-web/module-template?style=flat-square)](https://bundlephobia.com/result?p=@kks-web/module-template)
[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](../../CONTRIBUTING.md)

🚀 Your module start template that powered by [TSDX](https://tsdx.io).

## Directory Structure

Here is the structure of the starter.

```
.
├── src                # Write your code here
├── example            # Try your code here (refer to ./example for more info)
├── test               # Test your code here
├── jest.config.ts     # Jest configuration
└── tsconfig.json      # TypeScript configuration
```

## Script Commands

Some useful commands you might need.

| `yarn <script>` | Description                                                                                       |
| --------------- | ------------------------------------------------------------------------------------------------- |
| `start`         | Bundles the module with watch mode.                                                               |
| `build`         | Bundles the module to the `dist` folder (format: CommonJS and ES Module).                         |
| `test`          | Runs your tests using [Jest](https://jestjs.io).                                                  |
| `test:cov`      | Runs your tests with coverage report.                                                             |
| `lint`          | Runs [Eslint](https://eslint.org) with [Prettier](https://prettier.io) on `.ts` and `.tsx` files. |
| `size`          | Creates bundle size snapshots with [size-limit](https://github.com/ai/size-limit).                |
| `size:analyze`  | Creates bundle size snapshots with visualized analysis.                                           |
| `clean`         | Removes both `dist` and testing coverage folder.                                                  |
| `clean:build`   | Removes `dist` folder.                                                                            |
| `clean:cov`     | Removes testing coverage folder.                                                                  |

## Need More Information?

For more information or configuration, please refer to [TSDX](https://tsdx.io) document.