{"id":16838830,"url":"https://github.com/alexei/hashish-js","last_synced_at":"2025-04-11T05:20:52.020Z","repository":{"id":57096379,"uuid":"89086764","full_name":"alexei/hashish-js","owner":"alexei","description":"HyperScript template language for JavaScript","archived":false,"fork":false,"pushed_at":"2017-05-21T18:12:43.000Z","size":64,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T03:23:52.496Z","etag":null,"topics":["hyperscript","javascript","template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexei.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}},"created_at":"2017-04-22T17:20:34.000Z","updated_at":"2023-02-15T20:42:15.000Z","dependencies_parsed_at":"2022-08-22T21:41:12.860Z","dependency_job_id":null,"html_url":"https://github.com/alexei/hashish-js","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexei%2Fhashish-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexei%2Fhashish-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexei%2Fhashish-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexei%2Fhashish-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexei","download_url":"https://codeload.github.com/alexei/hashish-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247861399,"owners_count":21008493,"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":["hyperscript","javascript","template"],"created_at":"2024-10-13T12:26:39.705Z","updated_at":"2025-04-11T05:20:51.972Z","avatar_url":"https://github.com/alexei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hashish\n\nHyperScript template language for JavaScript.\n\n## Example\n\n    const hashish = require('@alexei/hashish')(document)\n    const h = hashish.createElement\n\n    h('form', {action: '/auth', method: 'post'}, [\n      h('.form-group', [\n        h('label', {'for': 'auth-email'}, \"Email address\"),\n        h(':email.form-control#auth-email', {placeholder: \"Email\"})\n      ]),\n      h('.form-group', [\n        h('label', {'for': 'auth-password'}, \"Password\"),\n        h(':password.form-control#auth-password', {placeholder: \"Password\"})\n      ]),\n      h('.checkbox', [\n        h('label', [h(':checkbox', {name: 'remember_me'}), \"Keep me logged in\"])\n      ]),\n      h(':submit.btn btn-default', {value: \"Log in\"})\n    ])\n\nYields:\n\n    \u003cform action=\"/auth\" method=\"post\"\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"auth-email\"\u003e\u003c/label\u003e\n        \u003cinput id=\"auth-email\" class=\"form-control\" type=\"email\" placeholder=\"Email\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel for=\"auth-password\"\u003e\u003c/label\u003e\n        \u003cinput id=\"auth-password\" class=\"form-control\" type=\"password\" placeholder=\"Password\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"checkbox\"\u003e\n        \u003clabel\u003e\u003cinput type=\"checkbox\" name=\"remember_me\"\u003eKeep me logged in\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cinput class=\"btn btn-default\" type=\"submit\" value=\"Log in\"\u003e\n    \u003c/form\u003e\n\nHashish should run in any environment where a DOM implementation is available. If you're on NodeJS, you might need a third party package like [tmpvar/jsdom](https://github.com/tmpvar/jsdom).\n\n## API\n\n### createElement(tag[, attrs[, children]])\n\nCreates and returns a new `HTMLElement`.\n\nThe `tag` argument specifies the tag name, a list of class names, an ID and possibly a type if one intends to create input tags. If left empty, it defaults to `div`.\n\n    h('')\n    =\u003e \u003cdiv\u003e\u003c/div\u003e\n\n    h('.foo.bar#baz')\n    =\u003e \u003cdiv class=\"foo bar\" id=\"baz\"\u003e\u003c/div\u003e\n\n    h(':email')\n    =\u003e \u003cinput type=\"email\"\u003e\n\nThe `attrs` argument allows one to specify a dictionary of attributes the resulting node should have:\n\n    h('form', {method: 'post'})\n    =\u003e \u003cform method=\"post\"\u003e\u003c/form\u003e\n\nAny value that evaluates to `false` will be omitted:\n\n    h(':checkbox', {checked: false})\n    =\u003e \u003cinput type=\"checkbox\"\u003e\n\nThe `children` argument represents an array of children that should be appended to the resulting node. See explanation on [children](#children) below.\n\n#### Selectors\n\nHashish supports tag (defaults to `div`), class and ID selectors.\n\nAdditionally, the following nonstandard pseudo-elements are supported: `:button`, `:checkbox`, `:color`, `:date`, `:datetime-local`, `:email`, `:file`, `:hidden`, `:image`, `:month`, `:number`, `:password`, `:radio`, `:range`, `:reset`, `:search`, `:submit`, `:tel`, `:text`, `:time`, `:url`, `:week`. Each results in an `input` tag with the appropriate `type` attribute. They are provided as syntactic sugar i.e. instead of:\n\n    h('input', {type: 'number'})\n\nOne would write:\n\n    h(':number')\n    =\u003e \u003cinput type=\"number\"\u003e\n\n#### Class names\n\nClass names can be specified alongside the `tag` name or in the `attrs` argument. The `class` (or `className`) attribute can either be string:\n\n    h('.foo', {class: 'bar baz'})\n    =\u003e \u003cdiv class=\"foo bar baz\"\u003e\u003c/div\u003e\n\nAn array:\n\n    var bazClass = 'baz'\n    h('div.foo', {class: ['bar', bazClass]})\n    =\u003e \u003cdiv class=\"foo bar baz\"\u003e\u003c/div\u003e\n\nOr an object:\n\n    var includeBaz = false\n    h('.foo.bar', {class: {baz: includeBaz})\n    =\u003e \u003cdiv class=\"foo bar\"\u003e\u003c/div\u003e\n\n#### Children\n\nA child can either be a string, an `HTMLElement`, or any other object that implements a `render` method and returns a value of a similar type:\n\n    class List {\n      constructor(list) {\n        this.list = list\n      }\n\n      render() {\n        return h('ol', this.list.map((item) =\u003e new Item(item)))\n      }\n    }\n\n    class Item {\n      constructor(item) {\n        this.item = item\n      }\n\n      render() {\n        return this.item ? h('li', [this.item]): false\n      }\n    }\n\n    h('.listing', [new List(['Alpha', 'Beta', null, 'Gamma'])])\n\nYields:\n\n    \u003cdiv class=\"listing\"\u003e\n      \u003col\u003e\n        \u003cli\u003eAlpha\u003c/li\u003e\n        \u003cli\u003eBeta\u003c/li\u003e\n        \u003cli\u003eGamma\u003c/li\u003e\n      \u003c/ol\u003e\n    \u003c/div\u003e\n\nChildren that evaluate to `false` will be omitted.\n\n### render(root, child1[, child2[, child3[, ...]]])\n\nHelper method to append each of `children` to `root`.\n\n### replace(oldNode, newNode)\n\nHelper method to replace `oldNode` with `newNode`.\n\n## Acknowledgements\n\nHashish was obviously inspired by [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) and [JedWatson/classnames](https://github.com/JedWatson/classnames).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexei%2Fhashish-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexei%2Fhashish-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexei%2Fhashish-js/lists"}