{"id":19090721,"url":"https://github.com/kodedninja/morfine","last_synced_at":"2025-07-08T11:04:54.980Z","repository":{"id":63257842,"uuid":"173437359","full_name":"kodedninja/morfine","owner":"kodedninja","description":"Pure, stateless wrapper around nanomorph","archived":false,"fork":false,"pushed_at":"2019-04-09T21:27:49.000Z","size":6,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T00:41:26.874Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kodedninja.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-02T11:02:54.000Z","updated_at":"2023-06-19T02:42:20.000Z","dependencies_parsed_at":"2022-11-15T23:16:18.711Z","dependency_job_id":null,"html_url":"https://github.com/kodedninja/morfine","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fmorfine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fmorfine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fmorfine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fmorfine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kodedninja","download_url":"https://codeload.github.com/kodedninja/morfine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251683548,"owners_count":21626989,"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-09T03:08:44.207Z","updated_at":"2025-04-30T10:21:54.706Z","avatar_url":"https://github.com/kodedninja.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# morfine\n\u003ca href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/stability-stable-green.svg?style=flat-square\" alt=\"Stability\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/morfine\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/morfine.svg?style=flat-square\" alt=\"NPM version\"/\u003e\n\u003c/a\u003e\n\nPure, stateless wrapper around [nanomorph](https://github.com/choojs/nanomorph).\n\n\n## Installation\n```\nnpm i morfine\n```\n\n## Usage\n```javascript\nvar morfine = require('morfine')\nvar html = require('nanohtml')\n\nwindow.text = 'hello'\n\nfunction render () {\n  return html`\n    \u003cdiv\u003e\n      \u003ca href=\"#\"\u003e${window.text}\u003c/a\u003e\n    \u003c/div\u003e\n  `\n}\n\nvar wrapper = morfine(render)\ndocument.body.appendChild(wrapper.el)\n\n// attach optional lifecycle methods\nwrapper.beforerender = function (el) {\n  console.log(el, ' will be rendered')\n}\nwrapper.afterrender = function (el) {\n  console.log(el, ' was rerendered')\n}\n\n// attach the function to window for testing purposes\nwindow.rerender = wrapper.rerender\n\n```\n\n## API\n#### `wrapper = morfine(renderer[, beforerender, afterrender])`\nTakes a `renderer` function that returns a `Node` (manually defined or from [`nanohtml`](https://github.com/choojs/nanohtml) for example). Optionally you can set the lifecycle methods here. You must do this if calling `afterrender` on the first render is needed. Returns a `wrapper` object.\n\n#### `wrapper.el`\nThe `Node` itself. This is what you add to the `body`.\n\n#### `wrapper.rerender()`\nCalls the `renderer` again and morphs the DOM.\n\n#### `wrapper.r()`\nAlias for `wrapper.rerender()`\n\n#### `wrapper.beforerender(el)`\nOptional lifecycle method. Called after the new tree has been generated, but before the wrapper update. You can directly access and modify `el`.\n\n#### `wrapper.afterrender(el)`\nOptional lifecycle method. Called after the wrapper has been updated. You can directly access and modify `el`, the current element in the DOM.\n\nNote: [`nanocomponent`](https://github.com/choojs/nanocomponent) uses the `afterupdate` name instead of `afterrender`, but in this case we always try to update, so let's stick to render.\n\n## Why?\nSimilar to what I've tried to achieve in [`bik`](https://github.com/kodedninja/bik), using the power of `nanomorph` on the lowest level possible in a non-Choo environment. Plus lifecycle methods, because they might come handy.\n\n## See Also\n- [choojs/nanomorph](https://github.com/choojs/nanomorph)\n- [choojs/nanocomponent](https://github.com/choojs/nanocomponent)\n- [tornqvist/fun-component](https://github.com/tornqvist/fun-component)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodedninja%2Fmorfine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkodedninja%2Fmorfine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodedninja%2Fmorfine/lists"}