{"id":15691937,"url":"https://github.com/aduth/hijinks","last_synced_at":"2025-05-05T21:44:05.591Z","repository":{"id":57264226,"uuid":"83099095","full_name":"aduth/hijinks","owner":"aduth","description":"Tiny DOM builder utility inspired by HyperScript","archived":false,"fork":false,"pushed_at":"2024-06-22T20:14:23.000Z","size":492,"stargazers_count":9,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-01T02:48:46.095Z","etag":null,"topics":["dom","dom-builder","hyperscript","jsx"],"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/aduth.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2017-02-25T02:07:27.000Z","updated_at":"2025-03-23T14:56:03.000Z","dependencies_parsed_at":"2024-06-23T02:42:49.394Z","dependency_job_id":"f5c75eef-f164-4e5f-bb1f-375a88b9fb2a","html_url":"https://github.com/aduth/hijinks","commit_stats":{"total_commits":88,"total_committers":1,"mean_commits":88.0,"dds":0.0,"last_synced_commit":"035235f0caa18610a6e0746ad532e089d20d9b1a"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aduth%2Fhijinks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aduth%2Fhijinks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aduth%2Fhijinks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aduth%2Fhijinks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aduth","download_url":"https://codeload.github.com/aduth/hijinks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252582245,"owners_count":21771634,"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","dom-builder","hyperscript","jsx"],"created_at":"2024-10-03T18:26:18.555Z","updated_at":"2025-05-05T21:44:05.560Z","avatar_url":"https://github.com/aduth.png","language":"JavaScript","readme":"# Hijinks\n\nHijinks is a tiny DOM builder utility inspired by [HyperScript](https://github.com/hyperhype/hyperscript). Relentlessly simple, it weighs in at less than 0.3kb gzipped. Despite its small size, you'll find it to be quite flexible and familiar if you've ever used React or similar libraries. None of this comes at the expense of compatibility, as it still supports legacy browsers like Internet Explorer.\n\n## Installation\n\nInstall via NPM:\n\n```\nnpm install hijinks\n```\n\n## Usage\n\n```html\n\u003cdiv id=\"target\"\u003e\u003c/div\u003e\n\u003cscript type=\"module\"\u003e\n\timport { h } from 'https://unpkg.com/hijinks';\n\tconst target = document.getElementById('target');\n\tconst element = h('span', { className: 'greeting' }, 'Hello World!');\n\ttarget.appendChild(element);\n\u003c/script\u003e\n```\n\nYou can even create elements with JSX syntax if you so desire. Assuming you're using [the Babel JSX transform plugin](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx), define Hijinks as the import source for the automatic runtime.\n\n_.babelrc_:\n\n```json\n{\n\t\"plugins\": [\n\t\t[\n\t\t\t\"@babel/plugin-transform-react-jsx\",\n\t\t\t{\n\t\t\t\t\"runtime\": \"automatic\",\n\t\t\t\t\"importSource\": \"hijinks\"\n\t\t\t}\n\t\t]\n\t]\n}\n```\n\n_app.jsx_:\n\n```jsx\nconst target = document.getElementById('target');\nconst element = \u003cspan className=\"greeting\"\u003eHello World!\u003c/span\u003e;\ntarget.appendChild(element);\n```\n\n## API\n\n### `createElement` (`h`)\n\nThe hijinks module exports `createElement` (aliased as `h`) as a named export:\n\n```ts\nexport function createElement(\n\ttag: string | Component,\n\tattributes?: Attributes | null,\n\t...children: Node | string | Array\u003cNode | string\u003e | HTMLCollection\n): Node;\n```\n\n#### `tag`\n\nThe tag name of the element to create, or a function (\"component\") which receives attributes including `children` and is expected to return an HTMLElement.\n\n#### `attributes`\n\nAn optional object of attributes and `HTMLElement` properties to assign to the created element. Any properties not known to the `HTMLElement` interface are assigned as attributes.\n\n#### `children`\n\nThe remainder of arguments can consist of one (or array of) `HTMLElement` or strings to be appended as children to the created DOM node. Of course, since the Hijinks itself returns an `HTMLElement`, it's expected that you can easily compose together trees of elements.\n\n### `Fragment`\n\n`Fragment` is also available and behaves similarly to [React fragments](https://reactjs.org/docs/fragments.html), returning a [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment).\n\n```js\nimport { h, Fragment } from 'hijinks';\nconst fragment = \u003c\u003eExample\u003c/\u003e;\n// Or: const fragment = h(Fragment, null, 'Example');\n```\n\n## License\n\nCopyright (c) 2017-2021 Andrew Duthie\n\nReleased under the [MIT License](./LICENSE.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faduth%2Fhijinks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faduth%2Fhijinks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faduth%2Fhijinks/lists"}