{"id":13565487,"url":"https://github.com/creationix/domchanger","last_synced_at":"2025-10-31T03:30:31.472Z","repository":{"id":17721594,"uuid":"20548582","full_name":"creationix/domchanger","owner":"creationix","description":"dombuilder that applies diffs only to the real dom","archived":false,"fork":false,"pushed_at":"2024-08-14T17:11:36.000Z","size":44,"stargazers_count":72,"open_issues_count":8,"forks_count":17,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-07T03:08:08.076Z","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":"jeff-collins/ment.io","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/creationix.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-06-06T02:18:50.000Z","updated_at":"2024-08-17T07:37:06.000Z","dependencies_parsed_at":"2024-11-14T01:29:51.317Z","dependency_job_id":"61521575-f19f-4596-83c4-a3feff409dbd","html_url":"https://github.com/creationix/domchanger","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/creationix%2Fdomchanger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creationix%2Fdomchanger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creationix%2Fdomchanger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creationix%2Fdomchanger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creationix","download_url":"https://codeload.github.com/creationix/domchanger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239097802,"owners_count":19581112,"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-01T13:01:48.217Z","updated_at":"2025-10-31T03:30:25.923Z","avatar_url":"https://github.com/creationix.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"DomChanger\n==========\n\n[![Join the chat at https://gitter.im/creationix/domchanger](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/creationix/domchanger?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nThis is a small library that lets your build react.js style websites, but with\nminimal dependencies and using JSON-ML style syntax instead of JSX.\n\n## A Simple Component\n\nDomChanger components are simply functions that export a given interface.\nThe main export is a `render()` function that takes input data and returns what\nto display. HTML nodes are described using JSON-ML syntax.\n\n```js\n// Defining the component\nfunction HelloMessage() {\n  return { render: render };\n  function render(name) {\n    return [\"div\", \"Hello \" + name];\n  }\n}\n\n// Creating a instance attached to document.body\nvar instance = domChanger(HelloMessage, document.body);\n// Send in the initial data to render.\ninstance.update(\"Tim\");\n```\n\nYou can also `instance.destroy()` when you're done with the component and wish\nto destroy it.\n\n## A Stateful Component\n\nIn addition to taking input data (accessed via update arguments), a component\ncan maintain internal state data (accessed via local variables in the closure).\nA component can call `refresh` when it's state has been changed.\n\n```js\nfunction Timer(emit, refresh) {\n  var secondsElapsed = 0;\n  var interval = setInterval(tick, 1000);\n  return {\n    render: render,\n    cleanup: cleanup\n  };\n  function render() {\n    return [\"div\", \"Seconds Elapsed: \", secondsElapsed];\n  }\n  function tick() {\n    secondsElapsed++;\n    refresh();\n  }\n  function cleanup() {\n    clearInterval(interval);\n  }\n}\n```\n\n## An Application\n\nUsing update data and closure state, we can put together a small Todo\napplication. This example uses state to track the current list of items as well\nas the text that the user has entered.\n\n```js\nfunction TodoApp(emit, refresh) {\n  var items = [], text = \"\";\n\n  return { render: render };\n\n  function render() {\n    return [\"div\",\n      [\"h3\", \"TODO\"],\n      [TodoList, items],\n      [\"form\", { onsubmit: handleSubmit },\n        [\"input\", {\n          onchange: onChange,\n          value: text\n        }],\n        [\"button\", \"Add #\", items.length + 1]\n      ]\n    ];\n  }\n\n  function handleSubmit(evt) {\n    evt.preventDefault();\n    items.push(text);\n    text = \"\";\n    refresh();\n  }\n\n  function onChange(evt) {\n    text = evt.target.value;\n  }\n}\n\nfunction TodoList() {\n  return { render: render };\n  function render(items) {\n    return [\"ul\", items.map(function (itemText) {\n      return [\"li\", itemText];\n    })];\n  }\n}\n```\n\n\n## Live Example\n\nYou can play around with a larger example in this [fiddle](http://jsfiddle.net/BsUDE/3/).\n\n\u003ciframe src=\"http://jsfiddle.net/BsUDE/3/embedded/js,result/\"\u003e\u003c/iframe\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreationix%2Fdomchanger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreationix%2Fdomchanger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreationix%2Fdomchanger/lists"}