open-index/open-npm huggingface dataset:
npm package: @staszek998/v-html
Description: Simple Vue component capable of rendering the passed-in HTML string without wrapping it within a redundant HTML tag.
Author: IDEALIGN Stanisław Gregor
Latest version: 1.0.6

# VHTML

![](https://img.shields.io/npm/v/@staszek998/v-html?color=%2314ffec)
![](https://img.shields.io/npm/l/@staszek998/v-html?color=%2314ffec)

> Simple _Vue_ component capable of rendering the passed-in HTML string **without** wrapping it within a redundant HTML tag.
>
> Why? Because `v-html` directive is not always an option 🙂

**Table of contents**

[[_TOC_]]

## Installation

### 1. Download the package

#### 1.A. Using NPM.

```bash
npm install --save @staszek998/v-html
```

#### 1.B. Using Yarn.

```bash
yarn add @staszek998/v-html
```

### 2. Implement the component within your _Vue_ application

_VHTML_ exposes two named exports: `Component` and `Plugin`. Here's how to use them:

#### 2.A. Using the `Component` export

##### 2.A.a. Installing the component globally, for use _within the whole app_

```typescript
// main.(j|t)s

import Vue from 'vue'
import { Component as VHTML } from 'v-html'

Vue.component('VHTML', VHTML)
```

##### 2.A.b. Installing the component locally, for use _within a single component_

```vue
<!-- MyComponent.vue -->

<script>
import { Component as VHTML } from 'v-html'

export default {
    components: { VHTML }
}
</script>
```

#### 2.B. Using the `Plugin` export

```typescript
// main.(j|t)s

import Vue from 'vue'
import { Plugin as VHTML } from 'v-html'

Vue.use(VHTML)
```

### 3. Update your project's configuration

_VHTML_ requires _Vue_ to be running with the **[runtime compiler](https://cli.vuejs.org/config/#runtimecompiler)
enabled**.

```javascript
// vue.config.js

module.exports = {
    runtimeCompiler: true
}
```

## Usage

You can utilise the _VHTML_ in two ways: using the `html` prop or by passing the HTML right into the component, using
the default `<slot>`.

### A. Using prop

```vue
<!-- MyComponent.vue -->

<template>
    <VHTML v-bind="{ html }"/>
    <!-- OR -->
    <VHTML :html="html"/>
</template>

<script>
export default {
    data () {
        return {
            html: '<h1>Hello, World!</h1>'
        }
    },
}
</script>
```

Expected output:

```html
<h1>Hello, World!</h1>
```

### B. Using slot

```vue
<!-- MyComponent.vue -->

<template>
    <VHTML>{{ html }}</VHTML>
</template>

<script>
export default {
    data () {
        return {
            html: '<h1>Hello, World!</h1>'
        }
    },
}
</script>
```

Expected output:

```html
<h1>Hello, World!</h1>
```

## Authors

- IDEALIGN Stanisław Gregor [📧](mailto:developer@staszek.codes) [🌐](https://gitlab.com/staszek.codes)

---

Copyright © 2021 IDEALIGN Stanisław Gregor

Licensed under the [MIT license](./LICENSE).
npm package: @staszek998/xml-tag-caser
Description: Command line tool for switching the casing of the XML tags in multiple files at once
Author: Stanisław Gregor
Latest version: 1.0.3

![Cover image with the package logo and its name (xml-tag-caser)](./assets/images/cover.png "Cover image")

> Command line tool for switching the casing of the XML tags in multiple files at once.

---

## Installation

```shell
npm install -g @staszek998/xml-tag-caser
```

> 💡 You can also utilize this package without the prior installing, by using the `npx`.

## Usage

```shell
xml-tag-caser switch GLOB --from <value> --to <value> [--dry-run] [--omit-html-tags]
```

### Arguments

- `GLOB` - The glob pattern describing the files that are a subject for the casing switch.

### Flags

#### Required

- `--from=<kebab|pascal>` - Which casings should be replaced?
- `--to=<kebab|pascal>` - What is the target casing?

#### Optional

- `--dry-run` - Determines whether the script should perform a dry-run, logging the output to the
  console (instead of modifying the files).
- `--omit-html-tags` - Determines whether the replacer function should omit the standard HTML tags
  and leave them as-is.

### Examples

```shell
xml-tag-caser switch "./**/*.vue" --from kebab --to pascal
```

```shell
xml-tag-caser switch "./**/*.vue" --from pascal --to kebab
```

---

Copyright &copy; 2024 Stanisław Gregor