open-index/open-npm huggingface dataset:
npm package: @jill64/eslint-config-svelte
Description: 🔹Pre-Defined ESLint Flat Config for Svelte
Author: jill64
Latest version: 2.2.12

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/eslint-config-svelte

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/eslint-config-svelte"><img src="https://img.shields.io/npm/v/@jill64/eslint-config-svelte" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/eslint-config-svelte"><img src="https://img.shields.io/npm/l/@jill64/eslint-config-svelte" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/eslint-config-svelte"><img src="https://img.shields.io/npm/dm/@jill64/eslint-config-svelte" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/eslint-config-svelte"><img src="https://img.shields.io/bundlephobia/min/@jill64/eslint-config-svelte" alt="npm-min-size" /></a>

<!----- END GHOST DOCS BADGES ----->

🔹Pre-Defined ESLint Flat Config for Svelte

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i -D @jill64/eslint-config-svelte
```

## Usage

eslint.config.js

with TypeScript

```js
import { svelteTsConfig } from '@jill64/eslint-config-svelte'

/** @type {import('@jill64/eslint-config-svelte').FlatConfig[]} */
export default svelteTsConfig()
```

To add any configuration, configure as follows

```js
import { svelteTsConfig } from '@jill64/eslint-config-svelte'

/** @type {import('@jill64/eslint-config-svelte').FlatConfig[]} */
export default [
  ...svelteTsConfig()
  // ...
]
```

with JavaScript

```js
import { svelteConfig } from '@jill64/eslint-config-svelte'

/** @type {import('@jill64/eslint-config-svelte').FlatConfig[]} */
export default [
  ...svelteConfig()
  // ...
]
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/eslint-config-ts
Description: 🔹Pre-Defined ESLint Flat Config for TypeScript
Author: jill64
Latest version: 2.0.36
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/eslint-config-ts

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/eslint-config-ts"><img src="https://img.shields.io/npm/v/@jill64/eslint-config-ts" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/eslint-config-ts"><img src="https://img.shields.io/npm/l/@jill64/eslint-config-ts" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/eslint-config-ts"><img src="https://img.shields.io/npm/dm/@jill64/eslint-config-ts" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/eslint-config-ts"><img src="https://img.shields.io/bundlephobia/min/@jill64/eslint-config-ts" alt="npm-min-size" /></a>

<!----- END GHOST DOCS BADGES ----->

🔹Pre-Defined ESLint Flat Config for TypeScript

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i -D @jill64/eslint-config-ts
```

## Usage

eslint.config.js

```js
import { tsConfig } from '@jill64/eslint-config-ts'

/** @type {import('@jill64/eslint-config-ts').FlatConfig[]} */
export default tsConfig()
```

To add any configuration, configure as follows

```js
import { tsConfig } from '@jill64/eslint-config-ts'

/** @type {import('@jill64/eslint-config-ts').FlatConfig[]} */
export default [
  ...tsConfig()
  // ...
]
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/playwright-config
Description: 🎭 Reusable My Playwright Config
Author: jill64
Latest version: 3.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/playwright-config

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/playwright-config"><img src="https://img.shields.io/npm/v/@jill64/playwright-config" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/playwright-config"><img src="https://img.shields.io/npm/l/@jill64/playwright-config" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/playwright-config"><img src="https://img.shields.io/npm/dm/@jill64/playwright-config" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/playwright-config"><img src="https://img.shields.io/bundlephobia/min/@jill64/playwright-config" alt="npm-min-size" /></a> <a href="https://github.com/jill64/playwright-config/actions/workflows/duplex-playwright.yml"><img src="https://github.com/jill64/playwright-config/actions/workflows/duplex-playwright.yml/badge.svg" alt="duplex-playwright.yml" /></a> <a href="https://github.com/jill64/playwright-config/actions/workflows/run-playwright.yml"><img src="https://github.com/jill64/playwright-config/actions/workflows/run-playwright.yml/badge.svg" alt="run-playwright.yml" /></a>

<!----- END GHOST DOCS BADGES ----->

🎭 Reusable My Playwright Config

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i -D @jill64/playwright-config
```

## Usage

playwright.config.ts

```ts
import { extendsConfig } from '@jill64/playwright-config'

export default extendsConfig({
  webServer: {
    command: 'npm run preview',
    port: 4173
  }
})
```

## Use Vite Local Preview

```ts
import { extendsConfig, vitePreview } from '@jill64/playwright-config'

