{"_id":"@antender/thisisfine","name":"@antender/thisisfine","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@antender/thisisfine","version":"1.0.0","description":"Microframework for microfrontends, glues superfine, htm and classcat together","main":"rollup.config.js","scripts":{"build":"rollup --config rollup.config.js"},"repository":{"type":"git","url":"github.com/Antender/thisisfine"},"keywords":["superfine","htm","framework","frontend","reactive"],"author":{"name":"Antender"},"license":"MIT","dependencies":{"classcat":"^5.0.4","htm":"^3.1.1","superfine":"^8.2.0"},"type":"module","devDependencies":{"@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","rollup":"^3.9.0"},"_id":"@antender/thisisfine@1.0.0","_nodeVersion":"16.15.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-s40NclrBKaI4IOarDiwgIFehPlgbkyTccWbaTw/tjxg5Wmhi0rwH6sYEAzbsuC/uBVMt+uZcSLDIkD2+bFIuEw==","shasum":"45210a43b9d2601f12f025a09a60ad3ef5c05d2d","tarball":"https://registry.npmjs.org/@antender/thisisfine/-/thisisfine-1.0.0.tgz","fileCount":6,"unpackedSize":11136,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS62+mMOGtw7q3WWBnCGlo4TxFFIq+PtV5ji0frkoyCgIgdOD/J01HiX2A9Tz09JEjLaJRZDNOy9i/QgXrOmPPK9Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrXEVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwsA//eltLl3NCPwKzrdx4F1Hktzoozs2Vl/+YqNA4M56IlCMZGVTa\r\n7PZ76wIP5WmOS4V0ik/jok1Vq3fkprZhloTM6oqTZTs1pMAYeU62fKuMTOlg\r\nCBQByzhtf5UjThamjIkMSfS3EXtX18JM7chYVtleOjHeC2vEuQt131aIXtzz\r\nVT8hJNV3/A+nVQpDT0cVFrRYxPJEPYERXUmvn0JeSmvWx8mC5zZ3B7EtvdRt\r\nd241a0Sd2QMJdVJ4QAYGY/aU1ZpMxPs3RnvJKjmhzvFZQ1OgTeJWKcM352Ge\r\neLivVJBaiHI1xWUoGg8OBKLaUq+Brojz2DcblBAjggoG77ZUuGQU4MtuYALu\r\nZ+6po0fG3SUtydKxpAHQCYnDhItzJX9l/xv4xLmqFZLVD1s1eZF3TSMLTblq\r\nt3t+chP5aCRGL+2pXNMi9Do+VwSu7qJ0bvHZAM2QFvavkUQD3spAjgGUWiVP\r\nuv++gN6uCzS5zFXUXKve4tA4NvLrthuTo7o6vNx6sDvf7i0S7kwTwWWj1g/y\r\nz+j22nktGJxMKAuOb+x4vS6CGfA3kklBw4/CMtx8CebDY+6UWdFR9gQObnyI\r\nkWjnoixpPzhoYcfwDQk+YcNcZJ4CIfLBPer9onjlLUYzrvFJQ7WlkiS9nrKq\r\nzFj9fCNttbt8X8oSqa0TUgpS04k1Bm8tQK0=\r\n=ccja\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antender","email":"antender@live.ru"},"directories":{},"maintainers":[{"name":"antender","email":"antender@live.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/thisisfine_1.0.0_1672311061393_0.9390630314616211"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-29T10:51:01.342Z","1.0.0":"2022-12-29T10:51:01.616Z","modified":"2022-12-29T10:51:01.779Z"},"maintainers":[{"name":"antender","email":"antender@live.ru"}],"description":"Microframework for microfrontends, glues superfine, htm and classcat together","keywords":["superfine","htm","framework","frontend","reactive"],"repository":{"type":"git","url":"github.com/Antender/thisisfine"},"author":{"name":"Antender"},"license":"MIT","readme":"# Thisisfine\r\n\r\nThisisfine is an attempt to make simple to use microfrontend JS framework that can be used without the need to build anything.\r\nJust serve ```thisisfine.dist.js``` from ```node_modules/thisisfine``` as a ```type=module``` ES module thing and you are good to go!\r\nThis bundle is [superfine](https://github.com/jorgebucaran/superfine/) + [classcat](https://github.com/jorgebucaran/classcat) + [htm](https://github.com/developit/htm) glued together by a small 50 LOC module with super simple API inspired by [MithrilJS](https://github.com/MithrilJS/mithril.js) and without the whole [hyperapp](https://github.com/jorgebucaran/hyperapp) effect/subscription complexity. \r\n\r\n## Basic usage:\r\n\r\nSample app is available here: https://github.com/Antender/thisisfine-sample\r\n\r\n1. ```ln node_modules/thisisfine.dist.js thisisfine.js```\r\n2. Then import thisisfine like this ```import {thisisfine, h} from './thisisfine.js';``` in your ```index.js```\r\n\r\n3. Create an \"app\" that will redraw selected DOM node:\r\n```const app = thisisfine(document.getElementById('app'))```\r\n\r\n4. Create aliases to redraw and autoredraw functions (optional):\r\n```\r\nconst redraw = app.redraw\r\nconst ar = app.autoredraw\r\n```\r\n\r\n5. Use redraw when you update your data layer or use autoredraw to decorate your state objects and redraw on field change:\r\n\r\n```\r\nlet counters = [ar({value: 0}), ar({value: 0})] // Counters will autoredraw on value change\r\n```\r\n\r\n6. Build some views using included JSX (htm) syntax, they must be pure functions a-la React (Elm, Mithril) stateless components. Pass state from root component to child ones using \"prop drilling\":\r\n```\r\nconst Counter = (state) => h`\r\n\t<div class=\"horizontal-box spacing\">\r\n\t\t<input type=\"text\" value=\"${state.value}\" class=spacing></input>\r\n\t\t<div class=pure-button-group>\r\n\t\t\t<button onclick=${() => state.value+=1} class=${['pure-button', 'spacing']}>Up</button>\r\n\t\t\t<button onclick=${() => state.value-=1} class=${['pure-button', 'spacing']}>Down</button>\r\n\t\t</div>\r\n\t</div>\r\n`\r\n\r\nconst App = () => h`\r\n\t<main id=\"app\">\r\n\t\t${counters.map((counter) => Counter(counter))}\r\n\t\t<button onclick=${() => {counters.push(ar({value: 0})); redraw()}} class=spacing style=\"margin-left: 10px;\">Add counter</button>\r\n\t</main>\r\n`\r\n```\r\n\r\n7. Mount your app:\r\n```\r\napp.mount(App)\r\n```\r\n\r\n8. ????!!!!!\r\n\r\n8. PROFIT!!!!\r\n\r\n### Things worth mentioning\r\n\r\n1. Multiple \"apps\" can exist independently on a single page. So if you should split your site into multiple independendent views that communicate using data layer if your experience speed or maintenance problems instead of doing React-like microoptimizations in a monolitic SPA app.\r\n\r\n2. Routing should be handled server-side\r\n\r\n3. You should structure your project using classic HTML/CSS/JS separation. Don't be shy to just use static HTML instead of ```thisisfine``` where it is appropriate.\r\n\r\n4. JSX is parsed at runtime in browser and cached, more info about syntax here: [htm](https://github.com/developit/htm)\r\n\r\n5. This framework assumes that some modern browser goodies like ES modules, Proxy and fetch are available\r\n\r\n6. Class attribute in JSX supports [classcat](https://github.com/jorgebucaran/classcat) optional class objects\r\n\r\n## API\r\n\r\n#### h(jsx)\r\n\r\nh function is supposed to be used using ES string template syntax ```h`<main class=${ ['main'] }>Hello, world!</main>` ``` and produces superfine VDOM nodes.\r\n\r\n#### app(ref) -> appinstance\r\n\r\napp binds thisisfine to provided DOM node (acquired using getElementById, getElementsByTagName, document.body etc...)\r\n\r\n#### appinstance.redraw()\r\nsignals to redraw this appinstance, redraws are throttled to RequestAnimationFrame\r\n\r\n#### appinstance.autoredraw(object)\r\nmakes object properties redraw this app when updated\r\n\r\n","readmeFilename":"readme.md"}