open-index/open-npm huggingface dataset:
npm package: @kdn0325/create-expo-next-monorepo
Description: CLI tool for creating a monorepo template with Expo, Next.js and NativeWind for cross-platform applications
Author: kdn0325
Latest version: 1.0.6

# @kdn0325/create-expo-next-monorepo

> A template generator for building cross-platform applications with Expo, Next.js, and NativeWind in a monorepo structure

This package creates a monorepo template for cross-platform applications using the `npx @kdn0325/create-expo-next-monorepo` command.

## Installation and Usage

```bash
npx @kdn0325/create-expo-next-monorepo
```

Running this command will display an interactive prompt where you can select your project name and preferred package manager.

## Template Features

- **Code Sharing**: Share business logic and UI components between mobile and web platforms
- **Consistent Styling**: Use Tailwind CSS syntax for consistent styling across mobile and web through NativeWind
- **Type Safety**: Static type checking with TypeScript
- **Rapid Development**: Fast build and development speeds with Turborepo

## Generated Project Structure

```
expo-next-monorepo/
├── apps/
│   ├── native/          # Expo (React Native) app
│   └── web/             # Next.js web app
├── packages/
│   ├── app/             # Shared application logic
│   └── ui/              # Shared UI components
├── package.json
├── tsconfig.json
└── turbo.json
```

## License

MIT
npm package: @kdominic/time-span
Description: Converts a human-readable amount of time to milliseconds.
Author: KDominic
Latest version: 1.0.0

# TimeSpan

Functions such as setTimeout / setInterval and similar functions always expect the time in milliseconds
and to avoid having to convert 5 minutes into 5 \* 60 \* 1000 each time, this class was created.

## Example

```js
const TimeSpan = require('@kdominic/time-span');

console.log(TimeSpan.parse('42min'));               //  2520000 ms
console.log(TimeSpan.parse('1d 2h 3min 4s 5ms'));   // 93784005 ms
```

<br />

## Another example

Delete all files older than 7 days:

```js
const path      = require('node:path');
const fs        = require('node:fs');

const TimeSpan  = require('@kdominic/time-span');

const cleanPath = 'pathToClean';

if (fs.existsSync(cleanPath)) {
    fs.readdirSync(cleanPath).forEach((file) => {
        const filePath = path.join(cleanPath, file)
        const stat     = fs.statSync(filePath);
    
        if (stat.isFile()) {
            try {
                if (Date.now() > new TimeSpan(new Date(stat.ctime)).add('7d')) {
                    fs.rmSync(filePath);
                }
            }
            catch (_) {}
        } 
    });
}
```
npm package: @kdominic909/polyfill
Description: Polyfill for input with attributes list and multiple
Latest version: 0.2.0

# List Multiple Polyfill
JS module polyfill for HTML input element with attributes list and multiple. This combination normally working only when input is type email, or file. But this polyfill make it works every possible type. Simple, easy to use, **No dependencies**, just vanilla js.

Polyfill is in single javascript module file `listMultiplePolyfill.mjs`. Include it into your site like this:

``` html
	<script type="module" src="/listMultiplePolyfill.mjs" crossorigin="anonymous" integrity="sha256-u92fzHsXIk4Zsj80A29F47qxWHai0EDO4kf6gpCMa/g="></script>
```

That's it! Now you can use input element with multiple list.

All other files like `example-usage.html` are there to help, but they are not needed for polyfill function.

More detail info
---------------

This polyfill is in js module, and modules are in default `defer` (even if you didn't add attribute `defer`), it means loaded asynchronously and executed after the document has been parsed.

You can change this default behaviour by adding attribute `async`, but yout can't make it synchronous.

Possible problems?
-----------------

The mjs extension must have the correct mime type set to text/javascript, if it is too laborious, rename the suffix from .mjs to .js.

Services
--------

Unpkg: https://unpkg.com/list-multiple-polyfill

NPM: https://www.npmjs.com/package/list-multiple-polyfill


# Licence

**CC BY-SA 4.0**

This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.

-------

more info at https://iiic.dev/list-multiple-polyfill
npm package: @kdrowe/gclient
Description: Simplifies access to popular Google APIs
Author: Kristopher D. Rowe
Latest version: 1.3.3

# @kdrowe/gclient

## Introduction

`@kdrowe/gclient` is a NodeJS library designed to provide a simplified and streamlined way to interact with various Google APIs, including Gmail, Sheets, and more. This library is built to make it easy for developers to integrate Google services into their NodeJS applications with minimal setup and configuration.

## Installation

To install `@kdrowe/gclient`, run the following command in your NodeJS project:

```bash
npm install @kdrowe/gclient
```

## Usage

1. Configure GOOGLE_SHEETS_CREDENTIALS env var in your application
* Value should be the path to a JSON file containing credentials of a service account that has access to the Google Sheets API and access to the spreadsheet you want to interact with.
* If GOOGLE_SHEETS_CREDENTIALS is not found, then the standard GOOGLE_APPLICATION_CREDENTIALS used by Google Client Libraries will be checked.
* If neither of these env vars are defined, the Sheet object will fail.
* Note that ADC is not supported.


## Publishing a New Revision to npm
To publish a new revision of @kdrowe/gclient to npm for use by client applications, follow these steps:

1. Increment the Version Number in package.json:

* Open the package.json file.
* Increment the version number following semantic versioning.
* Save the changes.
2. Publish to npm:

* Run the following command to publish the new version to npm:
```bash
npm publish
```
* Ensure you are logged in to npm with the account that has permissions to update the package.
3. Update Client Applications:
* Go to the client application's repository.
* Open the package.json file in the client application.
* Update the dependency version number for @kdrowe/gclient to the new version.
* Save the changes.
* Run the following command to install the latest revision:
```bash
npm install
```
npm package: @kdsp/create-plugin
Description: CLI to create new Kernel Module Federation plugins
Author: Kernel Team
Latest version: 1.0.5

# @kdsp/create-plugin
(KDSP - Kernel Development Service Package)
CLI tool to create new kernel Module Federation plugins with built-in versioning, source maps, and standardized architecture.

## Installation

```bash
# Install globally
npm install -g @kdsp/create-plugin

# Or use npx (recommended)
npx @kdsp/create-plugin
```

## Usage

### Interactive Mode

```bash
npx @kdsp/create-plugin
```

This will prompt you for:
- Plugin name (must start with `kdsp-`)
- Dev server port
- Description
- Author
- Whether to include example component

### Quick Mode

```bash
# Create plugin with defaults
npx @kdsp/create-plugin kdsp-my-feature --yes

# Specify port
npx @kdsp/create-plugin kdsp-my-feature --port 9010

# Skip npm install
npx @kdsp/create-plugin kdsp-my-feature --no-install

# Create in specific directory
npx @kdsp/create-plugin kdsp-my-feature --directory ./plugins
```

## What Gets Created

```
kdsp-my-feature/
├── package.json
├── tsconfig.json
├── rspack.config.ts
├── module-federation.config.ts
├── postcss.config.js
├── index.html
├── README.md
└── src/
    ├── index.ts
    ├── index.css
    ├── App.tsx
    ├── version.ts
    ├── global.d.ts
    └── components/
        ├── index.ts
        └── kdspMyFeatureMain.tsx
```

## Features Included

✅ **Version Tracking**
- Version from package.json in filenames
- Console logging on load
- `window.__MF_PLUGIN_VERSIONS__` registry

✅ **Source Maps**
- Full source map support for Chrome DevTools
- Debug original TypeScript files

✅ **Single File Bundle**
- Each exposed module as single file
- No chunk splitting

✅ **Module Federation**
- Ready-to-use MF configuration
- Versioned remote entry file

✅ **Material UI**
- Pre-configured with MUI
- Example component included

## After Creation

```bash
cd kdsp-my-feature
npm start
```

Plugin available at: `http://localhost:{port}`
Remote entry: `http://localhost:{port}/kdsp-my-feature.v0.0.1.js`

## Adding to Host App

1. Add to host's Module Federation config:

```typescript
remotes: {
  kdsp_my_feature: "kdsp_my_feature@http://localhost:{port}/mf-manifest.json",
}
```

2. Import in host app:

```tsx
const MyFeatureMain = lazy(() => import("kdsp_my_feature/kdspMyFeatureMain"));
```

## License

MIT
npm package: @kdt310722/config
Description: Simple config parser and validate using Zod for Javascript / Typescript project
Author: Diep Dang
Latest version: 0.0.4

# @kdt310722/config

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![ci][ci-src]][ci-href]
[![coverage][coverage-src]][coverage-href]
[![issues][issues-src]][issues-href]
[![license][license-src]][license-href]

Simple config parser and validate using Zod for Javascript / Typescript project

## Usage

Install package:

```sh
# npm
npm install @kdt310722/config

# yarn
yarn add @kdt310722/config

# pnpm
pnpm install @kdt310722/config

# bun
bun install @kdt310722/config
```

Import:

```js
// ESM
import { defineConfig } from '@kdt310722/config'

// CommonJS
const { defineConfig } = require('@kdt310722/config')
```

Use:

```js
const config = defineConfig({
    key: z.string().default('value'),
})

console.log(config.parse())
```

## License

Published under [MIT License](LICENSE.md).

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@kdt310722/config?style=flat&colorA=1B3C4A&colorB=32A9C3&label=version
[npm-version-href]: https://npmjs.com/package/@kdt310722/config
[npm-downloads-src]: https://img.shields.io/npm/dm/@kdt310722/config?style=flat&colorA=1B3C4A&colorB=32A9C3&label=downloads
[npm-downloads-href]: https://npmjs.com/package/@kdt310722/config
[ci-src]: https://img.shields.io/github/actions/workflow/status/kdt310722/config/ci.yml?style=flat&colorA=1B3C4A&colorB=32A9C3&label=ci
[ci-href]: https://github.com/kdt310722/config/actions/workflows/ci.yml
[issues-src]: https://img.shields.io/github/issues/kdt310722/config?style=flat&colorA=1B3C4A&colorB=32A9C3&label=issues
[issues-href]: https://github.com/kdt310722/config/issues
[license-src]: https://img.shields.io/npm/l/@kdt310722/config?style=flat&colorA=1B3C4A&colorB=32A9C3&label=license
[license-href]: https://github.com/@kdt310722/config/blob/main/LICENSE.md
[coverage-src]: https://img.shields.io/codecov/c/gh/kdt310722/config?style=flat&colorA=1B3C4A&colorB=32A9C3
[coverage-href]: https://codecov.io/gh/kdt310722/config
npm package: @kdt310722/eslint-config
Description: My personal ESLint config
Author: Diep Dang
Latest version: 0.2.0

# @kdt310722/eslint-config

> My personal ESLint config

## Installation

```bash
pnpm install -D @kdt310722/eslint-config
```

## Usage

### Create an ESLint configuration file:

With `"type": "module"` in your `package.json` (recommended):

```javascript
// eslint.config.js
import { defineFlatConfig } from '@kdt310722/eslint-config'

export default defineFlatConfig()
```

With CJS:

```javascript
// eslint.config.js
const { defineFlatConfig } = require('@kdt310722/eslint-config')

module.exports = defineFlatConfig()
```

## Credit

This ESLint configuration is inspired by the
excellent [`@antfu/eslint-config`](https://www.npmjs.com/package/@antfu/eslint-config) package. Special thanks to its
contributors!

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
npm package: @kdt310722/logger
Description: A simple NodeJS logger library
Author: Diep Dang
Latest version: 0.0.12

# @kdt310722/logger

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![ci][ci-src]][ci-href]
[![issues][issues-src]][issues-href]
[![license][license-src]][license-href]

A simple NodeJS logger library

## Usage

Install package:

