open-index/open-npm huggingface dataset:
npm package: @riotbyte/nest-service-locator
Description: NestJS tag based service locator
Latest version: 0.2.0

# NestJS Service Locator

The service locator package allow you to define "service tags". Service tags can be used to create a collection of services
that can be retreived using a service locator. This can be helpful when implementing certain design patterns (e.g. strategy),
where a service uses a collection of different implementations.

## Defining a tag

To define a new tag, you need to call the defineTag function:

```typescript
import { defineTag } from '@riotbyte/nest-service-locator'

export const MyTag = defineTag('my-tag-name')
```

> NOTE: You can define a tag with the same name, mulitple times. Keep in mind that each individual instance is
> a different tag, and tags with the same name, will not conflict with eachother.

This tag can now be applied using the decorator method on the defined tag:

```typescript
@MyTag.decorator({})
class MyTaggedClass {}
```

> NOTE: The empty object passed to the decorator function is used to supply the tag with metadata. By default, metadata
> can be an empty object, but you can specify the type of metadata for each tag induvidually.

### Providing metadata

Tags can provide additional information about the class that it has been applied to. You can define the type of the metadata when defining a tag:

```typescript
export const MyTag = defineTag<{ name: string }>('my-tag-name')
```

This example now requires an object with the name property when applying the tag:

```typescript
@MyTag.decorator({ name: 'my-tagged-class' })
class MyTaggedClass {}
```

### Restricting the tag

By default, the tag can be applied to any class. If a tag is expected to only be applied to a specific interface or type, you can define a tag like this:

```typescript
import { defineTag } from '@riotbyte/nest-service-locator'

export const MyTag = defineTag<object, MyInterface>('my-tag-name')
```

Now the compiler will show an error when the class the tag is being applied to is not an instance of MyInterface:

```typescript
// This is allowed since X is a valid implementation of MyInterface
@MyTag.decorator({})
class X implements MyInterface {
  myInterfacedFunction() {}
}

// This is not allowed since Y is not a valid implementation of MyInterface
@MyTag.decorator({})
class Y {}
```

## Retreiving tagged services

Tagged services and their metadata can be retrieved using the service locator:

```typescript
import { ServiceLocator, TaggedService } from '@riotbyte/nest-service-locator'

class GroupGreeter {
  constructor(private readonly locator: ServiceLocator) {}

  greet(greeterName: string): void {
    this.locator
      .tagged(GreeterTag)
      .find((tagged) => tagged.metadata.name === greeterName)
      ?.greet()
  }
}
```
npm package: @riotjs/cli
Description: Riot command line utility
Author: Gianluca Guarini
Latest version: 10.0.0

# Riot cli

[![Riot.js cli logo](https://raw.githubusercontent.com/riot/branding/main/cli/cli-horizontal.svg)](https://github.com/riot/cli/)

Command line tool to precompile riot tags

[![Build Status][ci-image]][ci-url]
[![Code Quality][qlty-image]][qlty-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
[![Coverage Status][coverage-image]][coverage-url]

## Important

If you are using Riot.js < 4.0.0 please check the [legacy branch](https://github.com/riot/cli/tree/legacy)

## Installation

`npm install @riotjs/cli -g`

## Usage

`riot --help`

[ci-image]: https://img.shields.io/github/actions/workflow/status/riot/cli/test.yml?style=flat-square
[ci-url]: https://github.com/riot/cli/actions
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: http://img.shields.io/npm/v/@riotjs/cli.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@riotjs/cli.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/cli
[coverage-image]: https://qlty.sh/gh/riot/projects/cli/coverage.svg
[coverage-url]: https://qlty.sh/gh/riot/projects/cli
[qlty-image]: https://qlty.sh/gh/riot/projects/cli/maintainability.svg
[qlty-url]: https://qlty.sh/gh/riot/projects/cli
npm package: @riotjs/custom-elements
Description: Simple API to create vanilla custom elements with riot
Author: Gianluca Guarini
Latest version: 10.0.0

# @riotjs/custom-elements

[![Riot.js custom elements logo](https://raw.githubusercontent.com/riot/branding/main/custom-elements/custom-elements-horizontal.svg)](https://github.com/riot/custom-elements/)

Simple API to create vanilla custom elements with riot

[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

## Demos

- [Simple Demo](https://codesandbox.io/p/sandbox/riot-custom-elements-demo-forked-xqw2sq)

## Usage

```js
import MyComponent from './my-component.riot'
import define from '@riotjs/custom-elements'

define('x-tag', MyComponent)
```

Notice that in order to update the component properties via attribute you will need to rely on the [`observedAttributes`](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) array

```html
<my-component>
  <p>{props.message}</p>
  <script>
    export default {
      // the message property will be automatically updated anytime the DOM `message` attribute will change
      observedAttributes: ['message'],
    }
  </script>
</my-component>
```

[ci-image]: https://img.shields.io/github/actions/workflow/status/riot/custom-elements/test.yml?style=flat-square
[ci-url]: https://github.com/riot/custom-elements/actions
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: http://img.shields.io/npm/v/@riotjs/custom-elements.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@riotjs/custom-elements.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/custom-elements

## API

This module exports only a single factory function that is a wrapper around the native `customElements.define`. The `define` function accepts only 3 parameters:

- tag name
- tag api normally generated via riot compiler
- custom options to pass to `customElements.define` like `{extends: 'button'}` for example
npm package: @riotjs/hot-reload
Description: Riot Hot Reload Api
Author: Gianluca Guarini https://github.com/GianlucaGuarini
Latest version: 10.0.0

# Riot hot reload api

[![Riot.js hot reload logo](https://raw.githubusercontent.com/riot/branding/main/hot-reload/hot-reload-horizontal.svg)](https://github.com/riot/hot-reload/)

[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![Code Quality][qlty-image]][qlty-url]
[![MIT License][license-image]][license-url]

Api that will extend riot making your tags hot reloadable.

## Important

If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/hot-reload/tree/v3)

## Usage

```js
import reload from '@riotjs/hot-reload'
import Component from './my-component'
// refresh all the DOM nodes called 'my-component' without losing their state
reload(Component)
```

[ci-image]:https://img.shields.io/github/actions/workflow/status/riot/hot-reload/test.yml?style=flat-square
[ci-url]:https://github.com/riot/hot-reload/actions
[license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]:   LICENSE.txt
[npm-version-image]:   https://img.shields.io/npm/v/@riotjs/hot-reload.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/hot-reload.svg?style=flat-square
[npm-url]:             https://npmjs.org/package/@riotjs/hot-reload
[qlty-image]: https://qlty.sh/gh/riot/projects/hot-reload/maintainability.svg
[qlty-url]:   https://qlty.sh/gh/riot/projects/hot-reload
npm package: @riotjs/hydrate
Description: Riot.js hydrate strategy for SSR applications
Author: Gianluca Guarini
Latest version: 10.0.0

# @riotjs/hydrate

[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

## Installation

```bash
npm i -S riot @riotjs/hydrate
```

## Usage

If you are using [`@riotjs/ssr`](https://github.com/riot/ssr) you might prefer hydrating your server side rendered HTML enhancing your application user experience. Your users will get initially the static HTML (generated via `@riotjs/ssr`) that will be enhanced only when javascript application will be loaded.<br/> `@riotjs/hydrate` will allow you avoiding any perceivable application flickering or input fields focus loss when the javascript components will replace the static rendered markup.

A good practice is to mount your Riot.js components **exactly with the same initial properties** on the server as on the client.

```js
import hydrate from '@riotjs/hydrate'
import MyComponent from './my-component.riot'

const hydrateWithMyComponent = hydrate(MyComponent)

// hydrate the SSR DOM contained in the #root element
hydrateWithMyComponent(
  document.getElementById('root'),
  window.__INITIAL_APPLICATION_PROPS__,
)
```

### Callbacks

You can use the `onBeforeHydrate` and `onHydrated` callback in your components to setup your application internal state. Notice that these callbacks will be called only on the component hydrated and not on all its nested children components.

```html
<my-component>
  <script>
    export default {
      onBeforeHydrate() {
        // do something before the hydration
      },
      onHydrated() {
        // do something after the hydration
      },
    }
  </script>
</my-component>
```

### Caveats

The `hydrate` method will mount your components on a clone of your target node not yet in the DOM. If your component state relies on DOM computations like `get​Bounding​Client​Rect` and you don't want to use the `onHydrated` callback, you will need to use a `requestAnimationFrame` callback in your `onMounted` method to wait that your root node has replaced completely the initial static markup for example:

```html
<my-component>
  <script>
    export default {
      onMounted() {
        // your root node is not yet in the DOM
        requestAnimationFrame(() => {
          // your root is in the DOM
        })
      },
    }
  </script>
</my-component>
```

[ci-image]: https://img.shields.io/github/actions/workflow/status/riot/hydrate/test.yml?style=flat-square
[ci-url]: https://github.com/riot/hydrate/actions
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: http://img.shields.io/npm/v/@riotjs/hydrate.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@riotjs/hydrate.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/hydrate
npm package: @riotjs/now
Description: Riot.js now builder
Author: Gianluca Guarini
Latest version: 4.0.1

# @riotjs/now
Riot.js [now](https://zeit.co/docs/v2/deployments/builders/overview/) builder

[![Build Status][travis-image]][travis-url]

[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]


## Usage

Configure your `now.json` file:

```json
{
  "builds": [
    { "src": "*.riot", "use": "@riotjs/now" }
  ]
}
```

Now all your riot files will be served compiled as javascript

[travis-image]:https://img.shields.io/travis/riot/now.svg?style=flat-square
[travis-url]:https://travis-ci.org/riot/now

[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]:LICENSE

[npm-version-image]:http://img.shields.io/npm/v/@riotjs/now.svg?style=flat-square
[npm-downloads-image]:http://img.shields.io/npm/dm/@riotjs/now.svg?style=flat-square
[npm-url]:https://npmjs.org/package/@riotjs/now
npm package: @riotjs/observable
Description: Simple script to listen and dispatch events
Author: Gianluca Guarini
Latest version: 4.1.1

[![Build Status][ci-image]][ci-url]
[![Code Quality][codeclimate-image]][codeclimate-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
[![Coverage Status][coverage-image]][coverage-url]

# Observable

Observable is a generic tool to send and receive events. It's a common pattern to isolate modules without forming a dependency or "coupling". By using events a large program can be broken into smaller and simpler units. Modules can be added, removed, or modified without affecting the other parts of the application.

A common practice is to split the application into a single core and multiple extensions. The core sends events any time something remarkable happens: a new item is being added, an existing item is being removed, or something is loaded from the server.

By using the observable the extensions can listen to these events and react to them. They extend the core so that the core is not aware of these modules. This is called "loose coupling".

These extensions can be custom tags (UI components) or non-UI modules.

Once the core and events are carefully designed the team members are enabled to develop the system on their own without disturbing others.

## Documentation

- [API (English)](doc/)

## Installation

### Npm

`$ npm install @riotjs/observable --save`

### Bower

`$ bower install @riotjs/observable --save`

[ci-image]:https://img.shields.io/github/workflow/status/riot/observable/test?style=flat-square
[ci-url]:https://github.com/riot/observable/actions

[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]:LICENSE.txt

[npm-version-image]:http://img.shields.io/npm/v/@riotjs/observable.svg?style=flat-square
[npm-downloads-image]:http://img.shields.io/npm/dm/@riotjs/observable.svg?style=flat-square
[npm-url]:https://npmjs.org/package/@riotjs/observable

[coverage-image]:https://img.shields.io/coveralls/riot/observable/main.svg?style=flat-square
[coverage-url]:https://coveralls.io/r/riot/observable/?branch=main

[codeclimate-image]:https://api.codeclimate.com/v1/badges/d1403f06d0e9467985e3/maintainability
[codeclimate-url]:https://codeclimate.com/github/riot/observable
npm package: @riotjs/parcel-plugin-riot
Description: A parcel plugin for riot.js
Latest version: 6.0.0

[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

A parcel plugin for riot.js

## Important

If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/parcel-plugin-riot/tree/v3)

## Using
Add parcel-plugin-riot to your project.

```bash
npm i -D @riotjs/parcel-plugin-riot @riotjs/compiler
```

-> You are ready!

```js
import App from './src/App.riot'
import {component} from 'riot'

component(App)(document.querySelector('#root'), {
  message: 'Hello there'
})
```

## Configuration

If you want compile your tags using custom riot compiler options you can create a `riot.config.js` in the root folder of your project

```js
module.exports = {
  hot: false // set it to true if you are using hmr
  // add here all the other @riotjs/compiler options riot.js.org/compiler
  // template: 'pug' for example
}
```

If you want to use `pug` as your template engine, your `riot.config.js` might look like this

```js
const { registerPreprocessor } = require('@riotjs/compiler')
const { render } = require('pug')

// register the pug preprocessor
registerPreprocessor('template', 'pug', (code, options) => {
  const { file } = options

  return {
    code: render(code, {
      filename: file,
      pretty: true,
      doctype: 'html'
    })
  }
})

module.exports = {
  template: 'pug'
}
```

If you want to enable hmr via `hot` option you will need to install also [`@riotjs/hot-reload`](https://www.npmjs.com/package/@riotjs/hot-reload)

```bash
npm i @riotjs/hot-reload -D
```


[ci-image]:https://img.shields.io/github/workflow/status/riot/parcel-plugin-riot/test?style=flat-square
[ci-url]:https://github.com/riot/parcel-plugin-riot/actions

[license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]:   LICENSE

[npm-version-image]:   https://img.shields.io/npm/v/@riotjs/parcel-plugin-riot.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/parcel-plugin-riot.svg?style=flat-square
[npm-url]:             https://npmjs.org/package/@riotjs/parcel-plugin-riot
npm package: @riotjs/parcel-transformer-riot
Description: The Riot.js official parcel transformer
Latest version: 10.0.0

[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

The Riot.js official parcel transformer.

## Important

- If you are using Parcel < 2.0.0 please check the [this branch](https://github.com/riot/parcel-transformer-riot/tree/parcel-v1)
- If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/parcel-transformer-riot/tree/v3)

## Using

### 1. Add the riot parcel transformer to your project.

```bash
npm i -D @riotjs/parcel-transformer-riot @riotjs/compiler
```

### 2. Configure your .parcelrc file

```json
{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.riot": ["@riotjs/parcel-transformer-riot"]
  }
}
```

-> You are ready!

```js
import App from './src/App.riot'
import { component } from 'riot'

component(App)(document.querySelector('#root'), {
  message: 'Hello there',
})
```

## Configuration

If you want compile your tags using custom riot compiler options you can create a `riot.config.js` in the root folder of your project

```js
export default {
  hot: false, // set it to true if you are using hmr
  // add here all the other @riotjs/compiler options riot.js.org/compiler
  // template: 'pug' for example
}
```

If you want to use `pug` as your template engine, your `riot.config.js` might look like this

```js
import { registerPreprocessor } from '@riotjs/compiler'
import { render } from 'pug'

// register the pug preprocessor
registerPreprocessor('template', 'pug', (code, options) => {
  const { file } = options

  return {
    code: render(code, {
      filename: file,
      pretty: true,
      doctype: 'html',
    }),
  }
})

export default  {
  template: 'pug',
}
```

If you want to enable hmr via `hot` option you will need to install also [`@riotjs/hot-reload`](https://www.npmjs.com/package/@riotjs/hot-reload)

```bash
npm i @riotjs/hot-reload -D
```


[ci-image]:https://img.shields.io/github/actions/workflow/status/riot/parcel-transformer-riot/test.yml?style=flat-square
[ci-url]:https://github.com/riot/parcel-transformer-riot/actions

[license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]:   LICENSE

[npm-version-image]:   https://img.shields.io/npm/v/@riotjs/parcel-transformer-riot.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/parcel-transformer-riot.svg?style=flat-square
[npm-url]:             https://npmjs.org/package/@riotjs/parcel-transformer-riot
npm package: @riotjs/prettier-config
Description: Riot.js prettier config file
Author: Gianluca Guarini
Latest version: 1.1.0

# @riotjs/prettier-config

[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

Riot default prettier config file

## Installation

Peer dependencies installation

```shell
npm i -D prettier@2
```

Config file installation

```shell
npm i -D @riotjs/prettier-config
```

## Usage

Set up your `.prettierrc.js` file as follows:

```js
module.exports = require('@riotjs/prettier-config')
```

[ci-image]:https://img.shields.io/github/actions/workflow/status/riot/prettier-config/test.yml?style=flat-square
[ci-url]:https://github.com/riot/prettier-config/actions
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: http://img.shields.io/npm/v/@riotjs/prettier-config.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@riotjs/prettier-config.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/prettier-config
npm package: @riotjs/register
Description: Allow .riot file importing in node
Author: Gianluca Guarini https://github.com/GianlucaGuarini
Latest version: 10.0.0

# @riotjs/register

Allow the import of `.riot` files importing in node.

**Note**: you can't import directly `.riot` files in [deno](https://github.com/denoland/deno/issues/1739) yet.
In that case you will need to compile your tags first

[![Build Status][ci-image]][ci-url]

[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

## Installation

```
npm i @riotjs/register @riotjs/compiler
```

## Usage

1. Create a module loader file as follows:

```js
import { pathToFileURL } from 'node:url'
import { register } from 'node:module'

register('@riotjs/register', pathToFileURL('./'))
```

2. Require the code above by running node as follows:

```shell
node --import ./register-riot.js your-program.js
```

Where `register-riot.js` is the file where you have pasted the module loader example described above.

This loader supports only [`type=module`](https://nodejs.org/api/packages.html#packagejson-and-file-extensions) projects.

## Custom file extensions

To use custom file extensions (instead of `.riot`) for your Riot.js components
you need to set the `RIOT_COMPONENTS_FILE_EXTENSION`environment variable as follows:

```shell
RIOT_COMPONENTS_FILE_EXTENSION=.html node --import ./register-riot.js your-program.js
```

[ci-image]: https://img.shields.io/github/actions/workflow/status/riot/register/test.yml?style=flat-square
[ci-url]: https://github.com/riot/register/actions
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: http://img.shields.io/npm/v/@riotjs/register.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@riotjs/register.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/register
npm package: @riotjs/util
Description: Riot.js util functions
Author: Gianluca Guarini
Latest version: 10.1.2

# @riotjs/util

Riot.js shared util scripts

[![Build Status][ci-image]][ci-url]
[![Issue Count][qlty-image]][qlty-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

[ci-image]: https://img.shields.io/github/actions/workflow/status/riot/util/test.yml?style=flat-square
[ci-url]: https://github.com/riot/util/actions
[license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: https://img.shields.io/npm/v/@riotjs/util.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/util.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/util
[qlty-image]: https://qlty.sh/gh/riot/projects/util/maintainability.svg
[qlty-url]: https://qlty.sh/gh/riot/projects/util
npm package: @riotjs/webpack-loader
Description: Riot official webpack loader
Author: Gianluca Guarini
Latest version: 10.0.0

# Riot.js webpack-loader

[![Build Status][ci-image]][ci-url]
[![Issue Count][qlty-image]][qlty-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]

Riot.js official webpack loader

## Important

If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/webpack-loader/tree/v3)

## Installation

```shell
npm i @riotjs/webpack-loader @riotjs/compiler -D
```

## Usage

Add the `@riotjs/webpack-loader` in your `webpack.config.js` file

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@riotjs/webpack-loader',
            options: {
              hot: false, // set it to true if you are using hmr
              // add here all the other @riotjs/compiler options riot.js.org/compiler
              // template: 'pug' for example
            },
          },
        ],
      },
    ],
  },
}
```

If you want to enable hmr via `hot` option you will need to install also [`@riotjs/hot-reload`](https://www.npmjs.com/package/@riotjs/hot-reload)

```shell
npm i @riotjs/hot-reload -D
```

And afterward webpack will be able to automatically reload your Riot.js components in runtime.

## Examples

Please check the following exapmles to see how it's easy to configure webpack with riot:

- [Lazy routes](https://github.com/riot/examples/tree/gh-pages/lazy-routes)
- [SSR](https://github.com/riot/examples/tree/gh-pages/ssr)

[ci-image]: https://img.shields.io/github/actions/workflow/status/riot/webpack-loader/test.yml?style=flat-square
[ci-url]: https://github.com/riot/webpack-loader/actions
[license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: https://img.shields.io/npm/v/@riotjs/webpack-loader.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/webpack-loader.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/webpack-loader
[qlty-image]: https://qlty.sh/gh/riot/projects/webpack-loader/maintainability.svg
[qlty-url]: https://qlty.sh/gh/riot/projects/webpack-loader
npm package: @riouxjean/test
Description: Testing with my first npm package.
Author: Jean-Emrick Rioux
Latest version: 3.1.1

# NPM PACKAGE - TESTING

[![npm](https://img.shields.io/npm/v/@riouxjean/test.svg)](https://github.com/jelecool/npm_test)
[![npm](https://img.shields.io/npm/dt/@riouxjean/test.svg?style=flat-square)](https://www.npmjs.com/package/@riouxjean/test)
[![GitHub](https://img.shields.io/github/license/jelecool/npm_test.svg?style=flat-square)](https://github.com/jelecool/npm_test)



Testing with : Removes all space from string

## Install

```
$ npm install @riouxjean/test
```

## Usage

```js
const test = require("@riouxjean/test");

test("GOOGL");
// => Position {
//  earnings: 1228000000,
//  outstanding: 318100000,
//  revenue: 39403000000,
//  cashs: 2240000000,
//  div: -505000000,
//  liabilities: 9147000000,
//  intangibleassets: undefined,
//  totalassets: 13856000000,
//  shareprice: 49.15 } 

test(1423);
//=> I need a string!
```

### References

Incredible [Medium article](https://medium.freecodecamp.org/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78) by [Freecodecamp](https://medium.freecodecamp.org) written by [Jonathan Wood @bamblehorse]()
npm package: @riovir/create-vue-app
Description: Initializer for ready to go Vue.js app
Author: Riovir
Latest version: 15.0.0

# create-vue-app

> Initializer for an opinionated Vue.js app scaffolding.

## How to use

```bash
npm init @riovir/vue-app
```

## Scaffolding source and docs

The actual scaffolding is maintained right here: https://gitlab.com/riovir/vue-app-scaffolding
npm package: @riovir/demo-components
Description: Webcomponents for demo purposes
Author: Riovir
Latest version: 0.2.3

# demo-components [![docs](https://img.shields.io/badge/docs-site-9b59b6.svg "Demo")](https://riovir.gitlab.io/demo-components)

> This is barely a proof of concept project. You have been warned.
npm package: @riovir/wc-fontawesome
Description: Web components for Font Awesome
Author: Riovir
Latest version: 0.2.2

# @riovir/wc-fontawesome [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://riovir.gitlab.io/wc-fontawesome)

> Non-official webcomponents for `Font Awesome`.

The API and usage is based on [vue-fontawesome](https://github.com/FortAwesome/vue-fontawesome).

## Installation

```bash
# Install peer dependency
$ npm i --save @fortawesome/fontawesome-svg-core
# Install the components
$ npm i --save @riovir/wc-fontawesome
# Install a Font Awesome format icon pack
$ npm i --save @fortawesome/free-solid-svg-icons
```

## Features

### Register your components first

```js
import { FontAwesomeIcon } from '@riovir/wc-fontawesome'
customElements.define('font-awesome-icon', FontAwesomeIcon);
// Alternatively, use a shorter name
customElements.define('fa-icon', FontAwesomeIcon);
```

For examples see the [Storybook](https://riovir.gitlab.io/wc-fontawesome).
While the code samples use [lit-html](https://lit-html.polymer-project.org/guide/writing-templates) syntax, this package does not require it.

### Why not self-define by default?

In the event you need to share the page with other teams using different versions of this component, you'll need some sort of scoping. You can read more about the topic on [open-wc.org](https://open-wc.org/scoped-elements/#limitations).
npm package: @ripaex/client
Description: A JavaScript library to interact with the RipaEX Blockchain
Latest version: 0.1.23

# RipaEX - Client

<p align="center">
    <img src="./banner.png?sanitize=true" />
</p>

## Installation

### Node.js

```bash
yarn add @ripaex/client
```

If you want to use the CDN version:

```html
<script src="https://unpkg.com/@ripaex/client/dist/index.umd.js"></script>
```

## Usage

Import the library in Node.js:

```
import RipaexClient from @ripaex/client
```
or
```
const RipaexClient require('@ripaex/client')
```

Use the library:

```
const client = new RipaexClient('<your host here>')
```

### Examples
There are more examples in the `examples` folder.

## Security

If you discover a security vulnerability within this package, please send an e-mail to security@ark.io. All security vulnerabilities will be promptly addressed.

## Credits

- [Brian Faust](https://github.com/faustbrian)
- [Lúcio Rubens](https://github.com/luciorubeens)
- [Alex Barnsley](https://github.com/alexbarnsley)
- [Juan A. Martín](https://github.com/j-a-m-l)
- [G. Silvestri](https://github.com/gsilvestri)
- [All Contributors](../../../../contributors)

## License

[MIT](LICENSE) © [RipaEX](https://ripaex.io)
npm package: @ripe-ui/react
Description: <h1 align="center">Ripe UI</h1> <h3 align="center"> 	A React Component Library for Quick UI Development </h3>
Author: ripe-ui
Latest version: 0.0.11

<h1 align="center">Ripe UI</h1>
<h3 align="center">
	A React Component Library for Quick UI Development
</h3>

<p align="center">
	<strong>
		<a href="https://ripe-ui.com/">Documentation</a>
	</strong>
</p>
<p align="center">
	<a href="https://github.com/ripeplan/ripe-ui/actions">
    <img alt="Build Status" src="https://github.com/ripeplan/ripe-ui/actions/workflows/static.yml/badge.svg">
  </a>
  <a href="https://github.com/ripeplan/ripe-ui/actions">
    <img alt="Publish to NPM Status" src="https://github.com/ripeplan/ripe-ui/actions/workflows/publish.yml/badge.svg">
  </a>
	<a href="https://badge.fury.io/js/@ripe-ui%2Freact">
    <img src="https://badge.fury.io/js/@ripe-ui%2Freact.svg" alt="npm version" height="18">
  </a>
</p>

## Overview

TBD

## Installation and usage

TBD

### Local Development

The following commands run the storybook which can be used for local development:

```sh
git clone https://github.com/ripeplan/ripe-ui.git
cd ripe-ui
npm install
npm run storybook
```
npm package: @ripeseed/rs-tunnel
Description: CLI for running secure public tunnels to localhost through Cloudflare.
Latest version: 0.4.0

# @ripeseed/rs-tunnel

CLI for exposing your local HTTP service through a self-hosted `rs-tunnel` API and Cloudflare Tunnel.

## Install

```bash
npm i -g @ripeseed/rs-tunnel
```

## Quick Start

```bash
# point CLI to your deployed API
export RS_TUNNEL_API_URL=https://api.your-domain.com

# authenticate
rs-tunnel login --email you@your-company.com
rs-tunnel login --email you@your-company.com --skip-browser-open

# expose local app on port 3000
rs-tunnel up --port 3000
```

If no API URL is configured, the CLI prompts once and stores it in `~/.rs-tunnel/config.json`.

## Commands

```bash
rs-tunnel login --email <email> [--skip-browser-open] [--domain <api-url>]
rs-tunnel up --port <port> [--url <slug>] [--verbose] [--domain <api-url>]
rs-tunnel list [--domain <api-url>]
rs-tunnel stop <tunnel-id-or-hostname> [--domain <api-url>]
rs-tunnel logout [--domain <api-url>]
rs-tunnel doctor [--domain <api-url>]
```

## Configuration

- `RS_TUNNEL_API_URL`: preferred API base URL override.
- `RS_TUNNEL_API_BASE_URL`: legacy alias (still supported).
- `--domain`: command-level API override; also persists for future commands.
- `--skip-browser-open`: skips automatically launching a browser, prints the Slack authorize URL, and keeps waiting for the API-side auth flow to complete.

## Notes

- This package is only the CLI. The API must be running separately.
- Cloudflare credentials stay on the API side; the CLI only receives short-lived tunnel tokens.

## Troubleshooting

- Run `rs-tunnel doctor` to verify API reachability and local setup.
- Run `rs-tunnel up --verbose` to include raw `cloudflared` lines.

## Repository

- Monorepo: https://github.com/RipeSeed/rs-tunnel
- Full project docs: https://github.com/RipeSeed/rs-tunnel/blob/main/README.md
npm package: @ripeseed/shared
Description: Shared Zod schemas and TypeScript contracts for rs-tunnel services and clients.
Latest version: 0.3.0

# @ripeseed/shared

Shared Zod schemas and TypeScript types used by `rs-tunnel` services and clients.

## Install

```bash
npm i @ripeseed/shared zod
```

## What It Provides

- Request/response schemas for auth and tunnel lifecycle APIs.
- Telemetry schemas (live metrics, historical metrics, request logs).
- Shared utility constants like `tunnelSlugRegex`.
- Inferred TypeScript types from the same schemas.

## Usage

```ts
import {
  tunnelCreateRequestSchema,
  tunnelCreateResponseSchema,
  type TunnelCreateResponse,
} from '@ripeseed/shared';

const request = tunnelCreateRequestSchema.parse({
  port: 3000,
  requestedSlug: 'my-app',
});

const response = tunnelCreateResponseSchema.parse({
  tunnelId: '11111111-1111-1111-1111-111111111111',
  hostname: 'my-app.tunnel.example.com',
  cloudflaredToken: 'token',
  tunnelRunToken: 'runtime-token',
  heartbeatIntervalSec: 20,
  leaseTimeoutSec: 60,
});

const typed: TunnelCreateResponse = response;
console.log(request.port, typed.hostname);
```

## Main Exports

- Auth: `authStartRequestSchema`, `authStartResponseSchema`, `authExchangeRequestSchema`, `tokenPairSchema`
- Tunnel lifecycle: `tunnelCreateRequestSchema`, `tunnelCreateResponseSchema`, `heartbeatResponseSchema`, `tunnelSummarySchema`
- Telemetry: `tunnelTelemetryIngestRequestSchema`, `tunnelLiveTelemetrySchema`, `tunnelMetricsPointSchema`, `tunnelRequestLogSchema`
- Errors: `apiErrorSchema`

## Compatibility

Use compatible versions of `@ripeseed/shared` with `@ripeseed/api` and `@ripeseed/rs-tunnel` to avoid contract drift.

## Repository

- Monorepo: https://github.com/RipeSeed/rs-tunnel
- Source folder: https://github.com/RipeSeed/rs-tunnel/tree/main/packages/shared
npm package: @ripetchor/dom
Description: DOM utils
Author: ripetchor
Latest version: 1.0.15

# DOM Utils

A lightweight TypeScript library for creating HTML elements in a declarative, type-safe way. Provides tag-specific functions (e.g., `div`, `a`, `button`) for all standard HTML tags to simplify DOM manipulation.

## Usage

Import tag functions to create DOM elements with type-safe properties and children.

```typescript
import { div, a, button } from '@ripetchor/dom';

const app = div(
  { className: 'container', style: { backgroundColor: '#1f1f1f' } },
  a({ href: 'https://example.com' }, 'Visit Example'),
  button({ type: 'button', click: () => alert('Clicked!') }, 'Click me')
);

document.body.appendChild(app);
```

Output:

```html
<div class="container" style="background-color: #1f1f1f;">
  <a href="https://example.com">Visit Example</a>
  <button type="button">Click me</button>
</div>
```

## Features

- Type-safe tag functions for all HTML tags (e.g., `div`, `span`, `a`, etc.).
- Supports element properties (`className`, `style`, etc.) and events from `GlobalEventHandlersEventMap` type.
- Event listeners accept an **AbortSignal** via the `signal` property.  
  This allows you to automatically clean up event listeners without calling `removeEventListener` manually:
  ```ts
  const controller = new AbortController();

  const btn = button(
    {
      click: () => console.log('clicked'),
      signal: controller.signal,
    },
    'Click'
  );

  // later
  controller.abort(); // all listeners bound with this signal are removed
  ```

## License

MIT