{"id":13623339,"url":"https://github.com/ungoldman/hyperaxe","last_synced_at":"2025-04-10T01:09:41.241Z","repository":{"id":29482743,"uuid":"121815429","full_name":"ungoldman/hyperaxe","owner":"ungoldman","description":"🪓 An enchanted hyperscript weapon.","archived":false,"fork":false,"pushed_at":"2024-05-01T13:59:37.000Z","size":65,"stargazers_count":117,"open_issues_count":2,"forks_count":13,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-10T01:09:37.667Z","etag":null,"topics":["dom","hyperscript","javascript","node"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ungoldman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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,"publiccode":null,"codemeta":null}},"created_at":"2018-02-17T00:31:13.000Z","updated_at":"2024-10-21T06:36:08.000Z","dependencies_parsed_at":"2022-07-27T19:18:18.336Z","dependency_job_id":"92ddee28-e937-4168-b0fb-4ac2ab00a401","html_url":"https://github.com/ungoldman/hyperaxe","commit_stats":{"total_commits":51,"total_committers":4,"mean_commits":12.75,"dds":0.0980392156862745,"last_synced_commit":"8126eaca75dbaf54dd62ce99bc57eaef4fafc29d"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ungoldman%2Fhyperaxe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ungoldman%2Fhyperaxe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ungoldman%2Fhyperaxe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ungoldman%2Fhyperaxe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ungoldman","download_url":"https://codeload.github.com/ungoldman/hyperaxe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137886,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["dom","hyperscript","javascript","node"],"created_at":"2024-08-01T21:01:30.576Z","updated_at":"2025-04-10T01:09:41.222Z","avatar_url":"https://github.com/ungoldman.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"./axe.png\" alt=\"HyperAxe\" width=\"200\"\u003e\n\n# HyperAxe\n\nAn enchanted [hyperscript](https://github.com/hyperhype/hyperscript) weapon.\n\n[![npm][npm-image]][npm-url]\n[![build][build-image]][build-url]\n[![downloads][downloads-image]][npm-url]\n\n[npm-image]: https://img.shields.io/npm/v/hyperaxe.svg\n[npm-url]: https://www.npmjs.com/package/hyperaxe\n[build-image]: https://github.com/ungoldman/hyperaxe/actions/workflows/tests.yml/badge.svg\n[build-url]: https://github.com/ungoldman/hyperaxe/actions/workflows/tests.yml\n[downloads-image]: https://img.shields.io/npm/dm/hyperaxe.svg\n\n\u003c/div\u003e\n\n```sh\nnpm install hyperaxe\n```\n\n```js\nconst { body, h1 } = require('hyperaxe')\n\nbody(\n  h1('hello world')\n)\n// =\u003e \u003cbody\u003e\u003ch1\u003ehello world\u003c/h1\u003e\u003c/body\u003e\n```\n\n## Usage\n\nExports all [HTML tags](https://ghub.io/html-tags).\n\n```js\nconst { a, img, video } = require('hyperaxe')\n\na({ href: '#' }, 'click')\n// \u003ca href=\"#\"\u003eclick\u003c/a\u003e\n\nimg({ src: 'cats.gif', alt: 'lolcats' })\n// \u003cimg src=\"cats.gif\" alt=\"lolcats\"\u003e\n\nvideo({ src: 'dogs.mp4', autoplay: true })\n// \u003cvideo src=\"dogs.mp4\" autoplay=\"true\"\u003e\u003c/video\u003e\n```\n\nDefault export accepts a tag and returns an element factory.\n\n```js\nconst x = require('hyperaxe')\nconst p = x('p')\n\np('over 9000')\n// \u003cp\u003eover 9000\u003c/p\u003e\n```\n\nCSS shorthand works too.\n\n```js\nconst x = require('hyperaxe')\nconst horse = x('.horse.with-hands')\n\nhorse('neigh')\n// \u003cdiv class=\"horse with-hands\"\u003eneigh\u003c/div\u003e\n```\n\nMakes creating custom components easy.\n\n```js\nconst x = require('hyperaxe')\n\nconst siteNav = (...links) =\u003e x('nav.site')(\n  links.map(link =\u003e\n    x('a.link')({ href: link.href }, link.text)\n  )\n)\n\nx.body(\n  siteNav(\n    { href: '#apps', text: 'apps' },\n    { href: '#games', text: 'games' }\n  )\n)\n// \u003cbody\u003e\n//   \u003cnav class=\"site\"\u003e\n//     \u003ca class=\"link\" href=\"#apps\"\u003eapps\u003c/a\u003e\n//     \u003ca class=\"link\" href=\"#games\"\u003egames\u003c/a\u003e\n//   \u003c/nav\u003e\n// \u003c/body\u003e\n```\n\n## Example\n\nHere's a counter increment example using [`nanochoo`](https://github.com/heyitsmeuralex/nanochoo):\n\n```js\nconst { body, button, h1 } = require('hyperaxe')\nconst nano = require('nanochoo')\n\nconst app = nano()\n\napp.use(store)\napp.view(view)\napp.mount('body')\n\nfunction view (state, emit) {\n  return body(\n    h1(`count is ${state.count}`),\n    button({ onclick }, 'Increment')\n  )\n\n  function onclick () {\n    emit('increment', 1)\n  }\n}\n\nfunction store (state, emitter) {\n  state.count = 0\n\n  emitter.on('increment', function (count) {\n    state.count += count\n    emitter.emit('render')\n  })\n}\n```\n\n## API\n\n### `hyperaxe`\n\n```js\nhyperaxe(tag) =\u003e ([props], [...children]) =\u003e HTMLElement\n```\n\n- `tag` _string_ - valid HTML tag name or CSS shorthand (required)\n- `props` _object_ - HTML attributes (optional)\n- `children` _node, string, number, array_ - child nodes or primitives (optional)\n\nReturns a function that creates HTML elements.\n\nThe factory is [variadic](https://en.wikipedia.org/wiki/Variadic_function), so any number of children are accepted.\n\n```js\nx('.variadic')(\n  x('h1')('hi'),\n  x('h2')('hello'),\n  x('h3')('hey'),\n  x('h4')('howdy')\n)\n```\n\nArrays of children also work.\n\n```js\nconst kids = [\n  x('p')('Once upon a time,'),\n  x('p')('there was a variadic function,'),\n  x('p')('that also accepted arrays.')\n]\n\nx('.arrays')(kids)\n```\n\nIn a browser context, the object returned by the factory is an [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) object. In a server (node) context, the object returned is an instance of [`html-element`](https://github.com/1N50MN14/html-element). In both contexts, the stringified HTML is accessible via the [`outerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML) attribute.\n\n### `hyperaxe[tag]`\n\nAll [HTML tags](https://ghub.io/html-tags) are attached to `hyperaxe` as keys.\n\nThey return the same function as described above, with the `tag` argument prefilled.\n\nThink of it as a kind of [partial application](https://en.wikipedia.org/wiki/Partial_application).\n\nThe main motivation for doing this is convenience.\n\n```js\nconst { p } = require('hyperaxe')\n\np('this is convenient')\n```\n\nYou can pass raw HTML by setting the `innerHTML` property of an element.\n\n```javascript\nconst { div } = require('hyperaxe')\n\ndiv({ innerHTML: '\u003cp\u003eRaw HTML!' })\n```\n\n### `hyperaxe.createFactory(h)`\n\nCreates a `hyperaxe` element factory for a given hyperscript implementation (`h`).\n\nIf you use another implementation than `hyperscript` proper, you can exclude that dependency by using `require('hyperaxe/factory')`. For the time being, no other implementations are tested though, so wield at your own peril!\n\n### `hyperaxe.getFactory(h)`\n\nSame as `createFactory`, except it only creates a new factory on the first call and returns a cached version after that.\n\n## Enchantments\n\n- Summons DOM nodes.\n- +1 vs. virtual DOM nodes.\n- Grants [Haste](http://engl393-dnd5th.wikia.com/wiki/Haste).\n\n## Dependencies\n\n- [html-tags](https://ghub.io/html-tags): List of standard HTML tags.\n- [hyperscript](https://ghub.io/hyperscript): Create HyperText with JavaScript, on client or server.\n\n## Dev Dependencies\n\n- [standard](https://ghub.io/standard): JavaScript Standard Style.\n- [standard-version](https://ghub.io/standard-version): Replacement for `npm version` with automatic CHANGELOG generation.\n- [tape](https://ghub.io/tape): tap-producing test harness for node and browsers.\n\n## See Also\n\nThis library's approach and API are heavily inspired by [reaxe](https://github.com/jxnblk/reaxe).\n\n## Contributing\n\nContributors welcome! Please read the [contributing guidelines](CONTRIBUTING.md) before getting started.\n\n## License\n\n[ISC](LICENSE.md)\n\nAxe image is from [emojidex](https://emojidex.com/emoji/axe).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fungoldman%2Fhyperaxe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fungoldman%2Fhyperaxe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fungoldman%2Fhyperaxe/lists"}