{"id":18751161,"url":"https://github.com/appzic/elementid","last_synced_at":"2026-02-02T23:04:15.408Z","repository":{"id":64911791,"uuid":"579021496","full_name":"appzic/elementid","owner":"appzic","description":"Smart way to manage IDs for frontend Javascript and Typescript projects.","archived":false,"fork":false,"pushed_at":"2023-04-18T09:16:13.000Z","size":294,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-25T07:58:59.510Z","etag":null,"topics":["cli","command-line","command-line-tool","devdependency","frontend","frontend-web","id-management","javascript","nanoid","toml","typescript","watch","zero-dependency"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appzic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-12-16T13:14:10.000Z","updated_at":"2023-01-31T22:12:38.000Z","dependencies_parsed_at":"2025-06-23T05:36:13.465Z","dependency_job_id":"5305c813-8bee-4de8-a809-ca45e3997145","html_url":"https://github.com/appzic/elementid","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/appzic/elementid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appzic%2Felementid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appzic%2Felementid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appzic%2Felementid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appzic%2Felementid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appzic","download_url":"https://codeload.github.com/appzic/elementid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appzic%2Felementid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29022774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T22:20:39.141Z","status":"ssl_error","status_checked_at":"2026-02-02T22:20:37.621Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","command-line","command-line-tool","devdependency","frontend","frontend-web","id-management","javascript","nanoid","toml","typescript","watch","zero-dependency"],"created_at":"2024-11-07T17:14:42.838Z","updated_at":"2026-02-02T23:04:15.376Z","avatar_url":"https://github.com/appzic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"elementid-logo\" src=\"./logo/elementid_logo.jpg\"/\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eElementID\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n    \u003cb\u003eSmart way to manage IDs for frontend Javascript and Typescript projects.\u003c/b\u003e\n\u003c/p\u003e\n\u003cp align=\"center\" style=\"align: center;\"\u003e\n    \u003ca href=\"https://github.com/appzic/elementid/blob/main/.github/workflows/main.yml\"\u003e\n        \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/appzic/elementid/main.yml\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/elementid\"\u003e\n        \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/elementid\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/elementid\"\u003e\n        \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dw/elementid\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/appzic/elementid/blob/main/LICENSE\"\u003e\n        \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/appzic/elementid\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [📖 Table of Contents](#-table-of-contents)\n- [☀️ Introduction](#️-introduction)\n- [🔥 Features](#-features)\n- [🚀 Getting Started](#-getting-started)\n  - [Installation](#installation)\n  - [Create TOML file](#create-toml-file)\n  - [Generate IDs](#generate-ids)\n  - [Implement IDs](#implement-ids)\n- [💻 Command-line](#-command-line)\n- [🌈 Use Cases](#-use-cases)\n  - [Astro](#astro)\n- [🙏 Contributing](#-contributing)\n- [❤️ Contributors](#️-contributors)\n- [🛡️ License](#️-license)\n\n## Introduction\n\nElementID 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.\n\n## Features\n\n- :crossed_swords: No ID conflicts\n- :tada: Zero dependencies in production\n- :chart_with_upwards_trend: Increase your productivity\n- :muscle: Generate unique IDs with the powerful [nanoid](https://github.com/ai/nanoid) generator\n- :eyes: Auto generate with watch mode\n- :minidisc: Cache static unique values\n- :computer: Powerful CLI tool\n- :scroll: Simple input configuration with .toml\n\n## Getting Started\n\n### Installation\n\nWe recommend installing ElementID as a dev dependency\n\n```bash\nnpm i -D elementid\n```\n\n### Create TOML file\n\nDeclare your project IDs in `.toml` format. We recommend the [Even Better TOML extension](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) for VS Code users to create the .toml file.\n\nThe **ElementID** can generate two types of ID values.\n\n- **Unique values** - To generate a unique value for your declared ID, set the value in your toml file to an empty string (\"\").\n\n```toml\nyellowBtnId = \"\"\nredBtnId = \"\"\n```\n\n- **Custom values** - Provide any custom ID values as usual.\n\n```toml\ngreenBtnId = \"my_custom_value_1\"\nblueBtnId = \"my_custom_value_2\"\n```\n\n### Generate IDs\n\nThe 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.\n\n```\nelementid ./my_ids.toml\n```\n\nPlease read the [command line section](#command-line) for more CLI options.\n\n### Implement IDs\n\nThe ElementID generates Javascript(.js) and type declaration(.d.ts) files in the `node_modeules/elementid/dist/` directory.\n\nUsage example:\n\n```Typescript\n// ES6 syntax\nimport { yellowBtnId, redBtnId, greenBtnId } from \"elementid\";\n\nconst yellowBtn = document.getElementById(yellowBtnId);\nconst redBtn = document.querySelector(`#${greenBtnId}`);\n```\n\n```Javascript\n// CommonJS syntax\nconst ids = require(\"elementid\");\n\nconst yellowBtn = document.getElementById(ids.blueBtnId);\nconst redBtn = document.querySelector(`#${ids.redBtnId}`);\n```\n\n## Command-line\n\n```\nUsage: elementid \u003cinput file\u003e [options]\n\nOptions:\n  -w, --watch       Watch changes of input file                            [boolean]\n  -f, --force       Generate unique IDs without caching                   [boolean]\n  -l, --length      Specify length of generated unique IDs\n                    (default = 8, options = 5, 6, 7, 8, 9, 10)              [number]\n  --version         Show version number                                    [boolean]\n  -h, --help        Show help                                              [boolean]\n\nExamples:\n  elementid ids.js                      Default usage without additional options\n  elementid ids.js --length=7           Sets the length of generated IDs to 7\n  elementid src/my_ids.js --watch       Uses the watch option\n```\n\n## Use Cases\n\n### Astro\n\n[Astro](https://astro.build/) 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](https://docs.astro.build/en/core-concepts/astro-components/).\n\n- HTML content helper\n- HTML content\n- Scripts\n- Styles\n\nMaking a dynamic web page with Astro requires access to the DOM elements. The function [getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/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.\n\nWhile hardcoding ID values is an option, this strategy presents an increased opportunity for developer error and conflicts.\n\nElementID 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](https://astro.build/).\n\n```astro\n---\nimport { myBtnId } from \"elementid\";\n---\n\n\u003cdiv\u003e\n    \u003cbutton id={myBtnId}\u003eClick ME!\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n    import { myBtnId } from \"elementid\";\n\n    myBtn = document.getElementById(myBtnId);\n    myBtn.addeventlistener(\"click\",()=\u003e{\n        console.log(\"click my button\");\n    });\n\u003c/script\u003e\n```\n\n## Contributing\n\nIf 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](https://github.com/appzic/elementid/blob/main/CONTRIBUTING.md).\n\n## Contributors\n\n\u003ca href=\"https://github.com/appzic/elementid/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=appzic/elementid\" /\u003e\n\u003c/a\u003e\n\n## License\n\nElementID is [MIT](https://github.com/appzic/elementid/blob/main/LICENSE) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappzic%2Felementid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappzic%2Felementid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappzic%2Felementid/lists"}