{"id":21502769,"url":"https://github.com/fuzetsu/microh","last_synced_at":"2025-07-15T23:30:56.067Z","repository":{"id":34977951,"uuid":"193617506","full_name":"fuzetsu/microh","owner":"fuzetsu","description":"a small and simple hyperscript helper","archived":false,"fork":false,"pushed_at":"2023-03-04T03:58:55.000Z","size":42,"stargazers_count":6,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-08-24T04:51:51.378Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fuzetsu.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":"2019-06-25T02:16:30.000Z","updated_at":"2021-08-14T21:07:56.000Z","dependencies_parsed_at":"2022-08-08T03:15:22.299Z","dependency_job_id":null,"html_url":"https://github.com/fuzetsu/microh","commit_stats":null,"previous_names":[],"tags_count":2,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fmicroh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fmicroh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fmicroh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuzetsu%2Fmicroh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fuzetsu","download_url":"https://codeload.github.com/fuzetsu/microh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226077472,"owners_count":17570164,"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":[],"created_at":"2024-11-23T18:17:42.519Z","updated_at":"2024-11-23T18:17:43.103Z","avatar_url":"https://github.com/fuzetsu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `microh` [![npm](https://img.shields.io/npm/v/microh.svg)](https://www.npmjs.com/package/microh) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/microh)](https://unpkg.com/microh@latest/dist/microh.min.js)\n\nA small and simple hyperscript wrapper for vdom libraries such as (but not limited to) Preact, React, and Hyperapp.\n\n## Features\n\n- optional attrs `h('h1', 'Hello World')`\n- inline classNames `h('button.button.is-primary')`\n- no tag name means div `h('.login-area')`\n- varargs `h('div', 'Hello', 'World', 'the time is', Date.now())`\n\n```js\nimport { h, render } from 'preact'\nimport microh from 'microh'\n\n// create a wrapped instance of h by passing it to microh\nconst m = microh(h)\n\nconst vnode = m(\n  'ul.list',\n  m('li.list-item', 'one'),\n  m('li.list-item', 'two'),\n  m('li.list-item', 'three')\n)\n\nrender(vnode, document.body)\n```\n\n[playground](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4IWAA60ATsQAEwOYQpzpTACYxpc1nLDTaWOQHIJajNWLGAOmnFTZcrBGoHCeg0ePPXtQjbRbAHoguVcYDEY5DDkAd2kMCQkYdTkINDhiDDRqGDlaMCU5ACMATzkJDDg4dIBzNPliWicXN1shTKc5AF4W30IACkIASlt2+k6ANzRaTR6nAeMAVyh8KAhMgFpM0thjFVs5BeN1-ZN6GGNhikPj05VjYljaK5u0I6xF+5NiQjVL663T4nCBnYxgWhLaRXWyjQJoNRoTTSAbTWYwFTqWjUJY4Bj4YqzUrDSggOAwWCWCATPAARgAzIgAEwADjYHBAmBweHw1GqpKEjGYPDYAF1WEA)\n\n## Installation\n\n### esm modules\n\n```js\nimport microh from 'https://unpkg.com/microh?module'\n```\n\n### Browser\n\n```html\n\u003cscript src=\"https://unpkg.com/microh\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.microh\n\u003c/script\u003e\n```\n\n### NodeJS\n\n```js\n// npm install microh\nconst microh = require('microh')\n```\n\n## Usage\n\n**[React](https://github.com/facebook/react)**\n\n```js\nimport React from 'react'\nimport microh from 'microh'\n\nconst m = microh(React.createElement)\n```\n\n**[Preact](https://github.com/preactjs/preact)**\n\n```js\nimport { h } from 'preact'\nimport microh from 'microh'\n\nconst m = microh(h)\n```\n\n**[Hyperapp](https://github.com/JorgeBucaran/hyperapp)**\n\nFor hyperapp 2.0.4 and earlier microh will work out of the box:\n\n```js\nimport { h } from 'hyperapp'\nimport microh from 'microh'\n\nconst m = microh(h)\n```\n\nFor later versions you will have to use this snippet because of changes to how vNodes are structured and how text children are handled:\n\n```js\nimport { h, text } from 'hyperapp'\nimport microh from 'microh'\n\nconst m = microh((tag, props, ...children) =\u003e\n  typeof tag === 'function'\n    ? tag(props, children)\n    : h(\n        tag,\n        props,\n        []\n          .concat(...children)\n          .map(child =\u003e\n            typeof child === 'string' || typeof child === 'number' ? text(child) : child\n          )\n      )\n)\n```\n\nIf you don't use this custom function microh will still work but you will have to wrap text in `text()` calls yourself and call components as functions directly.\n\n**Other Libraries**\n\nIf you're using another vdom library and directly passing the equivalent of the `h()` function to microh doesn't work you can always pass a function that calls the `h()` with any necessary adjustments made.\n\nFor example, say a particular vdom library always expects children to be passed as an array, you could handle it like this:\n\n```js\nimport { makeElem } from 'some-vdom'\nimport microh from 'microh'\n\nconst m = microh((tag, props, ...children) =\u003e makeElem(tag, props, children))\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuzetsu%2Fmicroh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuzetsu%2Fmicroh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuzetsu%2Fmicroh/lists"}