export default extendsConfig(vitePreview)
```

## Use Real Server

```ts
import { extendsConfig, vitePreview, branchPreview } from '@jill64/playwright-config'

export default extendsConfig(branchPreview({
  provider: 'cloudflare',
  fallback: vitePreview
})
```

## GitHub Workflow

```yml
name: CI

on: push

jobs:
  test:
    uses: jill64/playwright-config/.github/workflows/run-playwright.yml@v2.1.0
    with:
      pre-test: npm run build
      test-command: npx playwright test
      provider: cloudflare
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/prettier-config
Description: 🅿️ Reusable My Prettier Config
Author: jill64
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# prettier-config

[![npm-version](https://img.shields.io/npm/v/@jill64/prettier-config)](https://npmjs.com/package/@jill64/prettier-config) [![npm-license](https://img.shields.io/npm/l/@jill64/prettier-config)](https://npmjs.com/package/@jill64/prettier-config) [![npm-download-month](https://img.shields.io/npm/dm/@jill64/prettier-config)](https://npmjs.com/package/@jill64/prettier-config) [![npm-min-size](https://img.shields.io/bundlephobia/min/@jill64/prettier-config)](https://npmjs.com/package/@jill64/prettier-config)

🅿️ Reusable My Prettier Config

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/prettier-config
```

## Usage

in package.json

```json
{
  "prettier": "@jill64/prettier-config"
}
```
npm package: @jill64/svelte-device-theme
Description: ☯ A simple store that syncs with your device's theme settings
Author: jill64
Latest version: 2.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-device-theme

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-device-theme"><img src="https://img.shields.io/npm/v/@jill64/svelte-device-theme" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-device-theme"><img src="https://img.shields.io/npm/l/@jill64/svelte-device-theme" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-device-theme"><img src="https://img.shields.io/npm/dm/@jill64/svelte-device-theme" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-device-theme"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-device-theme" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-device-theme/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-device-theme/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-device-theme.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-device-theme.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

☯ A simple store that syncs with your device's theme settings

## [Demo](https://svelte-device-theme.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

## [Demo](https://svelte-device-theme.jill64.dev)

## Usage

```svelte
<script>
  import { is } from '@jill64/svelte-device-theme'
</script>

{#if is.dark}
  Device is dark mode
{:else}
  Device is light mode
{/if}
```

> [!NOTE]  
> `$isDark` is `undefined` on the server.  
> If you need full theme management including SSR, please see [@jill64/svelte-dark-theme](https://github.com/jill64/svelte-dark-theme).

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-html
Description: 🏷️ Declarative attribute binding for the root html element
Author: jill64
Latest version: 2.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-html

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-html"><img src="https://img.shields.io/npm/v/@jill64/svelte-html" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-html"><img src="https://img.shields.io/npm/l/@jill64/svelte-html" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-html"><img src="https://img.shields.io/npm/dm/@jill64/svelte-html" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-html"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-html" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-html/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-html/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-html.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-html.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

🏷️ Declarative attribute binding for the root html element

## [Demo](https://svelte-html.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/svelte-html
```

## Usage

By passing a key-value set to the `<SvelteHTML />` component, attributes are bind to the root html element.

```svelte
<script>
  import { SvelteHTML } from '@jill64/svelte-html'
</script>

<SvelteHTML lang="en" prefix="example" />
```

↓

```html
<html lang="en" prefix="example">
  <!-- ... -->
</html>
```

## SSR

Attribute binding with `<SvelteHTML>` is only applied on the client.
To assign arbitrary attributes during SSR, use the `apply` function in the `handle` hook.

```js
// hooks.server.js
import { apply } from '@jill64/svelte-html'

export const handle = async ({ event, resolve }) => {
  // ...
  return resolve(event, {
    transformPageChunk: apply({
      lang: 'en',
      prefix: 'example'
    })
  })
}
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-input
Description: ➡️ Functional Input Component Set for Svelte
Author: jill64
Latest version: 2.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-input

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-input"><img src="https://img.shields.io/npm/v/@jill64/svelte-input" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-input"><img src="https://img.shields.io/npm/l/@jill64/svelte-input" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-input"><img src="https://img.shields.io/npm/dm/@jill64/svelte-input" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-input"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-input" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-input/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-input/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-input.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-input.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

➡️ Functional Input Component Set for Svelte

## [Demo](https://svelte-input.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/svelte-input
```

This library is a set of input components for Svelte, intended to improve markup semantics and reduce functional complexity.  
There are few prescribed styles available, so use `style`, `class`, etc. to create the style you prefer.

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-menu
Description: 📋 Functional Menu Component for Svelte
Author: jill64
Latest version: 2.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-menu

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-menu"><img src="https://img.shields.io/npm/v/@jill64/svelte-menu" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-menu"><img src="https://img.shields.io/npm/l/@jill64/svelte-menu" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-menu"><img src="https://img.shields.io/npm/dm/@jill64/svelte-menu" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-menu"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-menu" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-menu/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-menu/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-menu.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-menu.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

📋 Functional Menu Component for Svelte

## [Demo](https://svelte-menu.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-observer
Description: 🔭 Library for Svelte to make Promise status easily observable from outside
Author: jill64
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-observer

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-observer"><img src="https://img.shields.io/npm/v/@jill64/svelte-observer" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-observer"><img src="https://img.shields.io/npm/l/@jill64/svelte-observer" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-observer"><img src="https://img.shields.io/npm/dm/@jill64/svelte-observer" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-observer"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-observer" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-observer/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-observer/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-observer.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-observer.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

🔭 Library for Svelte to make Promise status easily observable from outside

## [Demo](https://svelte-observer.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

## Installation

```bash
npm i @jill64/svelte-observer
```

## Usage

```svelte
<script lang="ts">
  import { observable } from '@jill64/svelte-observer'

  // Define the asynchronous function you want to observe
  const wait1Sec = async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
  }
  const wait1SecThrow = async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    throw new Error('Expected Error')
  } // Create Proxy

  let { status, observed } = $derived(observable())

  // Define proxied functions
  let observedWait1Sec = $derived(observed(wait1Sec))
  let observedWait1SecThrow = $derived(observed(wait1SecThrow))
</script>

<!-- `IDLE` => Click => `PENDING` => 1sec => `FULFILLED` => 5sec(default) => `IDLE` -->
<button onclick={observedWait1Sec} aria-label="Success"> Success </button>

<!-- `IDLE` => Click => `PENDING` => 1sec => `REJECTED` => 5sec(default) => `IDLE` -->
<button onclick={observedWait1SecThrow} aria-label="Error"> Error </button>

<!-- PromiseStatus -->
<output>{status}</output>
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-sanitize
Description: 💎 Safe html expansion for Svelte with universal-sanitize
Author: jill64
Latest version: 2.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-sanitize

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-sanitize"><img src="https://img.shields.io/npm/v/@jill64/svelte-sanitize" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-sanitize"><img src="https://img.shields.io/npm/l/@jill64/svelte-sanitize" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-sanitize"><img src="https://img.shields.io/npm/dm/@jill64/svelte-sanitize" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-sanitize"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-sanitize" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-sanitize/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-sanitize/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-sanitize.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-sanitize.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

💎 Safe html expansion for Svelte with universal-sanitize

## [Demo](https://svelte-sanitize.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/svelte-sanitize
```

If you have problems building with pnpm, try the following

```sh
pnpm i -D @jill64/universal-sanitizer
```

## Usage

```svelte
<script>
  import { Render } from '@jill64/svelte-sanitize'
</script>

<Render
  html={/* dirty html */}
  options={/* {
    sanitizeHtml?: sanitize-html options
    dompurify?: DOMPurify options
    hook?: DOMPurify Hooks function
  } */}
/>
```

Same as all parameters [`@jill64/universal-sanitize`](https://github.com/jill64/universal-sanitizer#readme)

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-storage
Description: 🗃️ Type-Safe Web Storage API Wrapper for Svelte
Author: jill64
Latest version: 2.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-storage

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-storage"><img src="https://img.shields.io/npm/v/@jill64/svelte-storage" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-storage"><img src="https://img.shields.io/npm/l/@jill64/svelte-storage" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-storage"><img src="https://img.shields.io/npm/dm/@jill64/svelte-storage" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-storage"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-storage" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-storage/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-storage/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a>

<!----- END GHOST DOCS BADGES ----->

🗃️ Type-Safe Web Storage API Wrapper for Svelte

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/svelte-storage
```

## Simple Example

Passing the `localStorage` key to the `storage` function will retrieve the svelte-store of that value.

```svelte
<script>
  import { storage } from '@jill64/svelte-storage'
  import { string } from '@jill64/svelte-storage/serde'

  const storage = storage(
    { ['localStorage-key']: string },
    {
      // Use sessionStorage instead of localStorage
      // sessionStorage: boolean (default: false)
    }
  )

  // Get value
  consol.log(storage['localStorage-key'])

  // Set value
  storage['localStorage-key'] = 'value'
</script>
```

## Prepared Converters

You can also use the prepared converters in `@jill64/svelte-storage/serde`.

```svelte
<script>
  import { storage } from '@jill64/svelte-storage'
  import { number } from '@jill64/svelte-storage/serde'

  const storage = storage(
    { ['localStorage-key']: number }
    // {
    //  Storage Option
    // }
  )
</script>
```

## Custom Converter

By passing a conversion function as the second argument, you can get the value converted to any type.

```svelte
<script>
  import { storage } from '@jill64/svelte-storage'

  const store = storage(
    {
      ['localStorage-key']: {
        stringify: (value) => value.toString(),
        parse: (str) => parseInt(str)
      }
    }
    // {
    //  Storage Option
    // }
  )
</script>
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-suite
Description: 🍰 Library Suite for quickly building SvelteKit Apps
Author: jill64
Latest version: 2.2.11
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-suite

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-suite"><img src="https://img.shields.io/npm/v/@jill64/svelte-suite" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-suite"><img src="https://img.shields.io/npm/l/@jill64/svelte-suite" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-suite"><img src="https://img.shields.io/npm/dm/@jill64/svelte-suite" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-suite"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-suite" alt="npm-min-size" /></a>

<!----- END GHOST DOCS BADGES ----->

🍰 Library Suite for quickly building SvelteKit Apps

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/svelte-suite
```

## Included Libraries

| library                                                                       | path     |
| ----------------------------------------------------------------------------- | -------- |
| [@jill64/svelte-dark-theme](https://github.com/jill64/svelte-dark-theme)      | `/`      |
| [@jill64/svelte-i18n](https://github.com/jill64/svelte-i18n)                  | `/`      |
| [@jill64/svelte-ogp](https://github.com/jill64/svelte-ogp)                    | `/`      |
| [svelte-qparam](https://github.com/jill64/svelte-qparam)                      | `/`      |
| [@jill64/svelte-menu](https://github.com/jill64/svelte-menu)                  | `/`      |
| [@jill64/svelte-storage](https://github.com/jill64/svelte-storage)            | `/`      |
| [@jill64/svelte-toast](https://github.com/jill64/svelte-toast)                | `/`      |
| [svelte-inline-modal](https://github.com/jill64/svelte-inline-modal)          | `/`      |
| [svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) | `/icons` |
| [@jill64/svelte-input](https://github.com/jill64/svelte-input)                | `/input` |
| [ts-serde](https://github.com/jill64/ts-serde)                                | `/serde` |

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-tailwind
Description: 🌀 Simplified TailwindCSS Configuration for Svelte
Author: jill64
Latest version: 1.2.80

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-tailwind

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-tailwind"><img src="https://img.shields.io/npm/v/@jill64/svelte-tailwind" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-tailwind"><img src="https://img.shields.io/npm/l/@jill64/svelte-tailwind" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-tailwind"><img src="https://img.shields.io/npm/dm/@jill64/svelte-tailwind" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-tailwind"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-tailwind" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-tailwind/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-tailwind/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a>

<!----- END GHOST DOCS BADGES ----->

🌀 Simplified TailwindCSS Configuration for Svelte

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/svelte-tailwind
```

## Usage

postcss.config.js

```js
import { postcssConfig } from '@jill64/svelte-tailwind'

/** @type {import('@jill64/svelte-tailwind').PostcssConfig} */
export default postcssConfig({
  // ...
})
```

tailwind.config.js

```js
import { tailwindConfig } from '@jill64/svelte-tailwind'

/** @type {import('@jill64/svelte-tailwind').TailwindConfig} */
export default tailwindConfig({
  // ...
})
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/svelte-toast
Description: 🍞 Pre-Themed Responsive Toast Notification
Author: jill64
Latest version: 2.1.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-toast

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-toast"><img src="https://img.shields.io/npm/v/@jill64/svelte-toast" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-toast"><img src="https://img.shields.io/npm/l/@jill64/svelte-toast" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-toast"><img src="https://img.shields.io/npm/dm/@jill64/svelte-toast" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-toast"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-toast" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-toast/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-toast/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-toast.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-toast.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

🍞 Pre-Themed Responsive Toast Notification

## [Demo](https://svelte-toast.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

This library is a personal extension of [svelte-french-toast](https://github.com/kbrgl/svelte-french-toast)

- Color palette makes theme setting quick and simple
- Applies device dark theme by default
- Most of the original methods are available

## Installation

```sh
npm i @jill64/svelte-toast
```

## Usage

```svelte
<!-- +layout.svelte -->
<script>
  import { Toaster } from '@jill64/svelte-toast'

  // Optional Color Palette
  const palette = {
    background: '#EEE',
    text: '#000',
    success: '#29cf60',
    error: '#cf3d29',
    secondary: '#FFF',
    loading: '#BBB'
  }
</script>

<Toaster {palette} />
<!-- ... -->
<slot />
<!-- ... -->
```

```svelte
<!-- +page.svelte -->
<script>
  import { toast } from '@jill64/svelte-toast'

  const onSuccess = () => toast.success('Success', {
    // Optional Toast Config
  })

  const onError= () => toast.error('Error', {
    // Optional Toast Config
  })

  const onPromise = () =>
    toast.promise(
      // Your Promise
      ,
      {
        success: 'Success',
        error: 'Error',
        loading: 'Loading'
      },
      {
        // Optional Toast Config
      }
    )
</script>

<button onclick={onSuccess}> Success </button>
<button onclick={onError}> Error </button>
<button onclick={onPromise}> Promise </button>
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/tailwind-reactions
Description: 🌀 UI effect set for Tailwind CSS
Author: jill64
Latest version: 1.3.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/tailwind-reactions

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/tailwind-reactions"><img src="https://img.shields.io/npm/v/@jill64/tailwind-reactions" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/tailwind-reactions"><img src="https://img.shields.io/npm/l/@jill64/tailwind-reactions" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/tailwind-reactions"><img src="https://img.shields.io/npm/dm/@jill64/tailwind-reactions" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/tailwind-reactions"><img src="https://img.shields.io/bundlephobia/min/@jill64/tailwind-reactions" alt="npm-min-size" /></a> <a href="https://github.com/jill64/tailwind-reactions/actions/workflows/ci.yml"><img src="https://github.com/jill64/tailwind-reactions/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://tailwind-reactions.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Ftailwind-reactions.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

🌀 UI effect set for Tailwind CSS

## [Demo](https://tailwind-reactions.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

## Setup

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@jill64/tailwind-reactions')
    // ...
  ]
}
```

## Usage

```html
<button class="pop-effect bg-blue-500 text-white px-4 py-2 rounded-full">
  pop-effect
</button>

<input type="text" class="focus-under border-zinc-400 focus:border-blue-600" />
<input
  type="text"
  class="focus-under-2 border-zinc-400 focus:border-blue-600"
/>
<input
  type="text"
  class="focus-under-bold border-zinc-400 focus:border-blue-600"
/>
<input
  type="text"
  class="focus-under-bold-2 border-zinc-400 focus:border-blue-600"
/>
```

## Additional Configuration

You can configure which values are available for this plugin under the `focusUnderWidth` key in your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      focusUnderWidth: {
        5: '5'
        6: '6'
        7: '7'
      }
    }
  }
}
```

Alternatively, you can use square bracket notation.

| Name                   | CSS                    |
| ---------------------- | ---------------------- |
| `focus-under-[n]`      | `border-bottom: [n]px` |
| `focus-under-bold-[n]` | `border-bottom: [n]px` |

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/transform
Description: 💠 Extended map functions for some JS objects
Author: jill64
Latest version: 1.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/transform

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/transform"><img src="https://img.shields.io/npm/v/@jill64/transform" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/transform"><img src="https://img.shields.io/npm/l/@jill64/transform" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/transform"><img src="https://img.shields.io/npm/dm/@jill64/transform" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/transform"><img src="https://img.shields.io/bundlephobia/min/@jill64/transform" alt="npm-min-size" /></a> <a href="https://github.com/jill64/transform/actions/workflows/ci.yml"><img src="https://github.com/jill64/transform/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a>

<!----- END GHOST DOCS BADGES ----->

💠 Extended map functions for some JS objects

<!----- END GHOST DOCS HEADER ----->

## Installation

```bash
npm i @jill64/transform
```

[Usage](./test/index.test.ts)

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/typed-storage
Description: 🗃️ Type-Safe Web Storage API Wrapper
Author: jill64
Latest version: 4.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/typed-storage

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/typed-storage"><img src="https://img.shields.io/npm/v/@jill64/typed-storage" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/typed-storage"><img src="https://img.shields.io/npm/l/@jill64/typed-storage" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/typed-storage"><img src="https://img.shields.io/npm/dm/@jill64/typed-storage" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/typed-storage"><img src="https://img.shields.io/bundlephobia/min/@jill64/typed-storage" alt="npm-min-size" /></a>

<!----- END GHOST DOCS BADGES ----->

🗃️ Type-Safe Web Storage API Wrapper

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/typed-storage
```

## Example

See [ts-serde](https://github.com/jill64/ts-serde#readme) for more information on type guard

```ts
import { typedStorage } from '@jill64/typed-storage'
import { json } from '@jill64/typed-storage/serde'

const key = 'localStorageKey'
const value = ['value1', 'value2', 'value3']

const guard = (x: unknown): x is string[] =>
  Array.isArray(x) && x.every((y) => typeof y === 'string')

const store = typedStorage(key, json(guard, []), {
  // Optional
  // Use sessionStorage
  // sessionStorage?: boolean
})

// string[]
const storedValue = store.get()

store.set(value)

const unsubscriber = store.addListener((newValue) => {
  // called when localStorage value changes
  console.log(newValue)
})

// unsubscribe
unsubscriber()
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/types-lambda
Description: λ Unofficial AWS Lambda type definition
Author: jill64
Latest version: 1.2.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/types-lambda

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/types-lambda"><img src="https://img.shields.io/npm/v/@jill64/types-lambda" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/types-lambda"><img src="https://img.shields.io/npm/l/@jill64/types-lambda" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/types-lambda"><img src="https://img.shields.io/npm/dm/@jill64/types-lambda" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/types-lambda"><img src="https://img.shields.io/bundlephobia/min/@jill64/types-lambda" alt="npm-min-size" /></a>

<!----- END GHOST DOCS BADGES ----->

λ Unofficial AWS Lambda type definition

<!----- END GHOST DOCS HEADER ----->

## Examples

### [Lambda (Function URL)](./types/lambda/LambdaHandler.ts)

```ts
import type { LambdaHandler } from '@jill64/types-lambda'

export const handler: LambdaHandler = async (event) => {
  // ...

  return {
    statusCode: 200,
    body: 'Hello from Lambda !'
  }
}
```

### [Lambda (Streaming Response)](./types/streaming/awslambda.ts)

```ts
import { awslambda } from '@jill64/types-lambda'

export const handler = awslambda.streamifyResponse(
  async (event, responseStream, _context) => {
    // ...

    const metadata = {
      statusCode: 200,
      headers: {
        'Content-Type': 'application/json'
      }
    }

    responseStream = awslambda.HttpResponseStream.from(responseStream, metadata)

    responseStream.write('Streaming with Helper \n')
    responseStream.write('Hello 0 \n')
    responseStream.write('Hello 1 \n')
    responseStream.write('Hello 2 \n')
    responseStream.end()

    await responseStream.finished()
  }
)
```

### [Lambda@Edge](./types/edge/index.ts)

```ts
import type { OriginRequestHandler } from '@jill64/types-lambda'

export const handler: OriginRequestHandler = async (event, context) => {
  // ...

  return {
    status: '200'
  }
}
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jill64/universal-sanitizer
Description: 💎 Isomorphic html sanitizer by DOMPurify + sanitize-html
Author: jill64
Latest version: 1.4.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/universal-sanitizer

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/universal-sanitizer"><img src="https://img.shields.io/npm/v/@jill64/universal-sanitizer" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/universal-sanitizer"><img src="https://img.shields.io/npm/l/@jill64/universal-sanitizer" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/universal-sanitizer"><img src="https://img.shields.io/npm/dm/@jill64/universal-sanitizer" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/universal-sanitizer"><img src="https://img.shields.io/bundlephobia/min/@jill64/universal-sanitizer" alt="npm-min-size" /></a> <a href="https://github.com/jill64/universal-sanitizer/actions/workflows/ci.yml"><img src="https://github.com/jill64/universal-sanitizer/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a>

<!----- END GHOST DOCS BADGES ----->

💎 Isomorphic html sanitizer by DOMPurify + sanitize-html

<!----- END GHOST DOCS HEADER ----->

## Installation

```sh
npm i @jill64/universal-sanitizer
```

## Usage

Conditional Export applies the appropriate file at each runtime.

```js
import { sanitize } from '@jill64/universal-sanitizer'

const cleaned = sanitize(/* ... */, {
  // options: {
  //   sanitizeHtml: sanitize-html options
  //   dompurify: DOMPurify options
  // }
})
```

| condition | resolve                                                                  |
| --------- | ------------------------------------------------------------------------ |
| `browser` | [`DOMPurify`](https://github.com/cure53/DOMPurify#readme)                |
| `default` | [`sanitize-html`](https://github.com/apostrophecms/sanitize-html#readme) |
| `worker`  | [`sanitize-html`](https://github.com/apostrophecms/sanitize-html#readme) |

## Add DOMPurify hook

The hook is executed before sanitize

```js
import { sanitize } from '@jill64/universal-sanitizer'

const cleaned = sanitize(/* ... */, {
  options: {
    hook: (DOMPurify) => {
      DOMPurify.addHook(
        'uponSanitizeAttribute',
        function (currentNode, hookEvent, config) {
          // Do something with the current node
          // You can also mutate hookEvent for current node (i.e. set hookEvent.forceKeepAttr = true)
          // For other than 'uponSanitizeAttribute' hook types hookEvent equals to null
        }
      )
    }
  }
})
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->
npm package: @jills-office/code-health
Description: Formatting, linting, static analysis, etc.
Author: Jill's Office
Latest version: 2.2.2

# jills-office-code-health

Formatting, linting, static analysis, etc.

# Currently implemented commands

## `format`

Command: `health format`

Formats code through [Prettier](https://prettier.io). Check formatting using the standard Prettier [CLI flag `--check`](https://prettier.io/docs/en/cli.html#--check).

Config files are `.prettierrc.js` and `.prettierignore`.

## `lint`

Command: `health lint`

Lints code through [ESLint](https://eslint.org).

Config files are `.eslintrc.js` and `.eslintignore`.

## `spellcheck`

Command: `health spellcheck`

Spellchecks code through [CSpell](https://cspell.org).

Config file is `cspell.config.js`.

### Examples

```bash
# format all code
npx health format

# check formatting for all code
npx health format --check

# only run formatting for a specific file
npx health format ./src/my-file.ts
```
npm package: @jillsoffice/code-health
Description: Formatting, linting, static analysis, etc.
Author: jillsoffice
Latest version: 1.0.4

# jills-office-code-health

Formatting, linting, static analysis, etc.

# Currently implemented commands

## `format`

Command: `health format`

Formats code through [Prettier](https://prettier.io). Check formatting using the standard Prettier [CLI flag `--check`](https://prettier.io/docs/en/cli.html#--check).

Config files are `.prettierrc.js` and `.prettierignore`.

## `lint`

Command: `health lint`

Lints code through [ESLint](https://eslint.org).

Config files are `.eslintrc.js` and `.eslintignore`.

## `spellcheck`

Command: `health spellcheck`

Spellchecks code through [CSpell](https://cspell.org).

Config file is `cspell.config.js`.

### Examples

```bash
# format all code
npx health format

# check formatting for all code
npx health format --check

# only run formatting for a specific file
npx health format ./src/my-file.ts
```
npm package: @jilongcui/pemutils
Description: Convert .pfx to .pem files (key, cert or both) with simple OpenSSL bindings
Author: Jilong Cui
Latest version: 1.0.7

# pemutils

[![Build Status](https://drone.io/github.com/gammasoft/pemutils/status.png)](https://drone.io/github.com/gammasoft/pemutils/latest)

Converts .pfx to .pem files (key, cert or both) with simple OpenSSL bindings.

```javascript
var pemutils = require('pemutils');

pemutils.fromPfx({
    path: '/path/to/my/cert.pfx',
    password: 'myPass'
}, function(err, results) {
    if(err) {
        throw err;
    }

    console.log(JSON.stringify(results, null, 4));
});
```

Will output:

```json
{
    "attributes": {
        "version": 2,
        "subject": {
            "countryName": "",
            "organizationName": "",
            "stateOrProvinceName": "",
            "localityName": "",
            "organizationalUnitName": "",
            "commonName": ""
        },
        "issuer": {
            "countryName": "",
            "organizationName": "",
            "organizationalUnitName": "",
            "commonName": ""
        },
        "serial": "",
        "notBefore": "",
        "notAfter": "",
        "signatureAlgorithm": "",
        "fingerPrint": "",
        "altNames": [],
        "extensions": {
            "subjectAlternativeName": "",
            "basicConstraints": "",
            "authorityKeyIdentifier": "",
            "keyUsage": "",
            "certificatePolicies": "",
            "cRLDistributionPoints": "",
            "extendedKeyUsage": "",
            "authorityInformationAccess": ""
        }
    },
    "certificate": "",
    "key": ""
}
```
npm package: @jim-fx/protonmail-api
Description: Node.js API for ProtonMail
Author: Justin Kalland
Latest version: 2.1.3

# protonmail-api
Unofficial API for interacting with ProtonMail.

Allows interaction with ProtonMail through a simple Node.js API. Leverages the official [WebClient](https://github.com/ProtonMail/WebClient), keeping with the spirit of security and privacy. Currently supports sending email, managing email/conversations, and managing labels and folders. See the [documentation](https://justinkalland.github.io/protonmail-api/) for full functionality.

_This project is not endorsed or supported by Proton Technologies AG._

# Quick Start
## Setup
```
npm install protonmail-api
```
## Send an Email
```js
const ProtonMail = require('protonmail-api');

(async () => {
  const pm = await ProtonMail.connect({
    username: 'foobar@protonmail.com',
    password: 'somethingsecure'
  })

  await pm.sendEmail({
    to: 'justin@kalland.ch',
    subject: 'Send email tutorial',
    body: 'Hello world'
  })

  pm.close()
})()
```
## More Examples
Numerous examples can be found in the [tutorials section of the documentation](https://justinkalland.github.io/protonmail-api/).

# Documentation
[Full documentation found here](https://justinkalland.github.io/protonmail-api/)

# How?
This library uses [Puppeteer](https://github.com/GoogleChrome/puppeteer) (headless Chromium) to load and control the official [ProtonMail WebClient](https://github.com/ProtonMail/WebClient).

The first attempt at building this was by trying to reverse engineer the API from the WebClient. This proved to be difficult and fragile. By utilizing the AngularJS modules (through the headless browser) this library is able to leverage all the work that goes into the official WebClient. This also means complex and sensitive things (like cryptography) are not handled by this library. The main drawback to this approach is the added weight of Puppeteer.

# Contributing
This project is looking for maintainers and contributors. Please contact justin@kalland.ch if you are interested.

To run integration tests you need to provide a ProtonMail account. It is best to use a dedicated testing account without any filters. The credentials are set as environment variables `PM_USERNAME` and `PM_PASSWORD`.

Example:
```
PM_USERNAME=footest@protonmail.com PM_PASSWORD=kgjSOE223qWer npm run test
```

Or create a `.env` file (in this directory next to `package.json`:
```
PM_USERNAME=footest@protonmail.com
PM_PASSWORD=kgjSOE223qWer
```
npm package: @jim-squirrel/excalidraw
Description: Excalidraw as a React component
Latest version: 0.17.6-4

# Excalidraw

**Excalidraw** is exported as a component to directly embed in your projects.

## Installation

You can use `npm`

```bash
npm install react react-dom @excalidraw/excalidraw
```

or via `yarn`

```bash
yarn add react react-dom @excalidraw/excalidraw
```

After installation you will see a folder `excalidraw-assets` and `excalidraw-assets-dev` in `dist` directory which contains the assets needed for this app in prod and dev mode respectively.

Move the folder `excalidraw-assets` and `excalidraw-assets-dev` to the path where your assets are served.

By default it will try to load the files from [`https://unpkg.com/@excalidraw/excalidraw/dist/`](https://unpkg.com/@excalidraw/excalidraw/dist)

If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.

#### Note

**If you don't want to wait for the next stable release and try out the unreleased changes you can use `@excalidraw/excalidraw@next`.**

## Dimensions of Excalidraw

Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.

### Demo

[Try here](https://codesandbox.io/s/excalidraw-ehlz3).

## Integration

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration)

## API

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api)

## Contributing

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing)