{"_id":"sexy","_rev":"11-ee675d9cde30a22bb871ddeb1fad526c","time":{"0.0.1":"2020-07-02T04:20:21.112Z","0.0.2":"2020-07-02T04:20:21.112Z","0.0.3":"2020-07-02T04:20:21.112Z","created":"2020-07-03T13:54:58.955Z","0.5.2":"2020-07-03T13:54:59.133Z","modified":"2022-05-17T14:25:11.797Z"},"name":"sexy","dist-tags":{"latest":"0.5.2"},"versions":{"0.5.2":{"name":"sexy","version":"0.5.2","main":"src/index.js","license":"MIT","gitHead":"4b4b7f2914daa0631c8a36a334c30881f58a589a","bugs":{"url":"https://github.com/sexy-framework/sexy/issues"},"homepage":"https://github.com/sexy-framework/sexy#readme","author":{"name":"Kirill Burkhanov","email":"kir.burkhanov@gmail.com"},"scripts":{"test":"echo \"Compiler\"","watch":"cross-env NODE_ENV=development webpack --config webpack.config.js ","build":"cross-env NODE_ENV=production webpack --config webpack.config.js"},"dependencies":{"@babel/plugin-syntax-top-level-await":"^7.10.1","htmlparser2":"^4.1.0"},"description":"![npm](https://img.shields.io/npm/v/sexy-framework?color=%23&style=flat-square) ![size](https://img.badgesize.io/https://unpkg.com/sexy-framework/dist/sexy.js?compression=gzip&label=gzip&style=flat-square)","_id":"sexy@0.5.2","_nodeVersion":"12.16.3","_npmVersion":"lerna/3.22.1/node@v12.16.3+x64 (darwin)","dist":{"integrity":"sha512-KNpgkZuMSrL73+f2ckeu9542bah0/KFsftNO9j548Vrt9x9QkrnqMVEMKzBh7BjZpO80ZTnDqqj0CTZFSvTFEw==","shasum":"a264aa0372fe38614d14b32b6016354ca6b92310","tarball":"https://registry.npmjs.org/sexy/-/sexy-0.5.2.tgz","fileCount":96,"unpackedSize":116821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/zizCRA9TVsSAnZWagAACgEQAISfoz3MdA9vrJnV/vT1\nF1+JmfDg/i3WZ99cVlYSq+1kFZwhkld3mqybDOiPWl7JpXpj9P5PXsr3mv/a\n3bUadDGsgeeHlu5A0m8SvuQEvhmuOYJC2kIamngXaM+U5I+2J2yafGe8B56s\nd0+TuXgB7NaQ9eZtyiydK6oOCaZqItzaKnapOuZbbIkufKsURbZfPokMF/9y\nbVplv8HAAs7+BIJaoEeVADwK1uzfIFshMYgRoRUeUcGM2eIQ10oodfn0jyBl\n3ArQtAw4fFceDZNUKQkCl98AEn9kJwTUx8B35Xq95tieR1mThRDRUVPd+WwT\nf8dIYWh2C1jYnk/A6bKVWZFIYCkzCssiSGiQPFrJPzvCcUTDnqvVHYxE2+9l\nDeCbzxRv1xRIb4lY7egLMW4Fsws0vIMFwL6WfCJl/0sZyPhVP+06zzNB94sn\npaNflCO/Z1a8YN0EIzkOXRWWFI3jl574hda8iEUcpm0JO1D7yx8K2vzPgK4a\njkrW2gWI2HdoKm9W/JdpXyxDhbXR43ceM7jCvK4Rfn9pnU/QcXPcHAUVWZx8\n6zgxldW2+0yGyd+dwONe/zRwTb/31PgtVSRsGsWqHaWEqG861/hcnTOuDsSp\n9p5qBupSsnOgssuMw7B2dwqgHxrWAD7KwE55XbX/sBz82bY6xO9pHvFIj50T\n2s6/\r\n=QVO6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfjUn613hDCp6ri4Cyo8lj+ohu1CeeGo/bK9d+P9ZZ0AiEAjNGiXT/hMYepG4rphnud1f44uSAn5YxpFluBQ/vwalM="}]},"maintainers":[{"name":"lastonoga","email":"karapuus@yandex.ru"}],"_npmUser":{"name":"lastonoga","email":"karapuus@yandex.ru"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sexy_0.5.2_1593784499005_0.4073346810456635"},"_hasShrinkwrap":false}},"maintainers":[{"name":"lastonoga","email":"karapuus@yandex.ru"}],"description":"![npm](https://img.shields.io/npm/v/sexy-framework?color=%23&style=flat-square) ![size](https://img.badgesize.io/https://unpkg.com/sexy-framework/dist/sexy.js?compression=gzip&label=gzip&style=flat-square)","homepage":"https://github.com/sexy-framework/sexy#readme","author":{"name":"Kirill Burkhanov","email":"kir.burkhanov@gmail.com"},"bugs":{"url":"https://github.com/sexy-framework/sexy/issues"},"license":"MIT","readme":"# Sexy framework\n\n![npm](https://img.shields.io/npm/v/sexy-framework?color=%23&style=flat-square)\n![size](https://img.badgesize.io/https://unpkg.com/sexy-framework/dist/sexy.js?compression=gzip&label=gzip&style=flat-square)\n\nSexy - is super fast reactive framework for building fast UI.\nPerfect Google PageSpeed metrics (better 4-5 times then NuxtJS)\n\nSexy is fast because it compiles components to Native Javascript and it manages reactivity at compiler time!\n\n1. No reactivity libs (all deps are made by code analyser)\n2. No runtime (Framework doesnt work in runtime, only on compilation step)\n3. Partial hydration (even for loops and conditional statements)\n\nThanks SolidJS (dom expressions) and Sinuous (fast looping) for their work that helped to make max performance.\n\n## Benefits\n- **Small.** `3.73kB` gzip.\n- **Fast.** No reactivity libs, No runtime work\n- **Partial hydration.** Hydrate only dynamic and statefull parts of application\n- **Truly reactive.** automatically derived from the app state.\n- **Tips & Tricks.** Slots, Loops, Statements and Props as we get used to\n\n## Performance\n\nPerformance is a main key of Sexy framework. (syntethic tests)\n1. Faster in x4.5 times to hydrate dynamic components then NuxtJS\n2. Faster in x3.5 times to hydrate static components then NuxtJS\n2. Faster in x3 times to hydrate components with events then NuxtJS\n2. Faster in x10 times to hydrate components then Svelte (in real test FID better in 3 times)\n\nBest choice for mobile web apps development.\n\nBenchmark was made with 10 000 components with loop function. (Without loop its much more faster).\n\n## Performance TODO\n- [x] Cache value\n- [ ] Class and style optimiztion\n- [ ] Render to string (remove JSDOM to speed up server render)\n\nAttribute speed test with MarkoJS benchmark showed 19000 ops/sec for sexy framework and x5 hydration speed\n\n## Features\n\n- [x] Single file components\n- [x] Statements\n- [x] Slots\n- [x] Loops\n- [x] Props\n- [x] Hooks (mounted/unmounted)\n- [x] Components auto import/naming\n- [x] Directives (Plugins)\n- [x] Two-way bindings\n- [x] Animation (basic via class)\n- [x] Lazy loading (there is bug with root subscriber)\n- [x] Dependencies (SFC)\n- [ ] Store (Vuex, Mobx...)\n- [x] SSR\n- [x] Simple router\n- [ ] Static site generation\n- [x] Project config for SSR (styles entry, bundle analyzer...)\n- [ ] Client ssr-first mode (if there is huge page then render it on server, cache and transfer to client instead of render on client directly)\n- [ ] Recursive components\n- [ ] Dynamic components !! (tags complete)\n- [ ] Docs !!\n- [ ] Boilerplate generation !!\n- [ ] Benchmarks for hydration most popular frameworks\n\nExpression generation should be fixed and tested more\n\n## Single file components\n\nSyntax is similar to VueJs but loop and conditional statements has a bit different syntax\n \n```vue\n@if(expression)\n<div :class=\"[var2]\" :style=\"var1\">\n\t<slot>Default slot text</slot>\n</div>\n@elseif(expression)\n1\n@else\n2\n@endif\n```\n\nEach with multiple nodes\n```vue\n@each((item, key) in items)\n<template :key=\"key\">\n// code\n</template>\n@endeach\n```\n\nEach with signle nodes\n```vue\n@each((item, key) in items)\n<div :key=\"key\">\n// code\n</div>\n@endeach\n```\n\n## Examples\n\nExample with Loop, external component, (bind) (two-way data binding and directive), references and style blocks\n```vue\n<div>\n\t@each(item, key in items)\n\t\t<nav.container ref=\"test\" :key=\"item.v\" (bind)=\"vv\" transition:classed=\"fade\" lazy>\n\t\t\ttest {{ item.v }}\n\t\t</nav.container>\n\t@endeach\n\t<!-- <input type=\"text\" (bind)=\"vv\" ref=\"input\"> -->\n\t{{ vv }}\n</div>\n\n<script>\nimport { bind } from 'sexy-framework/directives'\n\nlet items = o([{\n\tv: 'a'\n}, {\n\tv: 'b'\n}]);\n\nlet vv = o('test');\n\nfunction mounted()\n{\n\t\n}\n\nfunction unmounted()\n{\n\t\n}\n</script>\n\n\n<style>\n.red {\n\tcolor: rgb(0, 0, 0);\n}\n</style>\n```\n\n\nExample events, classes, styles\n```vue\n<div @click=\"change\" :class=\"[classList, { active: tick === 1 }]\" :style=\"{ fontSize: tick() + 'px' }\">\n\t<slot></slot>\n</div>\n\n<script>\nlet tick = o(24);\nlet test = p(null);\nlet value = p(null);\n\nlet classList = () => {\n\treturn {\n\t\tred: tick() % 2 == 0,\n\t\tgreen: tick() % 3 == 0,\n\t\tsome: test() === null,\n\t}\n}\n\nfunction change()\n{\n\t$emit('input', 2);\n}\n\nfunction mounted()\n{\n\tconsole.log('container mounted');\n}\n\nfunction unmounted()\n{\n\tconsole.log('container unmounted');\t\n}\n</script>\n```\n\n## Contributors\n\nBurkhanov Kirill (kir.burkhanov@gmail.com)\n\n## License\n\nCopyright (c) 2020 Burkhanov Kirill. This is free software, and may be redistributed under the terms specified in the LICENSE file.\n","readmeFilename":"README.md"}