open-index/open-npm huggingface dataset:
npm package: @svetch/esbuild-decorators
Description: Esbuild plugin for Nx to handle emitDecoratorMetadata
Author: Brian McBride
Latest version: 0.2.21

# esbuild-decorators

![Testing/Build](https://github.com/svetch/esbuildnx/actions/workflows/esbuild-decorator.yml/badge.svg)
[![Known Vulnerabilities](https://snyk.io/test/github/svetch/esbuildnx/badge.svg)](https://snyk.io/test/github/svetch/esbuildnx)
## Overview
Forked from [@anatine/esbuildnx](https://github.com/anatine/esbuildnx)
This is a plugin for [esbuild](https://esbuild.github.io/) to handle the tsconfig setting `"emitDecoratorMetadata": true,`

When the decorator flag is set to `true`, the build process will inspect each .ts file and upon a decorator, will transpile with Typescript.

## Usage

Install esbuild and the plugin

```shell
npm install -D esbuild
npm install -D @svetch/esbuild-decorators
```

Set up a build script

```typescript
import { build } from 'esbuild';
import { esbuildDecorators } from '@svetch/esbuild-decorators'

async function myBuilder(
  tsconfig: string,
  entryPoints: string[],
  outfile: string,
  cwd: string = process.cwd()
) {
  const buildResult = await build({
    platform: 'node',
    target: 'node14',
    bundle: true,
    sourcemap: 'external',
    plugins: [
      esbuildDecorators({
        tsconfig,
        cwd,
      }),
    ],
    tsconfig,
    entryPoints,
    outfile,
    external: [
      // This is likely to be your friend...
    ],
  });
}
```

Run your builder.

-----
### Options

|  Option  |  Description |
|  ------  |  ----------- |
| **tsconfig** | _optional_ : string : The path and filename of the tsconfig.json |
| **cwd** | _optional_ : string : The current working directory |
| **force** | _optional_ : boolean : Will transpile all `.ts` files to Javascript with tsc |
| **tsx** | _optional_ : boolean : Enable `.tsx` file support |


-----
### Caveats

There is no doubt that this will affect the performance of esbuild.
When emitDecoratorMetadata is set, every file will have to be loaded into this plugin.

This simple plugin hangs on the regex string: `/((?<![(\s]\s*['"])@\w[.[\]\w\d]*\s*(?![;])[((?=\s)])/`

Potentially esbuild could eventually do this regex search and expose positives via another plugin hook for transpiling.

Issue here: https://github.com/evanw/esbuild/issues/991


-----
#### Decorator Match Testing

Check out the [test](https://github.com/svetch/esbuildnx/tree/main/packages/esbuild-decorators/src/__tests__/mock-project/app/src) files
and submit any issues or PRs if you see a pattern that should be covered.

----
#### Credits

Thanks to [Thomas Schaaf](https://github.com/thomaschaaf) as this was his shared code that lead me here.
[Original Source](https://github.com/thomaschaaf/esbuild-plugin-tsc)

Thanks to the npm package [strip-comments](https://www.npmjs.com/package/strip-comments) 
that was stripped down to cover only typescript comments and string removals
npm package: @svetch/fivem-source-map-support
Description: FiveM JavaScript source maps support
Author: Svetch
Latest version: 1.0.4

## Information
<sup>**Forked from [STKrush/fivem-source-map-support](https://github.com/STKrush/fivem-source-map-support)**</sup>
<sup>**Writed from scratch, but some of code based on [node-source-map-support](https://github.com/evanw/node-source-map-support)**</sup>
<br />
<br />
This package provides ability to use JavaScript (e.g. TypeScript) source-maps both on server and client-side.\
**FxDK** is supported too.\
<br />
> **Note**<br />
> Package was not tested on any a bit large project (because i don't have one), so i would appreciate any information on how this works for you.

## Installation and usage
Install package
```
$ npm install fivem-source-map-support
```
or
```
$ yarn add fivem-source-map-support
```
Then put this code somewhere in your project:
```js
import SourceMapSupport from 'fivem-source-map-support'
SourceMapSupport.inject()

// or

require("fivem-source-map-support").inject()
```
Please, note few things:
* This way of injecting will **NOT** work on **client-side** without **module bundler** because of lack import/export API.
* If your project builds with a module bundler (**esbuild** for e.g.) into single file, everything will work even on the **client-side**.
* On **server-side** you can use package in both ways, with module bundler and without.

### Manual usage
You can manually use package on client-side ignoring just mentioned way:
1. Install package or get one from [Releases](https://github.com/STKrush/fivem-source-map-support/releases/latest) page
2. Get **bundle.js** from ```node_modules/fivem-source-map-support/dist``` or from archive (if you downloaded release)
3. Put bundle into your **resource** folder and rename if you want to (e.g. ```fivem-sourcemap.js```)
4. Add **client_script** in **fxmanifest.lua** on top of other scripts:
```lua
client_script "fivem-sourcemap.js"
```
*Package will be injected automatically, no additional code required.*
<br />
<br />
## Tricks
For some tricky annoying reason, if your resource located in sub-directory of **resources** folder, for example, not ```resources/your-resource``` but ```resources/[core]/your-resource```, you need to help package to locate directory:
```js
import SourceMapSupport from 'fivem-source-map-support'
SourceMapSupport.inject({ subdir: '[core]' })

// or

require('fivem-source-map-support').inject({ subdir: '[core]' })
```
*Doesn't make sense on **client-side**.*
<br />
<br />
## Limitations
**Client-side** supports **only** inline source-maps. Maps that placed in separate files will not be readed.
npm package: @svettorelo/learnstorybook-design-system
Description: Storybook design systems tutorial
Author: svettorelo
Latest version: 0.2.0


<p style="display: flex;justify-content: center" >
  <a href="https://www.chromatic.com/">
    <img alt="Chromatic" src="https://avatars2.githubusercontent.com/u/24584319?s=200&v=4" width="60" />
  </a>
</p>

<h1 style="text-align: center;margin-bottom: 50px">
  Storybook Design System Tutorial
</h1>

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @sveu/actions
Description: A collection of svelte actions
Author: Mohamed Nesredin
Latest version: 1.1.0

<p align="center">
<img height="150" src="https://avatars.githubusercontent.com/u/120715197" />

<h3 align="center">Svelte Utility</h3>
<h2 align="center">Write less, Do more</h2>
</p>


<p align="center">
<a href="https://www.npmjs.com/package/@sveu/actions" target="_blank">
    <img src="https://img.shields.io/npm/dm/@sveu/actions?color=50a36f">
</a>

<a href="" target="_blank">
    <img src="https://img.shields.io/static/v1?label=functions&message=100&color=50a36f">
</a>

</p>

---
The key features are:

* **Type Strong 💪**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc).
* **Fast to code 🚀**: Increase the speed to develop features by about 200% to 300%.
* **Fewer bugs 🐞**: Reduce about 40% of human (developer) induced errors.
* **SSR Friendly 🕺**: Works perfectly with server-side.
* **Easy 💫**: Designed to be easy to use and learn. Less time reading docs.
* **Interactive demos 🎉** : Documentation of functions also come with interactive demos!.
* **Feature Rich  🌈**: 100+ functions for you to choose from.
* **Fully 🌳 shakeable**: Only take what you want.

## Installation

```bash
pnpm add -D @sveu/actions
```

## 🧪 Example

```svelte
<script>
 import { dropzone } from "@sveu/actions"

 function hover(event) {
    ...
 }

 function on_file_drop(event) {
    ...
 }
</script>

<div use:dropzone on:hover="{hover}" on:files="{on_file_drop}" />

```

## 🙏 Thanks

This project is heavily inspired by the following awesome projects.

- [vueuse/vueuse](https://github.com/vueuse/vueuse/)
- [rayepps/radash](https://github.com/rayepps/radash)
- [Python](https://python.org)
- [Vue](https://vuejs.org)

## 📜 License

[MIT License](#License) © 2022-PRESENT [Mohamed Nesredin](https://github.com/mohamed-kaizen)
npm package: @sveu/browser
Description: A collection of browser utilities for Svelte
Author: Mohamed Nesredin
Latest version: 1.0.1

<p align="center">
<img height="150" src="https://avatars.githubusercontent.com/u/120715197" />

<h3 align="center">Svelte Utility</h3>
<h2 align="center">Write less, Do more</h2>
</p>


<p align="center">
<a href="https://www.npmjs.com/package/@sveu/browser" target="_blank">
    <img src="https://img.shields.io/npm/dm/@sveu/browser?color=50a36f">
</a>

<a href="" target="_blank">
    <img src="https://img.shields.io/static/v1?label=functions&message=100&color=50a36f">
</a>

</p>

---
The key features are:

* **Type Strong 💪**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc).
* **Fast to code 🚀**: Increase the speed to develop features by about 200% to 300%.
* **Fewer bugs 🐞**: Reduce about 40% of human (developer) induced errors.
* **SSR Friendly 🕺**: Works perfectly with server-side.
* **Easy 💫**: Designed to be easy to use and learn. Less time reading docs.
* **Interactive demos 🎉** : Documentation of functions also come with interactive demos!.
* **Feature Rich  🌈**: 100+ functions for you to choose from.
* **Fully 🌳 shakeable**: Only take what you want.

## Installation

```bash
pnpm add -D @sveu/browser
```


## 🧪 Example

```svelte

<script>
 import {permission} from "@sveu/browser"

 const { state, supported } = permission("geolocation", {controls: true})
</script>

<h1>Is supported is: {$supported}</h1>

<h1>state is: {$state}</h1>

```

## 🙏 Thanks

This project is heavily inspired by the following awesome projects.

- [vueuse/vueuse](https://github.com/vueuse/vueuse/)
- [rayepps/radash](https://github.com/rayepps/radash)
- [Python](https://python.org)
- [Vue](https://vuejs.org)

## 📜 License

[MIT License](#License) © 2022-PRESENT [Mohamed Nesredin](https://github.com/mohamed-kaizen)
npm package: @sveu/extend
Description: A collection of 3rd party integrations for Svelte
Author: Mohamed Nesredin
Latest version: 1.0.0

<p align="center">
<img height="150" src="https://avatars.githubusercontent.com/u/120715197" />

<h3 align="center">Svelte Utility</h3>
<h2 align="center">Write less, Do more</h2>
</p>


<p align="center">
<a href="https://www.npmjs.com/package/@sveu/extend" target="_blank">
    <img src="https://img.shields.io/npm/dm/@sveu/extend?color=50a36f">
</a>

<a href="" target="_blank">
    <img src="https://img.shields.io/static/v1?label=functions&message=100&color=50a36f">
</a>

</p>

---
The key features are:

* **Type Strong 💪**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc).
* **Fast to code 🚀**: Increase the speed to develop features by about 200% to 300%.
* **Fewer bugs 🐞**: Reduce about 40% of human (developer) induced errors.
* **SSR Friendly 🕺**: Works perfectly with server-side.
* **Easy 💫**: Designed to be easy to use and learn. Less time reading docs.
* **Interactive demos 🎉** : Documentation of functions also come with interactive demos!.
* **Feature Rich  🌈**: 100+ functions for you to choose from.
* **Fully 🌳 shakeable**: Only take what you want.

## Installation

```bash
pnpm add -D @sveu/extend
```

## 🧪 Example

```svelte
<script>
 import { fcm } from "@sveu/extend/fcm"
 
 const { token, error, supported, on_message } = fcm(firebase_app, {vapid_key:"my-key",})
 
</script>
```

## 🙏 Thanks

This project is heavily inspired by the following awesome projects.

- [vueuse/vueuse](https://github.com/vueuse/vueuse/)
- [rayepps/radash](https://github.com/rayepps/radash)
- [Python](https://python.org)
- [Vue](https://vuejs.org)
## 📜 License

[MIT License](#License) © 2022-PRESENT [Mohamed Nesredin](https://github.com/mohamed-kaizen)
npm package: @sveu/shared
Description: Shared utilities for svelte utility libraries
Author: Mohamed Nesredin
Latest version: 1.0.1

<p align="center">
<img height="150" src="https://avatars.githubusercontent.com/u/120715197" />

<h3 align="center">Svelte Utility</h3>
<h2 align="center">Write less, Do more</h2>
</p>


<p align="center">
<a href="https://www.npmjs.com/package/@sveu/shared" target="_blank">
    <img src="https://img.shields.io/npm/dm/@sveu/shared?color=50a36f">
</a>

<a href="" target="_blank">
    <img src="https://img.shields.io/static/v1?label=functions&message=100&color=50a36f">
</a>

</p>

---
The key features are:

* **Type Strong 💪**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc).
* **Fast to code 🚀**: Increase the speed to develop features by about 200% to 300%.
* **Fewer bugs 🐞**: Reduce about 40% of human (developer) induced errors.
* **SSR Friendly 🕺**: Works perfectly with server-side.
* **Easy 💫**: Designed to be easy to use and learn. Less time reading docs.
* **Interactive demos 🎉** : Documentation of functions also come with interactive demos!.
* **Feature Rich  🌈**: 100+ functions for you to choose from.
* **Fully 🌳 shakeable**: Only take what you want.

## Installation

```bash
pnpm add -D @sveu/shared
```

## 🧪 Example

```svelte

<script>
 import {strftime} from "@sveu/shared"
 
 const time = strftime(Date.now(), "%Y-%m-%d %H:%M:%S") // 2023-03-09 13:52:34
</script>

{time}
```

## 🙏 Thanks

This project is heavily inspired by the following awesome projects.

- [vueuse/vueuse](https://github.com/vueuse/vueuse/)
- [rayepps/radash](https://github.com/rayepps/radash)
- [Python](https://python.org)
- [Vue](https://vuejs.org)

## 📜 License

[MIT License](#License) © 2022-PRESENT [Mohamed Nesredin](https://github.com/mohamed-kaizen)
npm package: @sveu/sveltekit-security
Description: A package that helps you secure your Sveltekit apps with ease. It provides you with tools and best practices to prevent common security risks and vulnerabilities.
Author: Mohamed Nesredin
Latest version: 0.1.1

<p align="center">
<img height="150" src="https://avatars.githubusercontent.com/u/120715197" />

<h3 align="center">Sveltekit Security</h3>

## Installation

```bash
pnpm add -D @sveu/sveltekit-security
```

[Read the docs](https://svelte-u.vercel.app/docs/sveltekit-security/intro)

## 🙏 Thanks

This project is heavily inspired by the following awesome projects.

* [nuxt-security](https://github.com/baroshem/nuxt-security)

## 📜 License

[MIT License](#License) © 2023-PRESENT [Mohamed Nesredin](https://github.com/mohamed-kaizen)
npm package: @sveuikit/core
Description: functional svelte5 ui kit
Author: pouchlabs
Latest version: 1.0.0

# create-svelte

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```