<RawElement />

📃 Table of contents

• Usage
• API
• Examples
• Changelog
• License
• Related
• Author

🕵🏼 Usage

Install it by executing:

npm i "@igor.dvlpr/rawelement"

or

npm i -D "@igor.dvlpr/rawelement"

depending on the use case.

🤹🏼 API

RawElement(options: IRawElementOptions)

Creates a RawElement instance.

If no options are specified or the required tag and data properties are not passed, it will throw an error.

IRawElementOptions

Options are an interface IRawElementOptions of the following structure:

interface IRawElementOptions {
  tag: keyof HTMLElementTagNameMap // = string
  data: string
  format?: boolean
}

tag - the wrapper HTML tag for the element that will contain the text content and optional attributes set by the setAttribute() method.

data - the actual HTML element to process, as a String.

The provided HTML element MUST have a matching start and an end tag that correspond to the tag property, otherwise an error is thrown.

Data will be normalized, i.e. CRLF (\r\n) replaced with LF (\n).

format - an optional property, whether to format the text content inside of the wrapper element.

[!TIP] It is highly recommended to leave the property format to its default value of true otherwise the source property of an instance of RawElement might contain a lot of leading whitespace.

wrapper

The whole wrapper element made of:

• a start tag,
• attributes (if present),
• text content,
• an end tag.

source

The text content of the wrapper element.

[!TIP] The text content can be formatted (the default behavior), set format in the options to false to disable formatting.

setAttribute(name: string, value: string | null): boolean

Sets an attribute and its value on the wrapper element.

To remove an attribute, pass the value of null.

Returns a Boolean whether the action succeeded.

✨ Examples

EncodedComponent.astro ```astro

import { Encoder } from '@igor.dvlpr/encode-entities' import { RawElement } from '@igor.dvlpr/rawelement'

// here we are using Astro (the SSG) // but the data can come from any source const slot: string = await Astro.slots.render('default')

const element: RawElement = new RawElement({ tag: 'div', data: slot }) const encoder: Encoder = new Encoder() const source: string = encoder.encode(element.source) // this component will always output encoded content

import EncodedComponent from './EncodedComponent.astro'

<EncodedComponent>
  <div is:raw>
    Mitochondria are known as the "powerhouses" of the cell because they generate most of the cell's supply of ATP & CO<sub>2</sub>, which is used as a source of chemical energy.
  </div>
</EncodedComponent>

{/*
  Will get rendered as:

  Mitochondria are known as the &#34;powerhouses&#34; of the cell because they generate most of the cell&#39;s supply of ATP &#38; CO&#60;sub&#62;2&#60;/sub&#62;, which is used as a source of chemical energy.
*/}