Home

Awesome

The html-strings-affixer for Javascript

Or just hsa.js

hsa-js is a dynamic JavaScript utility designed to streamline the localization process of HTML-based templates and web content. It automates the task of identifying and affixing localization tokens around text strings within HTML, making the process of preparing web pages for translation both efficient and error-free.

Navigation

Main Features

Intended Use Cases

HtmlStringsAffixer is intended for developers and localization teams working on multi-lingual web applications and websites. It's particularly useful in scenarios where:

Actually, it makes any <p>Some nice string</p> in your text to become <p>{{ __('Some nice string') }}</p> (Blade example) and etc.

Problem Solving and Benefits

Localization can be a time-consuming and error-prone process, especially when dealing with complex HTML structures. HtmlStringsAffixer addresses this challenge by:

In essence, HtmlStringsAffixer empowers developers and content creators to focus more on quality development and content creation, while it handles the intricacies of preparing HTML content for localization.

The first HSA

The original HSA (MaestroError/html-strings-affixer), developed by me (MaestroError) and written in Golang, functioned primarily as a Command Line Interface (CLI) tool. Tailored for Laravel projects, it could be installed via Composer and is designed to automate the localization process within Laravel's ecosystem. This version of HSA had a specific operational approach:

  1. Folder and File Scanning: The Go-based HSA would scan specified folders (For example resources/views), automatically identifying and reading files within.
  2. In-Place Content Replacement: It performed replacements directly in the files, updating their content to include localization tokens as necessary.

In contrast, the new hsa.js is a more versatile tool, designed for Node.js and web environments. It deviates from its predecessor in several key aspects:

Installation

Via NPM:

npm i hsa-js

npm i hsa-js --save-dev

Via CDN

unpkg

<script src="https://unpkg.com/hsa-js/dist/hsa.js"></script>

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/hsa-js@latest/dist/hsa.js"></script>

Configuration

HtmlStringsAffixer provides several configuration options, allowing for tailored usage according to specific requirements. Here's a detailed explanation of each configuration option:

  1. prefix (string): This is a string that will be prepended to each extracted string. The prefix is an essential part of the localization process, as it defines how the translated string will be identified in your code. For instance, in a Laravel Blade template, this might be {{ __(', indicating the start of a translation function call.

  2. suffix (string): Complementing the prefix, this string is appended to each extracted string. Continuing the Laravel Blade example, the suffix would be ') }}, closing the translation function call. The suffix, like the prefix, is crucial for correctly formatting the localized string in the code.

  3. ignoreChars (array): This option allows you to specify a set of characters that the HtmlStringsAffixer should ignore during the extraction process. These characters are typically ones that might interfere with the correct identification of strings to be localized. Common examples include symbols used in HTML or other markup languages, like "#" or "_".

  4. warningChars (array): These are characters that, when found in the extracted strings, will trigger warnings. This feature is particularly useful for identifying potential issues in your strings that might cause problems in the localization process. For instance, special characters like "%" or curly braces "{" and "}" might be part of non-translatable strings like math expressions. Provided warnings helps to manually check the strings.

  5. extractions (array): This configuration defines the types of extractions (And relevant replacement) that HtmlStringsAffixer will perform. It's an array that can include different extraction types, such as:

    • "text": Extracts plain text from HTML or other templates.
    • "placeholder": Specifically targets placeholder attributes in input elements.
    • "alt": Extracts the alt text from image tags.
    • "title": Targets the title attributes in HTML tags.
    • "hashtag": Extracts strings that are marked with a hashtag, which is often used for specific labeling or marking of elements.
// The configurations set as default
const affixer = new HtmlStringsAffixer({
  prefix: "{{ __('", // Prefix to add before string
  suffix: "') }}", // Suffix to add after string
  // If one of these characters included in string, it will not be catched at all
  ignore: ["#", "_", ">", "^", "*", "="],
  // If on of these characters included in string, it will not replace but add in warning to manual checking
  warnings: ["%", "{", "(", "}", ")", "$", "'"],
  // All extraction types: regular html texts; placeholder, alt and title attribute values; Strings marked with "#" character in begining
  extractions: ["text", "placeholder", "alt", "title", "hashtag"],
});

Usage

Basic usage example:

import HtmlStringsAffixer from "hsa-js";

// Example of using HtmlStringsAffixer in a Laravel Blade template
const bladeTemplateContent = `
    <div>
        <h1>Welcome to our website</h1>
        <p>{{stayEnjoyment}}</p>
        <a href="/contact">Contact us</a>
    </div>
`;

const affixer = new HtmlStringsAffixer({
  prefix: "{{ __('", // Prefix to add before string
  suffix: "') }}", // Suffix to add after string
  extractions: [
    "text", // Since we have only texts
  ],
});
const localizedContent = affixer.affixIt(bladeTemplateContent);
console.log(localizedContent);

Check the other usage examples:

Usage via CDN and HTML:

<script src="https://unpkg.com/hsa-js/dist/hsa.js"></script>

<script>
  // Example of using HtmlStringsAffixer in html
  const bladeTemplateContent = `
            <div>
                <h1>Welcome to our website</h1>
                <p>{{stayEnjoyment}}</p>
                <a href="/contact">Contact us</a>
            </div>
        `;

  // Init from hsaJs module
  const affixer = new window.hsaJs.default({
    prefix: "{{ __('",
    suffix: "') }}",
    extractions: ["text"],
  });

  // Run affixIt method using template string as argument
  const localizedContent = affixer.affixIt(bladeTemplateContent);

  // Log replaced content
  console.log(localizedContent);
</script>

html-examples

Hashtag extraction

If you need to replace only specific strings, just mark them with "#" and use "hashtag" extraction

import HtmlStringsAffixer from "hsa-js";

// Example of using HtmlStringsAffixer in a Laravel Blade template
const bladeTemplateContent = `
    <div>
        <h1>#Welcome to our website</h1>
        <a href="/contact">Contact us</a>
    </div>
`;

const affixer = new HtmlStringsAffixer({
  prefix: "{{ __('", // Prefix to add before string
  suffix: "') }}", // Suffix to add after string
  extractions: [
    "hashtag", // only strings starting with "#" wil be replaced
  ],
});
const localizedContent = affixer.affixIt(bladeTemplateContent);
console.log(localizedContent);

Contributing to hsa-js

We welcome contributions from the community and are delighted that you're interested in helping improve HtmlStringsAffixer! Whether you want to report a bug, request a feature, or contribute directly to the codebase, here's how you can get involved:

Reporting Bugs

If you encounter a bug while using HtmlStringsAffixer, we encourage you to report it. This helps us maintain the quality and reliability of the package. To report a bug:

  1. Visit the Issues section of the HtmlStringsAffixer GitHub repository.
  2. Before creating a new issue, please check if the bug has already been reported by another user. If so, you can add additional information to the existing report.
  3. If your issue is new, click on New Issue and select Bug Report.
  4. Fill in the issue template with as much detail as possible. Include steps to reproduce the bug, any error messages, and the environment (like the operating system and Node.js version) where the bug occurred.
  5. Submit the issue.

Requesting Features

Your ideas for new features are always welcome. To request a feature:

  1. Go to the Issues section of the HtmlStringsAffixer GitHub repository.
  2. Check if someone else has already requested a similar feature. If so, feel free to add your thoughts or additional suggestions to that request.
  3. If your feature request is unique, click on New Issue and select Feature Request.
  4. Describe the feature you'd like to see, explaining how it would work and why it would be a beneficial addition to HtmlStringsAffixer.
  5. Submit the feature request.

Contributing Code

Contributing directly to the codebase is a great way to help improve HtmlStringsAffixer. Here's how to get started:

  1. Fork the Repository: Navigate to the HtmlStringsAffixer GitHub page and fork the repository to your own GitHub account.
  2. Clone Your Fork: Clone your forked repository to your local machine.
  3. Create a New Branch: Always create a new branch for your work. This keeps your changes organized and separate from the main codebase.
  4. Make Your Changes: Implement your bug fix or feature.
  5. Test Your Changes: Ensure your changes don't break existing functionality and that they align with the overall design and coding style of the project.
  6. Commit Your Changes: Make concise and clear commit messages that explain your changes.
  7. Submit a Pull Request: Push your changes to your fork and submit a pull request to the original repository. In your pull request, provide a clear description of the problem and your solution.
  8. Code Review: Maintainers of the repository will review your code. Be open to feedback and any required changes.

Stay Involved

Your contributions, whether they're bug reports, feature requests, or code, play a significant role in the development of HtmlStringsAffixer. Together, we can build a tool that's more powerful, efficient, and user-friendly. Thank you for your support and involvement!

Support

Support Our Work? 🌟 You can help us keep the code flowing by making a small donation. Every bit of support goes a long way in maintaining and improving our open-source contributions. Click the button below to contribute. Thank you for your generosity!

<img src="https://github.com/MaestroError/resources/blob/maestro/buymeamilk/green-2.png" width="300px">

Or use QR code:

<img src="https://github.com/MaestroError/resources/blob/maestro/buymeamilk/qr-code.png" width="120px">

Known issues

To Do: