Smart way to manage IDs for frontend Javascript and Typescript projects.
- 📖 Table of Contents
- ☀️ Introduction
- 🔥 Features
- 🚀 Getting Started
- 💻 Command-line
- 🌈 Use Cases
- 🙏 Contributing
- ❤️ Contributors
- 🛡️ License
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.
- ⚔️ 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
We recommend installing ElementID as a dev dependency
npm i -D elementidDeclare 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"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.
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}`);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
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>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.
ElementID is MIT licensed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent