Skip to content

Html Templating

Jump to bottom
Malik Whitten edited this page Sep 26, 2023 · 2 revisions

Html Templating

Introduction

The html method is a pivotal component of the vader.js library, designed to simplify HTML content generation and manipulation. This method empowers developers to work with HTML strings, perform various transformations, and enforce specific rules and conventions, making it an invaluable tool for building dynamic web applications.

Method Signature

html(strings, ...args)

Parameters

  • strings: An array of strings that represent the HTML content to be processed.
  • ...args: A variable number of arguments that can be inserted into the HTML content using template literals.

Functionality

HTML Parsing

The html method begins by parsing the provided HTML content using the DOMParser, resulting in the creation of a Document Object Model (DOM) structure.

let dom = new DOMParser().parseFromString(result, "text/html");

Element Processing

Subsequently, the method iterates through all elements within the HTML content and performs diverse operations based on element types.

Handling Images (<img> Elements)

  • Ensures that <img> elements have the necessary alt attribute for accessibility.
  • Optionally hides images and replaces src attributes with absolute URLs based on the current window's location.

Handling Other Elements

  • Manages class and className attributes based on configuration and conventions.
  • Adjusts href and src attributes for relative paths based on configuration.

Error Handling

The html method performs error checks and throws exceptions when specific conditions are not met. This includes missing alt attributes for images and invalid className values.

Component Integration

The processed HTML content is then seamlessly integrated into the vader.js component structure, ensuring adherence to specific conventions and including a designated data attribute.

Configuration

The behavior of the html method can be influenced by configuration options specified in HTML comments within the document. These options include:

  • <!-- #vader-disable_accessibility -->: Disables accessibility checks for images.
  • <!-- #vader-allow_class -->: Allows the use of the class attribute (class names) in elements.
  • <!-- #vader-class-ignore -->: Ignores specific class-related checks.
  • <!-- #vader-disable_relative-paths -->: Disables the transformation of relative paths in href and src attributes.

Handling Relative Paths: "public" and "src" Directories

When dealing with relative paths within your HTML content, it's essential to consider the "public" and "src" directories, assuming they are located at the root of your website.

Relative Paths to the "public" Directory

Relative paths pointing to the "public" directory are typically used for resources meant to be publicly accessible, such as images, stylesheets, and client-side scripts. Here's how the html method manages these paths:

  • Example: If an element has an src attribute like "/images/picture.jpg", it is assumed that the "public" directory is situated at the root of the website. The method automatically converts such paths into absolute URLs relative to the base URL of the website. For instance, if the application is hosted at "http://example.com," the path "/images/picture.jpg" becomes "http://example.com/images/picture.jpg."

Relative Paths to the "src" Directory

Relative paths leading to the "src" directory are often used for source files, scripts, or other resources that are part of the application's source code. Here's how the html method handles these paths:

  • Example: If an element has an src attribute like "/src/app.js," it is assumed that the "src" directory is also located at the root of the website. Similar to "public" paths, these relative paths are converted into absolute URLs based on the base URL of the website. For instance, if the application is hosted at "http://example.com," the path "/src/app.js" becomes "http://example.com/src/app.js."

Considerations

To ensure the correct functioning of this path handling logic, it is crucial to confirm that the "public" and "src" directories are indeed positioned at the root of your website. If your project structure deviates from this assumption, you may need to tailor the path handling logic accordingly.

By automatically converting relative paths to absolute URLs, the html method simplifies the referencing of resources within your HTML content, while still allowing flexibility in your project's directory structure.

Usage

The html method is typically employed within vader.js components to generate and manipulate HTML content. Developers can insert dynamic data using template literals and ensure that the generated HTML aligns with specified rules and conventions.

Example

Here's an example demonstrating how the html method can be used within a vader.js component:

const content = html`
  <div>
    <h1>Hello, ${username}!</h1>
    <img src="/images/profile.jpg" alt="User Profile">
    <a href="/dashboard">Dashboard</a>
  </div>
`;

In this example, ${username} is an interpolated dynamic value, and relative paths in src and href attributes are automatically converted to absolute URLs based on the configured rules.

Conclusion

The html method in vader.js empowers developers to efficiently create and manipulate HTML content, ensuring adherence to coding standards and conventions. It enhances the development experience for building dynamic web applications with rich HTML content, all while simplifying the management of relative paths to the "public" and "src" directories.

Clone this wiki locally