{"id":13793367,"url":"https://github.com/zaceno/hyperlit","last_synced_at":"2025-03-16T21:30:37.212Z","repository":{"id":42751522,"uuid":"265271011","full_name":"zaceno/hyperlit","owner":"zaceno","description":"A JSX-like ttl for Hyperapp","archived":false,"fork":false,"pushed_at":"2023-01-06T11:35:49.000Z","size":856,"stargazers_count":68,"open_issues_count":14,"forks_count":2,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-02-26T13:43:00.766Z","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/zaceno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-19T14:31:04.000Z","updated_at":"2025-01-26T07:11:56.000Z","dependencies_parsed_at":"2023-02-06T00:00:15.508Z","dependency_job_id":null,"html_url":"https://github.com/zaceno/hyperlit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperlit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperlit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperlit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperlit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zaceno","download_url":"https://codeload.github.com/zaceno/hyperlit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830915,"owners_count":20354850,"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-03T23:00:19.733Z","updated_at":"2025-03-16T21:30:36.878Z","avatar_url":"https://github.com/zaceno.png","language":"JavaScript","funding_links":[],"categories":["Utilities"],"sub_categories":[],"readme":"# hyperlit\n\n`hyperlit` lets you declare your [hyperapp](https://hyperapp.dev) views in a html-like fashion, similar to JSX. Unlike JSX you don't need a build-step and babel config to do it -- it happens run-time in your browser. It's quite small – ca 0.6kb.\n\nHere's Hyperapp's \"Quickstart\" example using hyperlit:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cscript type=\"module\"\u003e\n            import { app } from 'https://unpkg.com/hyperapp'\n            import html from 'https://unpkg.com/hyperlit'\n\n            app({\n                init: 0,\n                view: state =\u003e html`\n                    \u003cmain\u003e\n                        \u003ch1\u003e${state}\u003c/h1\u003e\n                        \u003cbutton onclick=${state =\u003e state - 1}\u003e-\u003c/button\u003e\n                        \u003cbutton onclick=${state =\u003e state + 1}\u003e+\u003c/button\u003e\n                    \u003c/main\u003e`,\n                node: document.getElementById('app')\n            })\n        \u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cmain id=\"app\"\u003e\u003c/main\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIn the following instructions I will just focus on how hyperlit replaces Hyperapp's `h` function. For actually making working apps with this, familiarity with Hyperapp is assumed.\n\n## Getting hyperlit into your project\n\n### Using npm\n\nIn projects where you do bundle your app up, install hyperlit using:\n\n```sh\nnpm i hyperlit\n```\n\n\u003e Note that hyperapp is a peer-dependency which you'll also need to have installed.\n\nOnce installed, you can import `hyperlit` wherever you declare views:\n\n```js\nimport html from 'hyperlit'\n```\n\n### Browser modules\n\nIf you prefer not to use npm, you can use client side imports directly like this:\n\n```js\nimport html from 'https://unpkg.com/hyperlit'\n```\n\n\n## Usage\n\nHyperlit replaces hyperapp's built-in `h`, allowing you to write:\n\n```js\nhtml`\n\u003cdiv class=\"big\"\u003e\n    \u003ch1\u003eTitle\u003c/h1\u003e\n    \u003cp class=\"aligned\"\u003e\n        Content 1 \u003cbr /\u003e\n        Content 2\n    \u003c/p\u003e\n\u003c/div\u003e`\n```\n\ninstead of:\n\n```js\nh('div', { class: 'big' }, [\n    h('h1', {}, text('Title')),\n    h('p', { class: 'aligned' }, [\n        text('Content 1'),\n        h('br', {}),\n        text('Content 2')\n    ]),\n])\n```\n\n### Injecting props\n\nIf you have non-string props you want to add to your vnodes, or values kept in variables, use the `${val}` syntax to\ninject them:\n\n```js\nconst foo = 32\nconst node = html`\u003cp class=${{ bigger: foo \u003e 30 }}\u003e...\u003c/p\u003e`\n```\n\n#### Spreading props\n\nIf you have a bunch of props you want to assign, you don't have to write them out individually, you can just:\n\n```js\nconst props = {class: 'bigger', id: 'a-1', key: 'a-1'}\nconst node = html`\u003cp ${props}\u003e...\u003c/p\u003e`\n```\n\n(For compatibility with views you may have written using `htm`, the `...${props}` syntax is also supported)\n\n### Injecting content.\n\n```js\nconst name = 'Joe'\nconst greeting = html`\u003cspan\u003eHello ${name}!\u003c/span\u003e`\n```\n\nresults in `h('span', {}, [text('Hello'), text('Joe'), text('!')])`.\n\nContent can be a string or a vnode. Content can also be an array:\n\n```js\nconst names = ['Kim', 'Robin', 'Sam']\nconst person = name =\u003e html`\u003cp\u003e${name}\u003c/p\u003e`\nconst list = html`\n\u003cdiv\u003e\n    \u003cp\u003eMembers:\u003c/p\u003e\n    ${names.map(person)}\n\u003c/div\u003e`\n```\n\nresults in `list` being equivalent to:\n\n```js\nh('div', {}, [\n    h('p', {}, text('Members:')),\n    h('p', {}, text('Kim')),\n    h('p', {}, text('Robin')),\n    h('p', {}, text('Sam')),\n])\n```\n\nSince hyperapp filters out falsy children, you can conditionally render some content:\n\n```js\nconst show = false\nhtml`\u003cp\u003eSecret: ${show \u0026\u0026 'I work for the CIA'}\u003c/p\u003e`\n```\n\n### Components\n\nLet's say you have this component:\n\n```js\nconst box = (props, content) =\u003e html`\n\u003cdiv class=${{ fancy: true, active: props.active }}\u003e\n    \u003ch1\u003e${props.title}\u003c/h1\u003e\n    ${content}\n\u003c/div\u003e`\n```\n\nYou could of course add it to a view in this way:\n\n```js\nconst view = html`\n\u003cmain\u003e\n    ${box({ active: false, title: 'My bio' }, [\n        html`\u003cp\u003eLorem ipsum\u003c/p\u003e`,\n        html`\u003cp\u003eDolor sit amet\u003c/p\u003e`,\n    ])}\n\u003c/main\u003e`\n```\n\nBut hyperlit allows you to do it this way as well:\n\n```js\nconst view = html`\n\u003cmain\u003e\n    \u003c${box} active=${false} title=\"My bio\"\u003e\n        \u003cp\u003eLorem ipsum\u003c/p\u003e\n        \u003cp\u003eDolor sit amet\u003c/p\u003e\n    \u003c//\u003e\n\u003c/main\u003e`\n```\n\n\u003e For backwards compatibility with `htm` it is also possible to close components as `\u003c/${box}\u003e`\n\n\n## Tooling\n\n### Transform to plain function calls with Babel\n\nThis library is meant to let you write html-like views that can be rendered in the browser without any build step. Still, you might eventually perfer the parsing to be taken care of by your build-toolchain in order to get faster renders. Of course you should be able to do so! Simply add `babel-plugin-hyperlit` to your babel config. In `package.json` for example, it looks like this:\n\n```\n\"babel\": {\n  \"plugins\": [\"hyperlit\"]\n}\n```\n\nWith that, babel will make sure to transform all your hyperlit views into plain function calls, so the browser doesn't have to do any parsing.\n\n### Syntax highlighting\n\nIf you use [VS Code](https://code.visualstudio.com), install the [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) to get highlighting and autocompletion that works well with hyperlit.\n\n## Credits\n\nThis project was inspired by [Jason Miller's](https://github.com/developit) [htm](https://github.com/developit/htm). I made it to have a similar solution that would work well with Hyperapp.\n\nThanks to [Jorge Bucaran](https://github.com/jorgebucaran) for making [Hyperapp](https://github.com/jorgebucaran/hyperapp) and for coming up with the name of this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaceno%2Fhyperlit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzaceno%2Fhyperlit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaceno%2Fhyperlit/lists"}