```sh
# npm
npm install @kdt310722/logger

# yarn
yarn add @kdt310722/logger

# pnpm
pnpm install @kdt310722/logger

# bun
bun install @kdt310722/logger
```

Import:

```js
// ESM
import { createDefaultLogger } from '@kdt310722/logger'

// CommonJS
const { createDefaultLogger } = require('@kdt310722/logger')
```

Use:

```js
const logger = createDefaultLogger()

logger.trace('trace')
logger.debug('debug')
logger.info('info')
logger.warn('warn')
logger.error('error')
logger.fatal(new Error('fatal'))
```

## License

Published under [MIT License](LICENSE.md).

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@kdt310722/logger?style=flat&colorA=1B3C4A&colorB=32A9C3&label=version
[npm-version-href]: https://npmjs.com/package/@kdt310722/logger
[npm-downloads-src]: https://img.shields.io/npm/dm/@kdt310722/logger?style=flat&colorA=1B3C4A&colorB=32A9C3&label=downloads
[npm-downloads-href]: https://npmjs.com/package/@kdt310722/logger
[ci-src]: https://img.shields.io/github/actions/workflow/status/kdt310722/logger/ci.yml?style=flat&colorA=1B3C4A&colorB=32A9C3&label=ci
[ci-href]: https://github.com/kdt310722/logger/actions/workflows/ci.yml
[issues-src]: https://img.shields.io/github/issues/kdt310722/logger?style=flat&colorA=1B3C4A&colorB=32A9C3&label=issues
[issues-href]: https://github.com/kdt310722/logger/issues
[license-src]: https://img.shields.io/npm/l/@kdt310722/logger?style=flat&colorA=1B3C4A&colorB=32A9C3&label=license
[license-href]: https://github.com/@kdt310722/logger/blob/main/LICENSE.md
npm package: @kdt310722/rpc
Description: RPC websocket client and server implements for NodeJS application
Author: Diep Dang
Latest version: 0.2.1

# @kdt310722/rpc

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![ci][ci-src]][ci-href]
[![issues][issues-src]][issues-href]
[![license][license-src]][license-href]

RPC websocket client and server implements for JS/TS application

## Usage

Install package:

```sh
# npm
npm install @kdt310722/rpc

# yarn
yarn add @kdt310722/rpc

# pnpm
pnpm install @kdt310722/rpc

# bun
bun install @kdt310722/rpc
```

Import:

```js
// ESM
import {} from '@kdt310722/rpc'

// CommonJS
const {} = require('@kdt310722/rpc')
```

## License

Published under [MIT License](LICENSE.md).

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@kdt310722/rpc?style=flat&colorA=1B3C4A&colorB=32A9C3&label=version
[npm-version-href]: https://npmjs.com/package/@kdt310722/rpc
[npm-downloads-src]: https://img.shields.io/npm/dm/@kdt310722/rpc?style=flat&colorA=1B3C4A&colorB=32A9C3&label=downloads
[npm-downloads-href]: https://npmjs.com/package/@kdt310722/rpc
[ci-src]: https://img.shields.io/github/actions/workflow/status/kdt310722/rpc/ci.yml?style=flat&colorA=1B3C4A&colorB=32A9C3&label=ci
[ci-href]: https://github.com/kdt310722/rpc/actions/workflows/ci.yml
[issues-src]: https://img.shields.io/github/issues/kdt310722/rpc?style=flat&colorA=1B3C4A&colorB=32A9C3&label=issues
[issues-href]: https://github.com/kdt310722/rpc/issues
[license-src]: https://img.shields.io/npm/l/@kdt310722/rpc?style=flat&colorA=1B3C4A&colorB=32A9C3&label=license
[license-href]: https://github.com/@kdt310722/rpc/blob/main/LICENSE.md
npm package: @kdt310722/syndica-chainstream-sdk
Description: An SDK to interact with Syndica ChainStream API
Author: Diep Dang
Latest version: 0.0.3

# @kdt310722/syndica-chainstream-sdk

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![ci][ci-src]][ci-href]
[![issues][issues-src]][issues-href]
[![license][license-src]][license-href]

An SDK to interact with Syndica ChainStream API

## Usage

Install package:

```sh
# npm
npm install @kdt310722/syndica-chainstream-sdk

# yarn
yarn add @kdt310722/syndica-chainstream-sdk

# pnpm
pnpm install @kdt310722/syndica-chainstream-sdk

# bun
bun install @kdt310722/syndica-chainstream-sdk
```

Import:

```js
// ESM
import {} from '@kdt310722/syndica-chainstream-sdk'

// CommonJS
const {} = require('@kdt310722/syndica-chainstream-sdk')
```

## License

Published under [MIT License](LICENSE.md).

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@kdt310722/syndica-chainstream-sdk?style=flat&colorA=1B3C4A&colorB=32A9C3&label=version
[npm-version-href]: https://npmjs.com/package/@kdt310722/syndica-chainstream-sdk
[npm-downloads-src]: https://img.shields.io/npm/dm/@kdt310722/syndica-chainstream-sdk?style=flat&colorA=1B3C4A&colorB=32A9C3&label=downloads
[npm-downloads-href]: https://npmjs.com/package/@kdt310722/syndica-chainstream-sdk
[ci-src]: https://img.shields.io/github/actions/workflow/status/kdt310722/syndica-chainstream-sdk/ci.yml?style=flat&colorA=1B3C4A&colorB=32A9C3&label=ci
[ci-href]: https://github.com/kdt310722/syndica-chainstream-sdk/actions/workflows/ci.yml
[issues-src]: https://img.shields.io/github/issues/kdt310722/syndica-chainstream-sdk?style=flat&colorA=1B3C4A&colorB=32A9C3&label=issues
[issues-href]: https://github.com/kdt310722/syndica-chainstream-sdk/issues
[license-src]: https://img.shields.io/npm/l/@kdt310722/syndica-chainstream-sdk?style=flat&colorA=1B3C4A&colorB=32A9C3&label=license
[license-href]: https://github.com/@kdt310722/syndica-chainstream-sdk/blob/main/LICENSE.md
npm package: @kdt310722/tsconfig
Description: Shared TypeScript config for my projects
Author: Diep Dang
Latest version: 1.0.0

