{"id":13447346,"url":"https://github.com/WebReflection/hypersimple","last_synced_at":"2025-03-21T17:31:19.405Z","repository":{"id":65993197,"uuid":"198523645","full_name":"WebReflection/hypersimple","owner":"WebReflection","description":"The easiest way to use hyperHTML","archived":false,"fork":false,"pushed_at":"2020-03-22T15:51:05.000Z","size":77,"stargazers_count":89,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-09T10:11:33.577Z","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":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.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,"roadmap":null,"authors":null}},"created_at":"2019-07-23T23:37:59.000Z","updated_at":"2024-05-11T18:55:42.000Z","dependencies_parsed_at":"2023-06-17T12:00:38.748Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/hypersimple","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhypersimple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhypersimple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhypersimple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhypersimple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/hypersimple/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221817219,"owners_count":16885478,"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-07-31T05:01:15.031Z","updated_at":"2024-10-28T10:31:15.230Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","readme":"# hypersimple\n\nThe easiest way to use [hyperHTML](https://github.com/WebReflection/hyperHTML#readme) 🦄\n\n  * `hooks` like simplicity implemented through the model\n  * component implemented as callbacks\n  * an entire model/props driven development\n\n- - -\n\u003csup\u003e**Social Media Photo by [Juliana Malta](https://unsplash.com/@julianamalta) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\n![WebReflection status](https://offline.report/status/webreflection.svg) [![License: ISC](https://img.shields.io/badge/License-ISC-yellow.svg)](https://opensource.org/licenses/ISC)\n\n\n#### Example\n\n[Live on Code Pen](https://codepen.io/WebReflection/pen/RXaWyR?editors=0010).\n\n```js\nimport {comp, html, render} from 'hypersimple';\n\n// components\nconst Button = comp(model =\u003e html`\n  \u003cbutton onclick=${model.onclick}\u003e\n    ${model.text}\n  \u003c/button\u003e\n`);\n\n// main App: just like any component\nconst App = comp(model =\u003e html`\n  Lorem ipsum: ${model.count}\n  \u003cbr\u003e\n  ${Button(model.button)}\n`);\n\n// model: it will be mutated to trigger updates on changes\nconst model = {\n  count: 0,\n  button: {\n    text: 'increment',\n    onclick() {\n      // will update the view right away\n      model.count += 1;\n    }\n  }\n};\n\n// render\nrender(document.body, () =\u003e App(model));\n```\n\n## API in a nutshell\n\n  * `comp(fn)` returns a component based on some `props` or `model` object. The `fn` _must_ return the result of `html` or `svg`\n  * `html` and `svg` are a template literal tag that accept everything _hyperHTML_ can produce\n  * `render(where, what)` will populate the content of a generic node with whatever a component returns\n  * `update(model[, {...changes}])` to update all components based on the same model and, eventually, batch all updates at once through changes\n  * `define(...)` to enrich _hyperHTML_ potentials [as described in the documentation](https://viperhtml.js.org/hyperhtml/documentation/#api-3)\n\nThe `model` _will be modified_ to reflect any change of any of its properties in the UI, and every method will be automatically bound to the related context.\n\nA `model` _can be used with multiple components_ without needing to nest a sub model/object per each component related to the same model.\n\nIf you use immutable structures, you'll trash the whole layout each time so ... to **keep it simple**, as the project suggests, but also to keep it memory safe, just pass mutable models and update those directly instead of duplicating references.\n\nThe whole idea is indeed to abstract away everything that's more complicated than setting, or updating, a generic property.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebReflection%2Fhypersimple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebReflection%2Fhypersimple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebReflection%2Fhypersimple/lists"}