{"id":13525341,"url":"https://github.com/queckezz/preact-hyperscript","last_synced_at":"2025-03-17T15:32:34.490Z","repository":{"id":57329488,"uuid":"63601775","full_name":"queckezz/preact-hyperscript","owner":"queckezz","description":"Hyperscript-like syntax for creating Preact elements","archived":false,"fork":false,"pushed_at":"2017-01-18T12:23:48.000Z","size":14,"stargazers_count":32,"open_issues_count":5,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T01:19:31.314Z","etag":null,"topics":[],"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/queckezz.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}},"created_at":"2016-07-18T12:38:13.000Z","updated_at":"2024-09-02T18:52:09.000Z","dependencies_parsed_at":"2022-09-14T19:01:18.180Z","dependency_job_id":null,"html_url":"https://github.com/queckezz/preact-hyperscript","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fpreact-hyperscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fpreact-hyperscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fpreact-hyperscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fpreact-hyperscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/queckezz","download_url":"https://codeload.github.com/queckezz/preact-hyperscript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243869636,"owners_count":20361047,"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-08-01T06:01:17.843Z","updated_at":"2025-03-17T15:32:34.137Z","avatar_url":"https://github.com/queckezz.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\n# preact-hyperscript\n\n\u003e Hyperscript-like syntax for creating Preact elements.\n\n[![Build status][travis-image]][travis-url]\n[![NPM version][version-image]][version-url]\n[![Dependency Status][david-image]][david-url]\n[![License][license-image]][license-url]\n[![Js Standard Style][standard-image]][standard-url]\n\n## Installation\n\n```bash\n\u003e npm install preact-hyperscript\n```\n\n## Example\n\n\u003csub\u003e[→ Try this example on Codepen.io!](http://codepen.io/queckezz/pen/XKkEyj?editors=1010)\u003c/sub\u003e\n\n```js\nconst { createElement, div, h1, h2, h3, button, ul, li } = require('preact-hyperscript')\nconst { render } = require('preact')\n\nconst h = createElement\n\nconst App = ({ library }) =\u003e div([\n  h1('.bold', library),\n  h2('#subtitle', 'Preact is a fast, 3kb alternative to React, with the same ES2015 API'),\n  button({ href: 'http://ghub.io/preact' }, 'Learn More'),\n  h3('Features'),\n  ul(['preact', 'small', 'es2015', 'fast'].map(key =\u003e li(key)))\n])\n\nrender(\n  h(App, { library: 'Preact' }),\n  document.body\n)\n```\n\n## Guide\n\n### Component shorthand\n\nInstead of calling `createElement(Component, props)` you can wrap your component into a `createComponent` call and invoke it using `Component(props)` directly:\n\n```js\nconst { createComponent, h1 } = require('preact-hyperscript')\n\nconst App = createComponent((props) =\u003e h1(props.text))\n\nrender(\n  // instead of h(App, { text: 'test' }) you can do:\n  App({ text: 'test' }),\n  document.body\n)\n```\n\n### Syntax\n\nEach [element](https://github.com/wooorm/html-tag-names/blob/4604477c3762b7df87536480fb453a9dd7feaaf0/index.json) in the DOM is exposed as a function when requiring `preact-hyperscript`.\n\n```js\nconst { div, h1, p, button } = require('preact-hyperscript')\n```\n\nThese functions have the following syntax:\n\n```js\ntag(selector, attributes, children)\n```\n\nAll arguments are **optional** with at least **one argument needing to be present**. This kind of function overloading allows you to iterate on your DOM structure really fast and reduce visual noise.\n\n* **selector** can be a class (prefixed with `.`) or an `id` (prefixed with a `#`). These can be mixed as you might expect: `.title#id.pad.red`\n* **attributes** is an object of dom attributes: `{ href: '#header' }`\n* **children** can be a string for a text node or an array of nodes\n\n### Built-in sugar\n\n#### Classes\n\nConditionally joins class names together. It utilizes JedWatson's awesome [classnames](https://github.com/JedWatson/classnames). Visit the [usage docs](https://github.com/JedWatson/classnames#usage) for more information.\n\n#### Inline styles\n\nAutomatically converts style objects to a string. For an additional weight of ~400 bytes this is well worth it:\n\n```js\nconst style = {\n  textDecoration: 'underline',\n  fontSize: '56px'\n}\n\nconst node = h1({ style }, 'hello!')\n// -\u003e \u003ch1 style='text-decoration:underline;font-size:56px;'\u003ehello!\u003c/h1\u003e\n```\n\n## Benchmarks\n\nSome basic benchmarks for creating `10^5` nodes:\n\n```bash\n\u003e npm run bench\n```\n\n```\nnative*100000: 31.481ms\nhyperscript*100000: 114.727ms\n```\n\n## Tests\n\n```bash\n\u003e npm test\n```\n\n## License\n\n[MIT][license-url]\n\n[travis-image]: https://img.shields.io/travis/queckezz/preact-hyperscript.svg?style=flat-square\n[travis-url]: https://travis-ci.org/queckezz/preact-hyperscript\n\n[version-image]: https://img.shields.io/npm/v/preact-hyperscript.svg?style=flat-square\n[version-url]: https://npmjs.org/package/preact-hyperscript\n\n[david-image]: http://img.shields.io/david/queckezz/preact-hyperscript.svg?style=flat-square\n[david-url]: https://david-dm.org/queckezz/preact-hyperscript\n\n[standard-image]: https://img.shields.io/badge/code-standard-brightgreen.svg?style=flat-square\n[standard-url]: https://github.com/feross/standard\n\n[license-image]: http://img.shields.io/npm/l/preact-hyperscript.svg?style=flat-square\n[license-url]: ./license","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueckezz%2Fpreact-hyperscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueckezz%2Fpreact-hyperscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueckezz%2Fpreact-hyperscript/lists"}