ElementID

Smart way to manage IDs for frontend Javascript and Typescript projects.

Table of Contents

• 📖 Table of Contents
• ☀️ Introduction
• 🔥 Features
• 🚀 Getting Started
  • Installation
  • Create TOML file
  • Generate IDs
  • Implement IDs
• 💻 Command-line
• 🌈 Use Cases
  • Astro
• 🙏 Contributing
• ❤️ Contributors
• 🛡️ License

Introduction

ElementID is an ID management tool for your frontend Nodejs (Javascript or Typescript) projects. You can share ID values between different modules using ElementID without any conflict. ElementID is a dev dependency. It provides unique or custom values to your production build according to the input IDs. ElementID has a caching system that helps to make ID values static.

Features

• ⚔️ No ID conflicts
• 🎉 Zero dependencies in production
• 📈 Increase your productivity
• 💪 Generate unique IDs with the powerful nanoid generator
• 👀 Auto generate with watch mode
• 💽 Cache static unique values
• 💻 Powerful CLI tool
• 📜 Simple input configuration with .toml

Getting Started

Installation

We recommend installing ElementID as a dev dependency

npm i -D elementid

Create TOML file

Declare your project IDs in .toml format. We recommend the Even Better TOML extension for VS Code users to create the .toml file.

The ElementID can generate two types of ID values.

• Unique values - To generate a unique value for your declared ID, set the value in your toml file to an empty string ("").

yellowBtnId = ""
redBtnId = ""

• Custom values - Provide any custom ID values as usual.

greenBtnId = "my_custom_value_1"
blueBtnId = "my_custom_value_2"

Generate IDs

The ElementID has a powerful CLI tool for generating IDs according to your input. If your input file path is ./my_ids.toml, you can use the following command to generate IDs.

elementid ./my_ids.toml

Please read the command line section for more CLI options.

Implement IDs

The ElementID generates Javascript(.js) and type declaration(.d.ts) files in the node_modeules/elementid/dist/ directory.

Usage example:

// ES6 syntax
import { yellowBtnId, redBtnId, greenBtnId } from "elementid";

const yellowBtn = document.getElementById(yellowBtnId);
const redBtn = document.querySelector(`#${greenBtnId}`);

// CommonJS syntax
const ids = require("elementid");

const yellowBtn = document.getElementById(ids.blueBtnId);
const redBtn = document.querySelector(`#${ids.redBtnId}`);

Command-line

Usage: elementid <input file> [options]

Options:
  -w, --watch       Watch changes of input file                            [boolean]
  -f, --force       Generate unique IDs without caching                   [boolean]
  -l, --length      Specify length of generated unique IDs
                    (default = 8, options = 5, 6, 7, 8, 9, 10)              [number]
  --version         Show version number                                    [boolean]
  -h, --help        Show help                                              [boolean]

Examples:
  elementid ids.js                      Default usage without additional options
  elementid ids.js --length=7           Sets the length of generated IDs to 7
  elementid src/my_ids.js --watch       Uses the watch option

Use Cases

Astro

Astro is a static site generator. Astro has its own component to build a static site. There are four sections to generate HTML, CSS, and Javascript. Read more about Astro components.

• HTML content helper
• HTML content
• Scripts
• Styles

Making a dynamic web page with Astro requires access to the DOM elements. The function getElementById() is a popular method to get access to the DOM elements from Javascript. However, Astro does not allow the same ID to be used in both the HTML content and Script sections.

While hardcoding ID values is an option, this strategy presents an increased opportunity for developer error and conflicts.

ElementID helps you to solve this problem. You can access the same ID values with ElementID in the HTML content helper section and Script sections. Check out the following example for how to use ElementID in Astro.

---
import { myBtnId } from "elementid";
---

<div>
    <button id={myBtnId}>Click ME!</button>
</div>

<script>
    import { myBtnId } from "elementid";

    myBtn = document.getElementById(myBtnId);
    myBtn.addeventlistener("click",()=>{
        console.log("click my button");
    });
</script>

Contributing

If you want to open an issue, create a Pull Request, or simply want to know how you can run it on your local machine, please read the Contributing Guide.

Contributors

License

ElementID is MIT licensed.