{"id":13647389,"url":"https://github.com/lukejacksonn/ijk","last_synced_at":"2025-04-06T09:10:57.231Z","repository":{"id":149248936,"uuid":"118187842","full_name":"lukejacksonn/ijk","owner":"lukejacksonn","description":"Transforms arrays into virtual dom trees; a terse alternative to JSX and h","archived":false,"fork":false,"pushed_at":"2019-06-07T11:44:44.000Z","size":61,"stargazers_count":467,"open_issues_count":3,"forks_count":17,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-30T08:11:20.443Z","etag":null,"topics":["dom","h","hyperapp","hyperscript","preact","vdom"],"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/lukejacksonn.png","metadata":{"files":{"readme":"README.md","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}},"created_at":"2018-01-19T22:55:18.000Z","updated_at":"2025-03-14T19:24:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"842613f9-a1a2-4980-9ad5-16b4e6bb90cc","html_url":"https://github.com/lukejacksonn/ijk","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2Fijk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2Fijk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2Fijk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2Fijk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukejacksonn","download_url":"https://codeload.github.com/lukejacksonn/ijk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457803,"owners_count":20941906,"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","h","hyperapp","hyperscript","preact","vdom"],"created_at":"2024-08-02T01:03:32.225Z","updated_at":"2025-04-06T09:10:57.209Z","avatar_url":"https://github.com/lukejacksonn.png","language":"JavaScript","readme":"# ijk\n\u003e Transforms arrays into virtual DOM trees\n\n[![Build Status](https://travis-ci.org/lukejacksonn/ijk.svg?branch=master)](https://travis-ci.org/lukejacksonn/ijk)\n[![codecov](https://codecov.io/gh/lukejacksonn/ijk/branch/master/graph/badge.svg)](https://codecov.io/gh/lukejacksonn/ijk)\n\nFind `h` a bit repetitive? Not a huge fan of JSX? Love LISP? Code as data and data as code?\n\nThis is a tiny recursive factory function that allows you to write terse, declarative representations of virtual DOM trees. It does not try mimic HTML or JSON syntax but instead a series of nested arrays to represent user interfaces.\n\n```js\nconst tree = h('x', 'y', 'z')\n(\n  ['main', [\n    ['h1', 'Hello World'],\n    ['input', { type: 'range' }],\n    ['button', { onclick: console.log }, 'Log Event'],\n  ]]\n)\n```\n\nThe above call to `h` returns a virtual DOM tree with named attributes that respect the provided schema. Expected output here, would be of the shape `{ x: 'main', y: {}, z: [...] }`. A tree like this can be passed as a node to patch, diff and render algorithms exposed by libraries like [Hyperapp](https://github.com/hyperapp/hyperapp), [Ultradom](https://github.com/jorgebucaran/ultradom) or [Preact](https://github.com/developit/preact).\n\n### Schemas\n\n- **Hyperapp** / **Ultradom** / **Preact:** `h('nodeName','attributes','children')`\n\n## Signature\n\nA call to `h(x,y,z)` returns a build function that expects a node of type `[0,1,2]` where:\n\n- Index `0` contains a `string` used as the elements tag name (required)\n- Index `1` contains an `object` containing element attributes (optional)\n- Index `2` contains an `string|array` of content or children (optional)\n\nChildren are flattened and falsey children are excluded. Numbers passed as children get converted to strings.\n\n## Installation\n\n```\nnpm i ijk\n```\n\n## Usage\n\nHere is a demo with [Hyperapp](https://codepen.io/lukejacksonn/pen/BJvXvg?editors=0010) and [Preact](https://codepen.io/lukejacksonn/pen/ZvwKva?editors=0010).\n\n```js\nimport { h } from 'ijk'\n\nconst tree = h('nodeName', 'attributes', 'children')(\n  ['main', [\n    ['h1', 'Hello World'],\n    ['input', { type: 'range' }],\n    ['button', { onclick: console.log }, 'Log Event'],\n    ['ul', [\n      ['li', 1],\n      ['li', 2],\n      ['li', 3]\n    ]],\n    false \u0026\u0026 ['span', 'Hidden']\n  ]]\n)\n```\n\n## Comparison\n\nijk is essentially `h` but with optional props and you only have to call `h` once; not every time you want to represent an element in the DOM. This generally means less repetition and one less import in your view files.\n\n```js\nconst h =\n  h('main', {}, [\n    h('h1', {}, 'Hello World'),\n    h('input', { type: 'range' }),\n    h('button', { onclick: console.log }, 'Log Event'),\n    h('ul', {}, [\n      h('li', {}, 1),\n      h('li', {}, 2),\n      h('li', {}, 3),\n    ]),\n    false \u0026\u0026 h('span', {}, 'Hidden')\n  ])\n```\n\nThe main advantages over using JSX is less repetition of tag names and no build step is required.\n\n```jsx\nconst jsx =\n  \u003cmain\u003e\n    \u003ch1\u003eHello World\u003c/h1\u003e\n    \u003cinput type='range' /\u003e\n    \u003cbutton onclick={ console.log }\u003eLog Event\u003c/button\u003e\n    \u003cul\u003e\n      \u003cli\u003e1\u003c/li\u003e\n      \u003cli\u003e2\u003c/li\u003e\n      \u003cli\u003e3\u003c/li\u003e\n    \u003c/ul\u003e\n    {false \u0026\u0026 \u003cspan\u003e'Hidden'\u003c/span\u003e}\n  \u003c/main\u003e\n```\n\n## Advanced\n\nHere is an example that takes advantage of most features and demonstrates components.\n\n```js\nimport { h } from 'ijk'\n\nconst Item = data =\u003e ['li', data]\nconst Article = ({ title, story, related }) =\u003e [\n  'article',\n  [\n    ['h2', title],\n    ['hr'],\n    ['p', story],\n    related.map(Item),\n  ]\n]\n\nconst Main =\n  ['main', [\n    ['h1', 'Hello World'],\n    ['input', { type: 'range' }],\n    ['ul', [\n      ['li', 1],\n      ['li', 2],\n      ['li', 3],\n    ]],\n    ['button', { onclick: console.log }, 'Log Event'],\n    false \u0026\u0026 ['span', 'Hidden'],\n    Article({\n      title: 'Some News',\n      story: 'lorem ipsum dolor sit amet',\n      related: [4,5],\n    })\n  ]]\n\nconst tree = h('nodeName', 'attributes', 'children')(Main)\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukejacksonn%2Fijk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukejacksonn%2Fijk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukejacksonn%2Fijk/lists"}