{"id":26690778,"url":"https://github.com/substack/hyperx","last_synced_at":"2025-03-26T16:01:03.634Z","repository":{"id":43642944,"uuid":"48908942","full_name":"choojs/hyperx","owner":"choojs","description":"🏷 - tagged template string virtual dom builder","archived":false,"fork":false,"pushed_at":"2023-11-02T17:52:22.000Z","size":120,"stargazers_count":1010,"open_issues_count":15,"forks_count":48,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-10-29T15:28:49.447Z","etag":null,"topics":["dom","html","template-strings","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/choojs.png","metadata":{"files":{"readme":"readme.markdown","changelog":null,"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}},"created_at":"2016-01-02T12:23:01.000Z","updated_at":"2024-09-25T08:39:46.000Z","dependencies_parsed_at":"2024-01-14T06:19:59.287Z","dependency_job_id":"35adac15-9591-440e-a016-1c8babaf0962","html_url":"https://github.com/choojs/hyperx","commit_stats":{"total_commits":129,"total_committers":25,"mean_commits":5.16,"dds":"0.39534883720930236","last_synced_commit":"c397ca98eff61c6a1ac67aedc9c9b00ee836a089"},"previous_names":["substack/hyperx"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fhyperx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fhyperx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fhyperx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fhyperx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/choojs","download_url":"https://codeload.github.com/choojs/hyperx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245689494,"owners_count":20656416,"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","html","template-strings","virtual-dom"],"created_at":"2025-03-26T16:00:38.076Z","updated_at":"2025-03-26T16:01:03.627Z","avatar_url":"https://github.com/choojs.png","language":"JavaScript","readme":"# hyperx\n\n![tests](https://github.com/choojs/hyperx/actions/workflows/main.yml/badge.svg)\n\ntagged template string virtual dom builder\n\nThis module is similar to JSX, but provided as a standards-compliant ES6 tagged\ntemplate string function.\n\nhyperx works with [virtual-dom](https://npmjs.com/package/virtual-dom),\n[react](https://npmjs.com/package/react),\n[hyperscript](https://npmjs.com/package/hyperscript), or any DOM builder with a\nhyperscript-style API: `h(tagName, attrs, children)`.\n\nYou might also want to check out the [hyperxify][2] browserify transform to\nstatically compile hyperx into javascript expressions to save sending the hyperx\nparser down the wire.\n\n[2]: https://npmjs.com/package/hyperxify\n\n# compatibility\n\n[Template strings][1] are available in:\nnode 4+, chrome 41, firefox 34, edge, opera 28, safari 9\n\nIf you're targeting these platforms, there's no need to use a transpiler!\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings\n\n# examples\n\n## virtual-dom node example\n\n``` js\nvar vdom = require('virtual-dom')\nvar hyperx = require('hyperx')\nvar hx = hyperx(vdom.h)\n\nvar title = 'world'\nvar wow = [1,2,3]\nvar tree = hx`\u003cdiv\u003e\n  \u003ch1 y=\"ab${1+2}cd\"\u003ehello ${title}!\u003c/h1\u003e\n  ${hx`\u003ci\u003ecool\u003c/i\u003e`}\n  wow\n  ${wow.map(function (w, i) {\n    return hx`\u003cb\u003e${w}\u003c/b\u003e\\n`\n  })}\n\u003c/div\u003e`\nconsole.log(vdom.create(tree).toString())\n```\n\noutput:\n\n```\n$ node vdom.js\n\u003cdiv\u003e\n  \u003ch1 y=\"ab3cd\"\u003ehello world!\u003c/h1\u003e\n  \u003ci\u003ecool\u003c/i\u003e\n  wow\n  \u003cb\u003e1\u003c/b\u003e\u003cb\u003e2\u003c/b\u003e\u003cb\u003e3\u003c/b\u003e\n\u003c/div\u003e\n```\n\n## react node example\n\n``` js\nvar React = require('react')\nvar toString = require('react-dom/server').renderToString\nvar hyperx = require('hyperx')\nvar hx = hyperx(function createElement (component, properties, children) {\n  // Pass children as separate arguments to avoid key warnings\n  return React.createElement.apply(null, [component, properties].concat(children))\n}, {\n  createFragment: function createFragment (children) {\n    return React.createElement.apply(null, [React.Fragment, {}].concat(children))\n  }\n})\n\nvar title = 'world'\nvar wow = [1,2,3]\nvar frag = hx`\n  \u003ctr\u003e \u003ctd\u003erow1\u003c/td\u003e \u003c/tr\u003e\n  \u003ctr\u003e \u003ctd\u003erow2\u003c/td\u003e \u003c/tr\u003e\n`\nvar tree = hx`\u003cdiv\u003e\n  \u003ch1 y=\"ab${1+2}cd\"\u003ehello ${title}!\u003c/h1\u003e\n  ${hx`\u003ci\u003ecool\u003c/i\u003e`}\n  wow\n  ${wow.map(function (w, i) {\n    return hx`\u003cb\u003e${w}\u003c/b\u003e\\n`\n  })}\n\n  \u003ctable\u003e${frag}\u003c/table\u003e\n\u003c/div\u003e`\nconsole.log(toString(tree))\n```\n\n## hyperscript node example\n\n``` js\nvar h = require('hyperscript')\nvar hyperx = require('hyperx')\nvar hx = hyperx(h)\n\nvar title = 'world'\nvar wow = [1,2,3]\nvar tree = hx`\u003cdiv\u003e\n  \u003ch1 data-y=\"ab${1+2}cd\"\u003ehello ${title}!\u003c/h1\u003e\n  ${hx`\u003ci\u003ecool\u003c/i\u003e`}\n  wow\n  ${wow.map(function (w) {\n    return hx`\u003cb\u003e${w}\u003c/b\u003e\\n`\n  })}\n\u003c/div\u003e`\nconsole.log(tree.outerHTML)\n```\n\n## virtual-dom/main-loop browser example\n\n``` js\nvar vdom = require('virtual-dom')\nvar hyperx = require('hyperx')\nvar hx = hyperx(vdom.h)\n\nvar main = require('main-loop')\nvar loop = main({ times: 0 }, render, vdom)\ndocument.querySelector('#content').appendChild(loop.target)\n\nfunction render (state) {\n  return hx`\u003cdiv\u003e\n    \u003ch1\u003eclicked ${state.times} times\u003c/h1\u003e\n    \u003cbutton onclick=${onclick}\u003eclick me!\u003c/button\u003e\n  \u003c/div\u003e`\n\n  function onclick () {\n    loop.update({ times: state.times + 1 })\n  }\n}\n```\n\n## react browser example\n\n``` js\nvar React = require('react')\nvar render = require('react-dom').render\nvar hyperx = require('hyperx')\nvar hx = hyperx(React.createElement)\n\nvar App = React.createClass({\n  getInitialState: function () { return { n: 0 } },\n  render: function () {\n    return hx`\u003cdiv\u003e\n      \u003ch1\u003eclicked ${this.state.n} times\u003c/h1\u003e\n      \u003cbutton onClick=${this.handleClick}\u003eclick me!\u003c/button\u003e\n    \u003c/div\u003e`\n  },\n  handleClick: function () {\n    this.setState({ n: this.state.n + 1 })\n  }\n})\nrender(React.createElement(App), document.querySelector('#content'))\n```\n\n## console.log example\n\n``` js\nvar hyperx = require('hyperx')\n\nvar convertTaggedTemplateOutputToDomBuilder = hyperx(function (tagName, attrs, children) {\n  console.log(tagName, attrs, children)\n})\n\nconvertTaggedTemplateOutputToDomBuilder`\u003ch1\u003ehello world\u003c/h1\u003e`\n\n// Running this produces: h1 {} [ 'hello world' ]\n```\n\n\n# api\n\n```\nvar hyperx = require('hyperx')\n```\n\n## var hx = hyperx(h, opts={})\n\nReturn a tagged template function `hx` from a hyperscript-style factory function\n`h`.\n\nValues to use for `h`:\n\n* virtual-dom - `vdom.h`\n* react - `React.createElement` with parameter `children` spread \n* hyperscript - hyperscript\n\nOptionally provide:\n\n* `opts.concat(a, b)` - custom concatenation function to combine quasiliteral\nstrings with expressions. The `h` factory function will receive the objects\nreturned by the concatenation function and can make specific use of them. This\nis useful if you want to implement a pre-processor to generate javascript from\nhyperx syntax.\n* `opts.attrToProp` - turn off attribute to property conversions when `false`\n* `opts.createFragment` - if your template string has multiple root elements, they\nwill be provided as an array to this function. the return value will then be returned\nby the template literal\n\n# prior art\n\n* http://www.2ality.com/2014/07/jsx-template-strings.html?m=1\n* http://facebook.github.io/jsx/#why-not-template-literals (respectfully disagree)\n\n# license\n\nBSD\n\n# install\n\n```\nnpm install hyperx\n```\n","funding_links":[],"categories":["Uncategorized","JavaScript","Code Design","Element Creation","Dependencies","Modules"],"sub_categories":["Uncategorized","HTML Template","Building virtual-hyperscript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstack%2Fhyperx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstack%2Fhyperx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstack%2Fhyperx/lists"}