# tsconfig

> Shared [TypeScript config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for my projects

## Install

```sh
npm install --save-dev @kdt310722/tsconfig
```

*This config requires TypeScript 5 or later.*

## Usage

`tsconfig.json`

```jsonc
{
    "extends": "@kdt310722/tsconfig",
    "compilerOptions": {
        // ...
    }
}
```

* For [Vue](https://vuejs.org), extend `@kdt310722/tsconfig/vue` instead.

* For building a library, using `@kdt310722/tsconfig/lib` and specify `outDir` in your `tsconfig.json`.
npm package: @kdt310722/utils
Description: A collection of utility functions for JavaScript / TypeScript application
Author: Diep Dang
Latest version: 0.0.19

# @kdt310722/utils

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![ci][ci-src]][ci-href]
[![issues][issues-src]][issues-href]
[![license][license-src]][license-href]

A collection of utility functions for JavaScript / TypeScript applications.

## Usage

Install package:

```sh
# npm
npm install @kdt310722/utils

# yarn
yarn add @kdt310722/utils

# pnpm
pnpm install @kdt310722/utils

# bun
bun install @kdt310722/utils
```

Import:

```js
// ESM
import {} from '@kdt310722/utils'

// CommonJS
const {} = require('@kdt310722/utils')
```

## License

Published under [MIT License](LICENSE.md).

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@kdt310722/utils?style=flat&colorA=1B3C4A&colorB=32A9C3&label=version
[npm-version-href]: https://npmjs.com/package/@kdt310722/utils
[npm-downloads-src]: https://img.shields.io/npm/dm/@kdt310722/utils?style=flat&colorA=1B3C4A&colorB=32A9C3&label=downloads
[npm-downloads-href]: https://npmjs.com/package/@kdt310722/utils
[ci-src]: https://img.shields.io/github/actions/workflow/status/kdt310722/utils/ci.yml?style=flat&colorA=1B3C4A&colorB=32A9C3&label=ci
[ci-href]: https://github.com/kdt310722/utils/actions/workflows/ci.yml
[issues-src]: https://img.shields.io/github/issues/kdt310722/utils?style=flat&colorA=1B3C4A&colorB=32A9C3&label=issues
[issues-href]: https://github.com/kdt310722/utils/issues
[license-src]: https://img.shields.io/npm/l/@kdt310722/utils?style=flat&colorA=1B3C4A&colorB=32A9C3&label=license
[license-href]: https://github.com/@kdt310722/utils/blob/main/LICENSE.md
npm package: @kdthanvi/pkgx
Description: A tiny npm package
Latest version: 2.0.0

# pkgx

[![npm (scoped)](https://img.shields.io/badge/npm-v1.0.0-blue.svg)](https://www.npmjs.com/package/@kdthanvi/pkgx)
A tiny npm package

## Install 
```
npm install @kdthanvi/pkgx
```

## Usage
```
const pkgx = require("@kdthanvi/pkgx")

pkgx("remove My Spaces");
// removeMySpaces

pkgx(1234);
//=> Uncaught TypeError: pkgx wants a string!

```
npm package: @kdtjs/eslint-config
Description: My personal ESLint config
Author: Diep Dang
Latest version: 0.0.1

# @kdtjs/eslint-config

> My personal ESLint config

## Installation

```bash
pnpm install -D @kdtjs/eslint-config
```

## Usage

### Create an ESLint configuration file:

With `"type": "module"` in your `package.json` (recommended):

```javascript
// eslint.config.js
import { defineFlatConfig } from '@kdtjs/eslint-config'

export default defineFlatConfig()
```

With CJS:

```javascript
// eslint.config.js
const { defineFlatConfig } = require('@kdtjs/eslint-config')

module.exports = defineFlatConfig()
```

## Contributing

If you have suggestions for improving this package or have found a bug,
please [check the contributing guidelines](https://github.com/kdtjs/.github/blob/main/CONTRIBUTING.md) before opening
an issue.

## Credit

This ESLint configuration is inspired by the
excellent [`@antfu/eslint-config`](https://www.npmjs.com/package/@antfu/eslint-config) package. Special thanks to its
contributors!

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
npm package: @kdtjs/tsconfig
Description: Shared TypeScript config for my projects
Author: Diep Dang
Latest version: 0.0.1

# tsconfig

> Shared [TypeScript config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for my projects

## Install

```sh
npm install --save-dev @kdt-js/tsconfig
```

*This config requires TypeScript 5 or later.*

## Usage

`tsconfig.json`

```jsonc
{
    "extends": "@kdt-js/tsconfig",
    "compilerOptions": {
        // ...
    }
}
```

* For [Vue](https://vuejs.org), extend `@kdt-js/tsconfig/vue` instead.

* For building a library, using `@kdt-js/tsconfig/lib` and specify `outDir` in your `tsconfig.json`.
npm package: @kdts/jsxhtml
Description: Write jsx like template literal
Author: Kossi D. T. Saka
Latest version: 1.0.1

# jsxhtml

[![License][license-image]][license-url] [![NPM Package Version][npm-image-version]][npm-url]

Write jsx like template literal.

## Installation

```bash
$ npm i @kdts/jsxhtml
```

## Usage

```js
// Import ESModule
import { jsxhtml } from "@kdts/jsxhtml";

// Or require Commonjs
const { jsxhtml } = require("@kdts/jsxhtml");
```

```js
const listArray = [{ label: "First Item", isActive: true }, { label: "Second Item" }];
const title = " The list ";
const showText = false;

const templateStr = jsxhtml`<div>
    ${typeof title == "string" && title.trim().length > 0 && `<h2>${title.trim()}</h2>`}
    <ul>
        ${listArray.map(listItem => jsxhtml`<li class="item ${listItem.isActive && "active"}">${listItem.label}</li>`)}
    </ul>
    ${showText && `<p>If showText is false, this is not rendered. </p>`}
</div>`;
```

will produce the desire result

<!-- prettier-ignore -->
```html
<div>
    <h2>The list</h2>
    <ul>
        <li class="item active">First Item</li><li class="item ">Second Item</li>
    </ul>

</div>
```

Without the jsxhtml tagging function

```js
const templateStr = `<div>
    ${typeof title == "string" && title.trim().length > 0 && `<h2>${title.trim()}</h2>`}
    <ul>
        ${listArray.map(listItem => `<li>${listItem.label}</li>`)}
    </ul>
    ${showText && `<p>If showText is false, this is not rendered. </p>`}
</div>`;
```

would have produced

<!-- prettier-ignore -->
```html
<div>
    <h2>The list</h2>
    <ul>
        <li class="active">First Item</li>,<li class="undefined">Second Item</li>
    </ul>
    false
</div>
```

or you would have to write the template as follow to achieve the desire result

```js
const templateStr = `<div>
    ${typeof title == "string" && title.trim().length > 0 && `<h2>${title.trim()}</h2>`}
    <ul>
        ${listArray.map(listItem => `<li class="${listItem.isActive ? "active" : ""}">${listItem.label}</li>`).join("")}
    </ul>
    ${showText ? `<p>If showText is false, this is not rendered. </p>` : ""}
</div>`;
```

but as the template gets complex it becomes harder to read. So use `@kdts/jsxhtml` to write ease to read templates.

## License

See [LICENSE][license-url].

## Copyright

Copyright &copy; 2023. Kossi D. T. Saka.

[npm-url]: https://npmjs.org/package/@kdts/jsxhtml
[npm-image-version]: https://img.shields.io/npm/v/@kdts/jsxhtml.svg?logo=nodedotjs
[npm-image-downloads]: https://img.shields.io/npm/dm/@kdts/jsxhtml.svg?color=purple
[license-url]: https://github.com/kossidts/kdts-utils/blob/main/packages/jsxhtml/LICENSE
[license-image-1]: https://img.shields.io/github/license/kossidts/kdts-utils/tree/main/packages/jsxhtml
[license-image]: https://img.shields.io/badge/license-MIT-green
[language-image-1]: https://img.shields.io/github/languages/top/kossidts/kdts-utils/tree/main/packages/jsxhtml?color=yellow
[language-image-2]: https://img.shields.io/badge/script-ts%20&%20js-red
npm package: @kdu-i18n/devtools-if
Description: @kdu-i18n/devtools-if
Author: NKDuy
Latest version: 9.1.10-beta.0

# @kdu-i18n/devtools-if

## :warning: NOTE:

This is experimental.

Don’t use in production yet.

## :copyright: License

[MIT](http://opensource.org/licenses/MIT)
npm package: @kdu-i18n/kdu-i18n-loader
Description: kdu-i18n for webpack loader
Author: NKDuy
Latest version: 3.0.0-rc.0

# Kdu I18n Loader

## :cd: Installation

### npm

```sh
$ npm i --save-dev @kdu-i18n/kdu-i18n-loader
```

### yarm

```sh
$ yarn add -D @kdu-i18n/kdu-i18n-loader
```

## :copyright: License

[MIT](http://opensource.org/licenses/MIT)
npm package: @kdu-i18n/wite-plugin-kdu-i18n
Description: wite plugin for Kdu I18n
Author: NKDuy
Latest version: 2.5.0

# @kdu-i18n/wite-plugin-kdu-i18n

Wite plugin for Kdu I18n

## 🌟 Features

- i18n resources pre-compilation
- i18n custom block
- Static bundle importing
- Bundling optimizations

## 💿 Installation

### npm

```sh
$ npm i --save-dev @kdu-i18n/wite-plugin-kdu-i18n
```

### yarn

```sh
$ yarn add -D @kdu-i18n/wite-plugin-kdu-i18n
```

## ©️ License

[MIT](http://opensource.org/licenses/MIT)
npm package: @kdujs/babel-helper-kdu-jsx-merge-props
Description: Babel helper for Kdu JSX spread
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-helper-kdu-jsx-merge-props

A package used internally by kdu jsx transformer to merge props spread. It is required to merge some prop trees like this:

```js
import mergeProps from '@kdujs/babel-helper-kdu-jsx-merge-props'

const MyComponent = {
  render(h) {
    // original: <button onClick={$event => console.log($event)} {...{ on: { click: $event => doSomething($event) } }} />
    return h(
      'button',
      mergeProps([
        {
          on: {
            click: $event => console.log($event),
          },
        },
        {
          on: {
            click: $event => doSomething($event),
          },
        },
      ]),
    )
  },
}
```

This tool is used internally and there is no reason for you to ever use it.
npm package: @kdujs/babel-preset-jsx
Description: Babel preset for Kdu JSX
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-preset-jsx

Configurable preset for Kdu JSX plugins.

### Usage

Install the dependencies:

```sh
# for yarn:
yarn add @kdujs/babel-preset-jsx @kdujs/babel-helper-kdu-jsx-merge-props
# for npm:
npm install @kdujs/babel-preset-jsx @kdujs/babel-helper-kdu-jsx-merge-props --save
```

In your `babel.config.js`:

```js
module.exports = {
  presets: ['@kdujs/babel-preset-jsx'],
}
```

You can toggle specific features, by default all features (except `compositionAPI`) are enabled, e.g.:

```js
module.exports = {
  presets: [
    [
      '@kdujs/babel-preset-jsx',
      {
        kModel: false,
        compositionAPI: true,
      },
    ],
  ],
}
```

Options are:

- `compositionAPI` - Enables [@kdujs/babel-sugar-composition-api-inject-h](../babel-sugar-composition-api-inject-h) and [@kdujs/babel-sugar-composition-api-render-instance](../babel-sugar-composition-api-render-instance), support returning render function in `setup`.
  - The default value is `false`;
  - When set to `'auto'` (or `true`), it will detect the Kdu version in the project. If it's >= 2.7, it will import the composition utilities from `kdu`, otherwise from `@kdujs/composition-api`;
  - When set to `'native'` (or `'naruto'`), it will always import the composition utilities from `kdu`
  - When set to `plugin`, it will always import the composition utilities from `@kdujs/composition-api`, but it will redirect to `'kdu'` itself when the kdu version is `2.7.x`
  - When set to `kdu-demi`, it will always import the composition utilities from `kdu-demi`
  - When set to an object like `{ importSource: string; }`, it will always import the composition utilities from the importSource you set
- `functional` [@kdujs/babel-sugar-functional-kdu](../babel-sugar-functional-kdu/README.md) - Functional components syntactic sugar
- `injectH` [@kdujs/babel-sugar-inject-h](../babel-sugar-inject-h/README.md) - Automatic `h` injection syntactic sugar
- `kModel` [@kdujs/babel-sugar-k-model](../babel-sugar-k-model/README.md) - `kModel` syntactic sugar
- `kOn` [@kdujs/babel-sugar-k-on](../babel-sugar-k-on/README.md) - `kOn` syntactic sugar
npm package: @kdujs/babel-sugar-composition-api-inject-h
Description: Babel syntactic sugar for h automatic injection for Kdu JSX with @kdujs/composition-api
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-sugar-composition-api-inject-h

Syntactic sugar for automatic `h` inject in JSX with @kdujs/composition-api.

### Babel Compatibility Notes

- This repo is only compatible with Babel 7.x

### Usage

Install the dependencies:

```sh
# for yarn:
yarn add @kdujs/babel-sugar-composition-api-inject-h
# for npm:
npm install @kdujs/babel-sugar-composition-api-inject-h --save
```

In your `.babelrc`:

```json
{
  "plugins": ["@kdujs/babel-sugar-composition-api-inject-h"]
}
```

However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.

### Details

This plugin automatically injects `h` in every method that has JSX. By using this plugin you don't have to always import `h` from `@kdujs/composition-api`.

```js
// Without @kdujs/babel-sugar-inject-h
import { h } from '@kdujs/composition-api'

export default {
  setup() {
    return () => <button />
  },
}
```

```js
// With @kdujs/babel-sugar-inject-h
export default {
  setup() {
    return () => <button />
  },
}
```
npm package: @kdujs/babel-sugar-composition-api-render-instance
Description: Babel syntactic sugar for replaceing `this` with `getCurrentInstance()` in Kdu JSX with @kdujs/composition-api
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-sugar-composition-api-render-instance

Babel syntactic sugar for replacing `this` with `getCurrentInstance()` in Kdu JSX with @kdujs/composition-api

### Babel Compatibility Notes

- This repo is only compatible with Babel 7.x

### Usage

Install the dependencies:

```sh
# for yarn:
yarn add @kdujs/babel-sugar-composition-api-render-instance
# for npm:
npm install @kdujs/babel-sugar-composition-api-render-instance --save
```

In your `.babelrc`:

```json
{
  "plugins": ["@kdujs/babel-sugar-composition-api-render-instance"]
}
```

However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.

### Details

This plugin automatically replaces `this` in `setup()` with `getCurrentInstance()`. This is required for JSX to work in @kdujs/composition-api as `this` is not available in `setup()`

Input:

```jsx
defineComponent({ 
  setup() {
    return () => <MyComponent kModel={a.b} />
  }
})
```

Output (without @kdujs/babel-sugar-composition-api-render-instance):

```jsx
defineComponent({
  setup() {
    return () => <MyComponent model={{
      value: a.b,
      callback: $$v => {
        this.$set(a, "b", $$v);
      }
    }} />
  }
})
```

Output (with @kdujs/babel-sugar-composition-api-render-instance):

```jsx
import { getCurrentInstance } from "@kdujs/composition-api";

defineComponent({
  setup() {
    const __currentInstance = getCurrentInstance();

    return () => <MyComponent model={{
      value: a.b,
      callback: $$v => {
        __currentInstance.$set(a, "b", $$v);
      }
    }} />
  }
})
```
npm package: @kdujs/babel-sugar-functional-kdu
Description: Babel syntactic sugar for functional components
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-sugar-functional-kdu

Syntactic sugar for functional components.

### Usage

Install the dependencies:

```sh
# for yarn:
yarn add @kdujs/babel-sugar-functional-kdu
# for npm:
npm install @kdujs/babel-sugar-functional-kdu --save
```

In your `.babelrc`:

```json
{
  "plugins": ["@kdujs/babel-sugar-functional-kdu"]
}
```

However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.

### Details

This plugin transpiles arrow functions that return JSX into functional components but only if it's an uppercase variable declaration or default export:

```js
// Original:
export const A = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>
export const b = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>
export default ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>

// Result:
export const A = {
  functional: true,
  render: (h, {
    props,
    listeners
  }) => <div onClick={listeners.click}>{props.msg}</div>
}
export const b = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>
export default {
  functional: true,
  render: (h, {
    props,
    listeners
  }) => <div onClick={listeners.click}>{props.msg}</div>
}
```
npm package: @kdujs/babel-sugar-inject-h
Description: Babel syntactic sugar for h automatic injection for Kdu JSX
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-sugar-inject-h

Syntactic sugar for automatic `h` inject in JSX.

### Usage

Install the dependencies:

```sh
# for yarn:
yarn add @kdujs/babel-sugar-inject-h
# for npm:
npm install @kdujs/babel-sugar-inject-h --save
```

In your `.babelrc`:

```json
{
  "plugins": ["@kdujs/babel-sugar-inject-h"]
}
```

However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.

### Details

This plugin automatically injects `h` in every method that has JSX. By using this plugin you don't have to always specifically declare `h` as first parameter in your `render()` function.

```js
// Without @kdujs/babel-sugar-inject-h
export default {
  render (h) {
    return <button />
  }
}

// With @kdujs/babel-sugar-inject-h
export default {
  render () {
    return <button />
  }
}
```
npm package: @kdujs/babel-sugar-k-model
Description: Babel syntactic sugar for k-model support in Kdu JSX
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-sugar-k-model

Syntactic sugar for k-model in JSX.

### Usage

Install the dependencies:

```sh
# for yarn:
yarn add @kdujs/babel-sugar-k-model
# for npm:
npm install @kdujs/babel-sugar-k-model --save
```

In your `.babelrc`:

```json
{
  "plugins": ["@kdujs/babel-sugar-k-model"]
}
```

However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.

### Details

This plugin adds k-model to the JSX and tries to mirror the same behaviour as in kdu-template-compiler, with a few differences:

1.  You should use underscore (`_`) instead of dot (`.`) for modifiers (`kModel_trim={this.test}`)
2.  It is recommended to use camelCase version of it (`kModel`) in JSX, but you can use kebab-case too (`k-model`).

```js
export default {
  data: () => ({
    test: 'Hello World',
  }),
  render(h) {
    return (
      <div>
        <input type="text" kModel_trim={this.test} />
        {this.test}
      </div>
    )
  },
}
```
npm package: @kdujs/babel-sugar-k-on
Description: Babel syntactic sugar for k-model support in Kdu JSX
Author: NKDuy
Latest version: 1.4.0

## @kdujs/babel-sugar-k-on

Syntactic sugar for k-on in JSX.

### Usage

Install the dependencies:

```sh
# for yarn:
yarn add @kdujs/babel-sugar-k-on
# for npm:
npm install @kdujs/babel-sugar-k-on --save
```

In your `.babelrc`:

```json
{
  "plugins": ["@kdujs/babel-sugar-k-on"]
}
```

However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.

### Details

This plugin adds k-on to the JSX and tries to mirror the same behaviour as in kdu-template-compiler, with a few differences:

1.  You should use underscore (`_`) instead of dot (`.`) for modifiers (`kOn:click_prevent={this.test}`)
2.  It is recommended to use camelCase version of it (`kOn`) in JSX, but you can use kebab-case too (`k-on`).

```js
export default {
  methods: {
    test() {
      console.log('Hello World')
    },
  },
  render(h) {
    return (
      <div>
        <a href="https://kdu-js.web.app" kOn:click={this.test}>Kdu</a>
      </div>
    )
  },
}
```
npm package: @kdujs/cli-plugin-babel
Description: babel plugin for kdu-cli
Author: NKDuy
Latest version: 5.0.10

# @kdujs/cli-plugin-babel

> babel plugin for kdu-cli

## Configuration

Uses Babel 7 + `babel-loader` + [@kdujs/babel-preset-app](https://github.com/kdujs/kdu-cli/tree/main/packages/%40kdujs/babel-preset-app) by default, but can be configured via `babel.config.js` to use any other Babel presets or plugins.

By default, `babel-loader` excludes files inside `node_modules` dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the `transpileDependencies` option in `kdu.config.js`:

``` js
module.exports = {
  transpileDependencies: [
    // can be string or regex
    'my-dep',
    /other-dep/
  ]
}
```

## Caching

[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/babel-loader`.

## Parallelization

[thread-loader](https://github.com/webpack-contrib/thread-loader) is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting `parallel: false` in `kdu.config.js`.

## Installing in an Already Created Project

``` sh
kdu add @kdujs/babel
```

## Injected webpack-chain Rules

- `config.rule('js')`
- `config.rule('js').use('babel-loader')`
- `config.rule('js').use('cache-loader')`
npm package: @kdujs/cli-plugin-eslint
Description: eslint plugin for kdu-cli
Author: NKDuy
Latest version: 5.0.10

# @kdujs/cli-plugin-eslint

> eslint plugin for kdu-cli

## Injected Commands

- **`kdu-cli-service lint`**

  ```
  Usage: kdu-cli-service lint [options] [...files]

  Options:

    --format [formatter] specify formatter (default: codeframe)
    --no-fix             do not fix errors
    --max-errors         specify number of errors to make build failed (default: 0)
    --max-warnings       specify number of warnings to make build failed (default: Infinity)
  ```

  Lints and fixes files. If no specific files are given, it lints all files in `src` and `test`.

  Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported.

## Configuration

ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`.

Lint-on-save during development with `eslint-loader` is enabled by default. It can be disabled with the `lintOnSave` option in `kdu.config.js`:

``` js
module.exports = {
  lintOnSave: false
}
```

## Installing in an Already Created Project

``` sh
kdu add @kdujs/eslint
```

## Injected webpack-chain Rules

- `config.module.rule('eslint')`
- `config.module.rule('eslint').use('eslint-loader')`
npm package: @kdujs/cli-plugin-typescript
Description: typescript plugin for kdu-cli
Author: NKDuy
Latest version: 5.0.10

# @kdujs/cli-plugin-typescript

> typescript plugin for kdu-cli

Uses TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for faster off-thread type checking.

## Configuration

TypeScript can be configured via `tsconfig.json`.

This plugin can be used alongside `@kdujs/cli-plugin-babel`. When used with Babel, this plugin will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets.

## Injected Commands

If opted to use [TSLint](https://palantir.github.io/tslint/) during project creation, `kdu-cli-service lint` will be injected.

## Caching

[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/ts-loader`.

## Parallelization

[thread-loader](https://github.com/webpack-contrib/thread-loader) is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting `parallel: false` in `kdu.config.js`.

## Installing in an Already Created Project

``` sh
kdu add @kdujs/typescript
```

## Injected webpack-chain Rules

- `config.rule('ts')`
- `config.rule('ts').use('ts-loader')`
- `config.rule('ts').use('babel-loader')` (when used alongside `@kdujs/cli-plugin-babel`)
- `config.rule('ts').use('cache-loader')`
- `config.plugin('fork-ts-checker')`
npm package: @kdujs/cli-service-global
Description: kdu-cli-service global addon for kdu-cli
Author: NKDuy
Latest version: 4.0.5

# @kdujs/cli-service-global

Installing this package globally allows you to run `kdu serve` and `kdu build` directly without any local dependencies:

``` sh
npm install -g @kdujs/cli-service-global
echo '<template><h1>Hello!</h1></template>' > App.kdu
kdu serve
```
npm package: @kdujs/compat
Description: Kdu 3 compatibility build for Kdu 2
Author: NKDuy
Latest version: 3.4.27

## Overview

`@kdujs/compat` (aka "the migration build") is a build of Kdu 3 that provides configurable Kdu 2 compatible behavior.

The migration build runs in Kdu 2 mode by default - most public APIs behave exactly like Kdu 2, with only a few exceptions. Usage of features that have changed or been deprecated in Kdu 3 will emit runtime warnings. A feature's compatibility can also be enabled/disabled on a per-component basis.
npm package: @kdujs/compat-canary
Description: Kdu 3 compatibility build for Kdu 2
Author: NKDuy
Latest version: 3.20251208.0

## Overview

`@kdujs/compat` (aka "the migration build") is a build of Kdu 3 that provides configurable Kdu 2 compatible behavior.

The migration build runs in Kdu 2 mode by default - most public APIs behave exactly like Kdu 2, with only a few exceptions. Usage of features that have changed or been deprecated in Kdu 3 will emit runtime warnings. A feature's compatibility can also be enabled/disabled on a per-component basis.
npm package: @kdujs/composition-api
Description: Provide logic composition capabilities for Kdu.
Author: NKDuy
Latest version: 1.1.0-rc.0

# @kdujs/composition-api

Kdu 2 plugin for **Composition API**

## Installation

### NPM

```bash
npm install @kdujs/composition-api
# or
yarn add @kdujs/composition-api
```

You must install `@kdujs/composition-api` as a plugin via `Kdu.use()` before you can use the `Composition API` to compose your component.

```js
import Kdu from 'kdu'
import KduCompositionAPI from '@kdujs/composition-api'

Kdu.use(KduCompositionAPI)
```

```js
// use the APIs
import { ref, reactive } from '@kdujs/composition-api'
```

> :bulb: When you migrate to Kdu 3, just replacing `@kdujs/composition-api` to `kdu` and your code should just work.

### CDN

Include `@kdujs/composition-api` after Kdu and it will install itself automatically.

<!--cdn-links-start-->
```html
<script src="https://cdn.jsdelivr.net/npm/kdu@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@kdujs/composition-api@1.1.0"></script>
```
<!--cdn-links-end-->

`@kdujs/composition-api` will be exposed to global variable `window.KduCompositionAPI`.

```ts
const { ref, reactive } = KduCompositionAPI
```
npm package: @kdujs/eslint-config-airbnb
Description: eslint-config-airbnb for Kdu CLI
Author: NKDuy
Latest version: 6.0.0

# @kdujs/eslint-config-airbnb

> eslint-config-airbnb for Kdu CLI

This config is specifically designed to be used by Kdu CLI setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of Kdu CLI setups, such as `eslint-plugin-kdu` being
extended in the same resulting config.
npm package: @kdujs/eslint-config-prettier
Description: eslint-config-prettier for kdu-cli
Author: NKDuy
Latest version: 5.0.0

# @kdujs/eslint-config-prettier

> eslint-config-prettier for kdu-cli

This config is specifically designed to be used by `kdu-cli` setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of `kdu-cli` setups, such as `eslint-plugin-kdu` being
extended in the same resulting config.
npm package: @kdujs/eslint-config-standard
Description: eslint-config-standard for Kdu CLI
Author: NKDuy
Latest version: 6.1.1

# @kdujs/eslint-config-standard

> eslint-config-standard for Kdu CLI

This config is specifically designed to be used by Kdu CLI setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of Kdu CLI setups, such as `eslint-plugin-kdu` being
extended in the same resulting config.
npm package: @kdujs/eslint-config-typescript
Description: eslint-config-typescript for kdu-cli
Author: NKDuy
Latest version: 9.1.0

# @kdujs/eslint-config-typescript

> eslint-config-typescript for kdu-cli

See [@typescript-eslint/eslint-plugin](https://typescript-eslint.io/eslint-plugin) for available rules.

This config is specifically designed to be used by Kdu CLI setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of Kdu CLI setups, such as `eslint-plugin-kdu` being
extended in the same resulting config.

## Installation

This config requires several peer dependencies. So it's recommended to use the `install-peerdeps` command:

```sh
npx install-peerdeps --dev @kdujs/eslint-config-typescript
```

## Usage

This package comes with 2 rulesets.

### `@kdujs/eslint-config-typescript`

This ruleset is the base configuration for Kdu-TypeScript projects.
Besides setting the parser and plugin options, it also turns off several conflicting rules in the `eslint:recommended` ruleset.
So when used alongside other sharable configs, this config should be placed at the end of the `extends` array.

An example `.eslintrc.js`:

```js
module.exports = {
  extends: [
    'plugin:kdu/essential',
    'eslint:recommended',
    '@kdujs/typescript'
  ]
}
```

### `@kdujs/eslint-config-typescript/recommended`

This is extended from the `@typescript-eslint/recommended` ruleset, which is an **_opinionated_** ruleset.
See the [original documentation](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/src/configs#recommended) for more information.

Some of its rules, however, might conflict with `prettier`.
So when used alongside other sharable configs, this config should be placed after all other configs except for the one from `eslint-plugin-prettier` in the `extends` array.

An example `.eslintrc.js`:

```js
module.exports = {
  extends: [
    'plugin:kdu/essential',
    '@kdujs/airbnb',
    '@kdujs/typescript/recommended',

    'plugin:prettier/recommended'
  ]
}
```