open-index/open-npm huggingface dataset:
npm package: @sveltejs/enhanced-img
Description: Image optimization for your Svelte apps
Latest version: 0.10.4

# `@sveltejs/enhanced-img`

A Vite plugin which runs a Svelte preprocessor to locate images and then transform them at build-time.

**WARNING**: This package is experimental. It uses pre-1.0 versioning and may introduce breaking changes with every minor version release.

## Docs

[Docs](https://svelte.dev/docs/kit/images)

## Changelog

[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/main/packages/enhanced-img/CHANGELOG.md).

## Acknowledgements

We'd like to thank the author of `svelte-preprocess-import-assets`, which this code is partially based off of. We'd also like to thank the authors of `vite-imagetools` which is used in `@sveltejs/enhanced-img`.
npm package: @sveltejs/eslint-config
Description: Svelte ESLint config
Author: Svelte
Latest version: 10.0.1

## ESLint configuration

Common eslint configuration for the Svelte organisation

## Contributing

Want to add an eslint rule? Open a PR and use gh-polls for voting: https://app.gh-polls.com/

## Usage

After installing `@sveltejs/eslint-config` with your package manager of choice,
import it and put it in the configuration array in `eslint.config.js`.

```js
import svelteConfig from '@sveltejs/eslint-config';

export default [
	...svelteConfig,
	{
		// your overrides
	}
];
```

## Linting

This project self-lints:

```bash
pnpm install
pnpm lint
```

## Changesets

All PRs with user-facing changes must include a changeset, which can be generated by running `pnpm changeset`.
npm package: @sveltejs/gateau
Description: Svelte charts
Author: Rich Harris
Latest version: 0.0.2

# @sveltejs/gateau

Experimental charting library for Svelte.

## Usage

```svelte
<script>
  import * as Gateau from '@sveltejs/gateau';

  const points = [
    { x: 10, y: 8.04 },
    { x: 8, y: 6.95 },
    { x: 13, y: 7.58 },
    { x: 9, y: 8.81 },
    { x: 11, y: 8.33 },
    { x: 14, y: 9.96 },
    { x: 6, y: 7.24 },
    { x: 4, y: 4.26 },
    { x: 12, y: 10.84 },
    { x: 7, y: 4.82 },
    { x: 5, y: 5.68 }
  ];
</script>

<div class="container">
  <Gateau.Chart>
    <Gateau.Grid horizontal ticks={5}/>
    <Gateau.Grid vertical ticks={5}/>

    <Gateau.Scatterplot
      data={points}
      fill="orange"
      stroke="#333"
      radius={5}
    />

    <Gateau.Axis horizontal ticks={5} line labels/>
    <Gateau.Axis vertical ticks={5} labels/>
  </Gateau.Chart>
</div>
```

## License

[MIT](LICENSE)
npm package: @sveltejs/gl
Description: A (very experimental) project to bring WebGL to Svelte
Author: Rich Harris
Latest version: 0.0.37

# @sveltejs/gl

Declarative WebGL scene graphs inside [Svelte](https://svelte.dev).

<a href="https://svelte-gl-demo.surge.sh">
<img width="1118" alt="screenshot" src="screenshot.png">
</a>

## Here be dragons

This is not even *close* to production-ready. It's missing many essential features, and isn't optimised. The API is certain to change in substantial ways. You have been warned.

If you're not fazed by that sort of thing, and would like to help figure out how to make this all work, contributions are very welcome.


## Why are you doing this?

Someone once described the DOM as 'an API that only a mother could love'. Clearly that person had never tried to build anything with WebGL. Hand-written WebGL code is *phenomenally* ugly and confusing.

Because of that, people typically reach for libraries like [Three.js](https://threejs.org/) and [regl](http://regl.party/). I use and love both, but they each have characteristics that make them unsuitable for certain tasks:

* Three is comfortably over half a megabyte minified, making it less than idea for *casual* or *whimsical* graphics — especially on low-powered devices where your JS budget is small. Typically, when you encounter Three in the wild, it's used for a standalone set-piece interactive
* regl is intentionally low-level. I've found it to be difficult to use for quickly iterating on an idea, because you're thinking in terms of *draw calls* rather than a *scene graph*

Meanwhile, [A-Frame](https://aframe.io/) — which is a web component wrapper around Three — has demonstrated that a declarative markup-driven approach provides a great authoring experience, particularly for certain kinds of scenes. Since it builds on top of Three, it inherits its strengths and weaknesses.

@sveltejs/gl is several things:

* An experiment to test a hypothesis that building scene graphs 'the Svelte way' is satisfying and productive, and needn't cost much in terms of JavaScript
* A way to figure out what the right APIs are
* A test to see how much of this can be built in Svelte already (and still perform well) without needing to extend the compiler
* A thing I need at work


## How can I use it?

Check out [this demo](https://svelte.dev/repl/8d6d139a3d634c2fb1e1ff107c123dd5) to get started. There's not much point writing docs until things are a bit more settled.


## Ideas for future development

Some of these may be a bit pie-in-the-sky:

* Post-processing
* Scene graph editor
* WebVR (this would require Svelte to be able to use the VR display's `requestAnimationFrame` instead of the default one, since the refresh rate on VR devices can be 90 or 120fps)
* Interactivity (i.e. raycasting)
* Physics
* Interleaving DOM and GL content (i.e. part of the scene renders behind the DOM, some in front)
* What's the analog of server-side rendering for a GL scene — precomputing high fidelity global illumination maps etc?


## License

MIT
npm package: @sveltejs/kit
Description: SvelteKit is the fastest way to build Svelte apps
Latest version: 2.57.1

# The fastest way to build Svelte apps

This is the [SvelteKit](https://svelte.dev/docs/kit) framework and CLI.

The quickest way to get started is via the [sv](https://npmjs.com/package/sv) package:

```sh
npx sv create my-app
cd my-app
npm install
npm run dev
```

See the [documentation](https://svelte.dev/docs/kit) to learn more.

## Changelog

[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md).
npm package: @sveltejs/mcp
Description: The CLI version of the Svelte MCP.
Latest version: 0.1.22

# @sveltejs/mcp

The CLI version of the Svelte MCP.

You can run it directly with

```bash
npx @sveltejs/mcp
```

or install it and then run it

```bash
pnpm i @sveltejs/mcp
pnpm svelte-mcp
```
npm package: @sveltejs/package
Description: The fastest way to build Svelte packages
Latest version: 2.5.7

# The fastest way to build Svelte packages

[Build Svelte packages](https://svelte.dev/docs/kit/packaging) in correctly packaged format.

The quickest way to get started is via the [sv](https://npmjs.com/package/sv) package:

```sh
npx sv create my-app
cd my-app
npm install
npm run dev
```

See the [documentation](https://svelte.dev/docs/kit/packaging) to learn more.

## Changelog

[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/main/packages/package/CHANGELOG.md).
npm package: @sveltejs/repl
Description: This is the guts of https://svelte.dev/repl, extracted into its own package so that it can be used elsewhere.
Latest version: 0.6.0

# @sveltejs/svelte-repl

This is the guts of https://svelte.dev/repl, extracted into its own package so that it can be used elsewhere.

## TODO

* Documentation
* Tests
* Themeability

## License

[MIT](LICENSE)
npm package: @sveltejs/sv-utils
Description: Utility functions for sv
Latest version: 0.2.0

# @sveltejs/sv-utils

Utility functions for building [sv](https://github.com/sveltejs/cli) add-ons. Parse, transform, and generate code across multiple languages.

```sh
npm install @sveltejs/sv-utils
```

## Documentation

[Documentation](https://svelte.dev/docs/cli/sv-utils)

## Changelog

[Changelog](./CHANGELOG.md)

## License

[MIT](../../LICENSE)
npm package: @sveltejs/svelte-json-tree
Description: Svelte JSON Viewer Component
Author: Tan Li Hau
Latest version: 2.2.1

# svelte-json-tree

![version](https://img.shields.io/npm/v/svelte-json-tree?style=flat-square) ![MIT License](https://img.shields.io/npm/l/svelte-json-tree?style=flat-square)

![svelte-json-tree](./images/screenshot.png)

Svelte JSON Viewer Component used in [Svelte REPL](https://svelte.dev/repl). Supports [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), [Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable), [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol).

[Try it out on repl](https://svelte.dev/repl/89867bd1acaa48b4b29e29d1fdfa1ddf?version=3.14.1).

## Install

Use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en) to install:

```sh
# npm
npm install --save svelte-json-tree

# yarn
yarn add svelte-json-tree
```

## Usage

With Svelte:

```html
<script>
  import JSONTree from 'svelte-json-tree';
  // your json data to view
  const value = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar',
    },
  };
</script>

<JSONTree {value} />
```

Without Svelte:

```js
const JSONTree = require('svelte-json-tree');
const jsonTree = new JSONTree({
  target: document.body,
  props: {
    value: { foo: 'bar' },
  },
});

// update value
jsonTree.$set({ value: ['1'] });
```

## Overriding Styles

**svelte-json-tree** uses the following CSS variables to theme:

```css
/* color */
--json-tree-string-color: #cb3f41;
--json-tree-symbol-color: #cb3f41;
--json-tree-boolean-color: #112aa7;
--json-tree-function-color: #112aa7;
--json-tree-number-color: #3029cf;
--json-tree-label-color: #871d8f;
--json-tree-property-color: #000000;
--json-tree-arrow-color: #727272;
--json-tree-operator-color: #727272;
--json-tree-null-color: #8d8d8d;
--json-tree-undefined-color: #8d8d8d;
--json-tree-date-color: #8d8d8d;
--json-tree-internal-color: grey;
--json-tree-regex-color: #cb3f41;
/* position */
--json-tree-li-indentation: 1em;
--json-tree-li-line-height: 1.3;
/* font */
--json-tree-font-size: 12px;
--json-tree-font-family: 'Courier New', Courier, monospace;
```

To overwrite the style, specify the css variables on the parent:

```html
<div style="--json-tree-string-color: yellow;">
  <JSONTree {value} />
</div>
```

## License

[MIT](https://github.com/tanhauhau/svelte-json-tree/blob/master/LICENSE)
npm package: @sveltejs/vite-plugin-svelte
Description: The official [Svelte](https://svelte.dev) plugin for [Vite](https://vitejs.dev).
Author: dominikg
Latest version: 7.0.0

# @sveltejs/vite-plugin-svelte

The official [Svelte](https://svelte.dev) plugin for [Vite](https://vitejs.dev).

## Usage

```js
// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      /* plugin options */
    })
  ]
});
```

## Documentation

- [Plugin options](../../docs/config.md)
- [FAQ](../../docs/faq.md)

## License

[MIT](./LICENSE)
npm package: @sveltejs/vite-plugin-svelte-inspector
Description: A [Svelte](https://svelte.dev) inspector plugin for [Vite](https://vitejs.dev).
Author: dominikg
Latest version: 5.0.2

# @sveltejs/vite-plugin-svelte-inspector

A [Svelte](https://svelte.dev) inspector plugin for [Vite](https://vitejs.dev).

## Usage

This plugin is automatically installed as a dependency of [@sveltejs/vite-plugin-svelte](https://www.npmjs.com/package/@sveltejs/vite-plugin-svelte).

You can enable it in `svelte.config.js` by adding the `vitePlugin.inspector` option.

```js
// svelte.config.js
export default {
  vitePlugin: {
    inspector: true
  }
};
```

Now simply press `alt-x` (`option-x` on MacOS) on a page served by the Vite dev server to activate inspect mode. Click on a highlighted element to jump to its source code in your editor.

Also check out the [docs](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md) for customization options.

## License

[MIT](./LICENSE)
npm package: @sveltek/attachments
Description: A collection of custom attachments for Svelte.
Author: Sveltek
Latest version: 0.2.5

<h1 align="center">@sveltek/attachments</h1>

<p align="center">A collection of custom attachments for Svelte.</p>

<br>

> [!NOTE]
>
> Since [attachments](https://svelte.dev/docs/svelte/svelte-attachments) are a new feature in **Svelte**, this project is in an early testing phase to experiment with their implementation. As a result, breaking changes are very likely before the first stable release.
>
> If you find any issues or bugs, please [report](https://github.com/sveltek/attachments/issues/new/choose) them so the project can be improved.

<br>

## Installation

```sh
# via pnpm
pnpm add @sveltek/attachments
```

```sh
# via npm
npm install @sveltek/attachments
```

## Attachments

> **Required**: `svelte`: `>=5.29.0`

- [clickOutside](./src/attachments/click-outside/README.md) → Triggers a callback when clicking outside the target element.
- [keyboard](./src/attachments/keyboard/README.md) → Triggers a callback when a specified keyboard event occurs.
- [preventScroll](./src/attachments/prevent-scroll/README.md) → Prevents scrolling on the target element.

## License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the [MIT](LICENSE.txt) license.
npm package: @sveltek/eslint-config
Description: Sveltek's config for ESLint.
Author: Sveltek
Latest version: 1.1.5

<h1 align="center">@sveltek/eslint-config</h1>

<p align="center">Sveltek's config for ESLint.</p>

<br>

## Installation

```sh
pnpm add -D @sveltek/eslint-config
```

## Usage

### Linting Commands

Add lint commands for manual linting (optional):

```js
// package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  }
}
```

### JavaScript Config

```js
// eslint.config.js

import { defineConfig, jsConfig, ignoresConfig } from '@sveltek/eslint-config'

export default defineConfig([jsConfig, ignoresConfig])
```

### TypeScript Config

```js
// eslint.config.js

import {
  defineConfig,
  jsConfig,
  tsConfig,
  ignoresConfig,
} from '@sveltek/eslint-config'

export default defineConfig([jsConfig, tsConfig, ignoresConfig])
```

### Svelte/SvelteKit Config

> [!NOTE]
>
> Also, don't forget to add the `svelte` lang key to the `eslint.validate` vscode setting:
>
> ```js
> // .vscode/settings.json
>
> {
>   "eslint.validate": ["javascript", "typescript", "svelte"]
> }
> ```

```js
// eslint.config.js

import {
  defineConfig,
  jsConfig,
  tsConfig,
  svelteConfig,
  ignoresConfig,
} from '@sveltek/eslint-config'

export default defineConfig([jsConfig, tsConfig, svelteConfig, ignoresConfig])
```

## Custom Setup

```js
// eslint.config.js

import {
  defineConfig,
  globalIgnores,
  jsConfig,
  tsConfig,
  ignores,
} from '@sveltek/eslint-config'

export default defineConfig([
  jsConfig,
  tsConfig,
  svelteConfig,
  {
    files: jsConfig.files,
    rules: {
      // ...
    },
  },
  {
    files: tsConfig.files,
    rules: {
      // ...
    },
  },
  {
    files: svelteConfig.files,
    rules: {
      // ...
    }
  }
  globalIgnores([...ignores, '**/dir/']),
])
```

For more info on how to `ignore files`, see the official [docs](https://eslint.org/docs/latest/use/configure/ignore).

## License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the [MIT](LICENSE.txt) license.
npm package: @sveltek/markdown
Description: Svelte Markdown Preprocessor.
Author: Sveltek
Latest version: 0.30.1

<h1 align="center">@sveltek/markdown</h1>

<p align="center">Svelte Markdown Preprocessor.</p>

<br>

## Documentation

Everything you need for a [quick start](https://github.com/sveltek/markdown).

## License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the [MIT](LICENSE.txt) license.
npm package: @sveltek/prettier-config
Description: Sveltek's config for Prettier.
Author: Sveltek
Latest version: 1.0.7

<h1 align="center">@sveltek/prettier-config</h1>

<p align="center">Sveltek's config for Prettier.</p>

<br>

## Installation

```sh
pnpm add -D @sveltek/prettier-config
```

## Usage

### Formatting Commands

Add a `format` command for manual formatting (optional):

```js
// package.json

{
  "scripts": {
    "format": "prettier --write ."
  }
}
```

### Default Config

```js
// prettier.config.js

export { default } from '@sveltek/prettier-config'
```

## Custom Setup

```js
// prettier.config.js

import base from '@sveltek/prettier-config'

/** @type {import("prettier").Config} */
const config = {
  ...base,
  singleQuote: false,
  // ...
}

export default config
```

## License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the [MIT](LICENSE.txt) license.
npm package: @sveltek/rehype-highlight
Description: A custom Rehype plugin that creates code highlighter.
Author: Sveltek
Latest version: 0.30.0

<h1 align="center">@sveltek/rehype-highlight</h1>

<p align="center">A custom Rehype plugin that creates code highlighter.</p>

<br>

> [!NOTE]
>
> While the **API** is solid and mostly complete, some changes may still occur before the first stable release.
>
> Ideas, [suggestions](https://github.com/sveltek/markdown/discussions) and code [contributions](https://github.com/sveltek/markdown/blob/main/.github/CONTRIBUTING.md) are welcome.
>
> If you find any issues or bugs, please [report](https://github.com/sveltek/markdown/issues/new/choose) them so the project can be improved.

<br>

## Installation

```sh
# via pnpm
pnpm add -D @sveltek/rehype-highlight
```

```sh
# via npm
npm install -D @sveltek/rehype-highlight
```

## Usage

### Global

```ts
import { svelteMarkdown } from '@sveltek/markdown'
import { rehypeHighlight } from '@sveltek/rehype-highlight'

svelteMarkdown({
  plugins: {
    rehype: [[rehypeHighlight, options]],
  },
})
```

### Layouts

```ts
import { svelteMarkdown } from '@sveltek/markdown'
import { rehypeHighlight } from '@sveltek/rehype-highlight'

svelteMarkdown({
  layouts: [
    {
      name: 'layout-name',
      path: 'path/to/custom/file.svelte',
      plugins: {
        rehype: [[rehypeHighlight, options]],
      },
    },
  ],
})
```

### Entries

```ts
import { svelteMarkdown } from '@sveltek/markdown'
import { rehypeHighlight } from '@sveltek/rehype-highlight'

svelteMarkdown({
  entries: [
    {
      name: 'entry-name',
      path: 'path/to/custom/file.svelte',
      plugins: {
        rehype: [[rehypeHighlight, options]],
      },
    },
  ],
})
```

## Options

### highlighter

- Type: `(data: HighlighterData) => Promise<string | undefined> | string | undefined`
- Required: `true`

Specifies custom syntax highlighter.

```ts
{
  highlighter: async ({ lang, code, meta }) => {
    const result = await codeToHtml(code, { lang })
    return result
  },
}
```

### root

- Type: `(node: Hast.Element) => void`
- Default: `undefined`

Specifies custom options for the `root` node (usually the `<pre>` tag).

```ts
{
  root: (node) => {
    node.tagName = 'div'
    node.properties.id = 'code-highlight'
    // ...
  }
}
```

## License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the [MIT](LICENSE.txt) license.
npm package: @sveltek/tsconfig
Description: Sveltek's config for TypeScript.
Author: Sveltek
Latest version: 1.1.1

<h1 align="center">@sveltek/tsconfig</h1>

<p align="center">Sveltek's config for TypeScript.</p>

<br>

## Installation

```sh
pnpm add -D @sveltek/tsconfig
```

## Usage

```ts
// tsconfig.json

{
  "extends": "@sveltek/tsconfig"
}
```

## Custom Setup

```ts
// tsconfig.json

{
  "extends": "@sveltek/tsconfig",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@": ["./src"],
      "@/*": ["./src/*"]
    }
  }
}
```

## License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the [MIT](LICENSE.txt) license.
npm package: @sveltek/unplugins
Description: Sveltek's Unified plugins for Markdown preprocessor.
Author: Sveltek
Latest version: 0.15.0

<h1 align="center">@sveltek/unplugins</h1>

<p align="center">Sveltek's Unified plugins for Markdown preprocessor.</p>

<br>

## Contribute

Check out the quick [guide](https://github.com/sveltek/markdown/blob/main/.github/CONTRIBUTING.md) for more info.

## License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the [MIT](LICENSE.txt) license.