{"id":15753602,"url":"https://github.com/mcaskill/js-html-build-attributes","last_synced_at":"2026-04-29T17:37:45.659Z","repository":{"id":65189555,"uuid":"366906459","full_name":"mcaskill/js-html-build-attributes","owner":"mcaskill","description":"Generate a string of HTML attributes.","archived":false,"fork":false,"pushed_at":"2024-02-15T03:16:31.000Z","size":362,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-29T17:12:51.024Z","etag":null,"topics":["html","javascript","typescript","utility","utility-functions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mcaskill.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-05-13T02:03:25.000Z","updated_at":"2023-07-25T14:46:03.000Z","dependencies_parsed_at":"2024-02-15T04:24:48.162Z","dependency_job_id":null,"html_url":"https://github.com/mcaskill/js-html-build-attributes","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/mcaskill/js-html-build-attributes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcaskill%2Fjs-html-build-attributes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcaskill%2Fjs-html-build-attributes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcaskill%2Fjs-html-build-attributes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcaskill%2Fjs-html-build-attributes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcaskill","download_url":"https://codeload.github.com/mcaskill/js-html-build-attributes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcaskill%2Fjs-html-build-attributes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32437105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T17:34:55.123Z","status":"ssl_error","status_checked_at":"2026-04-29T17:34:45.749Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["html","javascript","typescript","utility","utility-functions"],"created_at":"2024-10-04T07:41:24.397Z","updated_at":"2026-04-29T17:37:45.641Z","avatar_url":"https://github.com/mcaskill.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML Build Attributes\n\n\u003e ES2018, TypeScript 5, Node 16\n\n---\n\nGenerate a string of HTML attributes.\n\n## Install\n\nUsing [NPM](https://www.npmjs.com/):\n\n```shell\nnpm install @mcaskill/html-build-attributes\n```\n\n## Upgrade\n\nThis package follows [semantic versioning](https://semver.org/),\nwhich means breaking changes may occur between major releases.\n\n## Usage\n\n\u003e Browse [`/examples`](/examples) for a list of demonstrations and enhancements.\n\nThe following example demonstrates the [default module](#default-module):\n\n```js\nimport {\n  composeAttribute,\n  composeAttributes,\n  escapeAttributeValue,\n  filterAttributeValue,\n} from '@mcaskill/html-build-attributes/default.js';\n\nconst inputAttrs = {\n  'type':           'file',\n  'name':           'avatar',\n  'multiple':       true,\n  'disabled':       false,\n  'accept':         [ 'image/png', 'image/jpeg' ],\n  'data-type':      null,\n  'data-max-files': 3,\n};\n\nconsole.log(`\u003cinput ${composeAttributes(inputAttrs)}\u003e`);\n// → \u003cinput type=\"file\" name=\"avatar\" multiple accept=\"image/png,image/jpeg\" data-max-files=\"3\"\u003e\n\nconst buttonAttrs = {\n  'type':              'button',\n  'id':                'ThemeLight',\n  'aria-labelledby':   [ 'ThemeLight', 'ThemeLbl' ],\n  'aria-pressed':      false,\n  'data-toggle-theme': true,\n};\n\nconsole.log(`\u003cbutton ${composeAttributes(buttonAttrs)}\u003eLight\u003c/button\u003e`);\n// → \u003cbutton type=\"button\" id=\"ThemeLight\" aria-labelledby=\"ThemeLight ThemeLbl\" aria-pressed=\"false\" data-toggle-theme\u003eLight\u003c/button\u003e\n\ncomposeAttributes({ class: [], disabled: false });\n// → null\n\ncomposeAttribute('class', 'avatar');\n// → class=\"avatar\"\n\ncomposeAttribute('aria-hidden', true);\n// → aria-hidden=\"true\"\n\ncomposeAttribute('required', true);\n// → required\n\ncomposeAttribute('required', false);\n// → null\n\nfilterAttributeValue({ id: 1, name: 'Tim' });\n// → {\"id\":1,\"name\":\"Tim\"}\n\nescapeAttributeValue('{\"id\":1,\"name\":\"Tim\"}');\n// → {\u0026quot;id\u0026quot;:1,\u0026quot;name\u0026quot;:\u0026quot;Tim\u0026quot;}\n```\n\n## API\n\n\u003e View [API documentation](/docs)\n\n### Default Module\n\n\u003e `@mcaskill/html-build-attributes/default.js`\n\nA preset instance of [`Composer`](/docs/api.attr.composer.md)\nis available ([featured above](#usage)). It's equiped with basic filters and\nescape of common HTML entities, which should cover most HTML tags.\n\n* **`composeAttribute(name: string, value: unknown): string|null`**\n\n  A reference to [`Composer#composeAttribute()`](/docs/api.attr.composer.md#htmlbuildattributescomposeattribute)\n  from which you can generate a string of one HTML attribute.\n\n* **`composeAttributes(attributes: object\u003cstring, unknown\u003e): string|null`**\n\n  A reference to [`Composer#composeAttributes()`](/docs/api.attr.composer.md#htmlbuildattributescomposeattributes)\n  from which you can generate a string of many HTML attributes.\n\n* **`escapeAttributeValue(value: string): string`**\n\n  A reference to [`Composer#escapeAttributeValue()`](/docs/api.attr.composer.md#htmlbuildattributesescapeattributevalue)\n  from which you can convert special characters to their corresponding HTML entities.\n\n* **`filterAttributeValue(value: unknown, name?: string): string|boolean|null`**\n\n  A reference to [`Composer#filterAttributeValue()`](/docs/api.attr.composer.md#htmlbuildattributesfilterattributevalue)\n  from which you can approve, reject, and parse a value for an HTML attribute.\n\n## Benchmarks\n\n\u003e Via the [`/benchmarks`](/benchmarks) directory with Node 16.15.1.\n\nBelow are results between the [current](/src) and [original](/examples/original-implementation)\nimplementations against a few simple use cases that cover most HTML attributes:\n\n```\n# Set #1\n  Original  x 1,327,189 ops/sec ±0.14% (94 runs sampled)\n  Current   x 995,463 ops/sec ±0.09% (98 runs sampled)\n\n# Set #2\n  Original  x 1,643,401 ops/sec ±0.08% (101 runs sampled)\n  Current   x 1,191,994 ops/sec ±0.13% (101 runs sampled)\n\n# Set #3\n  Original  x 947,281 ops/sec ±0.07% (101 runs sampled)\n  Current   x 924,929 ops/sec ±0.06% (98 runs sampled)\n```\n\n## Implementations in other languages\n\n* [mcaskill/php-html-build-attributes](https://github.com/mcaskill/php-html-build-attributes) — \n  A PHP implementation of this package.\n\n## Related\n\n* [`classnames`](https://github.com/JedWatson/classnames) — \n  A simple utility for conditionally joining CSS class names together.\n* [`clsx`](https://github.com/lukeed/clsx) —\n  A faster \u0026 smaller drop-in replacement for the `classnames` module.\n* [`he`](https://github.com/mathiasbynens/he) — \n  A robust HTML entity encoder/decoder.\n* [`lodash.escape`](https://lodash.com/docs/4.17.15#escape) — \n  A basic HTML entity encoder.\n* [`posthtml-attrs-parser`](https://github.com/posthtml/posthtml-attrs-parser) — \n  A PostHTML helper that provides an improved API to work with a tag's attributes.\n* [`fabianmichael/kirby-template-attributes`](https://github.com/fabianmichael/kirby-template-attributes) — \n  A PHP plugin for Kirby that provides a helper to compose attribute in templates.\n\n## See Also\n\n* [Ambiguous ampersands](https://mathiasbynens.be/notes/ambiguous-ampersands), \n  2011, by Mathias Bynens\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcaskill%2Fjs-html-build-attributes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcaskill%2Fjs-html-build-attributes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcaskill%2Fjs-html-build-attributes/lists"}