![\"Dominant](\"logo.svg\")
Dominant – Dysfunctional JavaScript UIs\n\n[React](http://reactjs.org) has been truly revolutionary back in the day, and it's taught us many important lessons, but I think it's about time we move on, and I'm not excited about any of the existing alternatives as they're all similarly complex.\n\nI need a UI library that allows me to create components bound to mutable JavaScript state, that's it.\n\nI can call an update function whenever state changes (à la [Mithril](https://mithril.js.org)), so there's no need to track changes.\n\n * This means no special APIs for changing state; just mutate your variables and objects.\n * Also no observables or hacky object property/array method monkey-patching (like [Aurelia](https://aurelia.io) and [VueJS](https://vuejs.org) do).\n * A global **update** function reevaluates all bindings and updates the DOM strictly as needed.\n\nIt should let me leverage DOM APIs, not abstract them away.\n\n * This means no virtual DOM.\n * It also means there's no **mount** function; components are just functions or classes with render functions that return DOM nodes you can compose using a familiar [JSX](https://reactjs.org/docs/introducing-jsx.html) and/or [Hyperscript](https://github.com/hyperhype/hyperscript)-like API and append wherever.\n * A DOM [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) keeps track of which DOM nodes with bindings are attached to the document and calls lifecycle listeners (**attach**/**detach**, if any).\n * This plays well with other DOM-based UI libraries, such as vanilla JS components and jQuery UI.\n\nDon't miss the [demos](#demos) and [API documentation](#api) sections.\n\n## Setup\n\nThe easiest way to bootstrap a Dominant project is to use [Create Dominant App](https://www.npmjs.com/package/create-dominant-app).\nIf you have npm installed, the following command is all that's necessary:\n\n```sh\n# Replace your-app-name with the desired project name.\n$ npm init dominant-app your-app-name\n```\n\nnpm will automatically install [create-dominant-app](https://www.npmjs.com/package/create-dominant-app) and run it for you.\n`create-dominant-app` will create your new app directory, initialize `package.json` in it, and install all the necessary dependencies.\n\nOnce the script finishes, you'll be able to change into the newly created directory and start the development server:\n\n```sh\n$ cd your-app-name\n$ npm start\n```\n\nThen open http://localhost:9966/ to see your app.![\"bar\"](\"baz.png\")
,\n ,\n\n // Dynamic prop examples (one-way bindings):\n color }}>\n Hello, {d.text(() => whom)}!\n
\n);\n```\n\n### d.text(fn)\n\nReturns a DOM text node with contents bound to the supplied **fn**.\n\nWhenever **d.update** gets called, text bindings are reevaluated, meaning the supplied functions are reexecuted and their return values are compared to the return values from previous invocations.\n\nOnly text bindings whose values have changed since the last invocation are updated in the DOM.\n\n```jsx\nlet whom = 'world';\n\nsetTimeout(() => {\n whom = 'human';\n d.update();\n}, 1000);\n\ndocument.body.append(d.text(() => `Hello, ${whom}!`));\n```\n\n### d.if(predFn, thenNode, elseNode)\n\nReturns a conditional anchor comment node (``) that represents a conditional node attachment in the document.\n\nWhen updated, the binding calls `predFn` and adds `thenNode` as its next sibling if the result is truthy, `elseNode` otherwise.\n\nNote: Nodes, including anchor comment nodes, are automatically updated when attached to the document (`d.mutationObserver` does this).\n\n```jsx\nlet isNewVisitor = true;\n\ndocument.body.append(d.if(\n () => isNewVisitor,\n Nice to meet you!
,\n Welcome back!
,\n));\n\nsetTimeout(() => {\n isNewVisitor = false;\n d.update();\n}, 1000);\n```\n\n### d.map(arrayFn, fn)\n\nThe `array.map(fn)` analog to `d.if`.\n\nWhen updated, the binding calls `arrayFn`, removes nodes associated to removed array values, reorders nodes to match the order of associated values in the new array, maps new values to new nodes using `fn`, and adds them to the DOM.\n\n```jsx\nlet fruits = [\n { name: 'Apple', color: 'Red' },\n { name: 'Grape', color: 'Purple' },\n { name: 'Lime', color: 'Green' },\n];\n\nlet wikipediaPagePrefix = 'https://en.wikipedia.org/wiki';\n\ndocument.body.append(d.map(\n () => fruits, fruit => (\n