${p}
`)\n }\nI am ${name}
`;\n\n keyedSayHello('Peter', 1).to(document.body, 'beforeEnd');\n keyedSayHello('Adam', 2).to(document.body, 'beforeEnd');\n setTimeout(() => keyedSayHello('Michael-Peter', 1), 4000);\n setTimeout(() => keyedSayHello('Cain & Abel', 2), 3000);\n```\n\n## Installing\n\nFrom NPM:\n\n```shell\n$ npm i --save brutalist-web\n```\n\nThen using on server with CJS:\n\n```JavaScript\n const {R} = require('brutalist-web');\n```\n\nOr using on server with ESM:\n\n```JavaScript\n import {R} from 'brutalist-web';\n```\n\nUsing on client with the Unpkg CDN:\n\n```HTML\n \n```\n\nConsider relative paths if you want to self-host.\nFor example, (you probably wouldn't do this): if you were serving your node_modules directory,\nat the `/node_modules` path, and the script importing was serving from the `/app` path, you would import like:\n\n`/app/script.js`:\n\n```JavaScript\n import {R} from '../node_modules/brutalist-web/r.js';\n```\n\n*Note: The client imports require you to specify `r.js` while the server does not.\nThis is owing to the current slightly different syntax and semantics of ES imports\nbetween client and server.*\n\n## Simple Example\n\nThis is Brutal.js:\n\n```JavaScript\nfunction ButtonWidget({name}) {\n return R`\n \n `;\n}\n```\n\n## More examples\n\nFor more extensive examples, [the tests listed above](https://thiscris.com/brutal.js/tests/), or see [a TodoMVC app written in Brutal.js](https://github.com/crislin2046/rvanillatodo). Also take a look at the component code in [Brutestrap UI Kit](https://github.com/crislin2046/brutestrap), a UI Kit being built with Brutal.js (and incorporating [C3S](https://github.com/crislin2046/c3s) for scoping styles to components).\n\n## Basic documentation\n\n### Handlers \n\nThere's two ways to add event handlers to your markup. \n\nEither directly in the template string with `eventName=${functionValue}` syntax or by passing an object with \n`handlers=${handlersObj}` syntax.\n\nThe handlers object must map event names to function values. \n\nExample:\n\n```JavaScript\nconst handlers = {\n click: e => console.log(e),\n mouseover: e => alert(e)\n};\nR``\n```\n\nis equivalent to:\n```JavaScript\nR` console.log(e)} mouseover=${e => alert(e)}>`;\n```\n\n### Multiple listeners per event\n\nIn order to add multiple listeners, use an array of functions:\n\n```JSX\nR``;\n ```\n\n## Issues\n\n### Syntax noise\n\nBrutal.js:\n\n```jsx\nfunction view(state) {\n return $`\n${p}
`)\n }\n{state.byline}
:\n{state.tags}
\n }\n {\n state.paragraphs.map(p =>{p}
)\n }\n );\n}\n```\n\nYou can decide which syntax noise you prefer. For my part, I prefer the Brutal.JS one, and especially prefer how no transpiler / toolchain is required to use it.\n\nI also particularly like how the `$` alias designates the \"boundary\" between markup and code. It indicates when we \"go in\" to markup, \nvia `` $` `` and indicates when we \"go out\" of markup, via `${`.\n\n## Other information\n\n### Where does Brutal come from?\n\nBrutal is a project to build a minimal framework for JS apps in non-transpiled pure ECMAScript. \n\nIt does minimal DOM updates without the use of a virtual DOM. It uses template literals instead of JSX. The main file (r.js) is just 500 SLOC. \n\nIt came out of two projects I did to attempt to build a React-like API without using React's source code or JSX at all. I followed the React Tutorial and built the minimal amount of code to copy the demos given in the tutorial. The projects (with live demos as GitHub pages) are:\n\n- [Racked.js - React without Babel in 500 lines](https://github.com/crislin2046/racked-js-react-without-babel-in-500-lines)\n- [Explore React without React](https://github.com/crislin2046/explore-react-without-react)\n\n### Other similar/related projects\n\n- [lit-html](https://github.com/Polymer/lit-html)\n\n","readmeFilename":"README.md"}