open-index/open-npm huggingface dataset:
npm package: @nkduy/safe-path
Description: Explicitly annotate path format of the code, and throwing error when passing incorrect format paths.
Latest version: 0.2.2

# Safe Path

Explicitly annotate path format of the code, and throwing error when passing incorrect format paths.

The advantage is that we can avoid using `upath` to convert all paths to unix path, and ensure current code logic always correctly know the path format that should be processed.

Please note that you should only use it in your modules that are coupled to the filesystem.

## Usage

```ts
import * as path from '@nkduy/safe-path';

/**
 * win32: __dirname is 'c:\\foo\\bar.js'
 * posix: __dirname is '/foo/bar.js'
 */
const osPath = __dirname as path.OsPath;
const win32Path = '..\\aaa\\bbb' as path.Win32Path;

/**
 * win32: 'c:\\foo\\aaa\\bbb' <-- good result
 * posix: '/foo/bar.js/..\\aaa\\bbb' <-- bad result
 */
path.resolve(osPath, win32Path);
//                   ^ Argument of type 'Win32Path' is not assignable to parameter of type 'OsPath | PosixPath'.

// Fixs
const posixPath = win32Path.replace(/\\/g, '/') as path.PosixPath;
path.resolve(osPath, posixPath); // no type error
```
npm package: @nkduy/server-renderer
Description: @nkduy/server-renderer
Author: NKDuy
Latest version: 3.0.11

# @nkduy/server-renderer

``` js
const { createSSRApp } = require('kdu')
const { renderToString } = require('@nkduy/server-renderer')

const app = createSSRApp({
  data: () => ({ msg: 'hello' }),
  template: `<div>{{ msg }}</div>`
})

;(async () => {
  const html = await renderToString(app)
  console.log(html)
})()
```
npm package: @nkduy/shiki
Description: shiki
Author: Pine Wu
Latest version: 0.14.8

<p>
  <h2 align="center">Shiki</h2>
</p>
<p align="center">
  Shiki is a beautiful Syntax Highlighter. <a href="http://shiki.matsu.io">Demo</a>.
</p>

## Usage

```sh
npm i shiki
```

```js
const shiki = require('shiki')

shiki
  .getHighlighter({
    theme: 'nord'
  })
  .then(highlighter => {
    console.log(highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' }))
  })

// <pre class="shiki" style="background-color: #2e3440"><code>
//   <!-- Highlighted Code -->
// </code></pre>
```

```html
<script src="https://unpkg.com/shiki"></script>
<script>
  shiki
    .getHighlighter({
      theme: 'nord'
    })
    .then(highlighter => {
      const code = highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' })
      document.getElementById('output').innerHTML = code
    })
</script>
```

Clone [shikijs/shiki-starter](https://github.com/shikijs/shiki-starter) to play with Shiki, or try it out on [Repl.it](https://repl.it/@octref/shiki-starter).

Learn more from the GitHub repo: [shikijs/shiki](https://github.com/shikijs/shiki).


## Credits

- Shiki uses [vscode-oniguruma](https://github.com/microsoft/vscode-oniguruma)
- A lot of code is based on [vscode-textmate](https://github.com/Microsoft/vscode-textmate)

## Sponsorship

If you find Shiki useful, please consider sponsoring my Open Source development. Thank you 🙏

https://github.com/sponsors/octref

## License

MIT © [Pine Wu](https://github.com/octref)
npm package: @nkduy/swiper
Description: Most modern mobile touch slider and framework with hardware accelerated transitions
Author: Vladimir Kharlampidi
Latest version: 8.0.1

Swiper
==========

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

# Getting Started
  * [Getting Started Guide](https://swiperjs.com/get-started/)
  * [API](https://swiperjs.com/swiper-api/)
  * [Demos](https://swiperjs.com/demos/)
npm package: @nkduy/syntax
Description: A beautiful Syntax Highlighter.
Author: NKDuy
Latest version: 0.10.1-alpha.1

# NKDuy Syntax

## Usage

```sh
npm i @nkduy/syntax
# yarn add @nkduy/syntax
```

```js
const syntax = require('@nkduy/syntax')

syntax
  .getHighlighter({
    theme: 'nord'
  })
  .then(highlighter => {
    console.log(highlighter.codeToHtml(`console.log('syntax');`, { lang: 'js' }))
  })

// <pre class="nkd-syntax" style="background-color: #2e3440"><code>
//   <!-- Highlighted Code -->
// </code></pre>
```

```html
<script src="https://unpkg.com/@nkduy/syntax"></script>
<script>
  syntax
    .getHighlighter({
      theme: 'nord'
    })
    .then(highlighter => {
      const code = highlighter.codeToHtml(`console.log('syntax');`, { lang: 'js' })
      document.getElementById('output').innerHTML = code
    })
</script>
```

- [Themes](./docs/themes.md)
- [Languages](./docs/languages.md)

## License

MIT
npm package: @nkduy/theme-default
Description: Default theme for KduPress
Author: NKDuy
Latest version: 1.5.1

# @nkduy/theme-default

> theme-default for KduPress

## Plugins

The default theme has the following plugin built in:

- [@nkduy/plugin-active-header-links](https://github.com/khanhduy1407/kdupress/tree/master/packages/@nkduy/plugin-active-header-links)
- [@nkduy/plugin-google-analytics](https://github.com/khanhduy1407/kdupress/tree/master/packages/%40nkduy/plugin-google-analytics)
- [@nkduy/plugin-search](https://github.com/khanhduy1407/kdupress/tree/master/packages/%40nkduy/plugin-search)
npm package: @nkduy/utils
Description: Opinionated collection of common JavaScript / TypeScript utils by @nkduy
Author: NKDuy
Latest version: 0.5.0-rc.0

# @nkduy/utils

Opinionated collection of common JavaScript / TypeScript utils by [@nkduy](https://github.com/khanhduy1407).

- Tree-shakable ESM
- Fully typed - with TSDocs
- Type utilities - `Arrayable<T>`, `ElementOf<T>`, etc.

> This package is designed to be used as `devDependencies` and bundled into your dist.

## License

[MIT](./LICENSE) License
npm package: @nkduy/web-component-wrapper
Description: wrap a kdu component as a web component.
Author: NKDuy
Latest version: 1.3.0

# @nkduy/web-component-wrapper

> Wrap and register a Kdu component as a custom element.

## Usage

- **`dist/kdu-wc-wrapper.js`**: This file is in ES modules format. It's the default export for bundlers, and can be used in browsers with `<script type="module">`.

- **`dist/kdu-wc-wrapper.global.js`**: This is for old school `<script>` includes in browsers that do not support `<script type="module">` yet (exposes `wrapKduWebComponent` global).

``` js
import Kdu from 'kdu'
import wrap from '@nkduy/web-component-wrapper'

const Component = {
  // any component options
}

const CustomElement = wrap(Kdu, Component)

window.customElements.define('my-element', CustomElement)
```

It works with async components as well - you can pass an async component factory function that returns a Promise, and the function will only be called when an instance of the custom element is created on the page:

``` js
const CustomElement = wrap(Kdu, () => import(`MyComponent.kdu`))

window.customElements.define('my-element', CustomElement)
```

## Interface Proxying Details

### Props

- All `props` declared in the Kdu component are exposed on the custom element as its properties. Kebab-case props are converted to camelCase properties, similar to how they are converted in Kdu.

- Setting properties on the custom element updates the props passed to the inner Kdu component.

- Setting attributes on the custom element updates corresponding declared props. Attributes are mapped to kebab-case. For example, a prop named `someProp` will have a corresponding attribute named `some-prop`.

- Attributes that map to props declared with `type: Boolean` are auto-casted into boolean values in the following rules:

  - `""` or same value as attribute name: -> `true`

  - `"true"` -> `true`

  - `"false"` -> `false`

- Attributes that map to props declared with `type: Number` are auto-casted into numbers if the value is a parsable number.

### Events

Custom events emitted on the inner Kdu component are dispatched on the custom element as a `CustomEvent`. Additional arguments passed to `$emit` will be exposed as an Array as `event.detail`.

### Slots

Slots work the same way as expected, including named slots. They also update when changed (using `MutationObserver`).

Scoped slots however, are not supported as they are a Kdu specific concept.

### Lifecycle

When the custom element is removed from the document, the Kdu component behaves just as if it's inside a `<keep-alive>` and its `deactivated` hook will be called. When it's inserted again, the `activated` hook will be called.

If you wish to destroy the inner component, you'd have to do that explicitly:

``` js
myElement.kduComponent.$destroy()
```

## License

MIT